/* ════════════════════════════════════════════════════════════
   cinema.css — the 3D layer
   A scroll-driven book, an orbiting picture ring, a scrubbed
   frame sequence, and the glass the whole thing sits on.
   Every transform is real 3D; nothing here is a GIF.
   ════════════════════════════════════════════════════════════ */

/* ─────────── liquid glass ─────────── */
.glass{
  position:relative;
  background:linear-gradient(140deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 46%, rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.42),
    0 34px 70px -46px rgba(0,0,0,.95);
  overflow:hidden;
}
@supports (backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px)){
  .glass{
    background:linear-gradient(140deg, rgba(255,255,255,.05), rgba(255,255,255,.008) 46%, rgba(255,255,255,.026));
    backdrop-filter:blur(20px) saturate(1.6);
    -webkit-backdrop-filter:blur(20px) saturate(1.6);
  }
}
/* the specular — a light that moves with the pointer, or with scroll on touch */
.glass::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(90% 70% at var(--gx,50%) var(--gy,-10%),
    rgba(255,255,255,.13), rgba(255,255,255,.03) 42%, transparent 70%);
  opacity:.9; mix-blend-mode:screen;
}
/* a hairline of refracted gold along the top edge */
.glass::before{
  content:""; position:absolute; left:12%; right:12%; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(203,169,107,.55), transparent);
}

/* ═══════════════════════════════════════════════
   THE LEDGER — a book that opens as you scroll
   ═══════════════════════════════════════════════ */
.book{ height:560vh; height:560svh; position:relative; }
.book__pin{
  position:sticky; top:0; height:100vh; height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(16px,3vh,34px);
  padding:clamp(70px,10vh,96px) var(--gutter) clamp(24px,5vh,54px);
  perspective:2400px;
  perspective-origin:50% 46%;
}
.book__kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin:0; text-align:center;
  opacity:calc(.25 + var(--open,0) * .75);
}

.book__stage{
  position:relative;
  width:min(1040px, 94vw);
  height:min(560px, 58vh);
  transform-style:preserve-3d;
  transform:rotateX(calc(9deg - var(--open,0) * 7deg)) translateZ(calc(var(--open,0) * 40px));
  transition:transform .12s linear;
}

/* the two fixed halves the leaves flip between */
.pg{
  position:absolute; top:0; height:100%; width:50%;
  border-radius:4px 12px 12px 4px;
  padding:clamp(20px,3.4vw,52px);
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  background:linear-gradient(155deg,#16181C,#0D0F11 70%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  overflow:hidden;
}
.pg--l{ left:0; border-radius:12px 4px 4px 12px; align-items:flex-end; text-align:right;
        background:linear-gradient(205deg,#14161A,#0C0E10 70%); }
.pg--r{ left:50%; }

/* the leaves, stacked on the right half */
.leaf{
  position:absolute; top:0; left:50%; width:50%; height:100%;
  transform-style:preserve-3d;
  transform-origin:left center;
  transform:rotateY(calc(var(--f,0) * -180deg));
  will-change:transform;
}
.leaf__face{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:4px 12px 12px 4px;
  padding:clamp(20px,3.4vw,52px);
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  background:linear-gradient(155deg,#17191D,#0D0F11 72%);
  border:1px solid rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
}
.leaf__back{
  transform:rotateY(180deg);
  border-radius:12px 4px 4px 12px;
  align-items:flex-end; text-align:right;
  background:linear-gradient(205deg,#15171B,#0C0E10 72%);
}
/* page shading: the closer to the spine, the darker — this is what sells it */
.leaf__face::before, .pg::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(90deg, rgba(0,0,0,.55), transparent 22%);
}
.leaf__back::before, .pg--l::before{
  background:linear-gradient(270deg, rgba(0,0,0,.55), transparent 22%);
}
/* the light that sweeps across a page as it turns */
.leaf__face::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(100deg, rgba(255,255,255,.12), transparent 55%);
  opacity:var(--sheen,0);
}

.book__spine{
  position:absolute; left:50%; top:-1%; height:102%; width:16px; margin-left:-8px;
  background:linear-gradient(90deg, rgba(0,0,0,.85), rgba(203,169,107,.22) 46%, rgba(0,0,0,.85));
  transform:translateZ(-2px);
  border-radius:2px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,1);
}

/* page content */
.pg__n, .leaf__n{
  font-family:var(--serif); font-weight:400; line-height:.92;
  font-size:clamp(40px,6.4vw,96px); letter-spacing:-.035em;
  color:var(--gold); font-variant-numeric:tabular-nums;
}
.pg__t, .leaf__t{ font-size:clamp(14px,1.3vw,18px); color:var(--ivory); }
.pg__d, .leaf__d{ font-size:clamp(12.5px,1vw,14.5px); color:var(--muted); max-width:34ch; }
.pg__c, .leaf__c{
  margin-top:6px; padding-top:10px; border-top:1px solid var(--line-2);
  font-family:var(--mono); font-size:11px; color:var(--muted-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.pg--l .pg__d, .leaf__back .leaf__d{ margin-left:auto; }
.book__title{
  font-family:var(--serif); font-size:clamp(26px,3.4vw,46px);
  line-height:1.05; letter-spacing:-.026em;
}

.book__hint{
  font-family:var(--mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted-2); opacity:calc(1 - var(--open,0) * 1.6);
}

/* one page at a time on a phone — a two-page spread at 380px is unreadable */
@media (max-width:760px){
  .book{ height:520vh; height:520svh; }
  .book__stage{ width:min(430px,88vw); height:min(500px,54vh); }
  .pg--l{ display:none; }
  .pg--r{ left:0; width:100%; border-radius:12px; }
  .leaf{ left:0; width:100%; }
  .leaf__face{ border-radius:12px; }
  .leaf__back{ align-items:flex-start; text-align:left; }
  .leaf__back .leaf__d{ margin-left:0; }
  .book__spine{ display:none; }
  .leaf__face::before{ background:linear-gradient(90deg, rgba(0,0,0,.4), transparent 14%); }
}

/* ═══════════════════════════════════════════════
   THE ORBIT — a spine with the screens turning round it
   ═══════════════════════════════════════════════ */
.orbit{ height:520vh; height:520svh; position:relative; }
.orbit__pin{
  position:sticky; top:0; height:100vh; height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
  perspective:1500px; perspective-origin:50% 50%;
  transform-style:preserve-3d;
  --step:30;
  --r:520px;   /* the orbit radius — the ring and the spine both read it */
}
.orbit__head{
  position:absolute; top:0; left:0; right:0;
  padding:clamp(80px,13vh,124px) var(--gutter) clamp(26px,5vh,50px);
  text-align:center; z-index:6; pointer-events:none;
  background:linear-gradient(180deg, var(--ink) 34%, rgba(8,9,10,.86) 66%, transparent);
}
.orbit__head h3{
  font-family:var(--serif); font-size:clamp(24px,3.2vw,44px); letter-spacing:-.024em;
}
.orbit__head p{
  margin:8px 0 0; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}

/* the spine itself — a lit column the cards turn around */
.orbit__spine{
  position:absolute; left:50%; top:12%; height:76%; width:2px; margin-left:-1px;
  background:linear-gradient(180deg, transparent, rgba(203,169,107,.85) 18%, rgba(203,169,107,.85) 82%, transparent);
  box-shadow:0 0 40px 6px rgba(203,169,107,.20);
  transform:translateZ(calc(var(--r) * -1));
}
.orbit__spine::before, .orbit__spine::after{
  content:""; position:absolute; left:50%; width:9px; height:9px; margin-left:-4.5px;
  border-radius:50%; background:var(--gold-hi);
  box-shadow:0 0 22px 5px rgba(203,169,107,.6);
}
.orbit__spine::before{ top:-4px; } .orbit__spine::after{ bottom:-4px; }

.orbit__ring{
  position:relative;
  /* 12 cards on a circle: r = w / (2·tan(π/12)) keeps them edge to edge */
  width:min(272px,56vw); height:min(544px,54vh);
  transform-style:preserve-3d;
  /* push the whole ring back by its own radius, so the card facing you lands
     at z=0 and renders at its true size — without this, perspective magnifies
     the front card by 1500/(1500-r), which is about 1.6x */
  transform:translateZ(calc(var(--r) * -1)) rotateX(-6deg) rotateY(calc(var(--spin,0) * 1deg));
  will-change:transform;
}
.orbit__card{
  position:absolute; inset:0; margin:0;
  transform-style:preserve-3d;
  transform:rotateY(calc(var(--i) * var(--step,30) * 1deg)) translateZ(var(--r,420px));
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:#05060700;
  box-shadow:0 40px 80px -40px rgba(0,0,0,1);
  backface-visibility:hidden;
}
.orbit__card img{ width:100%; height:100%; object-fit:cover; display:block; }
.orbit__card figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px 14px 12px;
  background:linear-gradient(180deg, transparent, rgba(6,7,8,.92));
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ivory);
}
/* front-facing cards are lit; the ones behind the spine fall away */
.orbit__card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:rgba(4,5,6,.72);
  opacity:var(--dim,.7);
  transition:opacity .18s linear;
}

.orbit__floor{
  position:absolute; left:50%; top:50%; width:1200px; height:1200px;
  margin:-600px 0 0 -600px;
  transform:rotateX(90deg) translateZ(-330px);
  background:radial-gradient(circle, rgba(203,169,107,.10), transparent 58%);
  pointer-events:none;
}

@media (max-width:1100px){
  .orbit__pin{ --r:460px; }
  .orbit__ring{ width:min(240px,52vw); }
}
@media (max-width:900px){
  .orbit{ height:460vh; height:460svh; }
  .orbit__pin{ --r:385px; }
  .orbit__ring{ width:min(200px,50vw); height:min(400px,46vh); }
}
@media (max-width:560px){
  .orbit__pin{ --r:325px; }
  .orbit__ring{ width:min(168px,52vw); height:min(336px,44vh); }
}

/* ═══════════════════════════════════════════════
   THE SCRUB — a real session, frame by frame, on scroll
   ═══════════════════════════════════════════════ */
.scrub{ height:340vh; height:340svh; position:relative; }
.scrub__pin{
  position:sticky; top:0; height:100vh; height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(14px,2.4vh,26px);
  padding:clamp(76px,11vh,110px) var(--gutter) clamp(24px,4vh,44px);
  perspective:1800px;
}
.scrub__frame{
  position:relative;
  width:min(1120px,100%);
  aspect-ratio:1440 / 900;
  border-radius:clamp(10px,1vw,16px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:#0A0B0C;
  transform:rotateX(calc((1 - var(--in,0)) * 10deg)) scale(calc(.93 + var(--in,0) * .07));
  box-shadow:0 60px 120px -60px rgba(0,0,0,1);
}
.scrub__frame canvas, .scrub__frame img{ width:100%; height:100%; display:block; object-fit:cover; }
.scrub__bar{ width:min(1120px,100%); height:1px; background:var(--line-2); }
.scrub__bar i{ display:block; height:100%; width:0; background:var(--gold); }
.scrub__cap{
  max-width:66ch; text-align:center; font-size:14.5px; color:var(--muted); margin:0;
}
.scrub__cap b{ color:var(--ivory); font-weight:400; }
.scrub__cap em{ color:var(--gold); font-style:normal; }

/* ═══════════════════════════════════════════════
   AI ARSENAL + JUDGEMENT
   ═══════════════════════════════════════════════ */
.arsenal{ padding:clamp(70px,11vh,130px) 0; position:relative; }
.arsenal::before{
  content:""; position:absolute; top:0; left:var(--gutter); right:var(--gutter);
  height:1px; background:var(--line-2);
}
.tools{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:clamp(10px,1.2vw,16px);
}
.tool{
  --c:0;
  padding:clamp(16px,1.8vw,24px);
  border-radius:14px;
  display:grid; gap:6px; align-content:start;
  transform:translateY(calc((1 - var(--c)) * 16px));
  transition:transform .14s linear, border-color .4s ease;
}
.tool b{ font-size:15px; font-weight:400; color:var(--ivory); }
.tool span{ font-size:13px; color:var(--muted); }
.tool em{
  font-family:var(--mono); font-style:normal; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.tool--on em{ color:var(--gold-hi); }

.judge{ margin-top:clamp(46px,7vw,86px); }
.judge__rows{ display:grid; gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:14px; overflow:hidden; }
.judge__row{
  --c:0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.5fr);
  gap:clamp(12px,2vw,28px);
  padding:clamp(16px,2vw,24px);
  background:var(--ink);
  align-items:baseline;
}
@supports (background:color-mix(in srgb,#000 50%,#fff)){
  .judge__row{ background:color-mix(in srgb, var(--surface) calc(var(--c) * 60%), var(--ink)); }
}
.judge__job{ font-size:15px; color:var(--ivory); }
.judge__pick{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.04em;
  color:var(--gold);
}
.judge__why{ font-size:13.5px; color:var(--muted); }
.judge__head{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted-2); background:var(--surface);
}
@media (max-width:820px){
  .judge__row{ grid-template-columns:1fr; gap:6px; }
  .judge__head{ display:none; }
  .judge__job{ font-size:16px; }
}

/* ─────────── the animated SYRIX mark ─────────── */
.mark{ display:block; width:100%; height:100%; overflow:visible; }
.mark path, .mark line{
  fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:var(--len,120); stroke-dashoffset:calc(var(--len,120) * (1 - var(--draw,0)));
}
.mark__fill{ fill:rgba(203,169,107,calc(var(--draw,0) * .16)); stroke:none; }
.markwrap{
  --draw:0;
  width:clamp(84px,10vw,132px); aspect-ratio:1;
  transform:rotate(calc(var(--draw,0) * 90deg)) scale(calc(.85 + var(--draw,0) * .15));
  transition:transform .16s linear;
}

/* ─────────── link out to the SYRIX site ─────────── */
.live{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,3vw,44px);
  align-items:center;
  border-radius:20px; padding:clamp(22px,3vw,44px);
  margin-top:clamp(40px,6vw,72px);
}
.live h3{ font-family:var(--serif); font-size:clamp(24px,3vw,40px); letter-spacing:-.022em; margin-bottom:.4em; }
.live p{ color:var(--muted); font-size:15px; max-width:46ch; }
.live__go{
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 26px; border-radius:100px;
  background:var(--gold); color:#0A0B0C; font-size:14.5px;
  transition:background-color .35s var(--ease), transform .35s var(--ease);
}
.live__go:hover{ background:var(--gold-hi); }
.live__go i{ font-style:normal; transition:transform .35s var(--ease); }
.live__go:hover i{ transform:translateX(4px); }
.live__shot{
  border-radius:14px; overflow:hidden; border:1px solid var(--line);
  transform:perspective(900px) rotateY(-9deg) rotateX(3deg);
  box-shadow:0 40px 80px -50px rgba(0,0,0,1);
}
@media (max-width:860px){
  .live{ grid-template-columns:1fr; }
  .live__shot{ transform:none; }
}

/* ─────────── reduced motion ─────────── */
@media (prefers-reduced-motion:reduce){
  .book,.orbit,.scrub{ height:auto !important; }
  .book__pin,.orbit__pin,.scrub__pin{
    position:static !important; height:auto !important;
    padding-block:clamp(56px,9vh,96px); perspective:none !important;
  }
  .book__stage{ height:auto; transform:none !important; display:grid; gap:14px; }
  .pg,.leaf,.leaf__face{ position:static !important; width:auto !important; height:auto !important;
    transform:none !important; border-radius:12px !important; }
  .leaf__face{ margin-bottom:14px; }
  .leaf__back{ display:none; }
  .book__spine{ display:none; }
  .orbit__ring{ width:100%; height:auto; transform:none !important;
    display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
  .orbit__card{ position:static !important; transform:none !important; aspect-ratio:1/2; }
  .orbit__card::after{ opacity:0 !important; }
  .orbit__spine,.orbit__floor{ display:none; }
  .scrub__frame{ transform:none !important; }
  .glass::after{ display:none; }
  .tool{ transform:none !important; }
  .markwrap{ transform:none !important; --draw:1; }
}