/* =====================================================================
   SHUNYAAKAR — STYLES
   Theme: flat Rajasthan palette. Rajasthan's own colours (rani pink,
   marigold, peacock teal, Jodhpur blue) as solid colour over a deep
   ink night. Bold wide display type, handwriting only where a
   filmmaker would actually write: the slate, notes, stickies.
   ===================================================================== */

:root {
  /* colour */
  --ink: #0E0A1C;
  --ink-deep: #07050F;
  --surface: #171230;
  --surface-2: #211A40;
  --line: rgba(246, 240, 230, 0.1);
  --line-strong: rgba(246, 240, 230, 0.24);
  --bone: #F6F0E6;
  --muted: #A59DBF;
  --rani: #FF3D8B;        /* rani pink — films, heat */
  --marigold: #FFB224;    /* marigold — music, light */
  --peacock: #13C2B0;     /* peacock teal — done, VFX */
  --royal: #4B63FF;       /* Jodhpur blue — The Other, animation */
  --paper: #F3EDE1;
  --spectrum: linear-gradient(90deg, var(--rani) 0 25%, var(--marigold) 25% 50%, var(--peacock) 50% 75%, var(--royal) 75% 100%); /* four flat blocks */

  /* type */
  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --f-script: "Courier Prime", "Courier New", monospace;
  --f-deva: "Rozha One", "Tiro Devanagari Hindi", "Noto Serif Devanagari", serif;

  /* layout */
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --r-l: 22px;
  --r-m: 14px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--ink); color: var(--bone);
  font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.6;
  overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: 400; }
:focus-visible { outline: 2px solid var(--marigold); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--rani); color: #fff; }

.wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { position: relative; padding-block: clamp(5.5rem, 11vw, 9.5rem); }
.skip {
  position: fixed; left: 1rem; top: 1rem; z-index: 300; transform: translateY(-200%);
  background: var(--marigold); color: var(--ink); padding: .6rem 1rem; border-radius: 10px; text-decoration: none; font-weight: 700;
}
.skip:focus { transform: none; }

.h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.04; letter-spacing: -.03em;
  margin: 0 0 .5em; text-wrap: balance;
}
.lead { font-size: clamp(1.08rem, 1.45vw, 1.25rem); color: #DCD5EA; max-width: 44ch; margin: 0 0 1.3em; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .95em 1.6em; border-radius: 999px;
  font-weight: 650; font-size: .98rem; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .3s var(--ease-out), background-color .3s, color .3s, border-color .3s, box-shadow .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-brass { background: var(--marigold); color: var(--ink); }
.btn-brass:hover { background: var(--bone); }
.btn-line { border-color: var(--line-strong); color: var(--bone); background: rgba(246, 240, 230, .03); }
.btn-line:hover { border-color: var(--rani); background: rgba(255, 61, 139, .12); }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1.5px solid var(--line-strong); background: transparent; cursor: pointer;
  transition: border-color .25s, color .25s;
}
.icon-btn:hover { border-color: var(--marigold); color: var(--marigold); }
.hand { font-family: var(--f-hand); }

/* =====================================================================
   LOADER
   ===================================================================== */
@property --sweep { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.loader {
  position: fixed; inset: 0; z-index: 200; background: var(--ink-deep);
  display: none; place-items: center; align-content: center; gap: 1.6rem;
  transition: opacity .8s ease .1s, visibility .8s ease .1s;
}
.js .loader { display: grid; }
.loader.is-done { opacity: 0; visibility: hidden; }
.leader {
  position: relative; width: min(42vmin, 260px); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--bone); display: grid; place-items: center; overflow: hidden;
  transition: transform 1s var(--ease-io), opacity .7s ease;
}
.leader::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 1px solid rgba(246, 240, 230, .4); }
.leader-sweep {
  position: absolute; inset: 0;
  background: conic-gradient(var(--rani) var(--sweep), transparent var(--sweep)); opacity: .55;
  animation: sweep .4s linear infinite; /* one turn per number, matching the 400 ms countdown */
}
.leader-cross {
  position: absolute; inset: 0; opacity: .4;
  background: linear-gradient(var(--bone), var(--bone)) center / 100% 1px no-repeat, linear-gradient(var(--bone), var(--bone)) center / 1px 100% no-repeat;
}
.leader-num { position: relative; font-family: var(--f-display); font-weight: 800; font-size: min(18vmin, 112px); line-height: 1; }
.loader-word { margin: 0; font-family: var(--f-deva); font-size: 1.5rem; color: var(--marigold); }
.loader.is-done .leader { transform: scale(3); opacity: 0; }
@keyframes sweep { to { --sweep: 360deg; } }

/* =====================================================================
   CURSOR
   ===================================================================== */


/* =====================================================================
   NAV
   ===================================================================== */
.nav { position: fixed; inset: 0 0 auto; z-index: 60; border-bottom: 1px solid transparent; transition: background-color .4s, border-color .4s; }
.nav.is-scrolled {
  background: rgba(14, 10, 28, .74);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 76px; }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.logo span { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em; }
.logo-mark { width: 26px; height: 26px; }
.logo-mark circle { fill: none; stroke: var(--marigold); stroke-width: 4.5; }
.nav-links { display: flex; gap: clamp(1rem, 2.3vw, 2.1rem); list-style: none; margin: 0; padding: 0; }
.nav-links a { position: relative; text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--muted); padding: .4rem 0; transition: color .25s; }
.nav-links a:hover, .nav-links a.is-active { color: var(--bone); }
.nav-links a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--marigold);
}
.nav-actions { display: flex; align-items: center; gap: .7rem; }
.nav-cta { padding: .7em 1.25em; font-size: .9rem; }
.sound-btn .mute { display: block; } .sound-btn .wave { display: none; }
.sound-btn[aria-pressed="true"] { border-color: var(--marigold); color: var(--marigold); }
.sound-btn[aria-pressed="true"] .mute { display: none; } .sound-btn[aria-pressed="true"] .wave { display: block; }
.menu-btn { display: none; gap: 6px; align-content: center; }
.menu-btn span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .3s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
@media (max-width: 1140px) {
  .menu-btn { display: inline-grid; }
  .nav-cta { display: none; }
  .nav-links {
    position: fixed; inset: 76px 0 auto 0; flex-direction: column; gap: 0;
    background: rgba(14, 10, 28, .98); border-bottom: 1px solid var(--line); padding: .8rem var(--gutter) 2rem;
    transform: translateY(-10px); opacity: 0; visibility: hidden;
    transition: transform .35s var(--ease-out), opacity .35s, visibility .35s;
  }
  .nav-links a { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.7rem; color: var(--bone); padding: .45rem 0; letter-spacing: -.02em; }
  .nav-links a.is-active { color: var(--marigold); }
  .nav-links a.is-active::after { display: none; }
  .nav.menu-open .nav-links { transform: none; opacity: 1; visibility: visible; }
  .nav.menu-open { background: rgba(14, 10, 28, .98); }
}

/* =====================================================================
   HERO — fly through the zero (scroll-driven, pinned)
   ===================================================================== */
.hero { position: relative; height: 290vh; background: var(--ink); }
.hero-pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; place-items: center; padding: 100px var(--gutter) 6rem; isolation: isolate;
  perspective: 900px;
}
#portal { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.viewfinder { position: absolute; inset: 92px var(--gutter) 4.4rem; pointer-events: none; }
.vf-corner { position: absolute; width: 30px; height: 30px; border: 0 solid rgba(246, 240, 230, .75); }
.vf-corner.tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.vf-corner.tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.vf-corner.bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.vf-corner.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.vf-rec, .vf-loc { position: absolute; top: 14px; margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .05em; color: rgba(246, 240, 230, .8); font-variant-numeric: tabular-nums; }
.vf-rec { left: 42px; display: flex; align-items: center; gap: .55rem; }
.vf-loc { right: 42px; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rani); animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: .2; } }

.hero-card {
  position: relative; text-align: center; max-width: 1100px;
  transform: scale(var(--ts, 1)); opacity: var(--to, 1);
  will-change: transform, opacity;
}
.hero-deva, .hero-lede, .hero-cta { opacity: calc(1 - var(--sp, 0) * 3); }
.hero-deva { margin: 0 0 .15em; font-family: var(--f-deva); font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.3; color: var(--marigold); }
.wordmark {
  margin: 0; font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.6rem, 10.2vw, 9.4rem); line-height: 1; letter-spacing: -.05em; color: var(--bone);
}
.wm { display: inline-flex; }
.wordmark { perspective: 700px; }
.wm .l {
  display: inline-block; overflow: hidden; padding: .04em .005em .14em;
  transform:
    translate3d(calc(var(--o) * var(--sp, 0) * 11vw), calc(var(--y) * var(--sp, 0) * 38vh), calc(var(--sp, 0) * 260px))
    rotate(calc(var(--r) * var(--sp, 0) * 50deg));
}
.wm .li { display: inline-block; }
.js .wm .li { transform: translateY(115%); }
.is-loaded .wm .li { transform: none; transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--d) * 55ms + .2s); }
.wm .l:nth-child(4n+1) .li { color: var(--bone); }
.hero-lede { text-shadow: 0 0 14px var(--ink), 0 0 4px var(--ink); margin: 1.5rem auto 2.1rem; max-width: 42ch; font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: #DDD6EB; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.hero-statement {
  position: absolute; inset: 0; margin: 0; display: grid; place-content: center; text-align: center; pointer-events: none;
  font-family: var(--f-display); font-weight: 800; font-size: clamp(2.3rem, 8vw, 7.6rem); line-height: 1.02; letter-spacing: -.05em;
  opacity: var(--so, 0); transform: scale(var(--ss, .9));
}
.hero-statement span { display: block; }
.hero-statement span:last-child { color: var(--marigold); }
.hero-scroll {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: .8rem; font-size: .85rem; color: var(--muted); white-space: nowrap;
  opacity: calc(1 - var(--p, 0) * 5);
}
.hero-scroll-bar { width: 70px; height: 3px; background: var(--line-strong); overflow: hidden; }
.hero-scroll-bar i { display: block; height: 100%; width: 35%; background: var(--marigold); animation: scrollhint 1.8s var(--ease-io) infinite; }
@keyframes scrollhint { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }

/* load choreography */
.js .hero-deva, .js .hero-lede, .js .hero-cta, .js .viewfinder, .js .hero-scroll { visibility: hidden; }
.is-loaded .hero-deva, .is-loaded .hero-lede, .is-loaded .hero-cta, .is-loaded .viewfinder, .is-loaded .hero-scroll { visibility: visible; animation: rise 1s var(--ease-out) both; }
.is-loaded .hero-deva { animation-delay: .1s; }
.is-loaded .hero-lede { animation-delay: .75s; }
.is-loaded .hero-cta { animation-delay: .9s; }
.is-loaded .viewfinder { animation-duration: 1.6s; animation-name: fadein; }
.is-loaded .hero-scroll { animation-delay: 1.3s; animation-name: fadein; }
@keyframes rise { from { opacity: 0; translate: 0 18px; } }
@keyframes fadein { from { opacity: 0; } }

@media (max-width: 800px) {
  .hero { height: 250vh; }
  .viewfinder { inset: 86px 1rem 4.2rem; }
  .vf-loc { display: none; }
  .vf-rec { left: 36px; }
}

/* =====================================================================
   GIANT WORD BANDS — move sideways as you scroll
   ===================================================================== */
.bands { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 7rem) clamp(1rem, 3vw, 2rem); display: grid; gap: .1em; background: var(--ink); }
.band {
  display: flex; align-items: center; gap: .3em; width: max-content; white-space: nowrap;
  font-family: var(--f-display); font-weight: 800; font-size: clamp(3.4rem, 12.5vw, 12rem); line-height: 1; letter-spacing: -.055em;
  transform: translate3d(var(--x, 0px), 0, 0); will-change: transform;
}
.band-a { margin-left: -8vw; }
.band-b { margin-left: -60vw; }
.band .c-rani { color: var(--rani); } .band .c-marigold { color: var(--marigold); } .band .c-peacock { color: var(--peacock); } .band .c-royal { color: var(--royal); }
.band .c-bone { color: var(--bone); font-size: .4em; }
.band .c-outline { color: transparent; -webkit-text-stroke: 2px rgba(246, 240, 230, .8); }
.band-b span:not(.c-outline) { font-size: .45em; }


/* =====================================================================
   STUDIO / WORLDS
   ===================================================================== */
.studio-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem 4rem; align-items: end; }
.studio-head .h2 { margin-bottom: 0; }
.studio-head .lead { margin-bottom: .3em; }
.worlds { display: grid; grid-template-columns: 1.35fr 1.35fr 1fr 1fr; gap: 1rem; margin-top: clamp(3rem, 6vw, 4.5rem); }
.world {
  position: relative; border-radius: var(--r-l); padding: 1.7rem; min-height: 370px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  text-decoration: none; overflow: hidden; isolation: isolate;
}
.world h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin: 0; line-height: 1; letter-spacing: -.03em; }
.world p { margin: 0; }
.world-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; }
.world-status { font-size: .8rem; font-weight: 650; padding: .3em .8em; border-radius: 999px; background: rgba(0, 0, 0, .18); }
.world.is-soon .world-status { background: rgba(246, 240, 230, .06); }
.world.is-live { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.world.is-live:hover { transform: translateY(-6px); }
.world.tone-brass { background: var(--rani); color: var(--ink); }
.world.tone-brass-2 { background: var(--marigold); color: var(--ink); }
.world.is-live::after {
  content: ""; position: absolute; z-index: -1; right: -70px; bottom: -70px; width: 240px; height: 240px; border-radius: 50%;
  border: 28px solid rgba(14, 10, 28, .12); transition: transform .8s var(--ease-out);
}
.world.tone-brass-2::after { border-color: rgba(14, 10, 28, .1); }
.world.is-live:hover::after { transform: scale(1.15) rotate(20deg); }
.world-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.world-link svg { transition: transform .35s var(--ease-out); }
.world.is-live:hover .world-link svg { transform: translateX(5px); }
.world.is-soon { border: 1.5px dashed var(--line-strong); color: var(--muted); background: rgba(23, 18, 48, .5); }
.world.is-soon h3 { color: var(--bone); }
.world-meter-label { font-size: .82rem; margin-top: .55rem !important; }
@media (max-width: 1000px) { .studio-head { grid-template-columns: 1fr; } }
@media (max-width: 1160px) { .worlds { grid-template-columns: 1fr 1fr; } .world { min-height: 290px; } }
@media (max-width: 560px) { .worlds { grid-template-columns: 1fr; } .world { min-height: 240px; } }

/* =====================================================================
   FILMS + CLAPPERBOARD
   ===================================================================== */
.films { position: relative; }
.films-stage {
  position: relative; overflow: clip;
  background: #0B0818;
}
.films-content { position: relative; padding-block: clamp(5.5rem, 10vw, 8.5rem); }

.clapper-layer {
  position: absolute; inset: 0; z-index: 6;
  background: var(--ink-deep);
  clip-path: circle(var(--r, 250vmax) at var(--cx, 50%) var(--cy, 50vh));
  transition: clip-path 1.1s var(--ease-io);
}
.clapper-layer[hidden] { display: none; }
.clapper-layer.is-open { clip-path: circle(0px at var(--cx, 50%) var(--cy, 50vh)); }
.clapper-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; padding: 90px 1rem 1rem; }
.clapper-sticky::before { /* flat spotlight disc */
  content: ""; position: absolute; left: 50%; top: 54%; width: min(92vmin, 820px); aspect-ratio: 1; border-radius: 50%;
  background: #17112F; transform: translate(-50%, -50%) scale(.9); animation: disc 6s var(--ease-io) infinite alternate;
}
@keyframes disc { to { transform: translate(-50%, -50%) scale(1); } }
.clapper-shake { width: min(640px, 90vw); }
.clapper-layer.is-flash .clapper-shake { animation: shake .36s ease-out; }
.clapper { position: relative; transform: rotate(-2.5deg); filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .65)); transition: transform 1.1s var(--ease-io); }
.clapper-layer.is-open .clapper { transform: rotate(-2.5deg) scale(.5); }
.clapper-sticks { position: relative; height: clamp(46px, 8.6vw, 66px); }
.clapper-arm, .clapper-base { position: absolute; left: 0; right: 0; height: 50%; border: 2.5px solid #0A0812; border-radius: 5px; }
.clapper-arm {
  top: 0; transform-origin: 2.5% 100%; transform: rotate(-24deg);
  background: linear-gradient(118deg,
    var(--rani) 0 11%, #0F0C1A 11% 19%, var(--marigold) 19% 30%, #0F0C1A 30% 38%,
    var(--peacock) 38% 49%, #0F0C1A 49% 57%, var(--royal) 57% 68%, #0F0C1A 68% 76%,
    var(--paper) 76% 87%, #0F0C1A 87% 100%);
  transition: transform .13s cubic-bezier(.8, 0, 1, .45);
}
.clapper-base {
  bottom: 0; filter: saturate(.85) brightness(.9);
  background: linear-gradient(62deg,
    var(--rani) 0 11%, #0F0C1A 11% 19%, var(--marigold) 19% 30%, #0F0C1A 30% 38%,
    var(--peacock) 38% 49%, #0F0C1A 49% 57%, var(--royal) 57% 68%, #0F0C1A 68% 76%,
    var(--paper) 76% 87%, #0F0C1A 87% 100%);
}
.clapper.is-armed .clapper-arm { transform: rotate(-28deg); transition: transform .4s var(--ease-out); }
.clapper.is-clapped .clapper-arm { transform: rotate(0deg); }
.clapper-hinge { position: absolute; left: 1.2%; bottom: 20%; width: 13px; height: 13px; border-radius: 50%; background: #C9C4D6; border: 2px solid #0A0812; z-index: 2; }
.clapper-board {
  background: var(--paper); color: #16121F;
  border: 2.5px solid #0A0812; border-top: 0; border-radius: 0 0 14px 14px;
  padding: clamp(1rem, 2.5vw, 1.6rem); display: grid; gap: clamp(.5rem, 1.4vw, .85rem);
}
.cb-row, .cb-cell { display: flex; align-items: baseline; gap: .9rem; min-width: 0; }
.cb-row { border-bottom: 2px solid #16121F; padding-bottom: .5rem; }
.cb-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 2px solid #16121F; }
.cb-grid-2 { grid-template-columns: 1.6fr 1fr; }
.cb-cell { padding: .2rem .8rem .5rem; flex-direction: column; gap: 0; }
.cb-cell:first-child { padding-left: 0; }
.cb-cell + .cb-cell { border-left: 2px solid #16121F; }
.cb-label { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: clamp(.66rem, 1.4vw, .88rem); }
.cb-write {
  font-family: var(--f-hand); font-weight: 700; font-size: clamp(1.4rem, 3.7vw, 2.4rem); line-height: 1.05; white-space: nowrap; color: #2B1E6B;
  clip-path: inset(0 100% 0 0); transition: clip-path .5s steps(14, end); transition-delay: calc(var(--i, 0) * .15s + .1s);
}
.clapper.is-writing .cb-write { clip-path: inset(-12% -4% -12% 0); }
.cb-tc-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cb-tc {
  font-weight: 800; font-variant-numeric: tabular-nums; font-size: clamp(1rem, 2.8vw, 1.55rem); letter-spacing: .05em;
  color: #FF5C9E; background: #0C0916; padding: .3em .65em; border-radius: 6px;
  text-shadow: 0 0 10px rgba(255, 61, 139, .75);
}
.clapper.is-clapped .cb-tc { color: #FFD27A; text-shadow: 0 0 10px rgba(255, 178, 36, .8); }
.cb-foot { margin: 0; font-family: var(--f-hand); font-weight: 500; font-size: clamp(1.1rem, 2.3vw, 1.45rem); color: #4E4760; }
.clapper-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.clapper-layer.is-flash .clapper-flash { animation: flash .45s ease-out; }
@keyframes flash { 0% { opacity: .5; } 100% { opacity: 0; } }
@keyframes shake { 0% { transform: translate(0, 0); } 25% { transform: translate(-6px, 4px); } 50% { transform: translate(5px, -3px); } 75% { transform: translate(-2px, 1px); } 100% { transform: translate(0, 0); } }
.iris-ring {
  position: absolute; z-index: 7; pointer-events: none; left: var(--cx, 50%); top: var(--cy, 50vh);
  width: calc(var(--r, 0px) * 2); height: calc(var(--r, 0px) * 2); margin: calc(var(--r, 0px) * -1) 0 0 calc(var(--r, 0px) * -1);
  border-radius: 50%; border: 3px solid var(--marigold);
  outline: 10px solid var(--rani); outline-offset: 6px;
  opacity: 0; transform: scale(1);
}
.films-stage.is-revealing .iris-ring { opacity: 1; transform: scale(0); transition: transform 1.1s var(--ease-io), opacity .15s; }

.films-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.films-head .h2 { margin-bottom: .2em; font-size: clamp(3rem, 8vw, 6.4rem); }
.films-sub { margin: 0; color: var(--muted); max-width: 42ch; }
.clap-again { font-size: .9rem; }
.film-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(3rem, 5vw, 4rem) clamp(1.5rem, 2.6vw, 2.2rem); margin-top: clamp(3rem, 6vw, 4.5rem); }
.frame { --tilt: 0deg; position: relative; transform: rotate(var(--tilt)); transition: opacity .8s var(--ease-out), transform .6s var(--ease-out); }
.frame.is-featured { grid-column: 1 / -1; }
.frame:hover { transform: rotate(0deg) translateY(-6px); }
.frame-btn { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.frame-strip { display: block; position: relative; background: #050409; padding: 22px 10px; border-radius: 6px; box-shadow: 0 30px 50px -10px rgba(0, 0, 0, .6); }
.frame.is-featured .frame-strip { padding: 26px 12px; }
.frame-strip::before, .frame-strip::after {
  content: ""; position: absolute; left: 10px; right: 10px; height: 9px;
  background: repeating-linear-gradient(90deg, rgba(246, 240, 230, .8) 0 8px, transparent 8px 18px); border-radius: 2px;
}
.frame-strip::before { top: 7px; } .frame-strip::after { bottom: 7px; }
.tape {
  position: absolute; top: -12px; left: 50%; width: 110px; height: 28px; z-index: 2;
  background: rgba(246, 240, 230, .7); transform: translateX(-50%) rotate(-3deg);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 45%);
}
.frame-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.frame.is-featured .frame-img { aspect-ratio: 21 / 8; }
.frame-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.frame-btn:hover .frame-img img, .frame-btn:hover .poster { transform: scale(1.04); }
.poster {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: .35rem; text-align: center;
  background: var(--ink-deep); transition: transform 1s var(--ease-out); isolation: isolate;
}
.poster::before, .poster::after {
  content: ""; position: absolute; top: 50%; width: min(52%, 250px); aspect-ratio: 1; border-radius: 50%; z-index: -1;
  transition: transform 1s var(--ease-out);
}
.poster::before { left: 40%; background: var(--accent); transform: translate(-50%, -50%); }
.poster::after { left: 60%; background: var(--accent2, var(--royal)); transform: translate(-50%, -50%); mix-blend-mode: screen; }
.frame.is-featured .poster::before, .frame.is-featured .poster::after { width: min(34%, 360px); }
.frame.is-featured .poster::before { left: 43%; } .frame.is-featured .poster::after { left: 57%; }
.frame-btn:hover .poster::before { transform: translate(-58%, -50%); }
.frame-btn:hover .poster::after { transform: translate(-42%, -50%); }
.poster-title { position: relative; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1; letter-spacing: -.03em; background: var(--ink); color: var(--bone); padding: .2em .45em .25em; }
.frame.is-featured .poster-title { font-size: clamp(2.4rem, 6.4vw, 5rem); }
.poster-deva { position: relative; font-family: var(--f-deva); font-size: clamp(1rem, 1.8vw, 1.35rem); background: var(--ink); color: var(--marigold); padding: 0 .5em; line-height: 1.5; }
.frame.is-featured .poster-deva { font-size: clamp(1.3rem, 2.4vw, 1.9rem); }
.frame-status {
  position: absolute; top: 14px; right: -10px; z-index: 3; font-size: .8rem; font-weight: 700;
  padding: .35em .85em; border-radius: 999px; transform: rotate(4deg);
  background: var(--marigold); color: var(--ink); box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}
.frame-status.is-writing { background: var(--peacock); }
.frame-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.1rem; }
.frame-title { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; line-height: 1.1; margin: 0; letter-spacing: -.03em; }
.frame.is-featured .frame-title { font-size: 1.9rem; }
.frame-genre { font-size: .88rem; color: var(--muted); text-align: right; }
.frame-note { display: flex; align-items: flex-start; gap: .35rem; margin: .45rem 0 0; font-family: var(--f-hand); font-weight: 500; font-size: 1.35rem; line-height: 1.15; color: #EDE5F7; }
.frame-note svg { width: 38px; height: 24px; flex: none; margin-top: .1rem; transform: scaleY(-1) rotate(8deg); }
.frame-note path { fill: none; stroke: var(--marigold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.js .films-stage:not(.is-revealed) .frame { opacity: 0; transform: translateY(30px) rotate(calc(var(--tilt) * 3)); }
.js .films-stage.is-revealed .frame { transition-delay: calc(var(--i, 0) * .1s + .35s); }
.js .films-stage.is-revealed .frame:hover { transition-delay: 0s; }
@media (max-width: 1000px) { .film-board { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
  .film-board { grid-template-columns: 1fr; }
  .frame.is-featured .frame-img { aspect-ratio: 4 / 3; }
  .frame-status { right: -4px; }
  .cb-grid-2 { grid-template-columns: 1fr; }
  .cb-grid-2 .cb-cell + .cb-cell { border-left: 0; border-top: 2px solid #16121F; padding-left: 0; }
}

/* =====================================================================
   MAKING-OF / PROCESS REEL
   ===================================================================== */
.making { background: var(--ink); overflow-x: clip; }
.making-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(2.5rem, 6vw, 6rem); }
.making-aside { position: sticky; top: 110px; align-self: start; }
.film-big {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(3.6rem, 9vw, 7.6rem); line-height: .9; letter-spacing: -.05em; margin: 0;
  color: var(--bone); text-shadow: .05em .05em 0 var(--rani);
}
.film-deva { font-family: var(--f-deva); font-size: clamp(1.7rem, 3vw, 2.5rem); color: var(--marigold); margin: .4rem 0 1.1rem; line-height: 1.3; }
.film-tagline { font-family: var(--f-hand); font-weight: 700; font-size: clamp(1.5rem, 2.3vw, 1.9rem); line-height: 1.15; margin: 0 0 1.1rem; max-width: 24ch; color: var(--peacock); }
.film-logline { color: #D5CEE5; max-width: 44ch; margin: 0 0 2rem; }
.progress { margin: 0 0 1.4rem; }
.progress-label { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; color: var(--muted); margin-bottom: .6rem; }
.progress-label strong { color: var(--bone); font-weight: 650; }
.progress-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
.progress-bar span { height: 6px; border-radius: 6px; background: var(--line-strong); }
.progress-bar .is-done { background: var(--peacock); }
.progress-bar .is-rolling { background: var(--marigold); }
.making-kicker { margin: 0 0 2.4rem; font-family: var(--f-hand); font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.2rem); color: var(--marigold); line-height: 1.1; }

.reel { list-style: none; margin: 0; padding: 0 0 0 clamp(3.4rem, 6.5vw, 4.8rem); position: relative; }
.reel::before {
  content: ""; position: absolute; top: 8px; bottom: 0; left: clamp(1.1rem, 2.2vw, 1.6rem); width: 28px;
  background:
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(246, 240, 230, .6) 7px 14px, transparent 14px 23px) 4px 0 / 5px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(246, 240, 230, .6) 7px 14px, transparent 14px 23px) calc(100% - 4px) 0 / 5px 100% no-repeat,
    #050409;
  border-radius: 4px;
  -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent); mask-image: linear-gradient(180deg, #000 85%, transparent);
}
.reel::after { /* scroll-linked fill along the film spine */
  content: ""; position: absolute; top: 8px; bottom: 0; left: calc(clamp(1.1rem, 2.2vw, 1.6rem) + 12px); width: 4px;
  background: var(--marigold); transform-origin: top; transform: scaleY(var(--fill, 0));
}
.stage { position: relative; padding-bottom: clamp(3.5rem, 6vw, 4.8rem); }
.stage-marker {
  position: absolute; top: -2px; z-index: 1; left: calc(-1 * clamp(3.4rem, 6.5vw, 4.8rem) + clamp(1.1rem, 2.2vw, 1.6rem) + 14px);
  transform: translateX(-50%); width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 700; font-size: .95rem;
  background: var(--ink); border: 2px solid var(--line-strong); color: var(--muted);
}
.stage.is-done .stage-marker { background: var(--peacock); border-color: var(--peacock); color: var(--ink); }
.stage.is-rolling .stage-marker { background: var(--marigold); border-color: var(--marigold); color: var(--ink); }
.stage.is-rolling .stage-marker::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--marigold); animation: pulse 2s var(--ease-out) infinite; }
@keyframes pulse { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.stage-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.stage h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.5rem, 2.5vw, 2.05rem); line-height: 1.1; margin: 0; letter-spacing: -.03em; }
.stage-badge { font-size: .78rem; font-weight: 700; padding: .3em .8em; border-radius: 999px; border: 1.5px solid var(--line-strong); color: var(--muted); }
.stage.is-done .stage-badge { border-color: var(--peacock); color: var(--peacock); }
.stage.is-rolling .stage-badge { border-color: var(--marigold); color: var(--marigold); }
.stage-when { font-family: var(--f-hand); font-weight: 700; font-size: 1.5rem; color: var(--rani); margin: .2rem 0 .6rem; line-height: 1.1; }
.stage.is-next .stage-when { color: var(--muted); }
.stage-summary { margin: 0 0 1.3rem; max-width: 60ch; color: #DCD5EA; }
.stage.is-next .stage-summary { color: var(--muted); }
.excerpt {
  position: relative; margin: 0 0 1.6rem; max-width: 570px; background: var(--paper); color: #16121F;
  padding: 1.7rem 1.7rem 1.3rem 2.3rem; border-radius: 3px; transform: rotate(-.7deg); box-shadow: 0 22px 40px rgba(0, 0, 0, .45);
}
.excerpt::before { content: ""; position: absolute; left: 1.35rem; top: 0; bottom: 0; width: 1.5px; background: rgba(255, 61, 139, .55); }
.excerpt::after { content: ""; position: absolute; top: -12px; right: 16%; width: 96px; height: 26px; background: rgba(19, 194, 176, .5); transform: rotate(4deg); }
.excerpt p { font-family: var(--f-script); font-size: 1rem; line-height: 1.7; margin: 0 0 .8rem; }
.excerpt footer { font-family: var(--f-hand); font-weight: 700; font-size: 1.2rem; color: #5A5170; }
.notes { list-style: none; display: flex; flex-wrap: wrap; gap: .9rem; margin: 0 0 1.5rem; padding: 0; }
.notes li {
  font-family: var(--f-hand); font-weight: 700; font-size: 1.3rem; line-height: 1.1; max-width: 16ch;
  padding: .75rem .95rem .85rem; border-radius: 3px; box-shadow: 0 12px 20px rgba(0, 0, 0, .3);
  background: #FFE3A3; color: #3A2A00; transform: rotate(-1.5deg);
}
.notes li:nth-child(3n+2) { background: #FFC8DE; color: #4A0F28; transform: rotate(1.5deg); }
.notes li:nth-child(3n) { background: #B7F0E8; color: #053B35; transform: rotate(-.5deg); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.shot { margin: 0; background: var(--paper); padding: .5rem .5rem .15rem; border-radius: 3px; box-shadow: 0 14px 26px rgba(0, 0, 0, .4); transform: rotate(.8deg); }
.shot:nth-child(2n) { transform: rotate(-1deg); }
.shot-img { aspect-ratio: 4 / 3; background: var(--surface); overflow: hidden; position: relative; }
.shot-img img, .shot-img iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.shot-ph {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: .6rem; color: #8F87AB; font-size: .8rem;
  background: var(--surface);
}
.shot-ph svg { width: 24px; height: 24px; margin: 0 auto .3rem; }
.shot figcaption { font-family: var(--f-hand); font-weight: 700; font-size: 1.12rem; color: #3B3350; padding: .35rem .2rem .3rem; line-height: 1.1; }

/* four yugas */
.yugas { margin-top: clamp(4.5rem, 9vw, 7rem); padding-top: clamp(3.5rem, 7vw, 5rem); border-top: 1px solid var(--line); }
.yugas-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 3rem); margin: 0 0 .4rem; letter-spacing: -.03em; }
.yugas-sub { color: var(--muted); max-width: 54ch; margin: 0 0 2rem; }
.yuga-legend { display: flex; gap: 1.4rem; font-size: .85rem; color: var(--muted); margin: 0 0 1.4rem; }
.yuga-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .45rem; background: var(--marigold); vertical-align: 0; }
.yuga-legend span + span::before { background: var(--royal); }
.yuga {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 300px); align-items: center; gap: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(1rem, 2.2vw, 1.4rem); opacity: .15; transition: opacity 1s var(--ease-out);
}
.yuga.is-in { opacity: 1; }
.yuga-line { font-family: var(--f-deva); font-size: clamp(1.5rem, 3.4vw, 2.7rem); margin: 0; line-height: 1.4; }
.yuga-gloss { margin: .1rem 0 0; color: var(--muted); font-size: .95rem; }
.yuga-gap { position: relative; height: 26px; }
.yuga-gap::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--line-strong); }
.dot { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%); transition: left 1.4s var(--ease-io) .2s; }
.dot.dev { background: var(--marigold); left: 50%; box-shadow: 0 0 16px rgba(255, 178, 36, .7); }
.dot.asura { background: var(--royal); left: 50%; mix-blend-mode: screen; box-shadow: 0 0 16px rgba(75, 99, 255, .8); }
.yuga.is-in .dot.dev { left: calc(50% - var(--gap) / 2); }
.yuga.is-in .dot.asura { left: calc(50% + var(--gap) / 2); }
.yuga-final {
  position: relative; margin: clamp(3rem, 6vw, 4.5rem) auto 0; width: fit-content;
  font-family: var(--f-deva); font-size: clamp(4.5rem, 14vw, 10rem); line-height: 1;
  padding: .45em .6em .35em; opacity: .1; transition: opacity 1.2s var(--ease-out);
}
.yuga-final.is-in { opacity: 1; }
.yuga-final::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 4px;
  border: 4px solid var(--marigold);
  transform: rotate(-8deg) scale(.5); opacity: 0; transition: transform 1.4s var(--ease-io) .3s, opacity .8s .3s;
}
.yuga-final.is-in::before { transform: rotate(-8deg) scale(1); opacity: 1; }

/* cast */
.cast-wrap { margin-top: clamp(4.5rem, 8vw, 6rem); }
.cast-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 3rem); margin: 0 0 1.8rem; letter-spacing: -.03em; }
.cast { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 1rem; }
@media (max-width: 560px) { .cast { grid-template-columns: 1fr 1fr; gap: .7rem; } .cast-text { padding: 1rem 1rem .3rem; } .cast-open { margin: auto 1rem 1rem; } .cast-name { font-size: 1.1rem; } .cast-role { font-size: 1.2rem; } .cast-note { font-size: .86rem; } }
.cast li { --c: var(--marigold); }
.cast li:nth-child(5n+2) { --c: var(--royal); } .cast li:nth-child(5n+3) { --c: var(--rani); } .cast li:nth-child(5n+4) { --c: var(--peacock); } .cast li:nth-child(5n+5) { --c: #FF7A45; }
.cast-card {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; text-align: left; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 0; overflow: hidden;
}
.cast-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); z-index: 2; }
.cast-photo { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.cast-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.cast-mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 3.4rem; letter-spacing: -.04em; color: var(--c); transition: transform .8s var(--ease-out); }
.cast-text { display: block; padding: 1.2rem 1.3rem .4rem; }
.cast-name { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; line-height: 1.1; letter-spacing: -.02em; }
.cast-role { display: block; font-family: var(--f-hand); font-weight: 700; font-size: 1.35rem; color: var(--c); margin: .25rem 0 .55rem; line-height: 1; }
.cast-note { display: block; font-size: .93rem; color: var(--muted); }
.cast-actor { display: block; font-size: .82rem; margin-top: .6rem; color: #C9C1DB; }
.cast-open { display: inline-flex; align-items: center; gap: .45rem; margin: auto 1.3rem 1.2rem; padding-top: .8rem; font-weight: 700; font-size: .88rem; color: var(--c); }
.cast-open svg { width: 17px; height: 17px; transition: transform .35s var(--ease-out); }
.cast.is-clickable .cast-card { cursor: pointer; transition: transform .45s var(--ease-out), border-color .3s; }
.cast.is-clickable .cast-card:hover, .cast.is-clickable .cast-card:focus-visible { transform: translateY(-6px); border-color: var(--c); }
.cast.is-clickable .cast-card:hover .cast-photo img, .cast.is-clickable .cast-card:hover .cast-mono { transform: scale(1.08); }
.cast.is-clickable .cast-card:hover .cast-open svg { transform: translateX(5px); }
.cast.is-clickable .cast-card:active { transform: translateY(-2px) scale(.985); }
.cast-hint { margin: -1rem 0 1.4rem; color: var(--muted); font-size: .95rem; }
/* a light sweeps across each card once in a while, so it reads as something to press */
.cast.is-clickable .cast-photo::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: rgba(246, 240, 230, .1); transform: skewX(-18deg);
  animation: castShine 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .45s + 1s);
}
@keyframes castShine { 0%, 82% { left: -40%; } 100% { left: 130%; } } /* own name: "sweep" belongs to the countdown */
@media (prefers-reduced-motion: reduce) { .cast.is-clickable .cast-photo::after { animation: none; display: none; } }
@media (max-width: 900px) { .making-grid { grid-template-columns: 1fr; } .making-aside { position: static; } .yuga { grid-template-columns: 1fr; } .yuga-gap { max-width: 260px; } }

/* =====================================================================
   MUSIC
   ===================================================================== */
.music { background: #3346E0; color: #fff; overflow: hidden; }
.music .lead { color: #fff; }
.music .h2 { color: #fff; }
.music-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.eq-wrap { position: relative; margin-top: 1.8rem; border-radius: var(--r-l); padding: 1.4rem; background: #1F2DA8; }
#eq { width: 100%; height: 190px; display: block; }
.damru-btn {
  margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .7rem; padding: .85rem 1.45rem .85rem 1.1rem;
  border-radius: 999px; cursor: pointer; border: 0; background: var(--marigold); color: var(--ink); font-weight: 700; font-size: .98rem;
  transition: transform .25s var(--ease-out);
}
.damru-btn:hover { transform: translateY(-2px); }
.damru-btn:active { transform: scale(.96); }
.damru-btn.is-hit svg { animation: rattle .4s ease-out; }
@keyframes rattle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-20deg); } 50% { transform: rotate(18deg); } 75% { transform: rotate(-9deg); } }
.tracks-title { font-family: var(--f-hand); font-weight: 700; font-size: 2rem; margin: 0 0 1rem; color: var(--marigold); }
.tracks { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.track {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.1rem;
  padding: .95rem 1.15rem; border-radius: var(--r-m); background: #1F2DA8; border: 1.5px solid transparent;
  transition: border-color .3s, transform .3s var(--ease-out);
}
.track:hover { transform: translateX(4px); }
.track.is-playing { border-color: var(--marigold); }
.track-play { width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--marigold); color: var(--ink); }
.track.is-playing .track-play { background: var(--rani); color: #fff; }
.track-play .i-pause { display: none; }
.track.is-playing .track-play .i-play { display: none; }
.track.is-playing .track-play .i-pause { display: block; }
.track-title { margin: 0; font-weight: 700; font-size: 1.08rem; line-height: 1.2; }
.track-meta { margin: 0; font-size: .88rem; color: rgba(255, 255, 255, .72); }
.track-status { font-size: .78rem; font-weight: 700; padding: .3em .75em; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; }
@media (max-width: 900px) { .music-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   PERSONAL PORTFOLIO
   ===================================================================== */
.personal { background: var(--marigold); color: var(--ink); overflow: hidden; }
.personal .lead { color: var(--ink); }
.personal .btn-brass { background: var(--ink); color: var(--marigold); }
.personal .btn-brass:hover { background: var(--rani); color: var(--ink); }
.personal-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 6rem); align-items: center; }
.pinned {
  position: relative; display: block; justify-self: center; width: min(100%, 440px); text-decoration: none;
  transform: perspective(1100px) translateX(calc((1 - var(--v, 1)) * -22vw)) rotateY(calc((1 - var(--v, 1)) * 55deg)) rotate(calc(-3deg - (1 - var(--v, 1)) * 18deg)) scale(calc(.6 + var(--v, 1) * .4));
  transition: transform .5s var(--ease-out);
}
.pinned img { border-radius: 4px; box-shadow: 0 40px 70px rgba(0, 0, 0, .6); }
.pinned:hover { transform: perspective(1100px) rotate(0deg) scale(1.03); }
.pin {
  position: absolute; z-index: 2; top: -12px; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%;
  background: var(--rani); border: 3px solid var(--ink); box-shadow: 0 6px 10px rgba(0, 0, 0, .35);
}
.pinned-sticker {
  position: absolute; right: -16px; bottom: 12%; z-index: 2; width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center; background: var(--rani); color: var(--ink);
  font-family: var(--f-display); font-weight: 800; font-size: 1rem; letter-spacing: -.02em;
  transform: rotate(calc(12deg + (1 - var(--v, 1)) * 540deg)) scale(calc(var(--v, 1) * 1)); transition: transform .5s var(--ease-out); box-shadow: 0 12px 24px rgba(0, 0, 0, .45);
}
.pinned:hover .pinned-sticker { transform: rotate(-10deg) scale(1.08); }
@media (max-width: 900px) { .personal-grid { grid-template-columns: 1fr; } .personal-copy { order: -1; } .pinned-sticker { right: -6px; } }

/* =====================================================================
   ABOUT
   ===================================================================== */
.about-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(3rem, 7vw, 6rem); align-items: center; }
.portrait {
  position: relative; margin: 0; justify-self: center; width: min(100%, 370px); background: var(--paper); padding: .9rem .9rem 0; border-radius: 4px; box-shadow: 0 34px 60px rgba(0, 0, 0, .55);
  transform: perspective(1100px) translate3d(calc((1 - var(--v, 1)) * -18vw), calc((1 - var(--v, 1)) * -12vh), 0) rotateY(calc((1 - var(--v, 1)) * -50deg)) rotate(calc(2.5deg + (1 - var(--v, 1)) * -24deg)) scale(calc(.65 + var(--v, 1) * .35));
  transition: transform .5s var(--ease-out);
}
.portrait-img {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; display: grid; place-items: center;
  background: var(--royal);
}
.portrait-img img { width: 100%; height: 100%; object-fit: cover; }
.ph-mark { font-family: var(--f-hand); font-weight: 700; font-size: 1.5rem; color: rgba(255, 255, 255, .8); }
.portrait figcaption { font-family: var(--f-hand); font-weight: 700; font-size: 1.45rem; color: #2E2740; text-align: center; padding: .6rem 0 .9rem; }
.about-copy p:not(.lead) { color: var(--muted); max-width: 54ch; }
.stickies { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0 0; padding: 0; }
.sticky { font-family: var(--f-hand); font-weight: 700; font-size: 1.35rem; line-height: 1.1; padding: .9rem 1rem; max-width: 190px; box-shadow: 0 14px 24px rgba(0, 0, 0, .35); border-radius: 3px; }
.sticky.s1 { background: var(--marigold); color: var(--ink); transform: rotate(-3deg); }
.sticky.s2 { background: var(--peacock); color: #03211E; transform: rotate(2.5deg); }
.sticky.s3 { background: var(--rani); color: #fff; transform: rotate(-1deg); }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   CONTACT + FOOTER
   ===================================================================== */
.contact { position: relative; background: var(--ink); color: var(--ink); }
.contact-stage { position: relative; height: 230vh; }
.contact-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; align-items: center; isolation: isolate; perspective: 900px; }
.contact-flood { position: absolute; inset: 0; z-index: -1; background: var(--rani); clip-path: circle(calc(var(--flood, 0) * 78%) at 50% 50%); }
.contact-inner { padding-top: 70px; }
.contact .lead { color: var(--ink); }
.cw {
  display: inline-block; opacity: var(--e, 0); transform-origin: 50% 60%;
  transform: translate3d(0, calc((1 - var(--e, 0)) * -30vh), 0) scale(calc(1 + (1 - var(--e, 0)) * 5)) rotate(calc((1 - var(--e, 0)) * var(--rot, 10) * 1deg));
  filter: blur(calc((1 - var(--e, 0)) * 12px));
  will-change: transform, opacity, filter;
}
.ring-svg { position: absolute; left: -.34em; right: -.34em; top: -.14em; bottom: -.1em; width: calc(100% + .68em); height: calc(100% + .24em); overflow: visible; transform: rotate(-5deg); pointer-events: none; }
.ring-svg ellipse { fill: none; stroke: var(--bone); stroke-width: 5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--ring, 0)); }
.contact-lead { opacity: var(--dd, 0); transform: translateY(calc((1 - var(--dd, 0)) * 40px)); margin: 0; }
.contact-title { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.5rem, 7.4vw, 6.4rem); line-height: 1; letter-spacing: -.05em; margin: 0 0 clamp(1.8rem, 4vw, 3rem); max-width: 14ch; text-wrap: balance; }
.ring-word { position: relative; display: inline-block; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: start; }
.contact-mail {
  display: inline-block; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.25rem, 2.8vw, 2rem); letter-spacing: -.03em;
  text-decoration: none; line-height: 1.3; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 3px no-repeat; padding-bottom: .2rem;
  overflow-wrap: anywhere; transition: color .3s;
}
.contact-mail:hover { color: var(--bone); }
.contact-loc { color: rgba(14, 10, 28, .75); margin: .9rem 0 1.4rem; }
.socials { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; }
.socials a { display: inline-block; padding: .55em 1.15em; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .94rem; border: 2px solid var(--ink); transition: background-color .25s, color .25s; }
.socials a:hover { background: var(--ink); color: var(--rani); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } .contact-stage { height: 210vh; } }

.footer { position: relative; padding: clamp(4rem, 8vw, 6rem) 0 2.4rem; font-size: .95rem; color: var(--muted); overflow: hidden; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--spectrum); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.6rem; border-top: 1px solid var(--line); font-size: .9rem; }
.footer p { margin: 0; }
.footer-deva { font-family: var(--f-deva); font-size: 1.35rem; color: var(--marigold); }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--bone); }

/* =====================================================================
   FILM ROOM + REEL MODAL
   ===================================================================== */
.room { position: fixed; inset: 0; z-index: 90; background: rgba(7, 5, 15, .75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .4s ease; }
.room[hidden] { display: none; }
.room.is-open { opacity: 1; }
.room-panel {
  position: absolute; inset: clamp(0px, 2.5vw, 2rem); background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-l);
  overflow-y: auto; overscroll-behavior: contain; transform: translateY(30px); transition: transform .55s var(--ease-out);
}
.room.is-open .room-panel { transform: none; }
.room-close { position: sticky; top: 1rem; float: right; margin: 1rem 1rem 0 0; z-index: 3; background: var(--ink); }
.room-body { padding: clamp(1.5rem, 5vw, 4.5rem); clear: both; }
.room-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.room-hero .frame-strip { transform: rotate(1.5deg); }
.room-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.room-meta li { font-size: .85rem; font-weight: 600; padding: .3em .85em; border-radius: 999px; border: 1.5px solid var(--line-strong); color: #D5CDE8; }
.room .reel { max-width: 820px; }
@media (max-width: 800px) { .room-panel { border-radius: 0; inset: 0; } .room-hero { grid-template-columns: 1fr; } }
.reel-panel { inset: auto; left: 50%; top: 50%; width: min(1040px, 94vw); transform: translate(-50%, -47%); overflow: visible; background: #000; border-radius: var(--r-l); }
.room.is-open .reel-panel { transform: translate(-50%, -50%); }
.reel-panel .room-close { position: absolute; top: -56px; right: 0; float: none; margin: 0; }
.reel-frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-l); }
.reel-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 190; transform: translate(-50%, calc(100% + 3rem)); visibility: hidden;
  transition: transform .45s var(--ease-out), visibility .45s;
  background: var(--marigold); color: var(--ink); font-weight: 650; font-size: .94rem;
  padding: .85rem 1.25rem; border-radius: 14px; max-width: calc(100vw - 2rem); box-shadow: 0 18px 36px rgba(0, 0, 0, .5);
}
.toast.is-on { transform: translate(-50%, 0); visibility: visible; }

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: auto; } .hero-pin { position: relative; min-height: 100vh; } .hero-statement, .hero-scroll { display: none; }
  .yuga-pin { height: auto !important; } .yuga-stage { position: relative !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* =====================================================================
   HEADING REVEAL (words rise from a mask)
   ===================================================================== */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split .w > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--k, 0) * 55ms); }
.split.in .w > span { transform: none; }

/* =====================================================================
   FOUR YUGAS — full-screen, scroll-driven
   ===================================================================== */
.yugas-main { margin-top: clamp(4rem, 8vw, 6rem); }
.yuga-pin { position: relative; height: 520vh; margin-inline: calc(50% - 50vw); }
.yuga-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink-deep); isolation: isolate; }
.yuga-head { position: absolute; left: var(--gutter); top: 96px; max-width: 34ch; z-index: 3; }
.yuga-head h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: -.03em; margin: 0 0 .3rem; }
.yuga-head p { margin: 0; color: var(--muted); font-size: .95rem; }
.yuga-legend2 { position: absolute; right: var(--gutter); top: 100px; display: flex; gap: 1.2rem; font-size: .85rem; color: var(--muted); z-index: 3; margin: 0; }
.yuga-legend2 span::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: .45rem; background: var(--marigold); vertical-align: -1px; }
.yuga-legend2 span + span::before { background: var(--royal); }
.orb { display: none; }
.realm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.yuga-stage.quake .realm-canvas { animation: quake .55s cubic-bezier(.36, .07, .19, .97); }
@keyframes quake {
  10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(5px, -3px); }
  30%, 50%, 70% { transform: translate(-9px, 4px) scale(1.01); } 40%, 60% { transform: translate(9px, -4px) scale(1.01); }
}
.yuga-head, .yuga-legend2, .yuga-slides, .yuga-ticks { z-index: 3; }
.yuga-slides { text-shadow: 0 2px 18px var(--ink-deep), 0 0 4px var(--ink-deep); }
.orb-old {
  position: absolute; left: 50%; top: 48%; width: min(38vmin, 340px); aspect-ratio: 1; border-radius: 50%;
  transform: translate(calc(-50% + var(--x, 0px)), -50%) scale(var(--os, 1));
  transition: background-color .8s var(--ease-out), transform .9s var(--ease-out);
}
.orb.dev { background: var(--marigold); --x: calc(var(--gap, 0px) * -1); }
.orb.asura { background: var(--royal); --x: var(--gap, 0px); clip-path: inset(0 0 0 var(--clip, 0px)); }
.yuga-stage.is-final .orb { background: var(--rani); --os: 3.2; }
.yuga-stage.is-final .orb.asura { clip-path: inset(0 0 0 0); }
.yuga-slides { position: absolute; left: 50%; bottom: 9vh; width: min(92vw, 980px); transform: translateX(-50%); height: 9.5rem; z-index: 2; }
.yuga-slide { position: absolute; inset: 0; text-align: center; opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.yuga-slide.is-on { opacity: 1; transform: none; }
.yuga-slide .yuga-line { font-family: var(--f-deva); font-size: clamp(1.6rem, 4.2vw, 3.4rem); line-height: 1.35; margin: 0; }
.yuga-slide .yuga-gloss { margin: .3rem 0 0; color: var(--muted); font-size: 1rem; }
.yuga-stage.is-final .yuga-slide { opacity: 0; transition-duration: .3s; }
.yuga-final-word {
  position: absolute; left: 50%; top: 46%; margin: 0; z-index: 2; pointer-events: none;
  font-family: var(--f-deva); font-size: clamp(6.5rem, 24vw, 17rem); line-height: 1; color: var(--bone);
  transform: translate(-50%, -50%) scale(1.6); opacity: 0;
  /* one self, two halves: dev's gold from the left, asura's cold blue from the right */
  text-shadow: -.04em 0 .22em rgba(255, 178, 36, .55), .04em 0 .22em rgba(107, 127, 255, .5), 0 0 .6em rgba(255, 106, 31, .28);
  transition: opacity .3s, transform .3s; will-change: transform, opacity;
}
.yuga-stage.is-lit .yuga-final-word {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
  transition: opacity 1.6s cubic-bezier(.22, 1, .36, 1) .15s, transform 3.4s cubic-bezier(.16, 1, .3, 1) .1s;
  animation: settle 7s ease-in-out 3.5s infinite;
}
@keyframes settle { 50% { transform: translate(-50%, -50%) scale(1.025); } }
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  /* the word condenses out of light on larger screens (a blur is too heavy for phones) */
  .yuga-final-word { filter: blur(18px); transition: opacity .3s, transform .3s, filter .3s; }
  .yuga-stage.is-lit .yuga-final-word { filter: blur(0); transition: opacity 1.6s cubic-bezier(.22, 1, .36, 1) .15s, transform 3.4s cubic-bezier(.16, 1, .3, 1) .1s, filter 2s cubic-bezier(.22, 1, .36, 1) .1s; }
}
.yuga-final-line {
  position: absolute; left: 50%; bottom: 10vh; width: min(92vw, 900px); margin: 0; z-index: 2; text-align: center; pointer-events: none;
  font-family: var(--f-display); font-weight: 600; font-size: clamp(.95rem, 1.6vw, 1.2rem); letter-spacing: .02em; color: rgba(246, 240, 230, .8);
  transform: translate(-50%, 12px); opacity: 0; transition: opacity .3s, transform .3s;
}
.yuga-stage.is-lit .yuga-final-line { opacity: 1; transform: translate(-50%, 0); transition: opacity 1.6s ease 2.6s, transform 1.8s var(--ease-out) 2.6s; letter-spacing: .06em; }
.yuga-stage.is-final .yuga-head, .yuga-stage.is-final .yuga-legend2 { opacity: 0; }
.yuga-head, .yuga-legend2 { transition: opacity .6s; }
.yuga-ticks { position: absolute; right: var(--gutter); bottom: 4vh; display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; z-index: 3; }
.yuga-ticks li { width: 26px; height: 4px; background: var(--line-strong); transition: background-color .4s; }
.yuga-ticks li.is-on { background: var(--marigold); }
.yuga-stage.is-final .yuga-ticks { opacity: 0; transition: opacity .6s; }
@media (max-width: 700px) {
  .yuga-legend2 { top: auto; bottom: 4vh; left: var(--gutter); right: auto; }
  .orb { top: 46%; }
  .yuga-slides { bottom: 11vh; }
}

/* =====================================================================
   CINEMATIC TITLES — colour bar wipes across, letters flip up in 3D
   ===================================================================== */
.tw { position: relative; perspective: 700px; }
.tw-word { display: inline-block; white-space: nowrap; }
.tw .ch { display: inline-block; transform-origin: 50% 100%; backface-visibility: hidden; }
.js .tw:not(.in) .ch { opacity: 0; transform: translate3d(0, .5em, -1.2em) rotateX(-95deg); }
.tw.in .ch {
  opacity: 1; transform: none;
  transition: transform 1.1s cubic-bezier(.16, 1.2, .3, 1), opacity .4s ease;
  transition-delay: calc(.42s + var(--c) * 26ms);
}
.tw::after {
  content: ""; position: absolute; left: -.12em; right: -.12em; top: -.04em; bottom: -.02em; z-index: 2; pointer-events: none;
  background: var(--wipe, var(--marigold)); transform: scaleX(0); transform-origin: left;
}
.tw.in::after { animation: wipe 1.05s var(--ease-io) forwards; }
@keyframes wipe {
  0% { transform: scaleX(0); transform-origin: left; }
  46% { transform: scaleX(1); transform-origin: left; }
  54% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
.studio { --wipe: var(--marigold); }
.films { --wipe: var(--rani); }
.making { --wipe: var(--peacock); }
.music { --wipe: var(--marigold); }
.personal { --wipe: var(--ink); }
.about { --wipe: var(--rani); }

/* copy that rises in a stagger */
.js .rise:not(.in) > * { opacity: 0; transform: translateY(40px); }
.rise.in > * { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); }
.rise.in > :nth-child(1) { transition-delay: .05s; } .rise.in > :nth-child(2) { transition-delay: .55s; }
.rise.in > :nth-child(3) { transition-delay: .7s; } .rise.in > :nth-child(4) { transition-delay: .85s; } .rise.in > :nth-child(5) { transition-delay: 1s; }
.rise > .h2 { transform: none !important; opacity: 1 !important; }

/* sticky notes slap onto the page */
.js .stickies:not(.in) .sticky { scale: 0; translate: 0 -120px; }
.stickies.in .sticky { scale: 1; translate: 0 0; transition: scale .8s cubic-bezier(.34, 1.7, .64, 1), translate .8s cubic-bezier(.34, 1.5, .64, 1); }
.stickies.in .sticky:nth-child(2) { transition-delay: .15s; } .stickies.in .sticky:nth-child(3) { transition-delay: .3s; }

/* tracks slide in like a tape deck loading */
.js .tracks:not(.in) .track { opacity: 0; translate: 120px 0; }
.tracks.in .track { opacity: 1; translate: 0 0; transition: translate .9s var(--ease-out), opacity .6s, border-color .3s, transform .3s var(--ease-out); }
.tracks.in .track:nth-child(2) { transition-delay: .12s; } .tracks.in .track:nth-child(3) { transition-delay: .24s; } .tracks.in .track:nth-child(4) { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .contact-stage { height: auto; } .contact-pin { position: relative; min-height: 100vh; }
  .cw { filter: none; }
}

/* =====================================================================
   SHARED BITS
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--peacock); margin-right: .55rem; vertical-align: 1px; animation: livepulse 2s ease-out infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(19, 194, 176, .7); } 100% { box-shadow: 0 0 0 10px rgba(19, 194, 176, 0); } }
.btn-ink { background: var(--ink); color: var(--bone); }
.btn-ink:hover { background: var(--bone); color: var(--ink); }
.btn:disabled { opacity: .6; cursor: progress; }

/* viewfinder status line */
.vf-status { position: absolute; left: 42px; bottom: 12px; margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .03em; color: rgba(246, 240, 230, .85); }
@media (max-width: 800px) { .vf-status { display: none; } }

/* =====================================================================
   MANIFESTO — scroll-lit giant type
   ===================================================================== */
.manifesto { position: relative; height: 300vh; background: var(--ink); --wipe: var(--marigold); }
.manifesto-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-content: center; padding: 90px var(--gutter) 2rem; overflow: hidden; }
.manifesto-inner { margin: 0 auto; max-width: 20ch; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.75rem, 4.3vw, 4.1rem); }
.manifesto-text {
  margin: 0; font-size: 1em; line-height: 1.14; letter-spacing: -.035em;
  text-wrap: balance;
}
.mw { position: relative; display: inline-block; color: var(--bone); opacity: calc(.13 + var(--on, 0) * .87); transform: translateY(calc((1 - var(--on, 0)) * .18em)); }
.mw.is-hi { padding: 0 .12em; margin: 0 -.04em; isolation: isolate; }
.mw.is-hi::before {
  content: ""; position: absolute; inset: .06em 0 -.02em; z-index: -1; border-radius: .12em;
  background: var(--c); transform-origin: left; transform: scaleX(var(--on, 0)) rotate(-1.5deg);
}
.mw.is-hi .mw-t { color: var(--bone); }
.mw.is-hi[style] .mw-t { color: color-mix(in srgb, var(--bone) calc((1 - var(--on, 0)) * 100%), var(--ink)); }
.mw.tone-rani { --c: var(--rani); } .mw.tone-marigold { --c: var(--marigold); } .mw.tone-peacock { --c: var(--peacock); } .mw.tone-royal { --c: var(--royal); }
.manifesto-sign { margin: 2rem 0 0; font-family: var(--f-hand); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: 0; color: var(--marigold); opacity: 0; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .manifesto { height: auto; } .manifesto-pin { position: relative; min-height: 100vh; } }

/* =====================================================================
   CREDITS + FILM ACTIONS
   ===================================================================== */
.film-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 1.8rem; }
.film-actions .btn { padding: .75em 1.25em; font-size: .92rem; }
.credits { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 2px solid var(--bone); }
.credits div { padding: .75rem .9rem .8rem 0; border-bottom: 1px solid var(--line-strong); }
.credits div:nth-child(odd) { padding-right: 1.2rem; }
.credits dt { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.credits dd { margin: .15rem 0 0; font-weight: 600; font-size: .98rem; line-height: 1.35; }
.room .credits { max-width: 560px; }

/* =====================================================================
   NUMBERS — solid tiles with giant counters
   ===================================================================== */
.numbers { margin-top: clamp(4.5rem, 9vw, 7rem); }
.numbers-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 3rem); letter-spacing: -.03em; margin: 0 0 1.8rem; }
.num-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
.num {
  position: relative; overflow: hidden; border-radius: var(--r-l); padding: 1.4rem 1.3rem 1.5rem; min-height: 250px;
  display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); background: var(--c);
}
.num.tone-rani { --c: var(--rani); } .num.tone-marigold { --c: var(--marigold); } .num.tone-peacock { --c: var(--peacock); } .num.tone-royal { --c: var(--royal); color: #fff; } .num.tone-bone { --c: var(--bone); }
.num-v { font-family: var(--f-display); font-weight: 800; font-size: clamp(4rem, 8.4vw, 8.2rem); line-height: .85; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.num-l { font-weight: 650; font-size: 1rem; line-height: 1.3; max-width: 18ch; }
.js .numbers:not(.in) .num { transform: translateY(80px) rotate(calc(var(--i) * 2deg - 4deg)); opacity: 0; }
.numbers.in .num { transform: none; opacity: 1; transition: transform 1s cubic-bezier(.34, 1.45, .64, 1), opacity .5s; transition-delay: calc(var(--i) * 90ms); }
@media (max-width: 1000px) { .num-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .num-grid { grid-template-columns: 1fr 1fr; } .num { min-height: 190px; } .num:last-child { grid-column: 1 / -1; } }

/* cast: casting line */
.cast-casting { margin: -1rem 0 1.4rem; font-weight: 600; color: var(--bone); }

/* =====================================================================
   CALL SHEET — paper document on set
   ===================================================================== */
.callsheet-wrap { margin-top: clamp(4rem, 8vw, 6rem); }
.callsheet {
  position: relative; background: var(--paper); color: #16121F; border-radius: 4px;
  padding: clamp(1.4rem, 4vw, 2.8rem); box-shadow: 0 40px 70px rgba(0, 0, 0, .5);
  transform: rotate(-.6deg);
}
.callsheet::before { /* tape */
  content: ""; position: absolute; top: -14px; left: 12%; width: 120px; height: 30px; background: rgba(255, 178, 36, .75); transform: rotate(-4deg);
}
.callsheet::after {
  content: ""; position: absolute; top: -14px; right: 14%; width: 100px; height: 30px; background: rgba(19, 194, 176, .6); transform: rotate(3deg);
}
.js .callsheet:not(.in) { transform: translateY(90px) rotate(-5deg); opacity: 0; }
.callsheet.in { transition: transform 1.1s cubic-bezier(.34, 1.3, .64, 1), opacity .6s; }
.cs-head { display: grid; grid-template-columns: 1fr auto; gap: .5rem 2rem; align-items: end; padding-bottom: 1.2rem; border-bottom: 3px solid #16121F; }
.cs-kicker { grid-column: 1 / -1; margin: 0; font-family: var(--f-script); font-size: .95rem; letter-spacing: .08em; }
.cs-title { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.7rem, 4vw, 3rem); letter-spacing: -.04em; line-height: 1; }
.cs-meta { margin: 0; display: flex; gap: 1.4rem; font-family: var(--f-script); font-size: .92rem; }
.cs-meta dt { font-weight: 700; text-transform: uppercase; font-size: .75rem; letter-spacing: .06em; opacity: .65; }
.cs-meta dd { margin: 0; max-width: 24ch; }
.cs-table { width: 100%; border-collapse: collapse; margin-top: .4rem; font-size: .98rem; }
.cs-table thead th { text-align: left; font-family: var(--f-script); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; padding: .9rem .8rem .5rem 0; border-bottom: 1.5px solid #16121F; }
.cs-table tbody tr { border-bottom: 1px dashed rgba(22, 18, 31, .35); }
.cs-table tbody th, .cs-table td { padding: 1rem .8rem 1rem 0; vertical-align: top; text-align: left; }
.cs-table tbody th { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em; width: 30%; }
.cs-table td:nth-child(2) { font-family: var(--f-script); font-size: .95rem; line-height: 1.55; }
.cs-table td:last-child { width: 1%; white-space: nowrap; }
.cs-type { display: block; width: fit-content; margin-bottom: .35rem; font-family: var(--f-body); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .2em .6em; border-radius: 999px; background: var(--rani); color: var(--ink); }
.cs-type.is-crew { background: var(--peacock); }
.cs-type.is-music { background: var(--marigold); }
.cs-logline { margin: 1.1rem 0 0; font-family: var(--f-script); font-size: .95rem; line-height: 1.55; max-width: 70ch; }
.cs-apply {
  font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; padding: .55em 1.1em; border-radius: 999px;
  border: 2px solid #16121F; background: transparent; color: #16121F; transition: background-color .25s, color .25s;
}
.cs-apply:hover, .cs-apply:focus-visible { background: #16121F; color: var(--marigold); }
.cs-foot { margin: 1.3rem 0 0; font-family: var(--f-hand); font-weight: 700; font-size: 1.35rem; line-height: 1.2; color: #3B3350; max-width: 60ch; }
@media (max-width: 720px) {
  .cs-head { grid-template-columns: 1fr; }
  .cs-meta { flex-wrap: wrap; gap: .8rem 1.4rem; }
  .cs-table thead { display: none; }
  .cs-table, .cs-table tbody, .cs-table tr, .cs-table th, .cs-table td { display: block; width: auto !important; }
  .cs-table tbody tr { padding: 1rem 0; }
  .cs-table tbody th, .cs-table td { padding: 0 0 .5rem; }
  .cs-table td:last-child { padding-top: .4rem; }
}

/* =====================================================================
   NOTES FROM THE SET — horizontal strip
   ===================================================================== */
.journal { position: relative; background: var(--ink-deep); --wipe: var(--marigold); }
.journal-pin { position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: clamp(5rem, 10vw, 7rem) 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.journal-pin::-webkit-scrollbar { display: none; }
.journal-track { display: flex; align-items: stretch; gap: clamp(1rem, 2vw, 1.6rem); width: max-content; padding: 0 var(--gutter); will-change: transform; }
.journal-intro { width: min(84vw, 460px); flex: none; align-self: center; scroll-snap-align: start; }
.journal-intro .h2 { font-size: clamp(2.6rem, 6vw, 5.2rem); }
.journal-hint { display: flex; align-items: center; gap: .8rem; margin: 1.6rem 0 0; font-size: .88rem; color: var(--muted); }
.journal-hint span { width: 60px; height: 3px; background: var(--marigold); position: relative; overflow: hidden; }
.journal-cards { display: flex; gap: clamp(1rem, 2vw, 1.6rem); align-items: center; }
.note-card {
  --tilt: -1.2deg; flex: none; width: min(80vw, 380px); min-height: 440px; scroll-snap-align: center;
  display: flex; flex-direction: column; border-radius: 6px; padding: 1.6rem 1.5rem 1.8rem;
  background: var(--paper); color: #16121F; box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
  transform: rotate(var(--tilt)) translateY(calc(var(--lift, 0) * 1px));
  border-top: 12px solid var(--c);
}
.note-card:nth-child(2n) { --tilt: 1.4deg; --lift: 30; }
.note-card:nth-child(3n) { --tilt: -.4deg; --lift: -20; }
.note-card.tone-rani { --c: var(--rani); } .note-card.tone-marigold { --c: var(--marigold); } .note-card.tone-peacock { --c: var(--peacock); } .note-card.tone-royal { --c: var(--royal); }
.note-img { margin: -.2rem -.2rem 1.2rem; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; }
.note-img img { width: 100%; height: 100%; object-fit: cover; }
.note-meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 1.4rem; font-family: var(--f-script); font-size: .85rem; }
.note-tag { font-family: var(--f-body); font-weight: 800; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .25em .7em; border-radius: 999px; background: var(--c); color: var(--ink); }
.note-card.tone-royal .note-tag { color: #fff; }
.note-title { margin: 0 0 1rem; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.5rem, 2.2vw, 1.95rem); line-height: 1.08; letter-spacing: -.035em; }
.note-body { margin: 0; font-family: var(--f-script); font-size: 1rem; line-height: 1.7; }
.journal-end { flex: none; width: min(80vw, 360px); align-self: center; scroll-snap-align: end; padding-right: var(--gutter); }
.journal-end-title { font-family: var(--f-hand); font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.05; color: var(--marigold); margin: 0 0 1.2rem; }
/* desktop: pinned, driven by vertical scroll */
.journal.is-pinned .journal-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; padding: 70px 0 0; scroll-snap-type: none; }
.journal.is-pinned .journal-hint span::after { content: ""; position: absolute; inset: 0; background: var(--bone); transform-origin: left; transform: scaleX(var(--jp, 0)); }

/* =====================================================================
   WORK WITH US — flooding rows
   ===================================================================== */
.services { background: var(--ink); --wipe: var(--rani); }
.services-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.services-head .h2 { margin: 0; }
.services-head .lead { margin: 0 0 .3em; }
.service-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--bone); }
.service { border-bottom: 1px solid var(--line-strong); }
.service.tone-rani { --c: var(--rani); } .service.tone-marigold { --c: var(--marigold); } .service.tone-peacock { --c: var(--peacock); } .service.tone-royal { --c: var(--royal); }
.service-btn {
  position: relative; isolation: isolate; width: 100%; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) auto; align-items: center; gap: 1rem 2.5rem;
  padding: clamp(1.2rem, 2.4vw, 1.9rem) clamp(.4rem, 1.4vw, 1.2rem); border: 0; background: none; color: var(--bone); text-align: left; cursor: pointer; overflow: hidden;
  transition: color .45s var(--ease-out);
}
.service-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease-io); }
.service-btn:hover, .service-btn:focus-visible { color: var(--ink); }
.service-btn:hover::before, .service-btn:focus-visible::before { transform: scaleY(1); }
.service.tone-royal .service-btn:hover, .service.tone-royal .service-btn:focus-visible { color: #fff; }
.service-title { min-width: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.35rem, 3.7vw, 3.5rem); line-height: 1; letter-spacing: -.05em; transition: transform .55s var(--ease-out); }
.service-btn:hover .service-title { transform: translateX(.35em); }
.service-text { font-size: 1rem; line-height: 1.5; color: inherit; opacity: .8; }
.service-go { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; border: 2px solid currentColor; transition: transform .55s var(--ease-out); }
.service-btn:hover .service-go { transform: rotate(-45deg) scale(1.08); }
.js .service-list:not(.in) .service { opacity: 0; transform: translateY(40px); }
.service-list.in .service { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i) * 80ms); }
@media (max-width: 900px) {
  .services-head { grid-template-columns: 1fr; }
  .service-btn { grid-template-columns: 1fr auto; }
  .service-text { grid-column: 1; grid-row: 2; }
  .service-go { grid-column: 2; grid-row: 1 / 3; width: 46px; height: 46px; }
  .service-title { font-size: clamp(1.3rem, 6.2vw, 2.4rem); }
}

/* =====================================================================
   CONTACT BODY — the form
   ===================================================================== */
.contact-body { background: var(--rani); padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(5rem, 10vw, 8rem); }
.contact-form { position: relative; display: grid; gap: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field > span { font-weight: 700; font-size: .92rem; }
.field em { font-style: normal; font-weight: 500; opacity: .7; margin-left: .3rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink); background: rgba(246, 240, 230, .92);
  border: 2px solid var(--ink); border-radius: 12px; padding: .85rem 1rem; transition: background-color .25s, box-shadow .25s;
}
.field textarea { resize: vertical; min-height: 140px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230E0A1C' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 20px; padding-right: 2.8rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background-color: #fff; box-shadow: 6px 6px 0 var(--ink); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: .4rem; }
.form-foot .btn { padding: 1em 2.2em; font-size: 1.02rem; }
.form-note { margin: 0; font-size: .92rem; color: rgba(14, 10, 28, .8); }
.contact-form.is-sent > :not(.form-done) { visibility: hidden; }
.form-done[hidden] { display: none; }
.form-done { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .6rem; padding: 2rem; font-size: 1.1rem; font-weight: 600; }
.form-done-stamp {
  justify-self: center; margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 7vw, 5rem); letter-spacing: -.04em; color: var(--ink);
  border: 6px solid var(--ink); border-radius: 14px; padding: .05em .4em; transform: rotate(-8deg); animation: stamp .6s cubic-bezier(.34, 1.6, .64, 1) both;
}
@keyframes stamp { from { transform: rotate(-8deg) scale(2.6); opacity: 0; } }
.contact-kicker { margin: 0 0 .6rem; font-family: var(--f-hand); font-weight: 700; font-size: 1.6rem; }
.contact-facts { margin: 1.6rem 0 1.6rem; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.contact-facts div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid rgba(14, 10, 28, .3); }
.contact-facts dt { font-weight: 800; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; padding-top: .2rem; }
.contact-facts dd { margin: 0; font-weight: 600; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } .contact-facts div { grid-template-columns: 1fr; gap: .1rem; } }

/* =====================================================================
   FOOTER — letters, columns, giant wordmark
   ===================================================================== */
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.footer-title { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.04em; line-height: 1.05; color: var(--bone); margin: 0 0 .7rem; }
.footer-letters > p { max-width: 42ch; margin: 0 0 1.3rem; color: #CFC7E0; }
.letters-form { display: flex; gap: .6rem; max-width: 460px; }
.letters-form input {
  flex: 1; min-width: 0; font: inherit; font-size: 1rem; color: var(--bone); background: transparent;
  border: 2px solid var(--line-strong); border-radius: 999px; padding: .85rem 1.2rem; transition: border-color .25s;
}
.letters-form input::placeholder { color: var(--muted); }
.letters-form input:focus { outline: none; border-color: var(--marigold); }
.letters-done { margin: 0; font-family: var(--f-hand); font-weight: 700; font-size: 1.6rem; color: var(--marigold); }
.footer-h { margin: 0 0 1rem !important; font-weight: 800; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bone); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-col a { transition: color .2s; }
.footer-status { line-height: 1.45; }
.footer-mark { position: relative; margin: 0 0 1.4rem; height: clamp(150px, 26vw, 400px); }
.footer-mark canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-letters { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } .letters-form { flex-direction: column; } }

/* film room: keep the big title inside its column */
.room .film-big { font-size: clamp(2.8rem, 6.4vw, 6rem); overflow-wrap: anywhere; }

/* keep a highlighted word and its punctuation on the same line */
.mw-nb { display: inline-block; white-space: nowrap; }

html.is-locked { overscroll-behavior: none; }

/* finale seal — a rotating stamp that lands after the title */
.contact-inner { position: relative; }
.seal {
  position: absolute; right: 0; top: 50%; width: clamp(220px, 24vw, 330px); height: auto; pointer-events: none;
  opacity: var(--dd, 0); transform: translateY(-50%) scale(calc(.4 + var(--dd, 0) * .6)) rotate(calc((var(--dd, 0) - 1) * 300deg));
}
.seal text { font-family: var(--f-display); font-weight: 800; font-size: 18px; letter-spacing: .02em; fill: var(--bone); }
.seal-bg { fill: var(--ink); }
.seal-core { fill: var(--marigold); }
.seal-arrow { fill: none; stroke: var(--ink); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.seal > text { animation: spin 26s linear infinite; transform-origin: 150px 150px; }
@media (max-width: 1000px) { .seal { display: none; } }

/* portrait placeholder until a real photo is set */
.monogram { font-family: var(--f-display); font-weight: 800; font-size: clamp(5rem, 12vw, 9rem); letter-spacing: -.08em; line-height: 1; color: var(--marigold); transform: rotate(-6deg); }
.monogram::after { content: ""; display: block; height: .08em; margin-top: .06em; background: var(--rani); }


/* =====================================================================
   DIVISIONS — "opening soon" worlds
   ===================================================================== */
.world-soon { display: inline-flex; align-items: center; gap: .55rem; font-size: .85rem; font-weight: 650; color: var(--muted); }
.world-soon-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: soonPulse 2.4s ease-in-out infinite; }
.tone-steel .world-soon-dot { color: var(--peacock); } .tone-steel-2 .world-soon-dot { color: var(--royal); }
@keyframes soonPulse { 50% { opacity: .25; } }

/* =====================================================================
   PRODUCTION METER on a stage ("60% shot")
   ===================================================================== */
.stage-meter { display: flex; align-items: center; gap: .8rem; margin: .1rem 0 .9rem; max-width: 420px; }
.stage-meter span { position: relative; flex: 1; height: 8px; border-radius: 8px; background: var(--line); overflow: hidden; }
.stage-meter span::after { content: ""; position: absolute; inset: 0; background: var(--rani); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 1.6s var(--ease-out); }
.js .stage-meter span::after { transform: scaleX(0); }
.js .stage.is-rolling .stage-meter.in span::after, .js .room .stage-meter span::after { transform: scaleX(var(--p, 0)); }
.stage-meter b { font-family: var(--f-display); font-weight: 700; font-size: .95rem; letter-spacing: -.01em; white-space: nowrap; }

/* =====================================================================
   SHUNYAAKAR SOUND × GENVOX STUDIO
   ===================================================================== */
.collab { margin-top: 1.8rem; padding: 1.4rem 1.5rem; border-radius: var(--r-l); background: var(--ink); color: var(--bone); border-left: 6px solid var(--marigold); }
.collab-kicker { margin: 0 0 .5rem; font-family: var(--f-hand); font-weight: 700; font-size: 1.45rem; color: var(--marigold); line-height: 1; }
.collab-lockup { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.25rem, 2.6vw, 1.9rem); letter-spacing: -.03em; line-height: 1.1; }
.collab-x { color: var(--marigold); font-weight: 600; }
.collab-founder { margin: .7rem 0 0; font-size: .95rem; color: var(--muted); }
.collab-founder strong { color: var(--bone); font-weight: 700; }
.collab-text { margin: .7rem 0 0; font-size: .95rem; color: #D8D1E6; }

/* =====================================================================
   CASTING CALL (its own section, between the making-of and the journal)
   ===================================================================== */
.casting { background: var(--ink); padding-top: 0; overflow-x: clip; }
.casting .callsheet-wrap { margin-top: 0; }

/* =====================================================================
   PERSON PROFILE — opens like a lens iris from the card you tapped
   ===================================================================== */
.person { position: fixed; inset: 0; z-index: 95; background: rgba(7, 5, 15, .82); opacity: 0; transition: opacity .45s ease; }
.person[hidden] { display: none; }
.person.is-open { opacity: 1; }
.person.is-closing { opacity: 0; transition: opacity .5s ease .12s; }
.person-panel {
  position: absolute; left: 50%; top: 50%; width: min(1040px, 94vw); max-height: min(88vh, 860px); overflow-y: auto; overscroll-behavior: contain;
  transform: translate(-50%, -50%); background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-l); outline: none;
  clip-path: circle(0 at var(--ox, 50%) var(--oy, 50%));
  transition: clip-path .75s cubic-bezier(.76, 0, .24, 1);
}
.person.is-open .person-panel { clip-path: circle(var(--or, 150%) at var(--ox, 50%) var(--oy, 50%)); }
.person.is-closing .person-panel { transition-duration: .6s; }
.person-close { position: absolute; top: 1rem; right: 1rem; z-index: 4; background: var(--ink); }
.person-body { --c: var(--marigold); }
.person-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); min-height: min(560px, 70vh); }
.person-photo { position: relative; margin: 0; background: var(--surface-2); overflow: hidden; }
.person-frame { position: absolute; inset: 0; display: block; }
.person-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.person-mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: clamp(5rem, 14vw, 9rem); letter-spacing: -.05em; color: var(--c); transform: scale(1.18); }
.person.is-open .person-frame img, .person.is-open .person-mono { transform: scale(1); transition: transform 2.4s cubic-bezier(.16, 1, .3, 1) .25s; }
/* sprocket holes down both edges, like a frame of film */
.person-photo::before, .person-photo::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 14px; z-index: 2;
  background: repeating-linear-gradient(to bottom, transparent 0 10px, rgba(7, 5, 15, .85) 10px 22px);
}
.person-photo::before { left: 8px; } .person-photo::after { right: 8px; }
.person-wipe { position: absolute; inset: 0; z-index: 3; background: var(--c); transform: scaleX(0); transform-origin: left; }
.person.is-open .person-wipe { animation: wipe 1s var(--ease-io) .35s both; }
.person-body.is-swap .person-wipe { animation: wipe .9s var(--ease-io) both; }
.person-photo figcaption { position: absolute; left: 1.6rem; bottom: 1.2rem; z-index: 2; font-family: var(--f-script); font-size: .85rem; letter-spacing: .08em; color: var(--bone); background: rgba(7, 5, 15, .7); padding: .25em .6em; border-radius: 4px; }
.person-info { padding: clamp(1.8rem, 4.5vw, 3.4rem); padding-top: clamp(3.4rem, 5vw, 3.6rem); display: flex; flex-direction: column; }
.person-kicker { margin: 0 0 .7rem; font-family: var(--f-script); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.person-name { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: .98; letter-spacing: -.045em; }
.person-role { margin: .45rem 0 1.1rem; font-family: var(--f-hand); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--c); line-height: 1; }
.person-note { margin: 0 0 1.4rem; font-size: 1.08rem; color: #D8D1E6; max-width: 46ch; }
.person-facts { margin: 0 0 1.3rem; display: grid; gap: .7rem; padding: 1rem 0; border-block: 1px solid var(--line); }
.person-facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; }
.person-facts dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-top: .15rem; }
.person-facts dd { margin: 0; font-weight: 650; }
.person-about { margin: 0 0 1.4rem; color: #D8D1E6; white-space: pre-line; }
.person-soon { margin: 0 0 1.4rem; font-family: var(--f-hand); font-weight: 700; font-size: 1.35rem; color: var(--muted); }
.person-nav { margin-top: auto; display: flex; justify-content: space-between; gap: .8rem; padding-top: .6rem; }
.person-step { font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; padding: .6em 1.1em; border-radius: 999px; border: 1.5px solid var(--line-strong); background: transparent; color: var(--bone); transition: border-color .25s, color .25s; }
.person-step:hover, .person-step:focus-visible { border-color: var(--c); color: var(--c); }
/* the details rise in, one after another, once the iris has opened */
.person-info > * { opacity: 0; transform: translateY(18px); }
.person.is-open .person-info > *, .person-body.is-swap .person-info > * { opacity: 1; transform: none; transition: opacity .6s ease, transform .8s var(--ease-out); }
.person.is-open .person-info > :nth-child(1) { transition-delay: .45s; } .person.is-open .person-info > :nth-child(2) { transition-delay: .55s; }
.person.is-open .person-info > :nth-child(3) { transition-delay: .65s; } .person.is-open .person-info > :nth-child(4) { transition-delay: .75s; }
.person.is-open .person-info > :nth-child(5) { transition-delay: .85s; } .person.is-open .person-info > :nth-child(n+6) { transition-delay: .95s; }
.person-body.is-swap .person-info > * { animation: personRise .7s var(--ease-out) both; }
.person-body.is-swap .person-info > :nth-child(2) { animation-delay: .06s; } .person-body.is-swap .person-info > :nth-child(3) { animation-delay: .12s; } .person-body.is-swap .person-info > :nth-child(n+4) { animation-delay: .18s; }
@keyframes personRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* own name: "rise" is the hero entrance */
@media (max-width: 760px) {
  .person-panel { width: 100vw; max-height: none; height: 100%; height: 100dvh; top: 0; left: 0; transform: none; border-radius: 0; border: 0; }
  .person-grid { grid-template-columns: 1fr; min-height: 0; }
  .person-photo { aspect-ratio: 4 / 3.4; }
  .person-info { padding-top: 1.6rem; }
  .person-facts div { grid-template-columns: 6.2rem 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .person-panel, .person.is-open .person-panel { clip-path: none; transition: none; }
  .person-info > * { opacity: 1; transform: none; }
  .person.is-open .person-wipe, .person-body.is-swap .person-wipe { animation: none; }
}


/* =====================================================================
   PORTFOLIO NAME CARD — shown until brand.portfolioImage is set.
   Same 4:5 frame as a photo, in the film posters' flat Venn style.
   ===================================================================== */
.pinned-card {
  position: relative; display: grid; place-items: center; align-content: center; gap: .6rem; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate;
  border-radius: 4px; background: var(--ink-deep); color: var(--bone); text-align: center; padding: 2rem; box-shadow: 0 40px 70px rgba(0, 0, 0, .6);
}
.pc-circles { position: absolute; inset: 0; z-index: -1; }
.pc-circles i { position: absolute; top: 44%; width: 58%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); transition: transform 1s var(--ease-out); }
.pc-circles i:first-child { left: 40%; background: var(--rani); }
.pc-circles i:last-child { left: 60%; background: var(--marigold); mix-blend-mode: screen; }
.pinned:hover .pc-circles i:first-child { transform: translate(-58%, -50%); }
.pinned:hover .pc-circles i:last-child { transform: translate(-42%, -50%); }
.pc-name { font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 5vw, 3.1rem); line-height: .95; letter-spacing: -.05em; background: var(--ink); padding: .18em .35em .22em; }
.pc-sub { font-size: .9rem; font-weight: 650; letter-spacing: .06em; background: var(--ink); padding: .3em .7em; }

/* =====================================================================
   HOW I SHOOT — under the service rows in "Work with us"
   ===================================================================== */
.method { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.method-title { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.02; letter-spacing: -.045em; margin: 0 0 .7rem; max-width: 22ch; }
.method-line { font-family: var(--f-hand); font-weight: 700; font-size: clamp(1.45rem, 2.4vw, 1.9rem); color: var(--marigold); line-height: 1.15; margin: 0 0 clamp(1.8rem, 4vw, 2.8rem); max-width: 40ch; }
.method-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.4rem); }
.method-points li { position: relative; padding-top: 1.2rem; border-top: 2px solid var(--line-strong); }
.method-num {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; margin-bottom: 1rem;
  font-family: var(--f-display); font-weight: 700; font-size: .95rem; background: var(--marigold); color: var(--ink);
}
.method-points h4 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .5rem; }
.method-points p { margin: 0; color: #DCD5EA; font-size: 1rem; }
.js .method:not(.in) .method-points li, .js .method:not(.in) .method-title, .js .method:not(.in) .method-line { opacity: 0; transform: translateY(30px); }
.method.in .method-points li, .method.in .method-title, .method.in .method-line { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.method.in .method-points li { transition-delay: calc(.2s + var(--i) * 110ms); }
@media (max-width: 900px) { .method-points { grid-template-columns: 1fr; } }

/* privacy lines under the two forms */
.form-privacy { flex-basis: 100%; margin: 0; font-size: .82rem; color: rgba(14, 10, 28, .65); }
.letters-privacy { margin: .7rem 0 0; font-size: .82rem; color: var(--muted); max-width: 46ch; }

/* =====================================================================
   WHATSAPP BUTTON — only rendered when brand.whatsapp is set
   ===================================================================== */
.wa-fab {
  position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: var(--marigold); color: var(--ink); box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility .5s;
}
.wa-fab.is-on { opacity: 1; visibility: visible; transform: none; }
/* room under the footer so the button never sits on "Back to top" or the last links */
.has-wa .footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.wa-fab:hover { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .wa-fab { transition: none; transform: none; } }