/* Minara portal — motion layer. Pure enhancement: without JS everything stays visible, and all
   movement is switched off for visitors who ask their system for reduced motion. */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Scroll progress + sticky bar ---------- */
.scroll-progress {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 50; pointer-events: none;
  background: linear-gradient(90deg, var(--gold), var(--brown));
  transform-origin: right center; transform: scaleX(var(--progress, 0));
}
.topbar { transition: box-shadow .35s ease, background-color .35s ease; }
.topbar .container { transition: min-height .35s var(--ease-out); }
.topbar.scrolled { box-shadow: 0 8px 24px rgba(94, 68, 38, .10); background: rgba(247, 242, 234, .96); }
.topbar.scrolled .container { min-height: 60px; }
.topnav a:not(.btn) { position: relative; }
.topnav a:not(.btn)::after {
  content: ""; position: absolute; inset: auto 0 -6px; height: 2px; border-radius: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: center; transition: transform .35s var(--ease-out);
}
.topnav a:not(.btn):hover::after, .topnav a.active::after { transform: scaleX(1); }
.topnav a.active { color: var(--brown); }

/* ---------- Hero ---------- */
.hero-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; z-index: 0; }
.hero-orb.one { width: 380px; height: 380px; background: radial-gradient(circle, rgba(188, 146, 80, .45), transparent 70%); top: -80px; left: -60px; animation: orb-drift 18s ease-in-out infinite alternate; }
.hero-orb.two { width: 300px; height: 300px; background: radial-gradient(circle, rgba(23, 105, 93, .22), transparent 70%); bottom: 40px; right: 30%; animation: orb-drift 22s ease-in-out -6s infinite alternate-reverse; }
@keyframes orb-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 40px) scale(1.15); } }

.hero { background-size: 72px 72px, auto; animation: pattern-pan 60s linear infinite; }
@keyframes pattern-pan { from { background-position: 0 0, 0 0; } to { background-position: -72px 72px, 0 0; } }

.hero-in { animation: rise-in .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
@keyframes rise-in { from { opacity: 0; transform: translateY(26px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.eyebrow::before { animation: pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(23, 105, 93, .45); } 50% { box-shadow: 0 0 0 7px rgba(23, 105, 93, 0); } }

.hero h1 .accent {
  background: linear-gradient(90deg, var(--brown) 0%, var(--gold) 45%, var(--brown) 90%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: text-sheen 7s linear infinite;
}
@keyframes text-sheen { to { background-position: -220% center; } }

.ayah { animation: rise-in .9s var(--ease-out) .65s both; }

/* Phone: enters, then floats; its cards appear one after another. */
.phone-wrap { animation: phone-in 1.2s var(--ease-out) .25s both; }
@keyframes phone-in { from { opacity: 0; transform: translateY(60px) rotate(4deg) scale(.94); } to { opacity: 1; transform: none; } }
.phone-mock { animation: phone-float 6s ease-in-out 1.6s infinite; will-change: transform; }
@keyframes phone-float { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-14px); } }
.phone-screen > * { animation: rise-in .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 160ms + 900ms); }
.mock-chip.on { position: relative; overflow: hidden; }
.badge.excellent { animation: badge-pop .6s var(--ease-spring) 2s both; }
@keyframes badge-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------- Buttons ---------- */
.btn { position: relative; overflow: hidden; transition: transform .25s var(--ease-out), box-shadow .25s ease, background-color .25s ease; }
.btn:active { transform: scale(.97); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(120%); transition: transform .8s var(--ease-out);
}
.btn-primary:hover::after { transform: translateX(-120%); }
.btn-primary:hover { box-shadow: 0 12px 26px rgba(94, 68, 38, .25); }
.btn svg { transition: transform .3s var(--ease-out); }
.btn:hover svg { transform: translateX(-4px); }

/* ---------- Scroll reveal (only hidden once JS has set .motion on <html>) ---------- */
.motion [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.motion [data-reveal="zoom"] { transform: scale(.94); }
.motion [data-reveal].shown { opacity: 1; transform: none; }

/* ---------- Stats ---------- */
.stat-tile { transition: transform .35s var(--ease-out), box-shadow .35s ease; }
.stat-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.stat-tile .num { font-variant-numeric: tabular-nums; }

/* ---------- Role cards: tilt + icon motion ---------- */
.role-card { transform-style: preserve-3d; transition: transform .45s var(--ease-out), box-shadow .45s ease, border-color .3s ease; }
.role-card.tilting { transition: transform .12s linear, box-shadow .45s ease; }
.role-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c, var(--brown)) 14%, transparent), transparent 70%);
}
.role-card:hover::after { opacity: 1; }
.role-card::before { transform: scaleX(.25); transform-origin: right; transition: transform .6s var(--ease-out); }
.role-card:hover::before { transform: scaleX(1); }
.role-card .role-icon { transition: transform .5s var(--ease-spring); }
.role-card:hover .role-icon { transform: translateY(-4px) rotate(-6deg) scale(1.08); }

/* ---------- Features ---------- */
.feature { transition: transform .4s var(--ease-out), box-shadow .4s ease, background-color .4s ease; }
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); background: #fff; }
.feature .ic { transition: transform .5s var(--ease-spring), background-color .3s ease, color .3s ease; }
.feature:hover .ic { transform: rotate(-8deg) scale(1.12); background: var(--brown); color: #fff; }

/* ---------- CTA band + store badges ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: -50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 255, 255, .12) 80%, transparent 90%);
  animation: spin 14s linear infinite;
}
.cta-band > * { position: relative; }
@keyframes spin { to { transform: rotate(1turn); } }
.store-badge { transition: transform .35s var(--ease-spring), box-shadow .35s ease, border-color .35s ease; }
.store-badge:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(0, 0, 0, .32), 0 0 0 2px rgba(188, 146, 80, .55); }
.store-badge .store-logo { transition: transform .5s var(--ease-spring); }
.store-badge:hover .store-logo { transform: scale(1.12) rotate(-6deg); }
.motion .store-badge { opacity: 0; transform: translateY(14px); animation: badge-rise .7s var(--ease-out) forwards; }
.motion .store-badge:nth-child(2) { animation-delay: .1s; }
.motion .store-badge:nth-child(3) { animation-delay: .2s; }
@keyframes badge-rise { to { opacity: 1; transform: none; } }

/* ---------- Auth pages ---------- */
.auth-card { animation: card-in .8s var(--ease-out) .1s both; }
@keyframes card-in { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
.auth-side > * { animation: rise-in .9s var(--ease-out) both; }
.auth-side > *:nth-child(2) { animation-delay: .15s; }
.auth-side > *:nth-child(3) { animation-delay: .3s; }
.auth-logo { animation: badge-pop .9s var(--ease-spring) .2s both; }
.hero-logo { animation-name: logo-in; }
@keyframes logo-in { from { opacity: 0; transform: scale(.6) rotate(-25deg); } to { opacity: 1; transform: none; } }
.auth-card .role-icon { animation: badge-pop .7s var(--ease-spring) .35s both; }
.role-switch a { transition: background-color .3s ease, color .3s ease, transform .3s var(--ease-out); }
.role-switch a:hover:not(.on) { transform: translateY(-2px); background: var(--border); }
.input { transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }
.input:focus { box-shadow: 0 0 0 4px rgba(188, 146, 80, .18); }
.alert { animation: rise-in .5s var(--ease-out) both; }

/* ---------- Portal pages (after sign-in) ---------- */
.page-head, .card { animation: rise-in .6s var(--ease-out) both; }
.card:nth-of-type(2) { animation-delay: .08s; }
.card:nth-of-type(3) { animation-delay: .16s; }

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .motion [data-reveal] { opacity: 1; transform: none; }
  .motion .store-badge { opacity: 1; transform: none; }
  .hero-orb, .scroll-progress { display: none; }
}
.enroll-steps li { animation: rise-in .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 120ms + 250ms); }