/* ==========================================================================
   v2 hero — XEROX: photocopied poster layers in a 3D scene
   ========================================================================== */
:root { --red-deep: #9c1f16; --mis: 5px; }
.hero--xerox { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; padding-top: 68px; overflow: hidden; isolation: isolate; background: var(--bg); }
.hero__defs { position: absolute; width: 0; height: 0; }
.hero__paper { position: absolute; inset: 0; z-index: 0; background: url("../images/bg-6ad4036f.png") center/cover; opacity: .28; mix-blend-mode: screen; pointer-events: none; }

/* ---- 3D stage ---- */
.stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; perspective: 1400px; perspective-origin: 62% 45%; }
.scene { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.ly { position: absolute; transform-style: preserve-3d; backface-visibility: hidden; }
.ly img { display: block; height: 100%; width: auto; max-width: none; }

.ly--skyline { left: -4vw; bottom: -3vh; width: 86vw; max-width: 1300px; opacity: .26; transform: translateZ(-460px); }
.ly--skyline img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 92%); mask-image: linear-gradient(to top, #000 30%, transparent 92%); }

.ly--circle { left: 54%; top: 4vh; width: 74vh; height: 74vh; transform: translateZ(-280px); }
.in--circle { position: relative; width: 100%; height: 100%; }
.in--circle::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--red); -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 70%); mask-image: radial-gradient(circle, #000 52%, transparent 70%); }
.in--circle .dots { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, var(--red) 34%, transparent 36%) 0 0 / 9px 9px; -webkit-mask-image: radial-gradient(circle, transparent 40%, #000 62%, #000 74%, transparent 78%); mask-image: radial-gradient(circle, transparent 40%, #000 62%, #000 74%, transparent 78%); opacity: .95; }

.ly--stairs { right: -3vw; top: 2vh; height: 78vh; transform: translateZ(-160px); }
.ly--title { left: var(--gutter); top: 21vh; transform: translateZ(-40px); }
.ly--man { left: 55%; bottom: -2vh; height: 84vh; transform: translateZ(0); }
.ly--pawn { left: 45%; bottom: -3vh; height: 46vh; transform: translateZ(140px); }
.ly--ticket { left: 43%; top: 11vh; width: clamp(96px, 7.2vw, 132px); transform: translateZ(80px) rotate(-7deg); }
.ly--ticket img { width: 100%; height: auto; }

/* misregistered red ghost, drifting like a copier drum */
.mis { filter: drop-shadow(var(--mis) 0 0 rgba(255, 59, 46, .95)); animation: misreg 7s steps(1) infinite; }
@keyframes misreg { 0% { --mis: 5px; } 61% { --mis: 5px; } 62% { --mis: 9px; } 66% { --mis: 3px; } 70% { --mis: 5px; } 100% { --mis: 5px; } }

/* ---- title: extruded, rough ---- */
.hero__h1 { font-size: clamp(60px, 8.9vw, 170px); line-height: .84; pointer-events: auto; }
.hero__h1 .l { display: block; overflow: hidden; padding-right: .15em; }
.hero__h1 .l span { display: block; transform: translateY(110%); animation: rise 1.1s var(--ease) forwards; }
.hero__h1 .l:nth-child(2) span { animation-delay: .12s; }
.ex--cream { color: var(--white); text-shadow: 1px 1px 0 var(--red-deep), 2px 2px 0 var(--red-deep), 3px 3px 0 var(--red-deep), 4px 4px 0 var(--red-deep), 5px 5px 0 var(--red-deep), 6px 6px 0 var(--red-deep), 7px 7px 0 var(--red-deep), 8px 8px 0 var(--red-deep), 9px 9px 0 var(--red-deep), 10px 10px 0 var(--red-deep), 11px 11px 0 var(--red-deep), 12px 12px 0 var(--red-deep); }
.ex--red { color: var(--red); text-shadow: 1px 1px 0 var(--white), 2px 2px 0 var(--white), 3px 3px 0 var(--white), 4px 4px 0 var(--white), 5px 5px 0 var(--white), 6px 6px 0 var(--white), 7px 7px 0 var(--white), 8px 8px 0 var(--white); }

/* ---- overlays ---- */
.hero__grain { position: absolute; inset: -20%; z-index: 5; pointer-events: none; opacity: .17; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -.55'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 320px 320px; animation: grain .9s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 16% { transform: translate(-3%, 2%); } 33% { transform: translate(2%, -4%); } 50% { transform: translate(-4%, -1%); } 66% { transform: translate(3%, 3%); } 83% { transform: translate(-1%, 4%); } 100% { transform: translate(0,0); } }
.hero__scan { position: absolute; left: 0; right: 0; height: 26vh; z-index: 6; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(to bottom, transparent, rgba(243,240,234,.09) 45%, rgba(255,59,46,.10) 52%, transparent); animation: scan 8.5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes scan { 0% { top: -30%; } 42% { top: 110%; } 100% { top: 110%; } }
.hero__vignette { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(10,10,11,.75) 100%); }

/* ---- copy ---- */
.hero--xerox .hero__top { position: relative; z-index: 7; }
.hero__side { position: absolute; right: 22px; top: 50%; z-index: 7; transform: translateY(-50%); writing-mode: vertical-rl; color: var(--faint); white-space: nowrap; letter-spacing: .22em; pointer-events: none; }
.hero__main { position: relative; z-index: 7; display: grid; gap: clamp(16px, 2vw, 26px); align-content: end; justify-items: start; padding: clamp(20px, 3vw, 40px) var(--gutter) 0; max-width: min(46%, 640px); pointer-events: none; }
.hero__main > * { pointer-events: auto; }
.hero__lede { font-size: clamp(20px, 1.75vw, 28px); line-height: 1.15; margin: 0; max-width: 24ch; color: var(--white); animation: fadeUp 1s .5s var(--ease) both; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; animation: fadeUp 1s .65s var(--ease) both; }
.hero--xerox .hero__meta { position: relative; z-index: 7; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 20px var(--gutter) 24px; border-top: 1px solid var(--line); margin-top: clamp(18px, 3vh, 36px); width: min(44%, 660px); animation: fadeUp 1s .8s var(--ease) both; }
.hero--xerox .hero__meta .cell { grid-column: auto; display: grid; gap: 8px; }
.hero--xerox .hero__meta .cell .v { font-size: 15px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---- entrances + idle ---- */
.in { animation-fill-mode: both; }
.in--circle  { transform-origin: 50% 50%; animation: circleIn 1.4s .1s both cubic-bezier(.22,1,.36,1); }
.in--man     { animation: manIn 1.3s .25s both cubic-bezier(.22,1,.36,1), floatA 8s 1.6s ease-in-out infinite alternate; }
.in--stairs  { animation: stairsIn 1.4s .45s both cubic-bezier(.22,1,.36,1), floatB 10s 1.9s ease-in-out infinite alternate; }
.in--pawn    { animation: pawnIn 1.2s .6s both cubic-bezier(.22,1,.36,1); }
.in--ticket  { transform-origin: 50% 0; animation: ticketIn 1.2s .8s both cubic-bezier(.22,1,.36,1), sway 6s 2s ease-in-out infinite alternate; }
.in--skyline { animation: fadeIn 1.6s .3s both; }
@keyframes circleIn { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes manIn    { from { transform: translateY(12%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes stairsIn { from { transform: translate(10%, -8%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pawnIn   { from { transform: translateY(24%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ticketIn { from { transform: translateY(-40px) rotate(-9deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes sway     { from { transform: rotate(0deg); } to { transform: rotate(3deg); } }
@keyframes floatA   { from { transform: translateY(0); } to { transform: translateY(-1.2%); } }
@keyframes floatB   { from { transform: translateY(0); } to { transform: translateY(1%); } }

@media (prefers-reduced-motion: reduce) {
  .in, .mis, .hero__h1 .l span, .hero__lede, .hero__ctas, .hero--xerox .hero__meta, .hero__grain, .hero__scan { animation: none !important; transform: none !important; opacity: 1 !important; }
  .hero__scan { display: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hero__h1 { font-size: clamp(56px, 11vw, 190px); }
  .ly--man { left: 60%; height: 82vh; }
  .ly--circle { width: 68vh; height: 68vh; }
  .ly--pawn { left: 47%; height: 38vh; }
  .ly--stairs { height: 52vh; }
  .hero__main { max-width: min(60%, 640px); }
  .hero--xerox .hero__meta { width: min(70%, 860px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__side { display: none; }
}
@media (max-width: 820px) {
  .hero--xerox { display: flex; flex-direction: column; min-height: 0; }
  .hero__top .cap { display: none; }
  .stage { order: 10; position: relative; inset: auto; height: 62vh; margin-top: 10px; perspective: 900px; perspective-origin: 60% 50%; }
  .ly--title { position: relative; left: auto; top: auto; transform: none; padding: 12px var(--gutter) 0; }
  .ly--title { position: static; }
  .hero__h1 { font-size: clamp(44px, 13vw, 96px); }
  /* title moves out of the 3D stage on mobile: we re-home it visually via order */
  .hero__main { max-width: none; padding-top: 6px; align-content: start; }
  .hero__lede { font-size: 21px; }
  .hero--xerox .hero__meta { width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
  .ly--circle { left: auto; right: -10vw; top: 2vh; width: 66vw; height: 66vw; transform: translateZ(-160px); }
  .ly--man { left: auto; right: -6vw; bottom: 0; height: 84%; }
  .ly--stairs { display: block; right: -18vw; top: -4vh; height: 70%; opacity: .9; }
  .ly--pawn { left: 4vw; bottom: -1vh; height: 50%; transform: translateZ(80px); }
  .ly--ticket { left: 14vw; top: 4vh; width: 25vw; transform: translateZ(60px) rotate(-5deg); }
  .ly--skyline { width: 130vw; left: -15vw; bottom: -6vh; opacity: .3; max-width: none; transform: translateZ(-240px); }
  .hero__vignette { display: none; }
}

/* title lives in the 3D scene on desktop, in the flow on mobile */
.hero__h1--flow { display: none; }
@media (max-width: 820px) {
  .ly--title { display: none; }
  .hero__h1--flow { display: block; }
}