/* The proof blocks: real work sitting on top of the film, never covering it
   edge to edge, always with their own darkness so they read. */

.proof{ position:relative; padding:14vh 1.5rem; }
/* the block carries its own darkness so headings never fight the film */
.proof::before{
  content:""; position:absolute; inset:-6vh 0; pointer-events:none;
  background:radial-gradient(70% 55% at 50% 50%, rgba(3,6,14,.86) 0%, rgba(3,6,14,.6) 55%, rgba(3,6,14,0) 100%);
}
.proof__in{
  position:relative;
  max-width:60rem; margin:0 auto; text-align:center;
  opacity:0; transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.proof__in.is-in{ opacity:1; transform:none }
.proof__kick{
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); opacity:.85; margin-bottom:1rem;
}
.proof__title{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1.25; margin-bottom:.7rem;
}
.proof__note{ color:var(--ink-2); font-size:.94rem; max-width:46ch; margin:0 auto 2rem }

/* the glass the real things sit on */
.slab{
  background:rgba(6,10,20,.72);
  border:1px solid rgba(231,192,122,.22);
  border-radius:18px;
  box-shadow:0 40px 100px -60px rgba(0,0,0,.95);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
}

/* ---- the tour ---- */
.tour{ position:relative; aspect-ratio:16/9; cursor:pointer }
.tour img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.72) brightness(.72); transition:filter .4s ease }
.tour:hover img{ filter:saturate(.9) brightness(.85) }
.tour iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.tour__ov{
  position:absolute; inset:0; display:grid; place-items:center; gap:1rem;
  background:rgba(5,9,18,.42); transition:background .3s ease;
}
.tour:hover .tour__ov{ background:rgba(5,9,18,.24) }
.tour__play{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:rgba(7,11,24,.6); border:1px solid rgba(231,192,122,.6);
  box-shadow:0 0 34px rgba(231,192,122,.35);
}
.tour__play svg{ width:24px; height:24px; fill:var(--gold) }
.tour__label{
  position:absolute; bottom:1.1rem; left:0; right:0;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  text-shadow:0 2px 14px rgba(0,0,0,.8);
}
.tour.is-lit .tour__ov{ display:none }

/* ---- the guides ---- */
.guides{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
@media (max-width:760px){ .guides{ grid-template-columns:1fr } }
.guide{ padding:1.1rem 1.2rem; display:flex; align-items:center; gap:.9rem; text-align:left }
.guide__name{ font-family:var(--display); font-size:1.15rem }
.guide__tag{ font-size:.76rem; color:var(--ink-2) }
.play{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%; cursor:pointer;
  background:var(--gold); border:0; display:grid; place-items:center;
  transition:transform .2s ease;
}
.play:hover{ transform:scale(1.08) }
.play svg{ width:15px; height:15px; fill:#15100a; margin-left:2px }
.play.is-on svg{ margin-left:0 }

/* ---- the numbers ---- */
.figures{ display:flex; flex-wrap:wrap; justify-content:center; gap:2rem 3.6rem; padding:2rem 1.4rem }
.figure .n{
  font-family:var(--display); font-weight:600; color:var(--gold);
  font-size:clamp(2.2rem,5vw,3.4rem); line-height:1;
}
.figure .l{ font-size:.82rem; color:var(--ink-2); margin-top:.5rem; max-width:16ch }
.source{ font-size:.76rem; color:var(--ink-2); font-style:italic; margin-top:1.4rem }

/* ---- the experiences ---- */
.works{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px }
@media (max-width:1100px){ .works{ grid-template-columns:repeat(3, 1fr); gap:10px } }
@media (max-width:760px){ .works{ grid-template-columns:1fr; gap:16px } }
.work{ display:block; text-decoration:none; color:inherit; position:relative }
.work img{ width:100%; height:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:transform .6s ease }
.work:hover img{ transform:scale(1.04) }
.work__cap{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1.2rem .9rem;
  background:linear-gradient(180deg, rgba(5,9,18,0), rgba(5,9,18,.88));
  text-align:left;
}
.work__cap b{ display:block; font-family:var(--display); font-size:clamp(.95rem, 1.5vw, 1.15rem); font-weight:500 }
.work__cap span{ font-size:clamp(.68rem, 1vw, .78rem); color:var(--ink-2); line-height:1.45 }
@media (min-width:761px){ .work__cap{ padding:1.1rem .9rem .75rem } }
.work--empty{
  display:grid; place-items:center; aspect-ratio:16/9; text-align:center;
  border:1px dashed rgba(231,192,122,.35); color:var(--ink-2); padding:1.5rem;
  font-family:var(--display); font-size:1.1rem;
}

/* ---- the guides fan: the Zera reel choreography, real city covers ---- */
.fan{ position:relative; min-height:112svh; overflow:hidden; perspective:1400px; padding:12vh 0 }
.fan::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 45%, rgba(3,6,14,.82), rgba(3,6,14,.35) 70%, rgba(3,6,14,0));
}
.fan__head{
  position:absolute; z-index:5; left:clamp(1.2rem,5vw,4rem); top:clamp(2rem,8vh,5rem);
  max-width:24ch; text-align:left;
}
.fan__head .proof__note{ margin:0; max-width:24ch }
.fan__deck{ position:absolute; inset:0; transform-style:preserve-3d }
.reel{
  position:absolute; margin:0; overflow:hidden; cursor:pointer;
  border-radius:24px; aspect-ratio:9/16;
  box-shadow:0 40px 90px rgba(0,0,0,.65);
  border:1px solid rgba(231,192,122,.18);
  will-change:transform;
}
.reel img{ width:100%; height:100%; object-fit:cover; display:block }
.reel::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:24px;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.14) 48%, transparent 62%);
}
.reel figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.8rem .7rem .6rem; text-align:left;
  background:linear-gradient(180deg, rgba(5,9,18,0), rgba(5,9,18,.9));
}
.reel figcaption b{ display:block; font-family:var(--display); font-size:.92rem; font-weight:500 }
.reel figcaption span{ font-size:.72rem; color:var(--ink-2) }
.reel .play{ position:absolute; left:.6rem; top:.6rem; z-index:3; width:34px; height:34px }
.rp1{ width:11.5vw; left:26vw; top:16svh; transform:rotateY(34deg) rotateZ(-5deg) }
.rp2{ width:12.5vw; left:38vw; top:10svh; transform:rotateY(20deg) rotateZ(-2deg) }
.rp3{ width:13vw;  left:51vw; top:14svh; transform:rotateY(2deg) }
.rp4{ width:12vw;  left:64vw; top:9svh;  transform:rotateY(-16deg) rotateZ(2deg) }
.rp5{ width:11vw;  left:76vw; top:17svh; transform:rotateY(-30deg) rotateZ(4deg) }
.rp6{ width:10.5vw; left:31vw; top:52svh; transform:rotateY(28deg) rotateZ(3deg) }
.rp7{ width:11vw;  left:45vw; top:56svh; transform:rotateY(6deg) rotateZ(-2deg) }
.rp8{ width:10.5vw; left:59vw; top:53svh; transform:rotateY(-22deg) rotateZ(-4deg) }
@media (max-width:860px){
  .fan{ min-height:auto; perspective:none; padding:8vh 1.2rem }
  .fan::before{ display:none }
  .fan__head{ position:static; margin-bottom:1.6rem; max-width:none; text-align:center }
  /* two per row on a phone, so eight guides cost two screens, not eight */
  .fan__deck{ position:static; display:grid; grid-template-columns:1fr 1fr; gap:.7rem;
    width:min(30rem,94vw); margin:0 auto }
  .reel{ position:static; width:100%; transform:none !important; border-radius:14px }
  .reel figcaption{ padding:1.4rem .55rem .5rem }
  .reel figcaption b{ font-size:.8rem }
  .reel figcaption span{ font-size:.62rem }
  .reel .play{ width:30px; height:30px; left:.45rem; top:.45rem }
  .reel .play svg{ width:12px; height:12px }
  .reel__open{ font-size:.52rem; padding:.24rem .45rem; right:.45rem; top:.5rem }
}
/* the tile itself opens the real guide; the small round button only plays */
.reel__link{ position:absolute; inset:0; z-index:2; display:block }
.reel .play{ z-index:3 }
.reel__open{
  position:absolute; right:.6rem; top:.7rem; z-index:3;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.85); background:rgba(5,9,18,.5);
  border:1px solid rgba(231,192,122,.35); border-radius:999px; padding:.32rem .6rem;
}

/* ---- the tours ring: her real tours on a turning wheel ---- */
.tours{ position:relative; padding:16vh 1.5rem 14vh; text-align:center }
.tours::before{
  content:""; position:absolute; inset:-4vh 0; pointer-events:none;
  background:radial-gradient(70% 60% at 50% 45%, rgba(3,6,14,.88), rgba(3,6,14,.55) 55%, rgba(3,6,14,0));
}
.tours__head{ position:relative; max-width:46rem; margin:0 auto 3rem }
.ring{
  position:relative; height:clamp(21rem,46vh,29rem);
  perspective:1500px; touch-action:pan-y; cursor:grab; user-select:none;
  display:grid; place-items:center;
  padding-bottom:7rem;          /* the floor the name stands on */
}
.ring.is-held{ cursor:grabbing }
.ring__wheel{ position:relative; width:1px; height:1px; transform-style:preserve-3d; will-change:transform }
.ring__card{
  position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-133px;
  aspect-ratio:3/4; border-radius:14px; overflow:hidden; display:block;
  border:1px solid rgba(231,192,122,.35);
  background:rgba(6,10,20,.6);
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 24px 60px -30px rgba(0,0,0,.9);
  transition:border-color .3s ease, box-shadow .3s ease, filter .3s ease;
  filter:saturate(.75) brightness(.72);
}
.ring__card img{ width:100%; height:100%; object-fit:cover; display:block }
/* the hologram: a scan sheen and a rim that lights when it faces you */
.ring__scan{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(115deg, transparent 40%, rgba(231,192,122,.18) 50%, transparent 60%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen;
}
.ring__card.is-front{
  filter:saturate(1) brightness(1);
  border-color:rgba(231,192,122,.9);
  box-shadow:0 0 34px rgba(231,192,122,.35), 0 30px 70px -30px rgba(0,0,0,.9);
}
.ring__name{
  position:relative; margin-top:2.4rem; min-height:2.8rem;
  font-family:var(--display); font-size:1.35rem; color:var(--ink);
}
.ring__name span{ display:block; font-family:var(--body); font-size:.74rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); margin-top:.3rem }
@media (max-width:860px){
  .ring{ height:clamp(16rem,40vh,22rem); perspective:1100px }
  .ring__card{ margin-left:-80px; margin-top:-107px }
}

/* ---- the hologram screen: the tour opens on the page ---- */
.screen{
  position:fixed; inset:0; z-index:80; display:none;
  align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem);
  background:rgba(3,6,14,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.screen.is-on{ display:flex; animation:screenIn .5s cubic-bezier(.2,.7,.2,1) }
@keyframes screenIn{ from{ opacity:0 } to{ opacity:1 } }
.screen__box{
  position:relative; width:min(1400px,100%); aspect-ratio:16/9; max-height:86svh;
  border-radius:16px; overflow:hidden; background:#05070f;
  border:1px solid rgba(231,192,122,.5);
  box-shadow:0 0 60px rgba(231,192,122,.22), 0 40px 120px -40px #000;
  animation:screenBox .6s cubic-bezier(.2,.7,.2,1);
}
@keyframes screenBox{ from{ transform:scale(.94) translateY(14px); opacity:0 } to{ transform:none; opacity:1 } }
.screen__box iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.screen__bar{
  position:absolute; top:0; left:0; right:0; z-index:2;
  display:flex; align-items:center; gap:1rem; padding:.7rem 1rem;
  background:linear-gradient(180deg, rgba(5,9,18,.9), rgba(5,9,18,0));
}
.screen__name{ font-family:var(--display); font-size:1.05rem; color:#fff; margin-right:auto }
.screen__name span{ margin-left:.6rem; font-family:var(--body); font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2) }
.screen__out{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(231,192,122,.4) }
.screen__close{
  width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:1.3rem; line-height:1;
  color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
}
.screen__close:hover{ background:rgba(255,255,255,.22) }
.screen__hint{
  position:absolute; left:0; right:0; bottom:.6rem; text-align:center;
  font-size:.72rem; color:rgba(255,255,255,.6); pointer-events:none;
}
.ring__open{
  position:relative; margin-top:.5rem; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); opacity:.75;
}
.ring__card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:34%;
  background:linear-gradient(180deg, transparent, rgba(5,9,18,.75));
  pointer-events:none; opacity:0; transition:opacity .3s ease;
}
.ring__card.is-front::after{ opacity:1 }

/* ---- the row of platforms ---- */
.works-row{ position:relative; padding:12vh 1.5rem }
.works-row::before{
  content:""; position:absolute; inset:-4vh 0; pointer-events:none;
  background:radial-gradient(70% 55% at 50% 50%, rgba(3,6,14,.88), rgba(3,6,14,.6) 55%, rgba(3,6,14,0));
}
.works-row__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:2.4rem }
@media (max-width:860px){ .works-row__grid{ grid-template-columns:1fr } }
.work-card{
  position:relative; display:block; border-radius:16px; overflow:hidden; cursor:pointer;
  border:1px solid rgba(231,192,122,.22); text-decoration:none; color:inherit;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.work-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  filter:saturate(.8) brightness(.78); transition:filter .4s ease, transform .6s ease }
.work-card:hover img{ filter:none; transform:scale(1.03) }
.work-card__cap{
  position:absolute; left:0; right:0; bottom:0; padding:2.2rem 1rem .9rem; text-align:left;
  background:linear-gradient(180deg, rgba(5,9,18,0), rgba(5,9,18,.92));
}
.work-card__cap b{ display:block; font-family:var(--display); font-size:1.15rem; font-weight:500 }
.work-card__cap span{ font-size:.76rem; color:var(--ink-2) }
.work-card__open{
  position:absolute; right:.8rem; top:.8rem; font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.9); background:rgba(5,9,18,.55);
  border:1px solid rgba(231,192,122,.4); border-radius:999px; padding:.3rem .6rem;
}