/* Experience layer: gate, deck, tracklist rail, stage light, beat pulse. */

/* ---------- entry gate: hold for the drop ---------- */
.gate-open { overflow: hidden; }
.gate {
  --build: 0;
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; text-align: center;
  background: #0b1522; color: var(--dove); padding: 24px var(--gutter);
  transition: opacity 1.1s ease .15s, visibility 0s 1.3s;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.gate__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% calc(30% + var(--build) * 45%) at 50% 78%, rgba(244,166,198,calc(.08 + var(--build) * .5 + var(--glow) * .25)), transparent 70%),
    linear-gradient(180deg, #0b1522 0%, var(--tide) calc(55% - var(--build) * 25%), var(--dusk) 100%);
}
.gate__inner { position: relative; z-index: 1; max-width: 560px; display: flex; flex-direction: column; align-items: center; }
.gate__mark {
  margin: 0; font-weight: 900; line-height: .9; letter-spacing: .02em;
  font-size: clamp(3.5rem, 14vw, 9rem);
  font-variation-settings: normal; font-stretch: calc(62% + var(--build) * 63%);
  filter: blur(calc((1 - var(--build)) * 6px)); opacity: calc(.45 + var(--build) * .55);
  animation: fade-in 1.4s ease .1s both;
}
.gate__line { margin: 1rem 0 2.2rem; font: italic 400 clamp(1.3rem, 3vw, 1.8rem)/1.2 var(--serif); color: var(--mist); animation: fade-in 1.2s ease .6s both; }
.gate__track { color: var(--dove); }

.gate__hold {
  position: relative; display: grid; place-items: center; width: 148px; height: 148px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; touch-action: none;
  background: rgba(244,166,198,calc(.10 + var(--build) * .5)); color: var(--dove);
  box-shadow: 0 0 calc(20px + var(--build) * 90px) calc(var(--build) * 18px) rgba(244,166,198,calc(.25 + var(--build) * .5));
  transform: scale(calc(1 + var(--build) * .12 + var(--glow) * .08));
  transition: background-color .2s;
  animation: fade-in 1.2s ease 1s both, idle-pulse 1.6s ease-in-out 2.2s infinite;
}
.gate.is-holding .gate__hold { animation: none; }
@keyframes idle-pulse { 50% { box-shadow: 0 0 46px 6px rgba(244,166,198,.45); } }
.gate__hold:focus-visible { outline: 2px solid var(--dove); outline-offset: 6px; }
.gate__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.gate__ring circle { fill: none; stroke: rgba(250,250,247,.18); stroke-width: 3; }
.gate__ring .gate__ring-fill { stroke: var(--dove); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--build) * 100); stroke-linecap: round; }
.gate__hold-label { position: relative; font-weight: 700; font-size: .95rem; line-height: 1.2; font-variation-settings: "wdth" 115; }
.gate__help { margin: 1.4rem 0 .4rem; font-size: .85rem; color: var(--haze); animation: fade-in 1.2s ease 1.3s both; }
.gate__quiet { background: none; border: 0; color: var(--haze); font: inherit; font-size: .9rem; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; padding: .4rem; animation: fade-in 1.2s ease 1.6s both; }
.gate__quiet:hover { color: var(--dove); }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.gate__horizon {
  position: absolute; left: 0; right: 0; top: calc(82% - var(--build) * 10%); height: 2px; background: var(--dove);
  box-shadow: 0 0 calc(12px + var(--build) * 40px) calc(2px + var(--build) * 6px) rgba(244,166,198,.9);
  transform: scaleX(0); animation: draw 1.8s cubic-bezier(.6,0,.2,1) .1s forwards;
}
@keyframes draw { to { transform: scaleX(1); } }

/* the drop: one white-pink flash, then the site */
.gate__flash { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 70%, #fff 0%, var(--blush) 40%, rgba(244,166,198,0) 80%); }
.gate.is-hit .gate__flash { animation: flash .9s ease-out forwards; }

/* the breath before the drop: everything pulls in for a moment */
.gate.is-drop .gate__inner { transition: transform .17s cubic-bezier(.5,0,1,.5), opacity .17s; transform: scale(.96); }
/* the hit: three bass pressure waves from the button, a short shake, then the horizon tears open */
.gate__waves { position: absolute; left: 50%; top: 50%; z-index: 2; pointer-events: none; }
.gate__waves i { position: absolute; left: -80px; top: -80px; width: 160px; height: 160px; border-radius: 50%; border: 2px solid rgba(250,250,247,.9); box-shadow: 0 0 30px rgba(244,166,198,.8), inset 0 0 30px rgba(244,166,198,.5); opacity: 0; }
.gate.is-hit .gate__waves i { animation: wave .9s cubic-bezier(.1,.7,.2,1) forwards; }
.gate.is-hit .gate__waves i:nth-child(2) { animation-delay: .12s; }
.gate.is-hit .gate__waves i:nth-child(3) { animation-delay: .24s; }
@keyframes wave { 0% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(9); } }
.gate.is-hit .gate__inner { transform: none; animation: shake .38s linear, lift 1s .1s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes shake { 0%, 100% { translate: 0 0; } 20% { translate: -6px 3px; } 40% { translate: 5px -4px; } 60% { translate: -3px 2px; } 80% { translate: 2px -1px; } }
@keyframes lift { to { opacity: 0; transform: translateY(-14vh) scale(1.15); filter: blur(6px); } }
.gate.is-hit .gate__horizon { opacity: 0; }
.gate__edge { position: absolute; left: 0; right: 0; top: 72%; height: 2px; margin-top: -1px; z-index: 3; opacity: 0; pointer-events: none; background: var(--dove); box-shadow: 0 0 26px 6px rgba(244,166,198,.9); }
.gate.is-hit .gate__edge { opacity: 1; animation: edge-fade 1.15s ease-in forwards; }
@keyframes edge-fade { 70% { opacity: 1; } 100% { opacity: 0; } }
.gate.is-armed .gate__hold { background: rgba(244,166,198,calc(.22 + var(--build) * .5)); }
.gate__hold { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (prefers-reduced-motion: reduce) {
  .gate.is-hit .gate__inner, .gate.is-hit .gate__waves i { animation: none; opacity: 0; }
}
@keyframes flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.gate.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.gate.is-leaving .gate__inner { transform: scale(1.08); filter: blur(8px); transition: transform 1.2s cubic-bezier(.2,.8,.1,1), filter 1.2s; }

/* ---------- the deck (now playing) ---------- */
.deck {
  position: fixed; left: 16px; bottom: 16px; z-index: 56; display: flex; align-items: center; gap: .75rem;
  width: min(420px, calc(100vw - 32px)); padding: 10px 10px 10px 10px; border-radius: 18px;
  background: rgba(22,38,58,.82); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(221,229,232,.14); color: var(--dove);
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.6), 0 0 calc(var(--glow) * 60px) calc(var(--glow) * 6px) rgba(244,166,198,.35);
  transform: translateY(140%); transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.deck.is-on { transform: none; }
.deck__cover { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; }
.deck__meta { min-width: 0; flex: 1; }
.deck__meta p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck__now { font-size: .72rem; color: var(--haze); }
.deck__num { margin-left: .3rem; color: var(--blush); }
.deck__title { font-weight: 700; font-size: .95rem; line-height: 1.25; }
.deck__by { font-size: .8rem; color: var(--mist); }
.deck__bar { height: 2px; margin-top: 6px; background: rgba(221,229,232,.18); border-radius: 2px; overflow: hidden; }
.deck__bar span { display: block; height: 100%; background: var(--blush); transform-origin: left; transform: scaleX(0); }
.deck__viz { width: 42px; height: 18px; flex: none; }
.deck__btn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(250,250,247,.1); color: var(--dove); transition: background-color .2s, transform .2s; }
.deck__btn:hover { background: rgba(250,250,247,.2); }
.deck__toggle { background: var(--blush); color: var(--tide); }
.deck__toggle:hover { background: var(--dove); }
.deck__btn svg { width: 18px; height: 18px; fill: currentColor; }
.deck[hidden] { display: none; }

/* ---------- tracklist rail ---------- */
.rail { position: fixed; right: 18px; top: 50%; z-index: 40; transform: translateY(-50%); display: none; }
.rail ol { list-style: none; margin: 0; padding: 0 0 0 18px; display: grid; gap: .55rem; }
.rail a { display: flex; gap: .7rem; align-items: baseline; justify-content: flex-end; text-decoration: none; color: var(--haze); font-size: .78rem; opacity: .55; transition: opacity .3s, color .3s; mix-blend-mode: difference; }
.rail a:hover, .rail a.is-now { opacity: 1; }
.rail a.is-played { opacity: .8; }
.rail a.is-now { color: var(--blush); mix-blend-mode: normal; }
.rail time { font-variant-numeric: tabular-nums; order: 2; }
.rail span { opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s; white-space: nowrap; }
.rail:hover span { opacity: 1; transform: none; }
.rail__line { position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: rgba(157,176,188,.3); border-radius: 2px; overflow: hidden; }
.rail__line span { display: block; height: 100%; background: var(--blush); transform-origin: top; transform: scaleY(0); }
@media (min-width: 1600px) { .rail { display: block; } } /* only where it clears the content column */

/* ---------- stage light following the pointer ---------- */
.glow-cursor {
  position: fixed; left: 0; top: 0; z-index: 45; width: 520px; height: 520px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(244,166,198,calc(.10 + var(--glow) * .35)) 0%, rgba(244,166,198,0) 62%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .6s;
}
.glow-cursor.is-on { opacity: 1; }

/* ---------- the beat, felt in the chrome ---------- */
@keyframes kick { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }
.on-beat .deck__toggle, .on-beat .nav .btn--blush, .on-beat .dock, .on-beat .rail a.is-now time { animation: kick .32s cubic-bezier(.2,.8,.2,1); }
.on-beat .dot { background: var(--dove); }

@media (max-width: 640px) {
  .deck { width: auto; right: 16px; bottom: 82px; }
  .deck__viz { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .glow-cursor { display: none; }
}

/* ---------- next show chip (hero) ---------- */
.next-show {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: .35rem .7rem;
  margin: -.6rem auto 1.8rem; padding: .5rem .6rem .5rem 1rem; border-radius: 999px;
  border: 1px solid rgba(221,229,232,.22); background: rgba(22,38,58,.35); backdrop-filter: blur(8px);
  color: var(--dove); text-decoration: none; font-size: .9rem; transition: border-color .2s, background-color .2s;
}
.next-show[hidden] { display: none; }
.next-show:hover { border-color: var(--blush); background: rgba(22,38,58,.6); }
.next-show__label { color: var(--blush); font-weight: 700; }
.next-show__when { font-family: var(--serif); font-style: italic; font-size: 1.15em; }
.next-show__what { color: var(--mist); }
.next-show__count { padding: .25rem .65rem; border-radius: 999px; background: var(--blush); color: var(--tide); font-weight: 700; font-size: .8rem; }
.gig__count { margin-left: .6rem; padding: .15rem .55rem; border-radius: 999px; background: var(--blush); color: var(--tide); font-size: .65em; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.hero__inner .next-show { opacity: 1; }
.is-loading .next-show { opacity: 0; }
.next-show { transition: opacity 1.2s .9s, border-color .2s, background-color .2s; }
@media (max-width: 640px) { .next-show { border-radius: 18px; padding: .6rem .8rem; } }

/* =========================================================================
   Everything shaped like music: the menu is a tracklist, buttons are pads,
   every section is a track with its own waveform that plays as you scroll.
   ========================================================================= */

/* EQ bars: static when silent, dancing while the mix plays */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 12px; height: 11px; }
.eq b { flex: 1; height: 35%; border-radius: 1px; background: currentColor; transition: height .3s; }
.eq b:nth-child(2) { height: 70%; }
.eq b:nth-child(3) { height: 50%; }
.is-playing .eq b { animation: eq .9s ease-in-out infinite alternate; }
.is-playing .eq b:nth-child(2) { animation-duration: .62s; }
.is-playing .eq b:nth-child(3) { animation-duration: .78s; animation-delay: -.3s; }
@keyframes eq { 0% { height: 20%; } 50% { height: 100%; } 100% { height: 45%; } }

/* menu as a tracklist: side and track number, EQ on what's playing now */
.nav__links a { display: inline-flex; align-items: baseline; gap: .45rem; padding: .35rem 0; position: relative; }
.nav__links small { font-size: .68rem; font-variant-numeric: tabular-nums; color: var(--haze); letter-spacing: .04em; }
.nav__links .eq { align-self: center; color: var(--blush); opacity: 0; transform: scaleY(.3); transition: opacity .3s, transform .3s; }
.nav__links a.is-now { opacity: 1; }
.nav__links a.is-now .eq { opacity: 1; transform: none; }
.nav__links a.is-now small { color: var(--blush); }
.nav__links a:hover { text-decoration: none; }
.nav__links a::after { /* the playhead under a track */
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px;
  background: var(--blush); transform: scaleX(var(--tp, 0)); transform-origin: left; opacity: 0; transition: opacity .3s;
}
.nav__links a.is-now::after { opacity: 1; }
.nav__links a:hover::after { opacity: .5; --tp: 1; }

/* mobile: one button opens the tracklist */
.nav__menu {
  display: none; align-items: center; gap: .55rem; padding: .6rem 1rem; border-radius: 999px;
  border: 1px solid rgba(250,250,247,.35); background: rgba(22,38,58,.4); color: var(--dove);
  font: 650 .85rem/1 var(--wide); cursor: pointer;
}
.nav__menu .eq { color: var(--blush); }
@media (max-width: 640px) { .nav__menu { display: inline-flex; } }

.tracklist {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top, 0px)) var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(120% 60% at 50% 100%, rgba(244,166,198,.25), transparent 60%), var(--tide);
  color: var(--dove); opacity: 0; transition: opacity .35s;
}
.tracklist[hidden] { display: none; }
.tracklist.is-open { opacity: 1; }
.tracklist__head { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); left: var(--gutter); right: var(--gutter); margin: 0; display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--haze); }
.tracklist__close { padding: .55rem 1rem; border-radius: 999px; border: 1px solid rgba(250,250,247,.35); background: transparent; color: var(--dove); font: 650 .85rem/1 var(--wide); cursor: pointer; }
.tracklist ol { list-style: none; margin: 0; padding: 0; display: grid; }
.tracklist a {
  display: grid; grid-template-columns: 3.6rem 1fr auto; align-items: baseline; gap: .8rem; padding: .85rem 0;
  border-bottom: 1px solid rgba(221,229,232,.14); color: var(--dove); text-decoration: none;
  transform: translateY(14px); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s; transition-delay: calc(var(--i, 0) * 45ms);
}
.tracklist.is-open a { transform: none; opacity: 1; }
.tracklist time { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--haze); }
.tracklist ol span { font: 400 clamp(1.7rem, 7vw, 2.4rem)/1.1 var(--serif); }
.tracklist .hero__plats { margin-top: 2rem; justify-items: start; }
.tracklist .hero__plats p { justify-content: flex-start; }
.tracklist a.is-now time, .tracklist a.is-now .eq { color: var(--blush); }
.tracklist a .eq { opacity: 0; }
.tracklist a.is-now .eq { opacity: 1; }

/* buttons are pads: a hit sends a ring out from where you pressed */
.btn, .plat, .follow__card, .nav__menu { position: relative; overflow: hidden; isolation: isolate; }
.pad-hit {
  position: absolute; z-index: -1; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(250,250,247,.55), rgba(244,166,198,.35) 45%, transparent 70%);
  animation: pad .55s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes pad { to { transform: scale(40); opacity: 0; } }
.is-playing.on-beat .btn--blush, .is-playing.on-beat .plat { animation: kick .32s cubic-bezier(.2,.8,.2,1); }

/* every section is a track: a waveform across its top that plays while you scroll through it */
.wave { position: relative; max-width: var(--max); margin: 0 auto clamp(2.4rem, 5vw, 3.6rem); }
.wave canvas { display: block; width: 100%; height: 44px; }
.wave__meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: .45rem; font-size: .75rem; font-variant-numeric: tabular-nums; opacity: .65; }
.wave__meta b { font-weight: 650; }
.crowd > .wave { max-width: calc(var(--max) + 2 * var(--gutter)); padding: 0 var(--gutter); margin-top: clamp(3rem, 6vw, 4rem); margin-bottom: 0; }
.about > .wave, .book > .wave { grid-column: 1 / -1; width: 100%; max-width: none; margin-bottom: 0; }

/* jumping between sections is a DJ transition: a quick filter sweep you can see */
.mixing main { animation: sweep .9s ease-in-out; }
@keyframes sweep { 0% { filter: none; } 35% { filter: blur(3px) saturate(1.4) hue-rotate(-12deg); } 100% { filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .is-playing .eq b, .pad-hit, .mixing main { animation: none !important; }
  .tracklist a { transition: none; transform: none; opacity: 1; }
}

/* =========================================================================
   Gate, "heart pressure chamber": you stand inside the Some Love artwork,
   seconds before the drop. Glowing heart contours fill the screen and light up
   from the centre outwards while you hold.
   ========================================================================= */
.gate { place-items: stretch; padding: 0; }
.gate__heart { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.gate__inner {
  position: relative; z-index: 1; max-width: none; width: 100%; height: 100%;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: center;
  padding: calc(46px + env(safe-area-inset-top, 0px)) var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px));
}
.gate__top { text-align: center; align-self: start; }
.gate__mark { font-size: clamp(3.2rem, 16vw, 7.5rem); filter: blur(calc((1 - var(--build)) * 3px)); opacity: calc(.6 + var(--build) * .4); text-shadow: 0 0 calc(var(--build) * 40px) rgba(244,166,198,.7); }
.gate__line { margin: .5rem 0 0; font-size: clamp(1.15rem, 4.6vw, 1.6rem); }
.gate__chamber { display: grid; place-items: center; width: 100%; height: 100%; }
.gate__meta {
  position: absolute; z-index: 1; top: calc(16px + env(safe-area-inset-top, 0px)); left: 0; right: 0; margin: 0;
  display: flex; justify-content: center; gap: 1.1rem; font: 600 .66rem/1 var(--wide); letter-spacing: .16em; text-transform: uppercase; color: var(--haze);
  animation: fade-in 1.2s ease .3s both;
}
.gate__meta span:nth-child(3) { display: none; }

/* the target in the heart's dark centre */
.gate__hold {
  width: 118px; height: 118px;
  background: radial-gradient(circle, rgba(11,21,34,.92) 0 58%, rgba(11,21,34,0) 71%);
  box-shadow: 0 0 0 1px rgba(244,166,198,.3), 0 0 calc(18px + var(--build) * 80px) calc(var(--build) * 10px) rgba(244,166,198,calc(.18 + var(--build) * .5));
  transform: scale(calc(1 + var(--build) * .06 + var(--glow) * .05));
  animation: fade-in 1.2s ease .9s both;
}
.gate.is-armed .gate__hold { background: radial-gradient(circle, rgba(11,21,34,.92) 0 58%, rgba(11,21,34,0) 71%); }
.gate__hold::after { /* idle: a soft ring breathing out at half-time (two beats at 150 bpm) */
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1px solid rgba(244,166,198,.55); pointer-events: none;
  animation: chamber-pulse 1.6s cubic-bezier(.2,.8,.2,1) 2s infinite;
}
.gate.is-holding .gate__hold::after, .gate.is-drop .gate__hold::after { animation: none; opacity: 0; }
@keyframes chamber-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.gate__ring circle { stroke-width: 2; }
.gate__hold-label { display: grid; gap: .25rem; justify-items: center; font: 700 .72rem/1.25 var(--wide); letter-spacing: .14em; text-transform: uppercase; }
.gate__hold-label b { font-size: 1.5rem; letter-spacing: 0; font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 125; }
.gate__hold-label small { font-size: .66rem; letter-spacing: .1em; color: var(--blush); font-variant-numeric: tabular-nums; }

.gate__foot { display: grid; justify-items: center; gap: .2rem; align-self: end; }
.gate__help { margin: 0 0 .2rem; max-width: 30ch; text-align: center; }
.gate__horizon { top: calc(86% - var(--build) * 8%); opacity: .7; }

@media (min-width: 900px) {
  .gate__inner { padding-top: 7vh; padding-bottom: 4vh; }
  .gate__mark { font-size: clamp(5rem, 9vw, 8rem); }
  .gate__hold { width: 132px; height: 132px; }
  .gate__meta { top: 50%; left: 30px; right: auto; flex-direction: column; gap: 1.4rem; transform: translateY(-50%); writing-mode: vertical-rl; rotate: 180deg; }
  .gate__meta span:nth-child(3) { display: inline; }
  .gate__foot { width: 100%; grid-template-columns: 1fr auto 1fr; align-items: end; }
  .gate__help { grid-column: 2; }
  .gate__quiet { grid-column: 3; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) { .gate__hold::after { animation: none; } }