/* Cocoa XP — selector page: brown + black gradient, classy, muted champagne accent */
:root{
  --bg:#0d0a07;
  --cocoa-deep:#1c120a;
  --panel:#17110b;
  --line:rgba(200,177,138,.18);
  --gold:#c8b18a;
  --gold-deep:#9a8464;
  --text:#f2ece1;
  --muted:#b8a88f;
  --radius:16px;
  --font-cards:"Caprasimo","Playfair Display",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 500px at 50% -8%, rgba(200,177,138,.08), transparent 60%),
    linear-gradient(180deg,#1a110a 0%,var(--bg) 42%,#060403 100%);
  min-height:100vh;display:flex;flex-direction:column;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* ---------- NAV : iPhone-style liquid glass ---------- */
.nav{
  --glass-a:rgba(64,44,26,.46);      /* glass tint — top */
  --glass-b:rgba(15,10,6,.32);       /* glass tint — bottom */
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px clamp(20px,4vw,44px);
  position:sticky;top:0;z-index:10;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(180deg,var(--glass-a),var(--glass-b));
  -webkit-backdrop-filter:blur(28px) saturate(190%) brightness(1.06);
  backdrop-filter:blur(28px) saturate(190%) brightness(1.06);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),      /* specular edge — light on the top rim */
    inset 0 -1px 0 rgba(255,255,255,.05),     /* faint bounce light underneath */
    0 8px 28px -10px rgba(0,0,0,.60),         /* soft cast shadow */
    0 1px 3px rgba(0,0,0,.35);
  isolation:isolate;
  transition:background .45s ease,box-shadow .45s ease,backdrop-filter .45s ease;
}
/* sheen — the "light catching the glass" highlight Apple's glass has */
.nav::before{
  content:"";position:absolute;inset:0 0 auto;height:58%;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03) 62%,rgba(255,255,255,0) 100%);
}
/* scrolled: glass thickens + tint deepens as content slides underneath */
.nav.is-scrolled{
  --glass-a:rgba(52,35,21,.62);
  --glass-b:rgba(12,8,5,.55);
  -webkit-backdrop-filter:blur(38px) saturate(210%) brightness(1.10);
  backdrop-filter:blur(38px) saturate(210%) brightness(1.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 14px 40px -12px rgba(0,0,0,.70),
    0 2px 6px rgba(0,0,0,.40);
}
/* no backdrop-filter support → opaque cocoa bar so the type stays readable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav,.nav.is-scrolled{background:rgba(15,10,6,.95)}
}
/* iOS "Reduce Transparency" accessibility setting */
@media (prefers-reduced-transparency:reduce){
  .nav,.nav.is-scrolled{background:rgba(15,10,6,.96);
    -webkit-backdrop-filter:none;backdrop-filter:none}
}
.brand{font-weight:600;letter-spacing:.28em;color:var(--text)}
.brand em{font-style:normal;color:var(--gold);font-weight:400}
.nav-status{color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:none;
  padding:6px 14px;border-radius:999px;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  animation:nav-in .9s cubic-bezier(.22,.61,.21,1) .4s both,status-breathe 4.2s ease-in-out 1.5s infinite}
/* page-open fade-in for the pill, then the glint/breathe take over */
@keyframes nav-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* champagne glass-glint sweeping across the pill */
.nav-status::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-45%;width:34%;
  background:linear-gradient(105deg,transparent 0%,rgba(200,177,138,.18) 35%,rgba(255,248,232,.34) 50%,rgba(200,177,138,.18) 65%,transparent 100%);
  transform:skewX(-18deg);animation:status-sheen 4.2s ease-in-out 1.5s infinite;pointer-events:none}
@keyframes status-sheen{0%,52%{left:-45%}88%,100%{left:118%}}
/* soft border glow breathing in sync with the glint */
@keyframes status-breathe{0%,100%{border-color:rgba(255,255,255,.12)}50%{border-color:rgba(200,177,138,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 16px rgba(200,177,138,.16)}}

/* ---------- HERO : brown + black gradient ---------- */
.hero{position:relative;overflow:hidden;text-align:center;isolation:isolate;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(200,177,138,.10), transparent 62%),
    linear-gradient(180deg,#241407 0%, #140c06 45%, #070403 100%);
}
/* static faint sheen, no animation */
.hero::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;z-index:0;pointer-events:none;
  background:
    radial-gradient(340px 340px at 18% 30%, rgba(200,177,138,.07), transparent 65%),
    radial-gradient(420px 420px at 82% 22%, rgba(200,177,138,.06), transparent 65%);
}
.hero-media{display:none}
/* ---------- HERO LOGO : hyper-responsive fluid sizing ----------
   Scales against viewport WIDTH *and* HEIGHT so it always fits the fold —
   phones, tablets, laptops, 4K monitors and short landscape screens alike. */
.hero-logo{
  display:block;margin:0 auto;height:auto;
  width:min(84vw, 620px, calc(46vh * 1.6667));    /* fallback (all browsers) */
  width:min(84vw, 620px, calc(46svh * 1.6667));   /* modern: small-viewport unit */
  max-width:100%;
  aspect-ratio:1800 / 1080;     /* reserves the exact box = zero layout shift */
  object-fit:contain;object-position:center;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.6));
}
/* phones turned sideways / short landscape — keep it from eating the fold */
@media (orientation:landscape) and (max-height:560px){
  .hero-logo{
    width:min(46vw, 440px, calc(60vh * 1.6667));
    width:min(46vw, 440px, calc(60svh * 1.6667));
  }
}
img{max-width:100%}
.hero-shade{display:none}
.rule{display:flex;justify-content:center;margin:22px 0 18px}
.rule span{width:64px;height:1px;border-radius:2px;
  background:var(--gold);opacity:.55}
.hero-shade{display:none}
.hero-shade{position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(16,16,20,.55) 0%, rgba(16,16,20,.35) 34%, rgba(10,10,13,.75) 68%, var(--bg) 100%);
}
.hero-glow{display:none}
.hero-glow::after{display:none}
.hero-glow-off{display:none}
.hero-glow-extra{display:none}
.hero-content{position:relative;z-index:1;padding:clamp(56px,8vw,96px) 20px clamp(48px,6vw,72px);will-change:transform,opacity}
.hero.is-past .hero-content{pointer-events:none}
.eyebrow{color:var(--muted);letter-spacing:.34em;text-transform:uppercase;font-size:11px;font-weight:500}
.scroll-cue{display:inline-flex;align-items:center;gap:8px;margin-top:26px;color:var(--muted);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;text-decoration:none}
.scroll-cue span{display:inline-block;animation:cue-drop 2.2s ease-in-out infinite}
@keyframes cue-drop{0%,100%{transform:translateY(-3px);opacity:.55}50%{transform:translateY(4px);opacity:1}}
/* scroll progress hairline under nav — shifts champagne → amber → cocoa as you scroll */
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:rgba(200,177,138,.12)}
.scroll-progress span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,hsl(var(--hue,38) 45% 62%),hsl(calc(var(--hue,38) - 14) 55% 52%))}

/* ---------- COLOR-SHIFT ON SCROLL : accent hue follows --scroll-p (0→1) ---------- */
body{
  --scroll-p:0;
  --hue:38;
}
.brand em,
.card:hover .card-action,.card:focus-visible .card-action,
.arrow{
  color:hsl(var(--hue) 40% 66%);
}
.card-tag{border-color:hsl(var(--hue) 35% 60% / .35)}
.card-action{border-top-color:hsl(var(--hue) 35% 60% / .22)}
.card::after{background:linear-gradient(90deg,transparent,hsl(var(--hue) 45% 62% / .45),transparent)}
.rule span{background:hsl(var(--hue) 40% 64%)}
.nav{border-bottom-color:hsl(var(--hue) 65% 84% / .20)}
.footer{border-top-color:hsl(var(--hue) 30% 55% / .18)}
.scroll-cue:hover{color:hsl(var(--hue) 40% 66%)}

/* ---------- MOTION: entrance + parallax states ---------- */
[data-motion]{opacity:0;transform:translateY(26px)}
[data-motion].motion-in{opacity:1;transform:none;transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.22,.61,.21,1)}
.motion-rise{will-change:transform,opacity}
.title{font-family:"Playfair Display",Georgia,serif;font-weight:700;
  font-size:clamp(56px,10vw,124px);line-height:1;letter-spacing:.06em;
  margin:18px 0 6px;text-shadow:0 10px 40px rgba(0,0,0,.6)}
.title-xp{font-style:italic;font-weight:500;color:var(--text)}
.motto{letter-spacing:.32em;font-size:clamp(10px,1.4vw,12.5px);font-weight:500;color:var(--muted);margin-top:18px}
.sub{color:var(--muted);max-width:600px;margin:0 auto;font-size:15px}.sub strong{color:var(--text);font-weight:700}

/* ---------- VENUE CARDS : brown + black, classy hairlines ---------- */
.venues{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  width:min(1360px,94vw);margin:40px auto 20px;
}
.card{
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:30px 28px 26px;border-radius:var(--radius);text-decoration:none;
  color:var(--text);
  background:linear-gradient(180deg,#241810,#130c07);
  border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease;
  overflow:hidden;
}
/* faint top sheen instead of gold glow */
.card::after{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,177,138,.35),transparent)}
.card:hover,.card:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(200,177,138,.45);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  outline:none;
}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-num{font-family:var(--font-cards);font-style:normal;color:var(--muted);font-size:17px;font-weight:400}
.card-tag{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  border:1px solid rgba(200,177,138,.25);border-radius:999px;padding:6px 12px}
.card-city{font-family:var(--font-cards);font-size:40px;font-weight:400;letter-spacing:.01em;line-height:1.05}
.card-tease{color:var(--muted);font-size:14px;line-height:1.5}
.card-action{margin-top:12px;padding-top:16px;border-top:1px solid rgba(200,177,138,.18);
  font-family:var(--font-cards);font-weight:400;letter-spacing:.04em;
  color:var(--text);font-size:15px}
/* LAGOS done state — completed chapter */
.card-done{border-color:rgba(200,177,138,.45)}
.card-done-label{display:inline-block;align-self:flex-start;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:#0d0a07;background:linear-gradient(180deg,#e8d5ae,#c8b18a);border-radius:999px;padding:6px 12px;font-weight:700}
.done-check{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-left:8px;
  vertical-align:middle;border-radius:50%;font-size:19px;line-height:1;color:#fff;
  background:linear-gradient(180deg,#2ecc71,#1e9e52);box-shadow:0 4px 14px rgba(0,0,0,.45)}
/* champagne whisper only on hover — no pulse */
.card-glow .card-action{animation:none}
.card:hover .card-action,.card:focus-visible .card-action{color:var(--gold)}
/* TICKETS CTA — champagne #DECE8F (highest specificity so hover can't override) */
.card .card-action.card-action-tickets,
.card .card-action-tickets{color:#DECE8F}
.card .card-action.card-action-tickets .arrow,
.card .card-action-tickets .arrow{color:#DECE8F;opacity:.88}
.card .card-action.card-action-tickets:hover,
.card:hover .card-action.card-action-tickets,
.card:focus-visible .card-action.card-action-tickets{color:#F5E6C4}
.card .card-action.card-action-tickets:hover .arrow,
.card:hover .card-action-tickets .arrow,
.card:focus-visible .card-action-tickets .arrow{color:#F5E6C4;opacity:1}
.arrow{display:inline-block;transition:transform .3s ease;color:var(--gold);opacity:.8}
.card:hover .arrow,.card:focus-visible .arrow{transform:translateX(6px);opacity:1}

/* ---------- Shared link style ---------- */
.back-link{display:inline-block;margin-top:30px;color:var(--muted);font-size:13px;letter-spacing:.08em;text-decoration:none;
  border-bottom:1px solid rgba(200,177,138,.4);padding-bottom:2px}
.back-link:hover{color:var(--gold)}
.footer{
  margin-top:auto;text-align:center;padding:26px 16px 34px;
  border-top:1px solid rgba(200,177,138,.14);color:var(--muted);font-size:13px;
  display:flex;flex-direction:column;gap:6px;background:rgba(0,0,0,.25);
}
.credit{letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-size:10.5px;font-weight:500}
.motto-bold p{font-weight:600;letter-spacing:.22em;margin-top:18px;color:var(--text);font-size:13px}

/* reveal on scroll — deeper cinematic rise + stagger */
.reveal{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.21,1)}
.reveal.in{opacity:1;transform:none}
.reveal.in:hover,.reveal.in:focus-visible{transform:translateY(-4px)}
/* 3D tilt hook (JS sets --rx/--ry + transform while hovering) */
.card[data-tilt]{transform-style:preserve-3d}
.card[data-tilt].is-tilting{transition:transform .12s ease-out,border-color .32s ease,box-shadow .32s ease}

/* ---------- FULLY RESPONSIVE : tablet / mobile / small phones ---------- */
@media (max-width:1200px){
  .venues{grid-template-columns:repeat(2,1fr);max-width:900px}
}
@media (max-width:960px){
  .nav{padding:14px 18px}
  .nav-status{display:none}
  .hero-content{padding:44px 18px 40px}
  .motto{font-size:12px;letter-spacing:.24em}
  .motto-bold p{letter-spacing:.1em}
  .venues{grid-template-columns:1fr;max-width:520px;gap:16px;margin:28px auto 8px}
  .card{padding:24px 22px}
  .card-city{font-size:32px}
}
@media (max-width:520px){
  body{line-height:1.55}
  .brand{font-size:12px}
  .hero-content{padding:36px 16px 34px}
  .motto{font-size:10.5px;letter-spacing:.18em;line-height:1.8;overflow-wrap:anywhere}
  .motto-bold p{margin-top:14px}
  .venues{width:min(520px,94vw)}
  .card{padding:22px 20px;gap:8px}
  .card-top{flex-wrap:wrap}
  .card-city{font-size:29px}
  .card-tease{font-size:14px}
}
@media (max-width:360px){
  .motto{font-size:10px;letter-spacing:.14em}
  .card-tag{font-size:10.5px;padding:5px 10px}
  .card-city{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
  .hero::before,.rule span::after{display:none}
  .reveal{opacity:1;transform:none}
  [data-motion]{opacity:1;transform:none}
}