/* =========================================================
   INFIKRE — Cinematic Logo Journey
   The infinity mark travels through the story as the user
   scrolls. Built on the existing navy → blue → cyan system
   in style.css. Pin/scroll-driven on desktop, graceful
   stacked reveal on mobile & prefers-reduced-motion.
   ========================================================= */

.cine-journey{
  position:relative;
  background:var(--navy-950);
  color:#fff;
  z-index:5;
}

/* ---------- Track & pinned stage ---------- */
.cine-track{
  position:relative;
  height:600vh; /* 6 chapters */
}
.cine-stage{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  display:block;
  isolation:isolate;
}

/* Decorative, non-moving background layers */
.cine-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 55% at 22% 20%, rgba(28,111,214,.28), transparent 60%),
    radial-gradient(55% 50% at 82% 78%, rgba(47,199,221,.22), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900) 55%, var(--navy-950));
  z-index:0;
}
.cine-bg::after{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px);
  background-size:26px 26px;
  opacity:.35;
  mix-blend-mode:screen;
}
.cine-grain{
  position:absolute; inset:0; z-index:1;
  opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- The traveling logo (protagonist) ---------- */
/* Max footprint stays min(46vw, 420px) — this is the single visual-size
   ceiling for the mark at every stage of the journey, including the
   chapter-5 3D reveal below. (Well under the 1080px upper reference.) */
.cine-logo-wrap{
  position:absolute;
  top:50%; left:50%;
  width:min(46vw, 420px);
  z-index:6;
  perspective:1400px;
  perspective-origin:50% 45%;
  transform:translate3d(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px)), 0)
            scale(var(--scale,1)) rotate(var(--rot,0deg));
  filter:blur(var(--blur,0px)) drop-shadow(0 30px 60px rgba(0,20,60,.55));
  will-change:transform, filter;
  pointer-events:none;
}
.cine-logo-glow{
  position:absolute; inset:-30%;
  background:radial-gradient(circle, rgba(95,224,238,.35), transparent 65%);
  z-index:-1;
  opacity:var(--glow,.6);
}

/* Rotor: holds the reveal's Y-axis spin (--rotY, driven by scroll only
   across the chapter 4→5 handoff — see js/cinematic.js). aspect-ratio
   gives the absolutely-positioned layers inside a definite height without
   forcing an explicit pixel size, so it stays fluid at every breakpoint. */
.cine-logo-rotor{
  position:relative;
  width:100%;
  aspect-ratio:816/634;
  transform-style:preserve-3d;
  transform:rotateY(var(--rotY,0deg));
  animation:cineLogoFloat 6.5s ease-in-out infinite;
}
@keyframes cineLogoFloat{
  0%,100%{ transform:rotateY(var(--rotY,0deg)) translateY(0); }
  50%{ transform:rotateY(var(--rotY,0deg)) translateY(-4px); }
}

.cine-logo-face,
.cine-logo-layer{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; /* never stretch/distort the PNG */
  image-rendering:auto;
  -webkit-user-drag:none; user-select:none;
  backface-visibility:hidden;
}
/* Front face — always fully visible, identical position to the original
   single-image logo. Chapters 0–4 look pixel-for-pixel the same as before. */
.cine-logo-face{
  transform:translateZ(0px);
  filter:drop-shadow(0 18px 30px rgba(0,10,30,.4));
}
/* Depth/extrusion layers — invisible (opacity 0) until the chapter 4→5
   reveal window begins, so they never appear during chapters 0-4. */
.cine-logo-layer{
  transform:translateZ(var(--tz,0px));
  filter:brightness(var(--b,0.5)) saturate(.85);
  opacity:var(--depth-opacity,0);
}
.cine-logo-reflection{
  position:absolute; top:100%; left:0;
  width:100%; height:60%;
  overflow:hidden;
  transform:scaleY(-1);
  transform-style:preserve-3d;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.28), transparent 75%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.28), transparent 75%);
  opacity:calc(var(--depth-opacity,0) * .5);
}
.cine-logo-reflection .cine-logo-layer{ opacity:1; } /* visibility controlled by parent above */
.cine-logo-sheen{
  position:absolute; inset:0;
  -webkit-mask-image:url("../assets/logo-mark.png");
  mask-image:url("../assets/logo-mark.png");
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  background:linear-gradient(115deg,
    transparent 30%, rgba(255,255,255,.55) 47%, rgba(255,255,255,.85) 50%,
    rgba(255,255,255,.55) 53%, transparent 70%);
  background-size:300% 300%;
  background-position:var(--sheenPos, 0%) 50%;
  mix-blend-mode:screen;
  opacity:var(--depth-opacity,0);
  pointer-events:none;
}

/* ---------- Chapters ---------- */
.cine-chapter{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  z-index:4;
  padding:0 8vw;
  opacity:0;
  pointer-events:none;
  transform:translateY(var(--shift, 18px));
  transition:opacity .05s linear; /* fine transform is driven per-frame via inline vars */
}
.cine-chapter.is-live{ pointer-events:auto; }
.cine-chapter-inner{ max-width:560px; }
.cine-chapter.align-right .cine-chapter-inner{ margin-left:auto; text-align:right; }
.cine-chapter.align-center .cine-chapter-inner{ margin:0 auto; text-align:center; max-width:640px; }

.cine-kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Sora',sans-serif;
  font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cyan-300);
  margin-bottom:18px;
}
.cine-kicker .n{ color:rgba(255,255,255,.4); }

.cine-title{
  font-family:'Sora',sans-serif;
  font-weight:800;
  font-size:clamp(34px, 5.4vw, 74px);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 0 18px;
  color:#fff;
}
.cine-title .grad{
  background:linear-gradient(100deg, var(--cyan-300), #fff 60%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.cine-copy{
  font-size:16.5px; line-height:1.7;
  color:rgba(255,255,255,.72);
  max-width:460px;
  margin:0 0 26px;
}
.cine-chapter.align-right .cine-copy{ margin-left:auto; }
.cine-chapter.align-center .cine-copy{ margin-left:auto; margin-right:auto; }

.cine-chips{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px;
}
.cine-chapter.align-right .cine-chips{ justify-content:flex-end; }
.cine-chapter.align-center .cine-chips{ justify-content:center; }
.cine-chip{
  font-size:12.5px; font-weight:600;
  padding:8px 15px;
  border-radius:var(--radius-full);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
  color:rgba(255,255,255,.85);
}

.cine-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px;
  border-radius:var(--radius-full);
  background:var(--grad-brand);
  color:#fff; font-weight:700; font-size:14.5px;
  box-shadow:0 14px 30px rgba(5,11,30,.45);
  transition:transform .3s var(--ease);
}
.cine-btn:hover{ transform:translateY(-2px); }
.cine-btn.ghost{
  background:transparent; border:1.5px solid rgba(255,255,255,.3);
  box-shadow:none;
}

/* Intro-only elements */
.cine-scroll-hint{
  position:absolute; left:50%; bottom:42px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  z-index:6;
  transition:opacity .4s ease;
}
.cine-scroll-hint .line{
  width:1px; height:34px;
  background:linear-gradient(180deg, rgba(255,255,255,.7), transparent);
  animation:cineScrollLine 1.8s ease-in-out infinite;
}
@keyframes cineScrollLine{
  0%{ transform:scaleY(0); transform-origin:top; }
  50%{ transform:scaleY(1); transform-origin:top; }
  50.01%{ transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* Progress dots (desktop) */
.cine-dots{
  position:absolute; right:5vw; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:14px; z-index:7;
}
.cine-dots button{
  width:8px; height:8px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4);
  background:transparent; padding:0;
  cursor:pointer;
  transition:background .3s, transform .3s, border-color .3s;
}
.cine-dots button.active{
  background:var(--cyan-300); border-color:var(--cyan-300);
  transform:scale(1.35);
}

/* Mobile-only per-chapter logo mark (hidden on desktop) */
.cine-chapter-logo{ display:none; }

.cine-chapter-inner{ position:relative; z-index:3; }

/* ---------- Reduced motion & mobile: stacked, non-pinned ---------- */
@media (max-width:860px), (prefers-reduced-motion: reduce){
  .cine-track{ height:auto; }
  .cine-stage{ position:relative; top:auto; height:auto; overflow:visible; }
  .cine-logo-wrap{ display:none; }
  .cine-dots{ display:none; }
  .cine-scroll-hint{ display:none; }

  .cine-chapter{
    position:relative; inset:auto;
    display:block;
    padding:88px 7vw;
    opacity:0; pointer-events:auto;
    transform:translateY(28px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
  }
  .cine-chapter.in-view{ opacity:1; transform:translateY(0); }
  .cine-chapter-inner{ max-width:100%; }
  .cine-chapter.align-right .cine-chapter-inner,
  .cine-chapter.align-center .cine-chapter-inner{ margin:0; text-align:left; max-width:100%; }
  .cine-chapter.align-right .cine-copy,
  .cine-chapter.align-center .cine-copy{ margin-left:0; margin-right:0; }
  .cine-chapter.align-right .cine-chips,
  .cine-chapter.align-center .cine-chips{ justify-content:flex-start; }
  .cine-title{ font-size:clamp(30px, 9vw, 46px); }

  .cine-chapter-logo{
    display:flex; align-items:center; justify-content:center;
    width:56px; height:56px; margin-bottom:22px;
    border-radius:16px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
  }
  .cine-chapter-logo img{ width:30px; height:auto; }
}

@media (prefers-reduced-motion: reduce){
  .cine-chapter{ transition:opacity .01s linear, transform .01s linear; }
}