/* ==========================================================================
   MVM-APP · Animations layer (works with anime.js, degrades gracefully)
   Loaded site-wide. Purely additive – never hides content on its own.
   ========================================================================== */

/* Motion design tokens — one system for the whole site ------------------- */
:root{
  --ease-out:    cubic-bezier(.22, 1, .36, 1);     /* decelerate, premium */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* gentle overshoot */
  --ease-soft:   cubic-bezier(.45, 0, .15, 1);     /* smooth in-out */
  --dur-fast: .28s;
  --dur-med:  .5s;
  --dur-slow: .85s;
}

/* Scroll progress bar ----------------------------------------------------- */
#anim-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:99999;
  background:linear-gradient(90deg, var(--blue,#2563EB), var(--blue-light,#3B82F6), #22d3ee);
  box-shadow:0 0 12px rgba(37,99,235,.45);
  transition:width .12s linear; pointer-events:none;
}

/* Word-by-word heading reveal -------------------------------------------- */
.a-word{ display:inline-block; will-change:transform,opacity; }

/* Magnetic buttons -------------------------------------------------------- */
.a-magnetic{ will-change:transform; }

/* Click ripple ------------------------------------------------------------ */
.a-ripple-host{ position:relative; overflow:hidden; }
.a-ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
}

/* Floating device / hero media ------------------------------------------- */
.a-float{ will-change:transform; }

/* Additive hover glow for cards (shadow only – no transform overrides) ---- */
.icard:hover, .pcard:hover, .fc:hover, .gallery-frame:hover{
  box-shadow:0 18px 48px rgba(37,99,235,.16), 0 6px 18px rgba(15,23,42,.10);
}

/* Eyebrow dot pulse ------------------------------------------------------- */
.eyebrow-dot{ animation:aDotPulse 2.6s ease-in-out infinite; }
@keyframes aDotPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(37,99,235,.45); }
  50%    { box-shadow:0 0 0 9px rgba(37,99,235,0); }
}

/* Shine sweep on primary call-to-action buttons --------------------------- */
.nav-cta, .store-btn{ position:relative; overflow:hidden; }
.nav-cta::after, .store-btn::after{
  content:""; position:absolute; top:0; left:-140%; width:65%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.38), transparent);
  transform:skewX(-20deg); transition:left .6s ease; pointer-events:none;
}
.nav-cta:hover::after, .store-btn:hover::after{ left:150%; }

/* Sticky nav: blur + shadow once scrolled -------------------------------- */
nav{ transition:box-shadow .3s ease, background-color .3s ease, backdrop-filter .3s ease; }
nav.a-scrolled{
  backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
  background:rgba(248,250,255,.82);
  box-shadow:0 6px 24px rgba(15,23,42,.08);
}

/* Nav link animated underline -------------------------------------------- */
.nav-links a{ position:relative; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:100%;
  background:linear-gradient(90deg, var(--blue,#2563EB), #22d3ee);
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease; border-radius:2px;
}
.nav-links a:hover::after{ transform:scaleX(1); }

/* Cursor spotlight + 3D tilt on cards ------------------------------------ */
.icard, .pcard, .fc, .gallery-frame{ position:relative; }
.a-spot::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .35s ease; z-index:1;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(37,99,235,.14), transparent 60%);
}
.a-spot:hover::before{ opacity:1; }
.a-tilt{ will-change:transform; transition:transform .18s ease; }

/* Feature icon pop on hover ---------------------------------------------- */
.ficon{ transition:transform .35s var(--ease-spring); display:inline-flex; }
.fc:hover .ficon{ transform:scale(1.18) rotate(-6deg); }

/* Gallery image hover zoom ----------------------------------------------- */
.gallery-frame{ overflow:hidden; }
.gallery-frame img{ transition:transform .5s ease; }
.gallery-frame:hover img{ transform:scale(1.05); }

/* Shimmering accent <em> in headings ------------------------------------- */
h1 em, h2 em{
  background:linear-gradient(90deg, var(--blue,#2563EB), #22d3ee, var(--blue,#2563EB));
  background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:aShimmer 4s linear infinite;
}
@keyframes aShimmer{ to{ background-position:200% center; } }

/* Floating hero background blobs ----------------------------------------- */
.hero-wrap, .hero{ position:relative; }
.hero > *{ position:relative; z-index:1; }
.a-blobs{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.a-blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; will-change:transform; }
.a-blob.b1{ width:340px; height:340px; background:rgba(37,99,235,.28); top:-80px; left:-60px; }
.a-blob.b2{ width:280px; height:280px; background:rgba(34,211,238,.22); bottom:-60px; right:-40px; }

/* Back-to-top button ------------------------------------------------------ */
#a-top{
  position:fixed; right:20px; bottom:20px; width:46px; height:46px; border-radius:50%;
  border:none; cursor:pointer; z-index:9998; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg, var(--blue,#2563EB), var(--blue-light,#3B82F6));
  box-shadow:0 8px 24px rgba(37,99,235,.35);
  opacity:0; transform:translateY(16px) scale(.8); pointer-events:none;
  transition:opacity .3s ease, transform .3s var(--ease-spring), box-shadow .3s ease;
}
#a-top.show{ opacity:1; transform:none; pointer-events:auto; }
#a-top:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(37,99,235,.45); }
#a-top svg{ width:20px; height:20px; }

/* Interactive anime.js-style dot grid ------------------------------------ */
.grid-demo{ padding:72px 20px; text-align:center; }
.grid-demo-inner{ max-width:920px; margin:0 auto; }
.grid-demo .sk{ display:inline-block; }
.grid-demo h2{ margin:.35em 0 .3em; }
.grid-demo .sc{ max-width:560px; margin:0 auto; color:var(--text-muted,#64748B); }
.grid-demo-inner{ perspective:1000px; }
.dot-grid{
  display:grid; grid-template-columns:repeat(var(--cols,16), 1fr);
  gap:clamp(5px, 1.3vw, 11px); margin:40px auto 0; max-width:760px;
  transform-style:preserve-3d; transition:transform .35s ease;
}
.dot-grid .dot{
  width:100%; aspect-ratio:1/1; border-radius:50%;
  background:rgba(37,99,235,.14); transform:scale(.82);
  will-change:transform, background-color;
  transition:transform .5s var(--ease-spring), background-color .5s ease;
}
.dot-grid .dot.on{
  transform:scale(1.35); background:rgba(37,99,235,.92);
  box-shadow:0 4px 12px rgba(37,99,235,.35);
}
.dot-grid .dot.hot{
  transform:scale(1.9); background:#22d3ee; transition-delay:0ms !important;
}

/* Nav: hide on scroll-down, show on scroll-up ---------------------------- */
nav{ transition:box-shadow .3s ease, background-color .3s ease, backdrop-filter .3s ease, transform .4s var(--ease-out); }
nav.a-hidden{ transform:translateY(-105%); }

/* Third aurora blob + richer palette ------------------------------------- */
.a-blob.b3{ width:300px; height:300px; background:rgba(139,92,246,.20); top:40%; left:44%; }

/* Modern clip-path image reveal ------------------------------------------ */
.a-mask{
  clip-path:inset(0 100% 0 0 round 16px); opacity:0; transform:translateY(16px);
  transition:clip-path .85s var(--ease-out), opacity .6s ease, transform .85s var(--ease-out);
}
.a-mask.a-in{ clip-path:inset(0 0 0 0 round 16px); opacity:1; transform:none; }

/* Soft cursor glow (fine pointers only) ---------------------------------- */
#a-cursor{
  position:fixed; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px;
  border-radius:50%; z-index:60; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(37,99,235,.08), rgba(37,99,235,0) 62%);
  transition:opacity .4s ease; will-change:transform;
}
@media (hover:hover) and (pointer:fine){ #a-cursor.on{ opacity:1; } }

/* Parallax helper --------------------------------------------------------- */
[data-parallax], .a-blobs{ will-change:transform; }

/* Intro loader: blank → animation → reveal ------------------------------- */
html.a-intro{ background:#F8FAFF; }
html.a-intro body{ visibility:hidden; }           /* hide everything … */
#a-intro{ visibility:visible; }                    /* … except the overlay */
#a-intro{
  position:fixed; inset:0; z-index:100000; display:grid; place-items:center;
  background:#F8FAFF;
}
#a-intro .a-intro-stage{ display:grid; place-items:center; gap:26px; }
#a-intro .a-intro-mark{
  width:116px; height:116px; display:block; opacity:0; transform:scale(.6);
  filter:drop-shadow(0 14px 34px rgba(37,99,235,.30));
}
#a-intro .a-intro-word{
  font-family:var(--font-display,'Syne',sans-serif); font-weight:800;
  font-size:1.7rem; letter-spacing:.06em; color:#0F172A; opacity:0;
}

/* 404 page flair: shimmering, floating code + staggered pills ------------ */
.code-404{
  background:linear-gradient(90deg, var(--blue,#2563EB), #22d3ee, var(--blue,#2563EB));
  background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:aShimmer 4s linear infinite, a404Float 5s ease-in-out infinite;
}
@keyframes a404Float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
.lang-pill{ animation:a404Pop .5s var(--ease-spring) both; }
.lang-grid .lang-pill:nth-child(1){ animation-delay:.05s; }
.lang-grid .lang-pill:nth-child(2){ animation-delay:.10s; }
.lang-grid .lang-pill:nth-child(3){ animation-delay:.15s; }
.lang-grid .lang-pill:nth-child(4){ animation-delay:.20s; }
.lang-grid .lang-pill:nth-child(5){ animation-delay:.25s; }
.lang-grid .lang-pill:nth-child(6){ animation-delay:.30s; }
.lang-grid .lang-pill:nth-child(7){ animation-delay:.35s; }
@keyframes a404Pop{ from{ opacity:0; transform:translateY(12px) scale(.9); } }
.lang-pill{ transition:transform .25s var(--ease-spring), box-shadow .25s ease; }
.lang-pill:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 8px 20px rgba(37,99,235,.22); }

/* Pro polish: scrollbar, selection, focus ring, button press ------------- */
html{ scrollbar-width:thin; scrollbar-color:var(--blue,#2563EB) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--blue,#2563EB), var(--blue-light,#3B82F6));
  border-radius:10px; border:3px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:var(--blue,#2563EB); background-clip:content-box; }

::selection{ background:rgba(37,99,235,.22); }

:focus-visible{ outline:2px solid var(--blue,#2563EB); outline-offset:2px; border-radius:4px; }

button:active, a.nav-cta:active, .cta-row a:active,
.btn-send:active, .store-btn:active, a.pcard:active, a.icard:active{
  transform:scale(.97);
}

/* FAQ accordion: chevron spin + smooth answer reveal --------------------- */
.faq-item summary{ cursor:pointer; }
.faq-item .q-chev{ transition:transform .3s var(--ease-out); display:inline-block; }
.faq-item[open] .q-chev{ transform:rotate(180deg); }
.faq-item[open] .faq-answer{ animation:aFaqIn .4s var(--ease-out) both; }
@keyframes aFaqIn{ from{ opacity:0; transform:translateY(-6px); } }
.faq-item{ transition:box-shadow .3s ease; }
.faq-item:hover{ box-shadow:0 8px 26px rgba(37,99,235,.10); }

/* Timeline: slide-in items + popping dots -------------------------------- */
.a-tl{ opacity:0; transform:translateX(-16px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.a-tl.a-in{ opacity:1; transform:none; }
.a-dot{ transform:scale(0); transition:transform .5s var(--ease-spring); }
.a-dot.a-in{ transform:scale(1); }

/* Form field polish: focus glow + staggered entrance -------------------- */
.field input, .field textarea, .field select{
  transition:border-color .25s ease, box-shadow .3s ease,
             background-color .25s ease, transform .25s var(--ease-out);
}
.field input:focus, .field textarea:focus, .field select:focus{
  box-shadow:0 0 0 4px rgba(37,99,235,.12); border-color:var(--blue,#2563EB); outline:none;
}
.field label{ transition:color .25s ease; }
.field:focus-within label{ color:var(--blue,#2563EB); }
.a-field{
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.a-field.a-in{ opacity:1; transform:none; }

/* ===== Dark theme (opt-in via toggle, remembers choice) ================= */
html[data-theme="dark"]{
  --blue-pale:#16233B;
  --blue-bg:#1B2A47;
  --bg:#0B1120;
  --bg-card:#131C2E;
  --bg-card2:#0F1828;
  --text:#E9EEF7;
  --text-muted:#93A3B8;
  --text-mid:#B6C2D4;
  --fg:#E9EEF7;          /* legal/app template foreground */
  --muted:#93A3B8;       /* legal/app template muted text */
  --border:rgba(148,163,184,.20);
  --border-subtle:rgba(148,163,184,.12);
  --border-gray:rgba(148,163,184,.16);
  --shadow-sm:0 1px 3px rgba(0,0,0,.45);
  --shadow-md:0 8px 28px rgba(0,0,0,.55);
  --shadow-blue:0 8px 30px rgba(37,99,235,.35);
  color-scheme:dark;
}
html[data-theme="dark"] body{ background:var(--bg); color:var(--text); }
/* Nav + drawer (hardcoded light surfaces) */
html[data-theme="dark"] nav{ background:rgba(11,17,32,.82); border-bottom-color:var(--border-gray); }
html[data-theme="dark"] nav.a-scrolled{ background:rgba(11,17,32,.9); }
html[data-theme="dark"] .menu-drawer, html[data-theme="dark"] .drawer{ background:var(--bg-card); }
/* Common hardcoded white card/section backgrounds → theme surface */
html[data-theme="dark"] [style*="background:var(--bg-card)"],
html[data-theme="dark"] [style*="background:#fff"i],
html[data-theme="dark"] [style*="background:#FFFFFF"i]{ background:var(--bg-card) !important; }
/* Footer uses var(--text) as its (dark) background → pin it dark in dark mode */
html[data-theme="dark"] footer{ background:#0A1020 !important; border-top-color:var(--border-gray); }
/* App Store badge also uses var(--text) as bg → keep it visible in dark mode */
html[data-theme="dark"] .appstore-badge{
  background:#0E1626; color:#fff; border:1px solid rgba(255,255,255,.16);
}
html[data-theme="dark"] .appstore-badge svg{ fill:#fff; }
html[data-theme="dark"] .cta-banner .appstore-badge{ background:#fff; color:#0B1120; }
html[data-theme="dark"] .cta-banner .appstore-badge svg{ fill:#0B1120; }
/* Theme switch sits on the always-dark footer → keep it clearly visible */
html[data-theme="dark"] #a-theme{ background:#1C2740; border-color:rgba(148,163,184,.30); box-shadow:0 6px 20px rgba(0,0,0,.5); }
/* Cookie consent banner (hardcoded light colours) → dark */
html[data-theme="dark"] .mvm-cb-inner{ background:#131C2E !important; border:1px solid rgba(148,163,184,.22) !important; box-shadow:0 14px 44px rgba(0,0,0,.55) !important; }
html[data-theme="dark"] .mvm-cb-title{ color:#E9EEF7 !important; }
html[data-theme="dark"] .mvm-cb-body{ color:#93A3B8 !important; }
html[data-theme="dark"] .mvm-cb-decline{ color:#CBD5E1 !important; border-color:rgba(148,163,184,.32) !important; }
html[data-theme="dark"] .mvm-cb-decline:hover{ background:rgba(148,163,184,.14) !important; color:#fff !important; }
/* Light secondary buttons / legal pills on product pages → dark surfaces */
html[data-theme="dark"] .btn-ghost{ background:var(--bg-card,#131C2E) !important; color:var(--text,#E9EEF7) !important; border-color:var(--border,rgba(148,163,184,.2)) !important; }
html[data-theme="dark"] .legal-link{ background:var(--bg-card2,#0F1828) !important; color:var(--text,#E9EEF7) !important; border-color:var(--border,rgba(148,163,184,.2)) !important; }
html[data-theme="dark"] .a-blob.b1{ background:rgba(37,99,235,.34); }
html[data-theme="dark"] .a-blob.b2{ background:rgba(34,211,238,.24); }
html[data-theme="dark"] .a-blobs{ opacity:.7; }
/* Apple-style segmented theme switch (Light · Dark · Auto), lives in footer */
.a-theme-foot{ display:flex; justify-content:center; padding:26px 20px 6px; }
#a-theme{
  position:relative;                        /* containing block for the thumb */
  display:inline-flex; align-items:center; padding:4px;
  border-radius:999px; background:var(--bg-card,#fff);
  border:1px solid var(--border,rgba(37,99,235,.15));
  box-shadow:0 6px 20px rgba(15,23,42,.12);
}
#a-theme.a-floating{                         /* fallback if no footer on page */
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:9998;
  box-shadow:0 10px 34px rgba(15,23,42,.18);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
#a-theme .thumb{
  position:absolute; top:4px; left:0; height:calc(100% - 8px); width:0;
  border-radius:999px; z-index:0;
  background:linear-gradient(135deg, var(--blue,#2563EB), var(--blue-light,#3B82F6));
  box-shadow:0 3px 10px rgba(37,99,235,.42);
  transition:transform .34s var(--ease-spring), width .34s var(--ease-spring);
}
#a-theme button{
  position:relative; z-index:1; border:none; background:transparent; cursor:pointer;
  width:42px; height:34px; border-radius:999px; display:grid; place-items:center;
  color:var(--text-muted,#64748B); transition:color .25s ease;
}
#a-theme button[aria-pressed="true"]{ color:#fff; }
#a-theme button:hover{ color:var(--text,#0F172A); }
#a-theme button[aria-pressed="true"]:hover{ color:#fff; }
#a-theme button svg{ width:19px; height:19px; }
@media (max-width:520px){ #a-theme button{ width:38px; } }

/* Native scroll-driven progress bar (buttery, no JS) --------------------- */
@supports (animation-timeline: scroll()){
  #anim-progress{
    width:100%; transform:scaleX(0); transform-origin:0 50%; transition:none;
    animation:aProgress auto linear both; animation-timeline:scroll(root);
  }
  @keyframes aProgress{ to{ transform:scaleX(1); } }
  /* Native scroll-driven parallax for the aurora layer */
  .a-blobs{ animation:aBlobPar linear both; animation-timeline:scroll(root); animation-range:0 70vh; }
  @keyframes aBlobPar{ to{ transform:translateY(60px); } }
}

/* Reduced-motion: switch everything off ---------------------------------- */
@media (prefers-reduced-motion: reduce){
  html.a-intro body{ visibility:visible; }
  #a-intro{ display:none; }
  .a-blobs{ animation:none !important; }
  .faq-item[open] .faq-answer{ animation:none; }
  .a-tl, .a-dot{ opacity:1; transform:none; transition:none; }
  .a-field{ opacity:1; transform:none; transition:none; }
  .code-404{ animation:none; }
  .lang-pill{ animation:none; }
  #anim-progress{ display:none; }
  .a-word{ opacity:1 !important; transform:none !important; }
  .eyebrow-dot{ animation:none; }
  .a-float{ transform:none !important; }
  .nav-cta::after, .store-btn::after{ display:none; }
  h1 em, h2 em{ animation:none; }
  .a-blobs{ display:none; }
  .a-tilt{ transform:none !important; }
  .gallery-frame:hover img{ transform:none; }
  #a-top{ transition:opacity .2s ease; }
  .dot-grid{ transform:none !important; }
  .dot-grid .dot{ transition:none !important; }
  nav.a-hidden{ transform:none; }
  .a-mask{ clip-path:none; opacity:1; transform:none; }
  #a-cursor{ display:none; }
  [data-parallax], .a-blobs{ transform:none !important; }
}