/* ── RR Block Logo ── */
@keyframes rr-wiggle {
  0%, 100% { transform: translateY(0px)   rotate(0deg);  }
  33%       { transform: translateY(-1px) rotate(-3deg); }
  66%       { transform: translateY(1px)  rotate(2.5deg); }
}

.rr-logo .b {
  transform-box:    fill-box;
  transform-origin: center;
  animation: rr-wiggle 3s ease-in-out infinite;
}
.rr-logo .b:nth-child(1) { animation-delay: 0.00s; }
.rr-logo .b:nth-child(2) { animation-delay: 0.40s; }
.rr-logo .b:nth-child(3) { animation-delay: 1.20s; }
.rr-logo .b:nth-child(4) { animation-delay: 1.60s; }
.rr-logo .b:nth-child(5) { animation-delay: 0.80s; }
.rr-logo .b:nth-child(6) { animation-delay: 2.00s; }

/* ── Animatable CSS custom property for border-beam ── */
@property --beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes video-beam {
  to { --beam-angle: 360deg; }
}

/* ═══════════════════════════════════════════
   BASE RESET & TOKENS
═══════════════════════════════════════════ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* ── Dark cinematic palette ── */
  --bg:            #111111;
  --bg-light:      #1a1a1a;
  --fg:            #FFF4D5;
  --fg-muted:      #9C8F6E;
  --accent:        #FF5100;
  --accent-warm:   #FF8200;
  --accent-yellow: #FFC929;
  --accent-dark:   #C43E00;

  --font-serif: 'Citadel Script Std', 'Citadel Script', Georgia, serif;
  --font-sans: 'Helvetica Now Display', 'Helvetica Now', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --nav-h: 72px;
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
}

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}

body {
  overflow-x: hidden;
  background: var(--bg);
  position: relative;
}


::selection {
  background: var(--accent);
  color: #fff;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--fg-muted);
  border-radius: 3px;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: none;
}

img, video {
  display: block;
  max-width: 100%;
}


/* ═══════════════════════════════════════════
   VIGNETTE OVERLAY
   Persistent, viewport-fixed atmospheric layer.
   Two stacked radial gradients:
   1. Mouse-driven warm glow — center follows
      cursor (JS sets --mx / --my CSS vars,
      lerp-smoothed for buttery movement).
═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   CUSTOM CURSOR
═══════════════════════════════════════════ */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}

.cursor__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.1s var(--ease-out-expo),
              opacity 0.2s ease;
}

.cursor__circle {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s var(--ease-out-expo),
              height 0.4s var(--ease-out-expo),
              opacity 0.3s ease,
              border-color 0.3s ease;
}

/* Cursor expanded state on hoverable elements */
.cursor.is-hovering .cursor__circle {
  width: 72px;
  height: 72px;
  border-color: #ffffff;
  opacity: 0.8;
}

.cursor.is-hovering .cursor__dot {
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

/* Cursor large scale on video elements */
.cursor.is-video .cursor__circle {
  width: 100px;
  height: 100px;
  border-color: #ffffff;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 6vh;                  /* lowered toward vertical centre */
  left: 0;
  right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  z-index: 100;
}

/* ── Center pill ── */
.nav__pill {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(255, 244, 213, 0.18);
  border-radius: 100px;
  padding: 5px;
  position: relative;
  background: rgba(20, 17, 10, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Sliding white indicator that lives inside the pill */
.nav__pill-indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: 40px;              /* initial width, overwritten by GSAP */
  background: var(--fg);
  border-radius: 100px;
  pointer-events: none;
  z-index: 0;
}

/* Shared item styles */
.nav__pill-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  color: var(--fg);
  transition: color 0.35s var(--ease-out-expo);
  cursor: none;
}

/* About / Work text buttons */
.nav__pill-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 7px 20px;
}

/* Logo button */
.nav__pill-logo {
  width: 36px;
  height: 36px;
  margin: 0 2px;
}

/* When indicator is under an item → text goes dark for contrast */
.nav__pill-item.is-active {
  color: var(--bg);
}

/* ── Right: social links (pinned to top-right of nav) ── */
.nav__right {
  position: absolute;
  top: 8px;
  right: 40px;
  display: flex;
  gap: 28px;
  align-items: center;
}

/* Social links — letter-bounce replaces the old slide-up */
.nav__social {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg);
}

.nav__social-inner {
  display: block;
}

.nav__social-top {
  display: block;
  white-space: nowrap;
}

/* Bottom duplicate hidden — bounce replaces the slide */
.nav__social-bottom {
  display: none;
}

/* Each split letter needs inline-block so Y transforms apply */
.nav-letter {
  display: inline-block;
  will-change: transform, color;
}

/* ── X icon link — svg replaces the text label ── */
.nav__social--icon .nav__social-top {
  display: flex;
  align-items: center;
}

.nav__social--icon svg {
  display: block;
  transition:
    transform 0.35s var(--ease-out-expo),
    color     0.35s var(--ease-out-expo);
}

/* No letter bounce on the icon — pop + accent tint instead */
.nav__social--icon:hover svg {
  transform: scale(1.25);
  color: var(--accent);
}

/* ── Logo bubble particles ── */
.nav-bubble {
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  will-change: transform, opacity;
}

/* Left — amber / sunglow: white-hot core fading to deep orange */
.nav-bubble--l {
  background: radial-gradient(circle, #fff 0%, #FFE566 22%, #FFC929 52%, #FF7A00 100%);
  box-shadow:
    0 0  4px  2px rgba(255, 255, 200, 0.95),
    0 0 10px  4px rgba(255, 201,  41, 0.90),
    0 0 22px  8px rgba(255, 150,   0, 0.50),
    0 0 42px 14px rgba(255, 100,   0, 0.18);
}

/* Right — aerospace orange: white-hot core fading to deep red-orange */
.nav-bubble--r {
  background: radial-gradient(circle, #fff 0%, #FFB060 22%, #FF5100 52%, #B83000 100%);
  box-shadow:
    0 0  4px  2px rgba(255, 210, 170, 0.95),
    0 0 10px  4px rgba(255,  81,   0, 0.90),
    0 0 22px  8px rgba(220,  50,   0, 0.50),
    0 0 42px 14px rgba(180,  20,   0, 0.18);
}

/* ═══════════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════════ */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* row stays at bottom */
  padding-top: var(--nav-h);
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

/* Bottom gradient so the name row stays legible over the text mask */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(10, 9, 3, 0.30)  0%,
    rgba(10, 9, 3, 0.10) 50%,
    rgba(10, 9, 3, 0.55) 82%,
    rgba(10, 9, 3, 0.80) 100%
  );
}

/* ── Hero background videos ── */
.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.hero__bg-video--raw {
  z-index: 0;
}

.hero__edit-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: clip-path;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.hero__bg-video--edit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── RAW toggle button ── */
.hero__raw-btn {
  position: absolute;
  right: clamp(20px, 3vw, 48px);
  bottom: clamp(24px, 4vh, 56px);
  z-index: 80;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}

.hero__raw-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
}

.hero__raw-btn.is-raw {
  background: rgba(255, 255, 255, 0.90);
  border-color: transparent;
  color: #000;
}

.hero__inner {
  width: 100%;
  padding: 0 48px 106px;  /* 56 + 50px upward shift */
  display: flex;
  flex-direction: column;
  overflow: visible;
  position: relative;
  z-index: 70;
}

/* ─────────────────────────────────────────
   HERO STAGE — single source of truth for the
   ROMAN / RUSINOV name. Lives in normal flex
   flow at the bottom of Page 1. GSAP pins it
   at viewport top once it's scrolled to the
   top, and keeps it pinned through all of
   Page 2. The opaque background + high z-index
   ensure the stacking project cards always
   slide UNDER it during the folder mechanic.
─────────────────────────────────────────── */
.hero__stage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  perspective: 1200px;
  overflow: visible;
  background: transparent;        /* default — Page 1 photo shows through behind the names */
  position: relative;             /* enables z-index */
  z-index: 50;                    /* above projects (1..6) + dock bar (90 only stacks below)
                                     but BELOW nav pill (100) so pill stays clickable on top */
  will-change: transform;
  transition: background-color 0.3s ease;
}

/* When the stage is pinned during Page 2, switch to a
   solid background so scrolling content can't bleed
   up through the empty gap above the names. JS toggles
   `.is-pinned` via the heroPin ScrollTrigger callbacks. */
.hero__stage.is-pinned {
  background: var(--bg);
}

/* ── Role text: absolutely positioned top-left like Juan Mora ── */
.hero__role {
  position: absolute;
  top: calc(20% - 50px);
  left: 40px;
  font-family: var(--font-sans);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;          /* Title Case, not uppercase */
  color: var(--fg);              /* same cream as the names */
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out-expo) 0.6s forwards;
  z-index: 2;
}

/* ── Names ── */
.hero__name {
  font-family: 'Clash Display', var(--font-sans);
  font-size: clamp(64px, 9.5vw, 148px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0;
  transform: translateY(70px);
  white-space: nowrap;
}

/* First name lives directly in stage as a flex child */
.hero__name--first {
  flex: 1;
  text-align: right;
  animation: nameReveal 1s var(--ease-out-expo) 0.5s forwards;
}

/* Last name: direct flex child again, mirrors first name */
.hero__name--last {
  flex: 1;
  text-align: left;
  animation: nameReveal 1s var(--ease-out-expo) 0.65s forwards;
}

/* Inner span = what GSAP scaleX-squishes */
.hero__name-inner {
  display: inline-block;
  will-change: transform;
}

.hero__name--first .hero__name-inner {
  transform-origin: left center;  /* stretches rightward toward box */
}

.hero__name--last .hero__name-inner {
  transform-origin: right center; /* stretches leftward toward box */
}

/* ── Wrapper: CSS entrance animation only ── */
.hero__video-wrapper {
  flex-shrink: 0;
  margin: 0;                   /* NO margin — gap handled by pixel-precise JS */
  opacity: 0;
  transform: scale(0.88);
  animation: videoReveal 1s var(--ease-out-expo) 0.85s forwards;
  z-index: 2;
}

/* ── Box: GSAP-only transforms, zero CSS animation ── */
.hero__video-box {
  width: clamp(180px, 17vw, 280px);
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  will-change: transform;
  cursor: none;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stacked reel covers — only the active one is visible.
   Instant hard cut on swap (no transition). */
.hero__video--reel {
  z-index: 1;
  opacity: 0;
}

.hero__video--reel.is-active {
  opacity: 1;
}

.hero__video-fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a1308 0%, #2a1a06 30%, #3a200a 60%, #14110a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__video-fallback::after {
  content: 'REEL';
  font-family: var(--font-serif);
  font-size: 24px;
  color: rgba(255, 244, 213, 0.35);
  letter-spacing: 0.3em;
}

.hero__video-label {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 244, 213, 0.60);
  background: rgba(10, 9, 3, 0.40);
  backdrop-filter: blur(8px);
  padding: 6px 10px;
  border-radius: 4px;
}

/* ════════════════════════════════════════════
   TOOLS MARQUEE — infinite editing-app logo cycle
   • Replaces the old scroll arrow (same position).
   • Viewport shows exactly 3 logos at a time.
   • Track contains 2 sets × 3 logos and animates
     translateX 0 → -50% in a tight loop, so when
     the duplicate set reaches the visible window
     it looks identical and the loop is seamless.
═══════════════════════════════════════════════ */
.tools-marquee {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  opacity: 0;                                /* JS fades in on load */
  pointer-events: none;
  will-change: opacity, transform;
}

.tools-marquee__viewport {
  /* Width = 3 × tile width (72px) + 2 gaps (24px) between them */
  width: calc(3 * 72px + 2 * 24px);
  overflow: hidden;
  /* Wider mask zones at both edges → smoother fade in/out
     so logos don't pop, they drift in. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 28%,
    #000 72%,
    transparent 100%
  );
          mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 28%,
    #000 72%,
    transparent 100%
  );
}

.tools-marquee__track {
  display: flex;
  gap: 24px;
  width: max-content;
  /* Slowed from 4s → 9s for a calmer cycle */
  animation: tools-marquee 9s linear infinite;
}

@keyframes tools-marquee {
  from { transform: translateX(0); }
  /* shift by exactly one set (3 tiles + 3 gaps) so the duplicate
     set lands in the visible position when the loop restarts */
  to   { transform: translateX(calc(-1 * (3 * 72px + 3 * 24px))); }
}

/* ── Individual tool logo tile — now just an image holder ── */
.tool-logo {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.tool-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* DaVinci Resolve logo has more whitespace around the mark,
   so it looks visually smaller next to the Adobe icons —
   scale it up so it reads at the same optical size. */
.tool-logo img[src*="DaVinci"] {
  transform: scale(1.2);
}

/* ═══════════════════════════════════════════
   WORKS — Folder-stacking architecture.
   ============================================
   Layout contract:
   • .works               (no top padding, zero gap from Page 1)
     ├── .works__docking-zone  (slim sticky bar at top:--hero-h,
     │                          contains Work label + Show/Hide)
     └── .works__stack
         └── .project × 6     (pinned by JS at top:--dock-offset
                                with pinSpacing:false, layered
                                via --idx → z-index)

   The pinned hero name (.hero__stage in JS) sits
   ABOVE the docking bar. Both heights are measured
   at runtime and exposed as CSS custom properties
   --hero-h and --dock-offset (set by JS in initWorks).
   ============================================ */

:root {
  --hero-h:      180px;               /* fallback before JS measures */
  --dock-offset: 240px;               /* hero-h + docking bar height */
}

.works {
  position: relative;
  background: var(--bg);
  /* Top padding pushes Page 2 lower so the hero's faded-to-dark
     bottom + this dark buffer create a longer transitional zone
     before the works content arrives — feels like a fade, not a cut. */
  padding-top: 60px;
}

/* ── DOCKING BAR ──
       Slim strip sitting just below the pinned
       hero name. Sticky for the whole works range. */
.works__docking-zone {
  position: sticky;
  top: var(--hero-h);                 /* dock immediately under pinned hero (which has its own gap) */
  background: var(--bg);
  z-index: 40;                        /* above projects (1..6), below pinned hero (50) */
  padding: 8px clamp(24px, 3vw, 56px); /* slim, matches the reference compact bar */
  border-bottom: 1px solid #ffffff;
}

/* ── Page-2 sub-header: "Work" label + Show/Hide ── */
.works__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.works__head-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--fg);
}

/* Show — Hide toggle (Adoratorio-style minimal text pair) */
.works__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.works__toggle-btn {
  background: transparent;
  border: none;
  color: var(--fg-muted);
  cursor: none;
  padding: 0;
  font: inherit;
  transition: color 0.4s var(--ease-out-expo);
}

.works__toggle-btn:hover { color: var(--fg); }

.works__toggle[data-view="grid"] .works__toggle-btn[data-view="grid"],
.works__toggle[data-view="list"] .works__toggle-btn[data-view="list"] {
  color: var(--fg);
}

.works__toggle-sep { color: var(--fg-muted); }

/* ── Stack container — projects flow normally,
       JS pins each one at top:500 with pinSpacing:false.
       Their natural layout heights provide the scroll
       distance between pin events. ── */
.works__stack {
  position: relative;
}

.works__scroll-hint {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: #ffffff;
  padding: 220px clamp(24px, 3vw, 56px) 60px;
  margin: 0;
  user-select: none;
}

/* ── A single project card ──
       • height = calc(100vh - --dock-offset) so when
         pinned at top:--dock-offset, it fills the
         rest of the viewport.
       • Opaque background — must fully cover the
         card layered below it.
       • z-index from --idx (1..6) so each new card
         visually buries the previous one. */
.project {
  position: relative;
  height: calc(100vh - var(--dock-offset) - 20px);
  background: var(--bg);
  z-index: var(--idx, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* Header bar — full-width flex: [num + title] … [tags centered] … [year + button] */
.project__meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px clamp(24px, 3vw, 56px);
  cursor: none;
  position: relative;
  background: #111111;
  border-top: 1px solid #ffffff;
}

.project[data-index="01"] .project__meta {
  border-top: none;
}

.project__num {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  line-height: 1;
}

/* Title — compact uppercase in the header bar */
.project__title {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--fg);
  margin: 0;
  text-transform: uppercase;
  flex: 0 0 auto;
  transition: color 0.5s var(--ease-out-expo);
}

/* Tags — absolutely centred in the bar so they sit in the true middle */
.project__tags {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  white-space: nowrap;
  pointer-events: none;
}

/* Year — pushed to far right, with room for the absolute button beside it */
.project__year {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  margin-right: clamp(100px, 10vw, 130px);
  white-space: nowrap;
}

/* Indicator dot hidden — replaced visually by the always-visible VIEW MORE button */
.project__indicator {
  display: none;
}

.project__meta:hover .project__title { color: var(--accent); }

/* ── VIEW MORE button — starts as a small orange dot, expands to pill on card hover (desktop) ── */
.project__more {
  position: absolute;
  right: clamp(24px, 3vw, 56px);
  top: 50%;
  transform: translateY(-50%);
  background: #FF5500;
  color: #fff;
  border: none;
  border-radius: 100px;
  /* Dot size by default — morphs to pill on hover */
  width: 10px;
  height: 10px;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: none;
  opacity: 1;
  pointer-events: auto;
  transition: width 0.4s cubic-bezier(0.34, 1.3, 0.64, 1),
              height 0.4s cubic-bezier(0.34, 1.3, 0.64, 1),
              background 0.3s ease;
  will-change: width, height;
  z-index: 4;
  overflow: hidden;
}

/* Card hover: morph the dot into the full pill */
.project:hover .project__more {
  width: 110px;
  height: 32px;
}

/* The literal dot glyph is hidden — the button's own circle is the dot */
.project__more-dot {
  display: none;
}

/* Text centred inside the pill, revealed once expanded */
.project__more-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(4px);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease 0.15s, transform 0.2s ease 0.15s;
}

.project:hover .project__more-text {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.project__more:hover {
  background: #e04a00;
}

/* ── Media frame — fills the remainder of the
       project card height (flex:1 inside flex parent).
       The card itself is calc(100vh - 500px), the
       meta row is ~60px, so the media gets the rest. */
.project__media {
  flex: 1 1 auto;
  margin: 0;
  position: relative;
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-light);
}

.project__media-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.project__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project__media-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Video clip that plays once (gif-style) inside a work card */
.project__clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

.project__media-fallback--1 { background: #14110A url('../assets/poster-bismarck.png')      center / cover no-repeat; }
.project__media-fallback--2 { background: #14110A url('../assets/poster-morning-class.png') center / cover no-repeat; }
.project__media-fallback--3 { background: #14110A url('../assets/poster-arrakis.png')       center / cover no-repeat; }

/* ── List view (Hide): drop the full-height card layout,
       hide the media frame, collapse projects to thin
       text-only rows. JS also kills the pin triggers in
       this mode so projects scroll normally. ── */
.works.is-list .project {
  height: auto;
  display: block;
}
.works.is-list .project__meta {
  background: transparent;
  border-top: 1px solid #ffffff;
  padding: 14px clamp(24px, 3vw, 56px);
}
.works.is-list .project__media { display: none; }
.works.is-list .works__docking-zone { top: 0; }

/* ── Mobile ── */
@media (max-width: 900px) {
  .works__docking-zone {
    padding: 12px clamp(16px, 4vw, 32px);
  }
  .project__meta {
    gap: 10px;
    padding: 10px clamp(16px, 4vw, 32px);
  }
  .project__tags { display: none; }
  .project__title { font-size: clamp(13px, 3.5vw, 16px); }
  .project__year { margin-right: clamp(70px, 8vw, 100px); }
  .project:hover .project__more {
    width: 90px;
    height: 28px;
    font-size: 10px;
  }
}

/* ═══════════════════════════════════════════
   VIDEO MODAL — fullscreen overlay
   Body scroll is locked while open (Lenis stop()).
   Entrance: backdrop fades, frame clip-path opens
   from a center slit, slight scale up.
═══════════════════════════════════════════ */
.vmodal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 64px);
  pointer-events: none;
  visibility: hidden;
}

.vmodal.is-open {
  pointer-events: auto;
  visibility: visible;
}

/* Restore the real system cursor inside the modal so the
   native video controls are usable (rest of site uses cursor:none). */
.vmodal,
.vmodal * { cursor: auto !important; }
.vmodal__video { cursor: pointer !important; }
.vmodal__play,
.vmodal__close,
.vmodal__frame { cursor: pointer !important; }

/* Hide the custom JS cursor while the modal is open */
body.modal-open .cursor { display: none; }

.vmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 3, 0.92);
  backdrop-filter: blur(12px);
  opacity: 0;
  cursor: none;
}

/* White info card — video on top, text below */
.vmodal__inner {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
  background: #FFF7E9;
  color: #1A1612;
  border-radius: 16px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
  /* Entrance: opens from a centre slit, GSAP animates clip-path */
  clip-path: inset(50% 0% 50% 0%);
  transform: scale(0.96);
  will-change: clip-path, transform;
}

.vmodal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(26, 22, 18, 0.08);
  color: #1A1612;
  cursor: none;
  opacity: 0;
  z-index: 3;
  transition: background 0.35s var(--ease-out-expo), color 0.35s var(--ease-out-expo);
}

.vmodal__close:hover {
  background: var(--accent);
  color: #fff;
}

/* Video frame — click to play */
.vmodal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  cursor: none;
}

.vmodal__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* YouTube thumbnail shown before play */
.vmodal__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Container the YouTube iframe is injected into on play */
.vmodal__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vmodal__embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Hide thumbnail once playing */
.vmodal__frame.is-playing .vmodal__thumb { display: none; }

/* Play button overlay — hidden once playing */
.vmodal__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 247, 233, 0.92);
  color: #1A1612;
  cursor: none;
  padding-left: 4px;              /* optical centring of the ▶ glyph */
  transition: transform 0.35s var(--ease-out-expo), opacity 0.35s var(--ease-out-expo), background 0.35s var(--ease-out-expo);
}

.vmodal__play:hover {
  transform: scale(1.08);
  background: var(--accent);
  color: #fff;
}

.vmodal__frame.is-playing .vmodal__play {
  opacity: 0;
  pointer-events: none;
}

/* Info block below the video */
.vmodal__info {
  padding: clamp(22px, 3vw, 34px) clamp(24px, 3.5vw, 40px) clamp(28px, 4vw, 40px);
}

.vmodal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.vmodal__title {
  font-family: 'Clash Display', var(--font-serif), sans-serif;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #1A1612;
  margin: 0;
}

.vmodal__year {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: #7A6A50;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.vmodal__tags {
  display: block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.vmodal__desc {
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 400;
  line-height: 1.65;
  color: #4A4038;
}

/* ═══════════════════════════════════════════
   ABOUT SECTION
   Two-column layout: italic label left,
   body text right. Word-reveal on scroll.
   Palette: dark bg · muted terracotta labels ·
            cream body text — warm & cinematic.
═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   CINEMA SCROLL — ember particles + storytelling
═══════════════════════════════════════════ */

.cinema {
  position: relative;
}

/* Fixed dark overlay — cinema-scroll.js fades in/out */
.cinema__bg {
  position: fixed;
  inset: 0;
  background: #030303;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

/* canvas (ember-particles.js) — position:fixed, z-index:2, appended to body */

/* Color-change bloom — expands on scroll entry, fades to reveal dark world */
.cinema__bloom {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse 65% 65% at 50% 50%,
    rgba(255, 248, 225, 1.00)  0%,
    rgba(255, 190,  70, 0.92) 22%,
    rgba(235,  95,  10, 0.65) 48%,
    rgba(150,  30,   0, 0.22) 74%,
    transparent 100%
  );
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  will-change: transform, opacity, filter;
  transform-origin: center center;
}

/* Fixed atmospheric glow */
.cinema__glare {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse 40% 40% at 38% 52%,
    rgba(255, 85, 0, 0.08) 0%,
    rgba(232, 137, 58, 0.03) 45%,
    transparent 70%
  );
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}

/* Pinned phase — contains the sticky stage, height gives scroll range */
.cinema__pinned {
  position: relative;
  height: 500vh;
}

/* Single sticky viewport — quote + why reveal here */
.cinema__stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 4;
}

/* Only blocks inside the sticky stage are absolutely positioned */
.cinema__stage .cinema__block {
  position: absolute;
}

/* Base block — opacity starts at 0, GSAP animates in */
.cinema__block {
  opacity: 0;
  will-change: transform, filter, opacity;
}

/* Natural scroll phase — how + what flow in normally */
.cinema__flow {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 30vh;
  padding: 10vh clamp(40px, 7vw, 120px) 30vh;
}

.cinema__block--left {
  align-self: flex-start;
  max-width: min(420px, 80vw);
  text-align: left;
}

.cinema__block--right {
  align-self: flex-end;
  max-width: min(420px, 80vw);
  text-align: left;
}

#cinemaHow {
  margin-top: 45vh;
}

/* ① Quote — upper centre, ~20% from top.
   Centered with left/right:0 + auto margins (not translate)
   so GSAP's scale/y transforms can't push it off-centre. */
#cinemaQuote {
  top: 20%;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;
  text-align: center;
  max-width: 76vw;
  z-index: 10;
}


/* ② Why — right column, matching flow block positioning */
#cinemaWhy {
  top: 52%;
  right: clamp(40px, 7vw, 120px);
  max-width: min(420px, 43vw);
  text-align: left;
  z-index: 10;
}

/* Body copy */
.cinema__block p {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.5vw, 22px);
  font-weight: 400;
  line-height: 1.65;
  color: #ffffff;
  margin: 0;
}

/* Hero quote */
#cinemaQuote p .quote-line1 {
  display: inline-block;
  font-size: 0.65em;
  position: relative;
  top: 20px;
  margin-bottom: -0.3em;
}

#cinemaQuote p .quote-accent {
  font-family: 'Citadel Script Std', 'Citadel Script', serif;
  color: var(--accent);
  font-style: normal;
  font-size: 1.55em;
  display: inline-block;
  line-height: 1;
  vertical-align: -0.03em;
}

#cinemaQuote p {
  font-family: var(--font-sans);
  font-size: clamp(22px, 3.1vw, 50px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: #ffffff;
}

/* Italic serif headline */
.cinema__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(26px, 3.0vw, 46px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 10px;
  line-height: 1.1;
}

.cinema__num {
  color: var(--accent);
  font-style: normal;
}

/* Thin rule below headline */
.cinema__hl {
  color: var(--accent);
}

.cinema__link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.cinema__link:hover {
  border-bottom-color: var(--accent);
}

.cinema__eyebrow + p {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 14px;
  margin-top: 14px;
}

/* Mobile: collapse to single left column */
@media (max-width: 767px) {
  #cinemaQuote { max-width: 86vw; }
  #cinemaWhy { right: auto; left: clamp(24px, 5vw, 40px); max-width: 80vw; }
  .cinema__flow {
    padding: 20vh clamp(24px, 5vw, 40px) 20vh;
    gap: 20vh;
  }
  .cinema__block--left,
  .cinema__block--right {
    align-self: flex-start;
    max-width: 80vw;
  }
}

.about {
  background: var(--bg);
  padding: clamp(60px, 8vw, 100px) clamp(32px, 6vw, 96px) clamp(80px, 10vw, 140px);
  border-top: 1px solid rgba(255, 244, 213, 0.08);
  position: relative;          /* anchor for absolutely-positioned ambient blobs */
}

.about__inner {
  max-width: 1160px;
  margin: 0 auto;
  position: relative;          /* float above ambient blobs */
  z-index: 1;
}

/* ── Big opener headline + background image rectangle ── */
.about__opener {
  position: relative;                /* anchor for the absolutely-positioned image */
  padding-bottom: clamp(56px, 7vw, 100px);
  border-bottom: 1px solid rgba(255, 244, 213, 0.10);
  margin-bottom: clamp(56px, 7vw, 100px);
  /* removed overflow:hidden so the image rectangle can extend
     beyond if we ever want it to bleed; uncomment if needed. */
}

/* Rectangle photo BEHIND the headline.
   • Spans the full headline area (top:0 → text bottom)
   • Stops above the bottom padding so it never crosses
     the divider line beneath the opener block
   • Width matches the headline column exactly */
.about__opener-image {
  position: absolute;
  /* Wide cinematic strip — extends generously past the headline
     on left/right for a panoramic feel, and a bit on top.
     Bottom still stops above the divider line. */
  top: -40px;
  left: -8vw;
  right: -8vw;
  bottom: calc(clamp(56px, 7vw, 100px) - 40px);
  background: url('../assets/about.jpg') center 65% / cover no-repeat;
  border-radius: 8px;
  z-index: 0;
  /* Warm cream wash so dark headline reads cleanly on top */
  box-shadow: inset 0 0 0 9999px rgba(10, 9, 3, 0.15);
}

/* Warm border-beam — thin wave of light orbiting the image edge */
.about__opener-image::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 9px;
  padding: 3px;
  pointer-events: none;
  background: conic-gradient(
    from var(--beam-angle),
    transparent          0deg,
    transparent         55deg,
    rgba(255,  70,  0, 0.35)  80deg,
    rgba(255, 185,  5, 1.00) 108deg,
    rgba(255,  70,  0, 0.35) 136deg,
    transparent        165deg,
    transparent        360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: video-beam 8s linear infinite;
  z-index: 1;
}

.about__opener-text {
  position: relative;                /* lift onto a new stacking context */
  z-index: 1;                        /* sits over the image */
  font-family: var(--font-sans);
  font-size: clamp(38px, 5.5vw, 88px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #ffffff;
}

/* ── Rows: Juan-Mora-style two-column layout.
       Label on the left as a large bold heading,
       body on the right, both top-aligned. ── */
.about__row {
  display: grid;
  /* Label column / body column — proportions match the reference */
  grid-template-columns: 1fr 1.6fr;
  column-gap: clamp(40px, 6vw, 120px);
  padding: clamp(48px, 6vw, 88px) 0;
  border-bottom: 1px solid rgba(255, 244, 213, 0.10);
  align-items: start;                 /* top-align both columns */
}

.about__row--last {
  border-bottom: none;
}

/* Label column — left-aligned, top-aligned with body's first line */
.about__row-label {
  padding-top: 4px;                   /* optical baseline match */
  padding-left: 260px;                /* nudged 260px right */
}

.about__label-text {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;                 /* upright */
  font-weight: 700;                   /* bold */
  text-transform: lowercase;          /* why / how / what */
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);               /* #FF5100 */
}

/* Row subtitle — topic name above body text */
.about__row-title {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin-bottom: 14px;
}

/* Body paragraph */
.about__row-body p {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: #ffffff;
}

/* ── Word-reveal mechanics ──
   JS wraps each word in:
   <span class="word"><span class="word__inner">...</span></span>
   .word clips, .word__inner slides up from below.
────────────────────────────── */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Prevent the clip from eating descenders */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.word__inner {
  display: inline-block;
}

/* ── Responsive: full-width body on mobile ── */
@media (max-width: 700px) {
  .about__row {
    grid-template-columns: 1fr;
  }
  .about__row-body {
    grid-column: 1;
  }
  .about__label-text {
    font-size: clamp(20px, 6vw, 28px);
  }
}

/* ═══════════════════════════════════════════
   AMBIENT TRANSITION — 3D gradient blobs
   Absolutely positioned inside .about's padding-top
   dead zone. GSAP + ScrollTrigger own all motion.
═══════════════════════════════════════════ */
.ambient-transition {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* matches .about padding-top exactly */
  height: clamp(657px, calc(22vw + 457px), 777px);
  pointer-events: none;
  z-index: 0;
  perspective: 1400px;
  overflow: hidden;
}

.ambient-blob {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  opacity: 0;
  backface-visibility: hidden;
}

/* Large orange blob — anchored left */
.ambient-blob--a {
  width: clamp(300px, 38vw, 540px);
  height: clamp(260px, 34vw, 490px);
  background: radial-gradient(
    ellipse at 42% 45%,
    rgba(255, 81, 0, 0.30) 0%,
    rgba(255, 81, 0, 0.13) 38%,
    transparent 68%
  );
  filter: blur(68px);
  border-radius: 42% 58% 65% 35% / 38% 52% 48% 62%;
  top: 5%;
  left: -6%;
}

/* Medium warm-orange blob — anchored right */
.ambient-blob--b {
  width: clamp(240px, 32vw, 460px);
  height: clamp(280px, 38vw, 540px);
  background: radial-gradient(
    ellipse at 58% 42%,
    rgba(255, 130, 0, 0.24) 0%,
    rgba(255, 201, 41, 0.10) 42%,
    transparent 70%
  );
  filter: blur(56px);
  border-radius: 68% 32% 28% 72% / 55% 45% 55% 45%;
  top: 10%;
  right: -4%;
}

/* Small sunglow blob — centre focal point (GSAP centres via xPercent/yPercent) */
.ambient-blob--c {
  width: clamp(160px, 20vw, 300px);
  height: clamp(140px, 18vw, 270px);
  background: radial-gradient(
    ellipse at 50% 48%,
    rgba(255, 201, 41, 0.22) 0%,
    rgba(255, 130, 0, 0.09) 48%,
    transparent 74%
  );
  filter: blur(42px);
  border-radius: 50% 50% 35% 65% / 60% 40% 60% 40%;
  top: 35%;
  left: 42%;
}

/* Huge ambient fill — wide glow behind everything (GSAP centres via xPercent) */
.ambient-blob--d {
  width: clamp(480px, 62vw, 860px);
  height: clamp(360px, 48vw, 680px);
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(255, 81, 0, 0.10) 0%,
    rgba(255, 81, 0, 0.04) 42%,
    transparent 68%
  );
  filter: blur(100px);
  border-radius: 50%;
  top: -10%;
  left: 50%;
}

/* Lower-zone blob — left anchor, deep orange */
.ambient-blob--e {
  width: clamp(260px, 34vw, 480px);
  height: clamp(220px, 28vw, 400px);
  background: radial-gradient(
    ellipse at 40% 52%,
    rgba(255, 81, 0, 0.22) 0%,
    rgba(255, 81, 0, 0.08) 44%,
    transparent 70%
  );
  filter: blur(72px);
  border-radius: 55% 45% 38% 62% / 42% 60% 40% 58%;
  top: 54%;
  left: 3%;
}

/* Lower-zone blob — right anchor, warm amber */
.ambient-blob--f {
  width: clamp(200px, 28vw, 400px);
  height: clamp(240px, 32vw, 460px);
  background: radial-gradient(
    ellipse at 60% 40%,
    rgba(255, 160, 0, 0.18) 0%,
    rgba(255, 201, 41, 0.07) 46%,
    transparent 72%
  );
  filter: blur(60px);
  border-radius: 35% 65% 60% 40% / 58% 42% 58% 42%;
  top: 62%;
  right: 2%;
}

/* ── Horizontal scan lines ── */
.transition-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.transition-line {
  position: absolute;
  left: 0;
  width: 0%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 81, 0, 0.18) 20%,
    rgba(255, 201, 41, 0.22) 50%,
    rgba(255, 81, 0, 0.18) 80%,
    transparent 100%
  );
  opacity: 0;
  will-change: width, opacity;
}

.transition-line--1 { top: 52%; }
.transition-line--2 { top: 65%; }
.transition-line--3 { top: 78%; }

/* ── Particle dots ── */
.transition-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.t-particle {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 201, 41, 0.70) 0%, transparent 70%);
}

/* ═══════════════════════════════════════════
   WIPE TRANSITION SECTION
═══════════════════════════════════════════ */
.wipe-transition {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
  border-top: 1px solid rgba(255, 244, 213, 0.08);
}

.wipe__strips {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 2;
  pointer-events: none;
}

.wipe__strip {
  flex: 1;
  will-change: transform;
}

.wipe__strip:nth-child(1) { background: #FF5100; }
.wipe__strip:nth-child(2) { background: #D94500; }
.wipe__strip:nth-child(3) { background: #FF5100; }
.wipe__strip:nth-child(4) { background: #D94500; }
.wipe__strip:nth-child(5) { background: #FF5100; }
.wipe__strip:nth-child(6) { background: #D94500; }

.wipe__reveal {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  pointer-events: none;
}

.wipe__monogram {
  color: #FFF4D5;
  will-change: transform, opacity;
}

.wipe__label {
  font-family: var(--font-sans);
  font-size: clamp(11px, 1.4vw, 16px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 244, 213, 0.75);
  will-change: opacity;
}

/* ═══════════════════════════════════════════
   CTA — LAST PAGE
   Inspired by juanmora.co: a full-viewport
   rounded card with headline, subtitle, and
   an action bar (arrow + "Let's talk").
═══════════════════════════════════════════ */

/* Outer section — just background + padding */
.cta {
  min-height: 100svh;
  background: var(--bg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Main card ── */
.cta__card {
  flex: 1;
  border: 1px solid rgba(255, 244, 213, 0.10);
  border-radius: 36px;
  background: var(--bg-light);
  padding: clamp(28px, 4vw, 56px) clamp(28px, 5vw, 72px) clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  /* Subtle warm glow from accent colour in the corner */
  box-shadow: inset 80px 80px 200px -80px rgba(255, 81, 0, 0.08);
  transition: border-color 0.5s var(--ease-out-expo);
}

.cta__card:hover {
  border-color: rgba(255, 244, 213, 0.22);
}

/* ── Headline body ── */
.cta__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: clamp(12px, 2vw, 32px);
}

.cta__headline {
  /* Clash Display (web-loaded via Fontshare) so it renders identically
     on every device — Helvetica Now Display is only installed locally
     and fell back to a cramped Arial on phones. */
  font-family: 'Clash Display', var(--font-sans);
  font-size: clamp(48px, 7vw, 112px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--fg);
}

.cta__headline em {
  font-style: italic;
  font-family: 'Clash Display', var(--font-sans);
  font-weight: 600;
  color: var(--fg);
  opacity: 0.65;    /* slightly dimmer — same trick Juan Mora uses */
}

.cta__sub {
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.4vw, 17px);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}

/* ── Contact bar — stretches edge-to-edge inside card ── */
.cta__bar {
  /* Cancel the card's horizontal + bottom padding so bar bleeds to edges */
  margin-left:   calc(-1 * clamp(28px, 5vw, 72px));
  margin-right:  calc(-1 * clamp(28px, 5vw, 72px));
  margin-bottom: calc(-1 * clamp(28px, 3vw, 44px));
  margin-top:    clamp(36px, 5vw, 72px);
  /* Re-apply same padding so inner content stays aligned */
  padding: 24px clamp(28px, 5vw, 72px) clamp(32px, 4vw, 52px);
  background: rgba(255, 244, 213, 0.04);
  border-top: 1px solid rgba(255, 244, 213, 0.07);
  cursor: none;
  transition: background 0.5s var(--ease-out-expo);
  /* card overflow:hidden + border-radius clips the rounded corners */
}

.cta__bar:hover {
  background: var(--fg);   /* cream-white */
}

/* ── Top row: arrow + copy button ── */
.cta__bar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* Arrow circle */
.cta__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 244, 213, 0.22);
  border-radius: 50%;
  color: var(--fg-muted);
  flex-shrink: 0;
  transition:
    border-color 0.4s var(--ease-out-expo),
    color        0.4s var(--ease-out-expo),
    transform    0.5s var(--ease-out-expo);
}

.cta__bar:hover .cta__arrow {
  border-color: rgba(255, 244, 213, 0.30);
  color: var(--bg);
  transform: rotate(-45deg);
}

/* ── Cursor-following "Copy my Email" tag ── */
.cta__cursor-tag {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  background: var(--accent);   /* terracotta */
  color: #fff;
  padding: 10px 20px;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  white-space: nowrap;
  /* GSAP drives x/y; opacity + scale handled here */
  opacity: 0;
  scale: 0.75;
  transition:
    opacity 0.22s var(--ease-out-expo),
    scale   0.22s var(--ease-out-expo);
  will-change: transform, opacity;
}

.cta__cursor-tag.is-visible {
  opacity: 1;
  scale: 1;
}

.cta__cursor-tag.is-copied {
  background: var(--accent-dark);   /* deeper aerospace orange for "Copied!" */
}

/* ── Big text: "Let's talk" → email on hover (desktop) ── */
.cta__bar-text {
  position: relative;
  overflow: hidden;
  /* height set by JS to the tallest fitted line */
}

.cta__bar-fit {
  display: block;
  /* Both lines stacked so they can cross-fade in place */
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--fg);
  /* font-size set by JS to stretch exactly to bar width */
  transition: opacity 0.4s var(--ease-out-expo), color 0.5s var(--ease-out-expo);
}

/* Default: "Let's talk" visible, email waiting beneath */
.cta__bar-label { opacity: 1; }
.cta__bar-email { opacity: 0; }

/* Hover: swap "Let's talk" → email, bg flips white → text dark */
.cta__bar:hover .cta__bar-label { opacity: 0; }
.cta__bar:hover .cta__bar-email { opacity: 1; }
.cta__bar:hover .cta__bar-fit  { color: var(--bg); }

/* ── Tiny footer line ── */
.cta__foot {
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
}

.cta__foot span {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 244, 213, 0.25);
  text-transform: uppercase;
}

/* footer merged into .cta__foot above */

/* ═══════════════════════════════════════════
   KEYFRAME ANIMATIONS
═══════════════════════════════════════════ */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nameReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes videoReveal {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
/* (Tablet ≤768 rules consolidated into the phone block below —
   the old block referenced removed elements and conflicted with
   the current mobile hero.) */

/* ═══════════════════════════════════════════
   MOBILE / TOUCH OVERRIDES  (appended last so
   these win the cascade). Two layers:
   • (hover:none) → touch devices: kill custom
     cursor, restore the real pointer.
   • (max-width:767px) → phone layout fixes.
═══════════════════════════════════════════ */

/* ── Touch devices: real cursor back ── */
@media (hover: none) {
  html, body { cursor: auto !important; }
  * { cursor: auto !important; }
  a, button, .nav__pill-item, .nav__social,
  .project, .project__meta, .project__more,
  .works__toggle-btn, .hero__raw-btn,
  .cta__bar, .vmodal__play, .vmodal__close,
  .vmodal__frame { cursor: pointer !important; }
  .cursor { display: none !important; }

  /* No hover → keep VIEW MORE permanently open (never a stuck dot) */
  .project__more { width: auto; height: auto; padding: 6px 14px; }
  .project__more-text { position: static; transform: none; opacity: 1; }
}

/* ── Phone layout ── */
@media (max-width: 767px) {

  /* NOTE: do NOT put overflow-x:hidden on <html> — it turns <html>
     into a scroll container and breaks position:sticky (the cinema
     About section relies on it). body already clips x-overflow. */

  /* ── Nav: centre pill sits a bit higher; social links become
        a clickable vertical stack under the pill (top-right). ── */
  .nav { top: 20px; padding: 0 16px; }

  .nav__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    position: absolute;
    top: calc(100% + 12px);
    right: 16px;
    z-index: 90;
  }
  /* Static label (no hover flip) + tap-friendly size on touch */
  .nav__social {
    height: auto;
    font-size: 13px;
    letter-spacing: 0.04em;
  }
  .nav__social-bottom { display: none; }
  .nav__social-inner { transform: none !important; }

  /* ── Hero: ROMAN + RUSINOV on ONE line, reel box removed.
        The pinned folder mechanic keeps this row as the header. ── */
  .hero__inner { padding: 0 16px 64px; }

  .hero__stage {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 0.5em;
  }

  /* Remove the Selected Works box on mobile */
  .hero__video-wrapper { display: none; }

  .hero__name {
    flex: 0 1 auto;
    font-size: clamp(30px, 11vw, 60px);
    line-height: 1;
  }
  .hero__name--first { text-align: right; }
  .hero__name--last  { text-align: left; }
  /* No kinetic squish on touch — keep spans natural */
  .hero__name-inner { transform: none !important; }

  .hero__role {
    top: calc(var(--nav-h) + 16px);
    left: 20px;
    font-size: 15px;
  }

  /* ── Works: KEEP the pinned folder mechanic (same as desktop).
        Just tidy the meta row for narrow screens. ── */
  .project__meta {
    gap: 8px;
    padding: 12px 16px;
  }
  /* Let a long title wrap to 2 lines instead of shoving the
     button off-screen; button stays inline-right, centred. */
  .project__title {
    font-size: 14px;
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
  }
  .project__year { margin-right: 0; flex-shrink: 0; }

  /* "View More" always visible on touch (no hover) */
  .project__more-text {
    position: static;
    transform: none;
    opacity: 1;
  }
  /* Inline on the right, level with the title row */
  .project__more {
    position: static;
    margin-left: auto;
    flex-shrink: 0;
    width: auto;
    height: auto;
    transform: none;
    padding: 6px 12px;
    font-size: 9px;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Video modal: near full-width on phones ── */
  .vmodal { padding: 16px; }
  .vmodal__inner { max-width: 100%; max-height: 92vh; }
  .vmodal__title { font-size: clamp(22px, 7vw, 30px); }

  /* ── About / cinema: readable sizes ── */
  #cinemaQuote p { font-size: clamp(22px, 7vw, 34px); line-height: 1.05; }
  /* Small first line "I don't make videos." — reset the desktop
     tuck (negative margin/offset) so it doesn't overlap the big line */
  #cinemaQuote p .quote-line1 {
    top: 0;
    font-size: 0.62em;
    margin-bottom: 0.15em;
  }
  #cinemaQuote p .quote-accent { font-size: 1.4em; }
  .cinema__eyebrow { font-size: clamp(24px, 7vw, 34px); }
  .cinema__block p { font-size: clamp(15px, 4vw, 18px); }

  /* CTA: phones show the raw email directly (no hover swap) */
  .cta__bar-label { display: none; }
  .cta__bar-fit {
    position: static;
    transform: none;
  }
  .cta__bar-email { display: block; opacity: 1; }
  .cta__headline { font-size: clamp(40px, 11vw, 64px); }
}