/* ===========================================================
   AmandaLK — The Wall (3D tilted grid-wall, per-brand)
   One brand's work lives on one large angled wall. Vertical
   scroll pans the camera across the wall; tiles lift toward
   you on hover. No devices, no frames — the work is the
   subject. A champagne sparkle field drifts behind everything.
   Three.js r128 (atmosphere) + GSAP ScrollTrigger (pan).
   Mobile falls back to a calm vertical stack.
   =========================================================== */

:root {
  --stage-charcoal: #0B0B0C;
  --serif: 'Oswald', sans-serif;   /* condensed display headlines */
  --sans: 'Jost', sans-serif;      /* body + UI */
}

/* overscroll-behavior kills the vertical rubber-band "bounce" at the top of
   the pinned gallery, so the first scroll gesture reads purely as a side pan. */
html, body { background: var(--stage-charcoal); overscroll-behavior-y: none; }

.stage {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(130% 100% at 50% 4%, #161618 0%, #101012 46%, var(--stage-charcoal) 100%);
}
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }

/* ---------- top bar ---------- */
.barnav { position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; pointer-events: auto; }
.barnav a { color: var(--cream); text-decoration: none; }
/* wordmark matches the homepage spec exactly: Jost (--sans) 500 tracked caps,
   gold LK — NOT the old bold Oswald serif that the base .barnav a used to force. */
.barnav__home { font-family: var(--sans); font-weight: 500; text-transform: uppercase;
  letter-spacing: .3em; font-size: 14px; line-height: 1; color: var(--cream); }
.barnav__home .lk { color: var(--gold-lt); }
.barnav__links { display: flex; align-items: center; gap: 26px; }
.barnav__links a { font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cream-soft);
  transition: color .25s ease; }
.barnav__links a:hover { color: var(--gold-lt); }
.barnav__links a.is-on { color: var(--gold-lt); }

/* mobile sticky bottom bar */
.mobilebar { display: none; }
@media (max-width: 760px) {
  .barnav__links { display: none; }
  .mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; gap: 10px;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(11,11,12,0.97) 60%, rgba(11,11,12,0)); }
  .mobilebar a { flex: 1; display: flex; align-items: center; justify-content: center;
    gap: 8px; height: 46px; border-radius: 11px; text-decoration: none;
    font-family: var(--sans); font-weight: 500; font-size: .76rem;
    text-transform: uppercase; letter-spacing: .16em;
    transition: transform .18s ease; }
  .mobilebar a:active { transform: scale(0.97); }
  .mobilebar__learn { background: var(--gold); color: #0B0B0C; }
  .mobilebar__about { background: #16161A; color: var(--cream);
    border: 1px solid rgba(194,169,136,0.42); }
  .mobilebar svg { width: 15px; height: 15px; flex: none; }
}

/* ---------- hero ---------- */
.hero { position: relative; z-index: 5; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px; pointer-events: none; }
.hero__eyebrow { font-family: var(--sans); font-weight: 500; text-transform: uppercase;
  letter-spacing: .4em; font-size: clamp(.62rem, 2vw, .82rem); color: var(--cream-soft);
  padding-left: .4em; margin-bottom: 22px; }
.hero__title { font-family: var(--serif); font-weight: 600; text-transform: uppercase;
  color: var(--cream); font-size: clamp(2.6rem, 12vw, 6.4rem); line-height: .9;
  letter-spacing: .01em; margin: 0; text-shadow: 0 2px 50px rgba(0,0,0,.7); }
.hero__script { font-family: 'Great Vibes', cursive; color: var(--gold-lt);
  font-size: clamp(2rem, 8.5vw, 3.6rem); line-height: .9; margin: 14px 0 0; }
.hero__sub { font-family: var(--sans); color: var(--cream-soft); max-width: 52ch;
  margin: 26px auto 0; font-size: clamp(.95rem, 2.4vw, 1.08rem); line-height: 1.6;
  text-shadow: 0 1px 20px rgba(0,0,0,.6); }
.hero__cue { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--gold-lt); font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; opacity: .9; transition: opacity .4s ease; }
.hero__cue .arrow { width: 13px; height: 13px; margin-top: 2px;
  border-right: 1.6px solid var(--gold-lt); border-bottom: 1.6px solid var(--gold-lt);
  animation: cueDrop 1.6s ease-in-out infinite; }
@keyframes cueDrop {
  0%,100% { transform: rotate(45deg) translate(-3px,-3px); opacity:.45 }
  50%     { transform: rotate(45deg) translate(2px,2px);   opacity:1 }
}
@media (max-width: 760px) {
  .hero__cue { bottom: calc(86px + env(safe-area-inset-bottom)); }
}

/* ===========================================================
   THE GALLERY — pinned section; vertical scroll drives a
   horizontal pan across an angled wall of work.
   =========================================================== */
.gallery { position: relative; z-index: 5; }
.gallery__stage {
  position: relative; height: 100svh; width: 100%;
  overflow: hidden;
  perspective: 2400px;
  perspective-origin: 52% 46%;
}

/* corner stack that stays put while the wall pans behind it.
   One evenly-spaced, left-aligned column: back link · brand · CTA.
   FIXED to the viewport (and lifted OUT of .gallery__stage in the markup) so
   it never rides the 3D perspective / pinned wall — it holds dead-still while
   the tilted grid scrubs back and forth behind it. */
.gallery__eyebrow {
  position: fixed; top: clamp(82px, 12vh, 124px); left: clamp(22px, 4vw, 52px);
  z-index: 12; pointer-events: none; max-width: 340px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.gallery__eyebrow .h { font-family: var(--serif); font-weight: 600; text-transform: uppercase;
  color: var(--cream); font-size: clamp(1.7rem, 3.8vw, 2.6rem); line-height: 1.0;
  margin: 0; text-shadow: 0 2px 24px rgba(0,0,0,.7); }
/* "All worlds" back link — now part of the stack so it lines up */
.eyebrow__back { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-soft); text-decoration: none;
  padding: 9px 16px; border-radius: 9999px; background: rgba(16,16,18,0.6);
  border: 1px solid var(--line); backdrop-filter: blur(6px);
  transition: color .25s ease, border-color .25s ease; }
.eyebrow__back:hover { color: var(--gold-lt); border-color: var(--line-gold); }
.eyebrow__back .ar { font-size: 13px; }
/* desktop "Start a project" — sits under the brand label */
.eyebtn { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 10px;
  background: var(--gold); color: #0B0B0C; text-decoration: none;
  font-family: var(--sans); font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; font-size: .76rem;
  box-shadow: 0 18px 40px -22px rgba(156,128,99,0.9);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s ease; }
.eyebtn:hover { transform: translateY(-2px); background: var(--gold-lt);
  box-shadow: 0 24px 50px -22px rgba(194,169,136,0.95); }
.eyebtn .arr { transition: transform .25s var(--ease); }
.eyebtn:hover .arr { transform: translateX(4px); }
/* mobile: the brand label only — the bottom bar already has both links */
@media (max-width: 760px) {
  .eyebrow__back, .eyebtn { display: none !important; }
}

/* scrub progress rail, bottom-center */
.gallery__rail { position: absolute; left: 50%; bottom: clamp(26px, 5vh, 46px);
  transform: translateX(-50%); z-index: 12; width: clamp(180px, 30vw, 320px);
  height: 2px; background: var(--line); border-radius: 9999px; pointer-events: none; }
.gallery__rail i { position: absolute; left: 0; top: 0; height: 100%; width: 12%;
  background: linear-gradient(90deg, var(--gold), var(--gold-lt)); border-radius: 9999px; }
@media (max-width: 760px) { .gallery__rail { display: none; } }

/* the moving layer that GSAP translates (kept un-rotated) */
.wall-track {
  position: absolute; top: 50%; left: 0;
  display: flex; align-items: center;
  transform-style: preserve-3d;
  will-change: transform;
  /* The 3D rotateY makes the leftmost column recede BEHIND this flat track
     plane, so the container was stealing clicks aimed at the first tile's
     play button. Make all structural layers click-through; only real tiles
     catch pointer events (set on .tile below). */
  pointer-events: none;
}
/* the angled wall itself */
.wall {
  display: flex; align-items: center;
  gap: clamp(20px, 2.4vw, 40px);
  padding: 0 12vw;
  transform: rotateY(-16deg) rotateX(2.4deg);
  transform-style: preserve-3d;
  pointer-events: none;
}
/* a column of stacked tiles */
.col {
  display: flex; flex-direction: column;
  gap: clamp(20px, 2.4vw, 40px);
  transform-style: preserve-3d;
  pointer-events: none;
}
/* a stagger so columns don't read as a rigid grid */
.col:nth-child(even) { transform: translateY(4%); }
.col:nth-child(3n)   { transform: translateY(-4%); }

/* ---------- a single piece of work ---------- */
.tile {
  position: relative; flex: none;
  width: clamp(230px, 23vw, 340px);
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, var(--char-2), var(--void-2));
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,0.95), 0 2px 8px rgba(0,0,0,0.4);
  transform-style: preserve-3d;
  transition: transform .6s var(--ease), border-color .5s var(--ease),
              box-shadow .6s var(--ease);
  cursor: default;
  /* re-enable clicks on the actual work tiles (containers are click-through) */
  pointer-events: auto;
}
.tile--reel    { aspect-ratio: 9 / 16; }
.tile--grid    { aspect-ratio: 1 / 1; }
.tile--site    { aspect-ratio: 3 / 4; }
.tile--wide    { aspect-ratio: 16 / 10; }
.tile--video   { cursor: pointer; }

.tile__img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; display: block;
  transition: transform .9s var(--ease); }
.tile--wide .tile__img,
.tile--grid .tile__img { object-position: center; }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .35s ease; z-index: 2; }
.tile.playing video { opacity: 1; }

/* hover lift — tile pops off the wall toward the viewer */
.tile:hover { transform: translateZ(86px) scale(1.015);
  border-color: var(--line-gold);
  box-shadow: 0 50px 90px -40px rgba(0,0,0,0.95),
              0 0 0 1px var(--line-gold), 0 0 46px -6px var(--gold-glow); }
.tile:hover .tile__img { transform: scale(1.05); }

/* caption — fades up on hover */
.tile__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 36px 16px 14px; pointer-events: none;
  background: linear-gradient(to top, rgba(8,8,9,0.92) 6%, rgba(8,8,9,0.55) 48%, rgba(8,8,9,0) 100%);
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease); }
.tile:hover .tile__cap { opacity: 1; transform: none; }
.tile__client { font-family: var(--serif); font-weight: 600; text-transform: uppercase;
  color: var(--cream); font-size: 1.04rem; line-height: 1.05; letter-spacing: .01em; }
.tile__kind { font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-lt); margin-top: 5px; }

/* play / stop glyph on the playable tiles */
.tile__play { position: absolute; inset: 0; z-index: 4; margin: auto;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(11,11,12,0.42); border: 1px solid rgba(245,241,232,0.85);
  backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center;
  opacity: .82; transition: opacity .3s ease, transform .3s ease, background .3s ease; }
.tile--video:hover .tile__play { opacity: 1; transform: scale(1.06); }
/* a playing tile keeps the control visible (faint until hover) so there's
   always an obvious way to stop — the glyph swaps from triangle to pause bars */
.tile.playing .tile__play { opacity: 0; }
.tile.playing:hover .tile__play { opacity: 1; background: rgba(11,11,12,0.62); }
.tile__play::before { content: ""; border-left: 14px solid var(--cream);
  border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
/* swap the play triangle for two pause bars while the video runs */
.tile.playing .tile__play::before { border: 0; margin-left: 0;
  width: 14px; height: 16px;
  border-left: 4px solid var(--cream); border-right: 4px solid var(--cream); }

/* ===========================================================
   MOBILE: the SAME tilted wall as desktop, but panned with a
   native horizontal swipe instead of the GSAP vertical pin.
   The stage itself scrolls sideways; the brand title pins over
   it. No GSAP runs on mobile, so there are no inline transforms
   to fight — the 3D tilt is kept intact.
   =========================================================== */
@media (max-width: 760px) {
  .gallery { z-index: 5; }
  .gallery__stage {
    height: 100svh;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    perspective: 1500px; perspective-origin: 50% 48%;
    padding: 0; scrollbar-width: none; }
  .gallery__stage::-webkit-scrollbar { display: none; }

  /* brand title floats over the wall and stays put while it scrolls */
  .gallery__eyebrow {
    position: fixed; top: clamp(68px, 11vh, 104px); left: 18px;
    max-width: 62%; gap: 0; z-index: 25; pointer-events: none; }
  .gallery__eyebrow .h { font-size: clamp(1.55rem, 7.6vw, 2.1rem); }

  /* the wall now sits in normal flow and is scrolled natively */
  .wall-track {
    position: relative; top: auto; left: auto;
    height: 100%; transform: none;
    display: flex; align-items: center; width: max-content; }
  .wall { gap: 16px; padding: 0 18vw 0 7vw; }
  .col { gap: 16px; }
  .tile { width: clamp(185px, 54vw, 240px); }
  .tile:hover { transform: none; }
}

.no-webgl #scene { display: none; }