/* ============================================================
   Kitsune AI — Homepage scroll storytelling & motion layer
   Cinematic hero · parallax · scroll-scrubbed foundry ·
   pinned product showcase · image slots
   Loaded after homepage.css; pairs with scroll.js
   ============================================================ */

/* ---------- IMAGERY SLOTS (author-controlled, drop a real <img> in) ---------- */
.imgfill { position: relative; overflow: hidden; }
.imgfill > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   CINEMATIC HERO
   ============================================================ */
.hero { isolation: isolate; }
/* compress the vertical rhythm on the light editorial sections */
.rationale.section, .method.section { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.rationale .section__head, .method .section__head { margin-bottom: clamp(28px, 3.5vw, 44px); }
.hero__bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  will-change: transform; transform: scale(1.08);
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(238,77,31,0.18), transparent 60%),
    radial-gradient(110% 90% at 88% 80%, rgba(35,55,241,0.20), transparent 62%),
    radial-gradient(90% 80% at 60% 50%, rgba(75,53,200,0.14), transparent 70%),
    linear-gradient(120deg, #f6f7fb 0%, #eef0f8 50%, #e7e9f6 100%);
}
.hero__bg > img, .hero__bg > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* animated brand grid drifting inside the hero gradient mesh */
.hero__mesh-grid {
  position: absolute; inset: -10%; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(75,53,200,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(75,53,200,.10) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 62% 42%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 80% 75% at 62% 42%, #000 0%, transparent 72%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__mesh-grid { animation: griddrift 26s linear infinite; }
}
@keyframes griddrift { to { background-position: 64px 64px; } }
@media (prefers-reduced-motion: no-preference) {
  .hero[data-kb] .hero__bg { animation: kenburns 22s var(--ease-in-out) infinite alternate; }
}
@keyframes kenburns {
  from { transform: scale(1.08) translate3d(0,0,0); }
  to   { transform: scale(1.16) translate3d(-2%,-2%,0); }
}
/* empty-state mesh lives on .hero__bg itself (above) */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(105deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.8) 34%, rgba(255,255,255,0.5) 58%, rgba(255,255,255,0.28) 100%),
    linear-gradient(to top, rgba(255,255,255,0.85) 0%, transparent 30%);
}
.hero .hero__grid { z-index: 2; }
.hero .hero__trail { z-index: 3; }
.hero .hero__inner { z-index: 4; }
.hero .hero__scroll { z-index: 4; }
.hero__inner { will-change: transform, opacity; }

/* ---- pinned hero stage: zoom-through handoff into section 2 ---- */
.hero-stage { position: relative; height: 114vh; }
.hero-stage .hero { position: sticky; top: 0; height: 100vh; min-height: 640px; }
.hero__bg { transform-origin: 58% 46%; }
.hero__flash {
  position: absolute; inset: 0; z-index: 6; background: var(--kit-site);
  opacity: 0; pointer-events: none; will-change: opacity;
}
/* brand core that emerged from the clouds — removed per design review */
@media (prefers-reduced-motion: reduce) {}
@media (prefers-reduced-motion: reduce) {
  .hero-stage { height: auto; }
  .hero-stage .hero { position: relative; height: auto; }
  .hero__flash { display: none; }
}

/* ============================================================
   PARALLAX (generic) — JS sets --p (px)
   ============================================================ */
[data-parallax] { will-change: transform; transform: translate3d(0, var(--p, 0px), 0); }

/* ============================================================
   SCROLL-DRIVEN FRICTION-CARD STACKING (rationale)
   Scattered, rotated cards straighten & lock into a 1px grid.
   JS sets --cp (0..1) on #bottlenecks as it scrolls into view.
   ============================================================ */
.cards { position: relative; --cp: 1; }
.js-reveal .cards { --cp: 0; }
.cards::before {
  content: ""; position: absolute; inset: -28px -2px; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(11,13,18,0.06) 0 1px, transparent 1px 72px);
  opacity: calc(var(--cp) * 0.9);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cards > .flip { position: relative; z-index: 1; will-change: transform, opacity; }
/* JS sets a per-card spring transform inline; this is the no-JS / pre-init fallback */
.js-reveal .cards > .flip {
  transform: translate3d(calc(var(--sx,0px) * (1 - var(--cp))), calc(var(--sy,0px) * (1 - var(--cp))), 0) rotate(calc(var(--sr,0deg) * (1 - var(--cp))));
  opacity: calc(0.3 + 0.7 * var(--cp));
}
.cards > .flip:nth-child(1) { --sx: -52px; --sy: 40px;  --sr: -7deg; }
.cards > .flip:nth-child(2) { --sx: 34px;  --sy: -34px; --sr: 6deg; }
.cards > .flip:nth-child(3) { --sx: -30px; --sy: 30px;  --sr: 7deg; }
.cards > .flip:nth-child(4) { --sx: 46px;  --sy: -24px; --sr: -6deg; }
@media (prefers-reduced-motion: reduce) { .js-reveal .cards { --cp: 1 !important; } }

/* ============================================================
   SCROLL-SCRUBBED FOUNDRY
   JS sets --fp (0..1) on .foundry while it scrolls through view
   ============================================================ */
.foundry { --fp: 0; }
.foundry:not(.is-drawn) .foundry__paths path {
  animation: none !important;
  stroke-dasharray: 520 !important;
  stroke-dashoffset: calc(520 - 520 * var(--fp)) !important;
  opacity: calc(0.18 + 0.82 * var(--fp)) !important;
}
/* once fully drawn, the looping flow animation from homepage.css resumes */
.foundry__node { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transform-box: fill-box; }
.foundry.is-in .foundry__node[data-side="in"] { opacity: 1; transform: none; }
.foundry.is-in .foundry__node[data-side="out"] { opacity: 1; transform: none; transition-delay: .45s; }
.foundry__core { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; transition: opacity .7s var(--ease-out), transform .7s var(--ease-kinetic); transition-delay: .2s; }
.foundry.is-in .foundry__core { opacity: 1; transform: none; }

/* ============================================================
   PINNED PRODUCT SHOWCASE (Mercury-style)
   ============================================================ */
.showcase { position: relative; background: var(--kit-ink); color: #fff; min-height: 250vh; }
.showcase__grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 60% 40%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 60% 40%, #000, transparent 75%);
}
.showcase__glow {
  position: absolute; z-index: 0; right: 4%; top: 30%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle at 50% 50%, rgba(238,77,31,.22), rgba(75,53,200,.16) 38%, transparent 66%);
  filter: blur(20px); pointer-events: none; transform: translate3d(0, var(--p, 0px), 0); will-change: transform;
}
.showcase__stage {
  position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center;
  padding: 80px clamp(24px, 6vw, 96px); z-index: 1;
}
.showcase__inner {
  position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: center;
}
.showcase__copy .eyebrow { color: var(--kit-fox-300); }
.showcase__copy h2 { color: #fff; margin-top: 14px; }
.showcase__lede { margin-top: 18px; color: var(--kit-slate-300); font-size: var(--fs-body-lg); line-height: 1.55; max-width: 42ch; }
.showcase__steps { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sc-step {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
  padding: 22px 20px 22px 20px; border-radius: var(--r-lg); border-left: 3px solid transparent;
  opacity: .42; transition: opacity .45s var(--ease-out), background .45s var(--ease-out), border-color .45s var(--ease-out);
}
.sc-step.is-on { opacity: 1; background: rgba(255,255,255,.04); border-left-color: var(--kit-fox-500); }
.sc-step__n { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.1em; color: var(--kit-fox-300); padding-top: 6px; }
.sc-step h3 { font-size: 30px; color: #fff; line-height: 1.15; letter-spacing: -0.01em; }
.sc-step p { margin-top: 10px; font-size: 18px; line-height: 1.5; color: var(--kit-slate-400); }
.sc-step.is-on p { color: var(--kit-slate-300); }

/* device frame holding the swapping screens */
.showcase__device { position: relative; perspective: 1600px; }
.device {
  position: relative; border-radius: 18px; overflow: hidden; background: #0a0c11;
  border: 1px solid #232734; box-shadow: 0 50px 120px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03) inset;
  transform: rotateY(calc(-7deg + 7deg * var(--sp, 0))) translateZ(0); will-change: transform;
  transition: transform .2s linear;
}
.device__bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid #1c202b; }
.device__bar i { width: 11px; height: 11px; border-radius: 50%; background: #2a2e38; }
.device__bar i:first-child { background: var(--kit-fox-500); }
.device__bar span { margin-left: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--kit-slate-500); }
.device__screens { position: relative; aspect-ratio: 7 / 5; }
.device__screens .screen {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transform: scale(1.03); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.device__screens .screen.is-on { opacity: 1; transform: none; }
/* branded empty-state for showcase screens */
.screen { background: repeating-linear-gradient(135deg, #12151d 0 16px, #0e1117 16px 32px); }
.screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen .screen__label {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 24px;
  font-family: var(--font-mono); font-size: 12px; color: var(--kit-slate-500);
}
.screen .screen__label b { color: var(--kit-slate-300); font-weight: 600; }
.screen.has-img .screen__label { display: none; }

/* progress rail under the steps */
.sc-rail { margin-top: 30px; height: 2px; background: #232734; border-radius: 2px; overflow: hidden; }
.sc-rail i { display: block; height: 100%; width: calc(100% * var(--prog, 0)); background: var(--kit-gradient); }

@media (max-width: 980px) {
  .showcase__inner { grid-template-columns: 1fr; gap: 36px; }
  .showcase { min-height: auto; }
  .showcase__stage { min-height: auto; position: relative; padding-top: 100px; padding-bottom: 100px; }
  .device { transform: none; }
}

/* ============================================================
   FLOATING ACCOUNT CARDS (Revolut-style drift) — used in rationale
   ============================================================ */
.stat-rise .flip__stat { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal.is-in .flip__stat { animation: statrise .9s var(--ease-kinetic) both; }
}
@keyframes statrise { from { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero__bg { animation: none !important; }
  [data-parallax] { transform: none !important; }
  .foundry__paths path { stroke-dasharray: 6 10 !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
}

/* ============================================================
   LIVE AGENT-EXECUTION TERMINAL (rig.ai-style streaming code)
   ============================================================ */
.livecode { position: relative; overflow: hidden; padding-top: clamp(52px,6vw,84px); padding-bottom: clamp(52px,6vw,84px); }
/* coda variant: terminal-only, continuous with the dark Creator OS showcase above */
.livecode { background: var(--kit-ink); padding-top: clamp(16px,2.5vw,32px); padding-bottom: clamp(64px,8vw,120px); }
.livecode__coda { max-width: 780px; margin: 0 auto; padding: 0 clamp(24px,6vw,96px); }
.livecode__coda-head { text-align: center; margin-bottom: clamp(18px,2.5vw,28px); }
.lc-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--kit-fox-300); }
.livecode__inner { display: grid; grid-template-columns: 0.92fr 1.18fr; gap: clamp(36px,5vw,80px); align-items: center; max-width: 1248px; margin: 0 auto; }
.livecode__copy .section__title { margin-top: 14px; }
.livecode__legend { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.livecode__legend li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--fg-2); }
.lc-d { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.lc-d--plan { background: var(--kit-electric-500); }
.lc-d--exec { background: #2f8f5d; }
.lc-d--gov { background: var(--kit-fox-500); }

.livecode__term {
  border-radius: var(--r-xl); overflow: hidden; background: #0a0c11;
  border: 1px solid #1c202b; box-shadow: 0 40px 90px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.lc-bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #161922; }
.lc-dots { display: flex; gap: 7px; }
.lc-dots i { width: 11px; height: 11px; border-radius: 50%; background: #2a2e38; }
.lc-dots i:first-child { background: var(--kit-fox-500); }
.lc-title { font-family: var(--font-mono); font-size: 13px; color: var(--kit-slate-400); letter-spacing: .03em; }
.lc-live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--kit-electric-300); }
.lc-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--kit-electric-500); animation: lclive 1.6s var(--ease-out) infinite; }
@keyframes lclive { 0% { box-shadow: 0 0 0 0 rgba(35,55,241,.6); } 70%,100% { box-shadow: 0 0 0 7px rgba(35,55,241,0); } }
.lc-body { padding: 22px 22px 26px; font-family: var(--font-mono); font-size: clamp(12px,1.15vw,15px); line-height: 1.95; min-height: 17em; }
.lc-row { display: flex; gap: 12px; white-space: pre; }
.lc-row__p { flex: none; width: 1.1em; text-align: center; }
.lc-row__t { color: var(--kit-slate-300); }
.lc-p--cmd { color: var(--kit-fox-500); } .lc-t--cmd { color: #fff; }
.lc-p--ctx { color: var(--kit-slate-500); } .lc-t--ctx { color: var(--kit-slate-400); }
.lc-p--plan { color: var(--kit-electric-300); } .lc-t--plan { color: var(--kit-slate-200); }
.lc-p--exec { color: #5fc48b; } .lc-t--exec { color: var(--kit-slate-200); }
.lc-p--gov { color: var(--kit-fox-300); } .lc-t--gov { color: #f4a08a; }

/* ============================================================
   INTAKE — live-typing prompts
   ============================================================ */
.path__prompt { position: relative; }
.path__type { white-space: pre; }
.path__caret {
  display: inline-block; width: 7px; height: 1.05em; vertical-align: -0.16em;
  margin-left: 1px; background: var(--kit-fox-500); opacity: 0;
}
.path.is-typing .path__caret { opacity: 1; animation: lcblink 1s steps(1) infinite; }
.path.is-typed .path__caret { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .path__caret { display: none; } }

/* ============================================================
   MODES — streaming accent + staggered settle
   ============================================================ */
.mode { position: relative; overflow: hidden; }
.mode__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--kit-fox-500), transparent);
  transform: translateX(-100%); opacity: 0;
}
.modes__grid.is-in .mode__scan { animation: modescan 1.5s var(--ease-out) forwards; }
.modes__grid.is-in .mode:nth-child(2) .mode__scan { animation-delay: .18s; }
.modes__grid.is-in .mode:nth-child(3) .mode__scan { animation-delay: .36s; }
@keyframes modescan { 0% { transform: translateX(-100%); opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
.mode__feed { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--fg-mute); margin-top: 18px; min-height: 1.2em; }
.mode--feature .mode__feed { color: var(--kit-slate-400); }
.mode__feed b { color: var(--kit-fox-500); font-weight: 500; }
.mode--feature .mode__feed b { color: var(--kit-fox-300); }
@media (prefers-reduced-motion: reduce) { .modes__grid.is-in .mode__scan { animation: none; opacity: 0; } }
.lc-p--res { color: #fff; } .lc-t--res { color: #fff; font-weight: 600; }
.lc-cursor { display: inline-block; width: 0.6em; height: 1.05em; transform: translateY(0.16em); background: var(--kit-fox-500); animation: lcblink 1s steps(1) infinite; }
@keyframes lcblink { 50% { opacity: 0; } }

@media (max-width: 940px) { .livecode__inner { grid-template-columns: 1fr; gap: 36px; } }
@media (prefers-reduced-motion: reduce) { .lc-live i, .lc-cursor { animation: none; } }