/*
  MAKUHIA release module
  ----------------------
  Shared by the hub (/) and all four market pages (/australia, /bali, /nz,
  /thailand). Loaded AFTER each page's inline <style>, so it can also retune
  the existing hero/ticket layout now that the single — not the tour — is the
  lead story.

  Palette, type and the neon-on-ink language are inherited from the page's
  :root variables so this stays visually of a piece with the tour pages.
*/

:root{
  --ink-2:#221A15;
  --neon-c:#B6FF3C;
}

.release{
  position:relative;
  z-index:2;
  max-width:760px;
  margin:0 auto;
  padding:64px 22px 76px;
  text-align:center;
}

.release-eyebrow{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--neon-a);
  margin-bottom:26px;
}
.release-eyebrow .dot{
  display:inline-block;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--neon-b);
  margin:0 9px 2px;
  vertical-align:middle;
}
.release-eyebrow.is-live{color:var(--neon-b);}

/* ---------- TYPOGRAPHIC ARTWORK ---------- */
.artwork{
  position:relative;
  width:100%;
  max-width:452px;
  margin:0 auto;
  aspect-ratio:1/1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:26px 24px 22px;
  border:1.5px solid transparent;
  /* Gradient hairline frame + tinted ink fill in one shorthand: the fill
     layers paint inside the padding box, the neon gradient inside the border
     box, so only the 1.5px edge shows it. */
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(34,225,255,0.16), transparent 58%) padding-box,
    radial-gradient(120% 90% at 100% 100%, rgba(255,61,174,0.20), transparent 60%) padding-box,
    linear-gradient(var(--ink-2), var(--ink-2)) padding-box,
    linear-gradient(135deg, var(--neon-a), var(--neon-b)) border-box;
  overflow:hidden;
  text-align:left;
}
/* Cheap print-grain: a static dot texture, no filters in the scroll path. */
.artwork-grain{
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(243,238,228,0.14) 0.5px, transparent 0.5px);
  background-size:3px 3px;
  opacity:0.5;
  pointer-events:none;
}

.artwork-meta{
  position:relative;
  display:flex;
  justify-content:space-between;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:9.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(243,238,228,0.5);
}

.artwork-title{
  position:relative;
  margin:auto 0;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(56px, 17.5vw, 104px);
  line-height:0.82;
  letter-spacing:-0.035em;
  color:var(--paper);
}
/* Split lockup: second syllable indented and outlined, so the title reads as
   artwork rather than a headline. */
.artwork-title .l1{display:block;}
.artwork-title .l2{
  display:block;
  padding-left:0.42em;
  color:var(--neon-a);
}
@supports (-webkit-text-stroke:1px currentColor){
  .artwork-title .l2{
    color:transparent;
    -webkit-text-stroke:1.4px var(--neon-a);
  }
}

.artwork-credits{
  position:relative;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:clamp(11px, 3vw, 13px);
  line-height:1.45;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--paper);
}
.artwork-credits .x{
  color:var(--neon-b);
  padding:0 2px;
}
.artwork-rule{
  position:relative;
  height:2px;
  margin:14px 0 12px;
  background:linear-gradient(90deg, var(--neon-a), var(--neon-b));
}
.artwork-foot{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:9.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(243,238,228,0.62);
}

/* The market pages define .eq-bars in their inline CSS; the hub doesn't, so
   the module ships its own scoped copy. */
.release .eq-bars{
  display:inline-flex;
  align-items:flex-end;
  gap:2px;
  height:10px;
}
.release .eq-bars span{
  width:2.5px;
  border-radius:1px;
  background:linear-gradient(180deg, var(--neon-a), var(--neon-b));
}

/* ---------- COUNTDOWN ---------- */
.countdown{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:30px auto 0;
}
.cd-cell{
  min-width:66px;
  padding:11px 6px 9px;
  background:rgba(243,238,228,0.05);
  border-top:1.5px solid var(--neon-a);
}
.cd-cell .n{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:26px;
  line-height:1;
  color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.cd-cell .u{
  display:block;
  margin-top:6px;
  font-size:9px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#8C8479;
}

.out-now{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:30px;
  padding:10px 18px;
  background:linear-gradient(135deg, var(--neon-a), var(--neon-b));
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
}

/* ---------- PRIMARY CTA ---------- */
.presave-btn{
  display:block;
  max-width:452px;
  margin:26px auto 0;
  padding:17px 20px 15px;
  background:var(--paper);
  color:var(--ink);
  text-decoration:none;
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.presave-btn .lbl{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.presave-btn .sub{
  display:block;
  margin-top:5px;
  font-size:11px;
  letter-spacing:0.06em;
  color:#6B6259;
}
.presave-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px -12px rgba(34,225,255,0.75);
}
.presave-btn:focus-visible{outline:2px solid var(--neon-a);outline-offset:3px;}

.release-note{
  max-width:38ch;
  margin:16px auto 0;
  font-size:12.5px;
  line-height:1.6;
  color:#9A9186;
}

/* ---------- PLATFORM + SOCIAL LINK ROWS ---------- */
.link-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  max-width:452px;
  margin:20px auto 0;
}
.link-row[hidden]{display:none;}
.link-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 13px;
  border:1px solid rgba(243,238,228,0.24);
  color:var(--paper);
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  transition:border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.link-chip svg{width:9px;height:9px;flex:0 0 auto;opacity:0.75;}
.link-chip:hover{
  border-color:var(--neon-a);
  background:rgba(34,225,255,0.09);
  transform:translateY(-1px);
}
.link-chip:focus-visible{outline:2px solid var(--neon-a);outline-offset:2px;}
.link-row-label{
  width:100%;
  margin-bottom:2px;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#6B6259;
}

/* ---------- TOURS SECTION (was the stage's lower half) ---------- */
.tours{
  background:var(--paper);
  padding:58px 0 0;
}
.tours-head{
  max-width:520px;
  margin:0 auto;
  padding:0 22px;
  text-align:center;
}
.tours-head .eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent, #0B2A4A);
  margin-bottom:12px;
}
.tours-head h2{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(25px, 4.6vw, 34px);
  line-height:1.12;
  letter-spacing:-0.015em;
  color:var(--ink);
  margin-bottom:12px;
}
.tours-head p{
  font-size:14px;
  line-height:1.6;
  color:var(--muted, #6B6259);
  max-width:44ch;
  margin:0 auto;
}
/* The ticket no longer overlaps a hero, so drop the negative pull-up. */
.tours .ticket-wrap{margin-top:26px;}

/* ---------- ENTRANCE ---------- */
@media (prefers-reduced-motion:no-preference){
  .release-eyebrow,.artwork,.countdown,.out-now,.presave-btn,.release-note,.link-row{
    animation:rise 0.62s cubic-bezier(0.2,0.7,0.25,1) both;
  }
  .release-eyebrow{animation-delay:0.04s;}
  .artwork{animation-delay:0.12s;}
  .countdown,.out-now{animation-delay:0.28s;}
  .presave-btn{animation-delay:0.36s;}
  .release-note{animation-delay:0.44s;}
  .link-row{animation-delay:0.5s;}
  @keyframes rise{
    from{opacity:0;transform:translateY(16px);}
    to{opacity:1;transform:none;}
  }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:560px){
  .release{padding:44px 18px 58px;}
  .artwork{aspect-ratio:auto;min-height:392px;padding:20px 18px 18px;}
  .countdown{gap:6px;}
  .cd-cell{min-width:0;flex:1;padding:10px 2px 8px;}
  .cd-cell .n{font-size:22px;}
  .tours{padding-top:44px;}
}

/* ---------- CITY PICKER HEADER (hub page, dark background) ---------- */
.picker-head{
  position:relative;
  z-index:2;
  max-width:560px;
  margin:0 auto;
  padding:0 20px 4px;
  text-align:center;
}
.picker-head .eyebrow{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--neon-b);
  margin-bottom:12px;
}
.picker-head h2{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(25px, 4.6vw, 32px);
  line-height:1.14;
  letter-spacing:-0.015em;
  color:var(--paper);
  margin-bottom:10px;
}
.picker-head p{
  font-size:14px;
  line-height:1.6;
  color:#9A9186;
  max-width:40ch;
  margin:0 auto;
}