/* Vorani Royal: shared tokens + motion system for navora-io and navora-dashboard.
   Paste the :root block into navora.css and dashboard.css (or link this file).
   Animate only transform / opacity / clip-path. All loops pause off-screen and on hidden tab via motion.js. */

/* ---------- Fallback faces sized to the webfonts (stops text reflow when fonts swap in) ---------- */
@font-face{font-family:"Cormorant Fallback";src:local("Georgia");size-adjust:76%;ascent-override:92%;descent-override:29%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";src:local("Arial");size-adjust:102%;ascent-override:107%;descent-override:30%;line-gap-override:0%}

:root{
  color-scheme:dark;

  /* Grounds: deep midnight indigo, lighter as they lift */
  --bg-0:#06051A;        /* deepest: footer, behind aurora */
  --bg:#0B0A22;          /* page */
  --surface-1:#131135;   /* cards, panels */
  --surface-2:#1B1847;   /* raised: hover, active tab, inputs */
  --surface-3:#25205C;   /* highest: popovers, selected */

  /* Royal hues (fills, glows, data) */
  --purple:#6E3FD8;      --purple-ink:#BBA6FF;   /* -ink = text-safe on any ground */
  --blue:#2E4CC9;        --blue-ink:#93AAFF;
  --gold:#D8B25C;        --gold-hi:#F1D78E;      --gold-lo:#A9853A;
  --on-gold:#1A1033;     /* text on gold buttons */

  /* Ivory text */
  --ivory:#F5EFE1;       /* headings, body */
  --ivory-2:#CDC6DD;     /* secondary */
  --ivory-3:#A29BBE;     /* tertiary, captions, meta */

  /* Verdicts */
  --crimson:#B42D45;     --crimson-ink:#FF8C9A;  /* REFUTED / failed */
  --emerald:#1F7A5A;     --emerald-ink:#6FDDB0;  /* SURVIVES / done */

  /* Lines + focus */
  --line:rgba(205,198,221,.14);        /* decorative dividers */
  --line-strong:rgba(205,198,221,.56); /* input + control borders (>=3:1) */
  --line-gold:rgba(216,178,92,.34);    /* ornamental gold hairline */
  --focus:var(--gold-hi);

  /* Gradients + depth */
  --grad-gold:linear-gradient(180deg,#EED38A 0%,#D8B25C 55%,#C9A04A 100%);
  --grad-royal:linear-gradient(135deg,var(--purple) 0%,var(--blue) 100%);
  --grad-card:linear-gradient(180deg,var(--surface-2) 0%,var(--surface-1) 100%);
  --hi-inset:inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-1:0 1px 2px rgba(3,2,14,.5),0 8px 24px -8px rgba(3,2,14,.7);
  --shadow-2:0 2px 4px rgba(3,2,14,.5),0 24px 48px -16px rgba(3,2,14,.85);
  --glow-gold:0 10px 36px -10px rgba(216,178,92,.55);
  --glow-purple:0 14px 48px -14px rgba(110,63,216,.6);

  /* Type */
  --display:"Cormorant Garamond","Cormorant Fallback",Georgia,serif;
  --sans:"Manrope","Manrope Fallback",Arial,sans-serif;
  --fs-hero:clamp(44px,8.6vw,104px);
  --fs-h2:clamp(34px,4.6vw,60px);
  --fs-h3:clamp(22px,1.8vw,26px);
  --fs-stat:clamp(48px,6vw,80px);
  --fs-lede:clamp(18px,1.4vw,21px);
  --fs-body:17px;
  --fs-small:15px;
  --fs-eyebrow:13px;
  --lh-tight:1.02; --lh-head:1.12; --lh-body:1.6;

  /* Space + shape */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px; --s-9:112px;
  --gutter:clamp(16px,4vw,48px);
  --maxw:1180px;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --tap:48px;            /* minimum control height */

  /* Motion */
  --d-press:120ms; --d-hover:220ms; --d-ui:320ms; --d-reveal:700ms; --d-hero:1100ms; --d-count:1400ms;
  --ease-out:cubic-bezier(.22,1,.36,1);     /* entrances, reveals */
  --ease-io:cubic-bezier(.65,0,.35,1);      /* moves between two states */
  --ease-back:cubic-bezier(.34,1.4,.64,1);  /* press release only, small distances */
  --stagger:70ms;                           /* per item, capped at 8 items by motion.js */
  --rise:18px;
}

/* ---------- Base ---------- */
html{background:var(--bg-0)}
body{margin:0;background:var(--bg);color:var(--ivory);font:400 var(--fs-body)/var(--lh-body) var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:var(--lh-head);letter-spacing:-.01em;margin:0;text-wrap:balance}
h1{font-size:var(--fs-hero);line-height:var(--lh-tight);letter-spacing:-.02em}
h2{font-size:var(--fs-h2)}
h3{font-family:var(--sans);font-size:var(--fs-h3);font-weight:600;letter-spacing:-.01em}
p{margin:0;text-wrap:pretty}
.lede{font-size:var(--fs-lede);color:var(--ivory-2);max-width:36ch}
.num{font-variant-numeric:tabular-nums lining-nums!important} /* !important: the `font` shorthand resets it; Cormorant defaults to old-style figures */
.gold-text{background:linear-gradient(180deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
em.royal{font-style:italic;color:var(--gold-hi)}
a{color:var(--gold-hi);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Eyebrow + ornament */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 var(--fs-eyebrow)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.ornament{display:flex;align-items:center;gap:14px;color:var(--gold);margin:var(--s-8) auto;max-width:var(--maxw)}
.ornament::before,.ornament::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-gold))}
.ornament::after{transform:scaleX(-1)}

/* ---------- Atmosphere: aurora silk + static starfield + grain ---------- */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:strict}
.aurora::before,.aurora::after,.aurora i{content:"";position:absolute;border-radius:50%;will-change:transform}
.aurora::before{width:90vmax;height:70vmax;left:-30vmax;top:-38vmax;background:radial-gradient(closest-side,rgba(110,63,216,.42),rgba(110,63,216,0) 70%);animation:drift-a 38s var(--ease-io) infinite alternate}
.aurora::after{width:80vmax;height:60vmax;right:-34vmax;top:-12vmax;background:radial-gradient(closest-side,rgba(46,76,201,.36),rgba(46,76,201,0) 70%);animation:drift-b 46s var(--ease-io) infinite alternate}
.aurora i{width:46vmax;height:30vmax;left:30%;bottom:-18vmax;background:radial-gradient(closest-side,rgba(216,178,92,.14),rgba(216,178,92,0) 70%);animation:drift-c 52s var(--ease-io) infinite alternate}
.stars{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 72% 12%,#fff6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 86% 46%,#F1D78E99 50%,transparent 51%),radial-gradient(1px 1px at 34% 64%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 58% 82%,#fff6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 22% 86%,#BBA6FF88 50%,transparent 51%),radial-gradient(1px 1px at 92% 78%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 46% 30%,#fff4 50%,transparent 51%);
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.crest{position:absolute;right:max(-120px,calc(50% - 760px));top:50%;width:min(620px,52vw);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;z-index:0;color:var(--gold)}
.crest svg{width:100%;height:100%;overflow:visible}
.crest .spin{transform-origin:50% 50%;animation:spin 120s linear infinite}
.crest .spin-r{transform-origin:50% 50%;animation:spin 180s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){.crest{display:none}}
@keyframes drift-a{to{transform:translate3d(14vmax,10vmax,0) rotate(18deg) scale(1.08)}}
@keyframes drift-b{to{transform:translate3d(-12vmax,8vmax,0) rotate(-14deg) scale(1.12)}}
@keyframes drift-c{to{transform:translate3d(-10vmax,-6vmax,0) scale(1.2)}}

/* ---------- Buttons ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);padding:0 26px;border-radius:var(--r-pill);font:600 16px/1 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;border:1px solid transparent;overflow:hidden;
  transition:transform var(--d-hover) var(--ease-out)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity var(--d-hover) var(--ease-out)} /* glow/sheen layer */
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(0) scale(.97);transition-duration:var(--d-press)}
.btn-gold{background:var(--grad-gold);color:var(--on-gold);box-shadow:var(--hi-inset),0 0 0 1px rgba(241,215,142,.5) inset,var(--glow-gold)}
.btn-gold::after{background:radial-gradient(120% 140% at 50% 0%,rgba(255,255,255,.35),transparent 60%)}
.btn-gold .shine{position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,250,230,.75) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.btn-gold:hover .shine{animation:shine 900ms var(--ease-out)}
.btn-gold.is-ambient .shine{animation:shine-idle 7s var(--ease-io) 2.4s infinite}
.btn-ghost{background:rgba(255,255,255,.02);color:var(--ivory);border-color:var(--line-strong)}
.btn-ghost::after{background:linear-gradient(180deg,rgba(187,166,255,.14),rgba(187,166,255,.04))}
.btn .arrow{transition:transform var(--d-hover) var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}
@keyframes shine{to{transform:translateX(120%)}}
@keyframes shine-idle{0%{transform:translateX(-120%)}14%,100%{transform:translateX(120%)}}

/* ---------- Cards ---------- */
.card{position:relative;isolation:isolate;background:var(--grad-card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,36px);box-shadow:var(--hi-inset),var(--shadow-1);transition:transform var(--d-ui) var(--ease-out)}
.card::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;background:linear-gradient(160deg,rgba(241,215,142,.6),rgba(110,63,216,.25) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity var(--d-ui) var(--ease-out)}
.card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:var(--glow-purple);opacity:0;transition:opacity var(--d-ui) var(--ease-out)}
.card.is-interactive:hover{transform:translateY(-4px)}
.card.is-interactive:hover::before,.card.is-interactive:hover::after,.card.is-featured::before{opacity:1}
.card.is-interactive:active{transform:translateY(-1px) scale(.995);transition-duration:var(--d-press)}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:0 12px;border-radius:var(--r-pill);font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;border:1px solid}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip-ok{color:var(--emerald-ink);border-color:rgba(111,221,176,.4);background:rgba(31,122,90,.18)}
.chip-bad{color:var(--crimson-ink);border-color:rgba(255,140,154,.4);background:rgba(180,45,69,.16)}
.chip-live{color:var(--gold-hi);border-color:var(--line-gold);background:rgba(216,178,92,.08)}
.chip-live::before{animation:breathe 2.4s var(--ease-io) infinite}
@keyframes breathe{50%{opacity:.25;transform:scale(.7)}}

/* ---------- Scroll reveal (only when motion.js set html.motion) ---------- */
.motion [data-reveal]{opacity:0;transform:translate3d(0,var(--rise),0);transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger))}
.motion [data-reveal="fade"]{transform:none}
.motion [data-reveal="scale"]{transform:scale(.96)}
.motion [data-reveal="mask"]{transform:none;transition:none} /* not clipped at rest: a fully clipped target never intersects */
.motion [data-reveal].is-in{opacity:1;transform:none}
.motion [data-reveal="mask"].is-in{animation:mask-in var(--d-hero) var(--ease-out) both;animation-delay:calc(var(--i,0) * var(--stagger))}
@keyframes mask-in{from{opacity:1;clip-path:inset(0 0 100% 0);transform:translate3d(0,24px,0)}to{opacity:1;clip-path:inset(0 0 -10% 0);transform:none}}

/* Hero entrance: pure CSS on load. The h1 is never transparent (keeps LCP fast); it only rises. */
.hero-rise{animation:hero-rise var(--d-hero) var(--ease-out) both}
.hero-fade{animation:hero-fade var(--d-hero) var(--ease-out) both;animation-delay:calc(var(--i,1) * 120ms + 150ms)}
@keyframes hero-rise{from{transform:translate3d(0,14px,0)}}
@keyframes hero-fade{from{opacity:0;transform:translate3d(0,12px,0)}}

/* ---------- Progress + agents (dashboard) ---------- */
.progress{position:relative;height:8px;border-radius:var(--r-pill);background:rgba(205,198,221,.12);overflow:hidden}
.progress>b{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--purple),var(--blue) 60%,var(--gold));transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform 700ms var(--ease-out)}
.progress.is-running>b::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);width:30%;animation:sweep 1.8s var(--ease-io) infinite}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(12px,1fr));gap:6px}
.agents>i{aspect-ratio:1;border-radius:50%;background:rgba(205,198,221,.16);transition:transform var(--d-ui) var(--ease-back),opacity var(--d-ui)}
.agents>i.run{background:var(--gold);animation:pulse 1.6s var(--ease-io) infinite;animation-delay:calc(var(--i,0) * -137ms)}
.agents>i.done{background:var(--ivory-2)}
.agents>i.ok{background:var(--emerald-ink)}
.agents>i.bad{background:var(--crimson-ink)}
.agents>i.pop{animation:pop 420ms var(--ease-back)}
@keyframes pulse{50%{opacity:.35;transform:scale(.72)}}
@keyframes pop{from{transform:scale(.4)}}

/* ---------- Dashboard view transitions ---------- */
::view-transition-old(view){animation:vt-out 180ms var(--ease-io) both}
::view-transition-new(view){animation:vt-in 360ms var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translate3d(0,-6px,0)}}
@keyframes vt-in{from{opacity:0;transform:translate3d(0,10px,0)}}
.view-enter{animation:vt-in 360ms var(--ease-out) both}   /* fallback when startViewTransition is missing */

/* ---------- Loop pausing (classes set by motion.js) ---------- */
.is-paused,.is-paused *,.is-paused *::before,.is-paused *::after,
.tab-hidden *,.tab-hidden *::before,.tab-hidden *::after{animation-play-state:paused!important}

/* ---------- Reduced motion: calm, static, everything visible ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:1ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  .aurora::before,.aurora::after,.aurora i,.crest .spin,.crest .spin-r,.btn .shine,.agents>i.run,.chip-live::before,.progress.is-running>b::after{animation:none!important}
  .motion [data-reveal]{opacity:1;transform:none;clip-path:none}
  .btn:hover,.card.is-interactive:hover{transform:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
[data-count]{display:inline-block}