/* ============================================================
   STUBBVRN — site stylesheet
   Extracted from index.html

   TYPOGRAPHY
   ----------
   Display:  "Syne"          (700, 800)
   Body:     "Chakra Petch"  (300, 400, 500, 600)
   Source:   Bunny Fonts (Google Fonts privacy-friendly mirror), self-hosted
             @font-face rules (their generated CSS never sets font-display) —
             "latin" subset inline in index.html's critical CSS, other
             subsets below.

   Brief originally called for "Drupadi" (not on Google/Bunny).
   Syne + Chakra Petch are the characterful/futuristic stand-ins.
   ============================================================ */

/* ============================================================
   THEME TOKENS
   ============================================================ */
:root {
  --bg:            #04070a;
  --bg-raised:     #0a1015;
  --bg-card:       #0c1419;
  --bg-card-hover: #101e23;

  --green:         #38f5b5;
  --green-dim:     #1c8a68;
  --blue:          #2fa9ff;
  --blue-deep:     #0c4f8a;
  --cyan:          #4adef2;
  --red:           #ff4d5e;

  --text:          #d6e6e4;
  --text-dim:      #6f8a87;
  --text-faint:    #3c4f4d;

  --line:          rgba(56, 245, 181, 0.14);
  --line-strong:   rgba(56, 245, 181, 0.4);
  --glow-green:    rgba(56, 245, 181, 0.35);
  --glow-blue:     rgba(47, 169, 255, 0.35);

  --font-display: "Syne", "Chakra Petch", sans-serif;
  --font-body:    "Chakra Petch", "Chakra Petch Fallback", sans-serif;

  --section-pad: clamp(4rem, 10vw, 9rem);
  --gutter:      clamp(1.25rem, 5vw, 5rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Size-matched fallback so the Chakra Petch swap (once the Bunny Fonts
   stylesheet loads) doesn't itself reflow nav links / hero text — metrics
   computed from the actual webfont file via fontTools against Arial.
   Also declared inline in index.html's critical CSS (that copy is what
   actually applies before this stylesheet loads); kept here too so
   --font-body's fallback name resolves correctly once this file is active. */
@font-face {
  font-family: "Chakra Petch Fallback";
  src: local("Arial");
  size-adjust: 123.7%;
  ascent-override: 99.2%;
  descent-override: 30.8%;
}

/* ============================================================
   WEBFONTS — non-latin subsets (greek, latin-ext, vietnamese, thai)
   Effectively unused (this site's text is English/latin), but kept for
   correctness/edge cases and to preserve Bunny Fonts' original unicode-range
   subsetting. font-display:swap added — their generated CSS omits it
   entirely. The "latin" subset (the one that actually matters for this
   page's text) is inlined in index.html's critical CSS instead, so it
   applies at first paint rather than waiting for this file.
   ============================================================ */
/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  font-stretch: 100%;
  src: url(https://fonts.bunny.net/syne/files/syne-greek-600-normal.woff2) format('woff2'), url(https://fonts.bunny.net/syne/files/syne-greek-600-normal.woff) format('woff'); 
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  font-stretch: 100%;
  src: url(https://fonts.bunny.net/syne/files/syne-latin-ext-600-normal.woff2) format('woff2'), url(https://fonts.bunny.net/syne/files/syne-latin-ext-600-normal.woff) format('woff'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  font-stretch: 100%;
  src: url(https://fonts.bunny.net/syne/files/syne-greek-700-normal.woff2) format('woff2'), url(https://fonts.bunny.net/syne/files/syne-greek-700-normal.woff) format('woff'); 
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  font-stretch: 100%;
  src: url(https://fonts.bunny.net/syne/files/syne-latin-ext-700-normal.woff2) format('woff2'), url(https://fonts.bunny.net/syne/files/syne-latin-ext-700-normal.woff) format('woff'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  font-stretch: 100%;
  src: url(https://fonts.bunny.net/syne/files/syne-greek-800-normal.woff2) format('woff2'), url(https://fonts.bunny.net/syne/files/syne-greek-800-normal.woff) format('woff'); 
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  font-stretch: 100%;
  src: url(https://fonts.bunny.net/syne/files/syne-latin-ext-800-normal.woff2) format('woff2'), url(https://fonts.bunny.net/syne/files/syne-latin-ext-800-normal.woff) format('woff'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* thai */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-thai-300-normal.woff2) format('woff2'), url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-thai-300-normal.woff) format('woff'); 
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}

/* latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-latin-ext-300-normal.woff2) format('woff2'), url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-latin-ext-300-normal.woff) format('woff'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* vietnamese */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-vietnamese-300-normal.woff2) format('woff2'), url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-vietnamese-300-normal.woff) format('woff'); 
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* thai */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-thai-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-thai-400-normal.woff) format('woff'); 
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}

/* latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-latin-ext-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-latin-ext-400-normal.woff) format('woff'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* vietnamese */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-vietnamese-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-vietnamese-400-normal.woff) format('woff'); 
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* thai */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-thai-500-normal.woff2) format('woff2'), url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-thai-500-normal.woff) format('woff'); 
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}

/* latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-latin-ext-500-normal.woff2) format('woff2'), url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-latin-ext-500-normal.woff) format('woff'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* vietnamese */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-vietnamese-500-normal.woff2) format('woff2'), url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-vietnamese-500-normal.woff) format('woff'); 
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* thai */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-thai-600-normal.woff2) format('woff2'), url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-thai-600-normal.woff) format('woff'); 
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}

/* latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-latin-ext-600-normal.woff2) format('woff2'), url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-latin-ext-600-normal.woff) format('woff'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* vietnamese */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-vietnamese-600-normal.woff2) format('woff2'), url(https://fonts.bunny.net/chakra-petch/files/chakra-petch-vietnamese-600-normal.woff) format('woff'); 
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  min-height: 100vh;
  padding-top: 6.5rem;
}
::selection { background: var(--green); color: var(--bg); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.wrap {
  width: min(1200px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 2;
}
section { position: relative; z-index: 2; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--green));
}
.eyebrow--below { margin-top: 0.9rem; }

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: 0.34em;
  padding-left: 0.34em;
  text-transform: uppercase;
  color: var(--text);
  margin: 1.1rem 0 0;
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
section[id] { scroll-margin-top: 8rem; }
.section-lead {
  color: var(--text-dim);
  max-width: 56ch;
  margin-top: 1rem;
}

/* ============================================================
   TEAL FLARE — accents bloom green while scrolling down
   (mirrored in red while scrolling back up, see below)
   ============================================================ */
.eyebrow,
.eyebrow::before,
.divider::before, .divider::after,
.bio__meta dd,
.learn-card__num,
.merch-cta__eyebrow,
.free-card__type,
.track__label,
.mix__num {
  transition: text-shadow 0.55s var(--ease), box-shadow 0.55s var(--ease), filter 0.55s var(--ease);
}
body.scrolling-down .eyebrow,
body.scrolling-down .bio__meta dd,
body.scrolling-down .learn-card__num,
body.scrolling-down .merch-cta__eyebrow,
body.scrolling-down .free-card__type,
body.scrolling-down .track__label,
body.scrolling-down .mix__num {
  text-shadow: 0 0 6px var(--green), 0 0 16px rgba(56, 245, 181, 0.55);
}
body.scrolling-down .divider::before,
body.scrolling-down .divider::after {
  box-shadow: 0 0 8px var(--green), 0 0 16px var(--glow-green);
}
body.scrolling-down .eyebrow::before {
  animation: tealFlare 0.9s var(--ease) infinite alternate;
}
@keyframes tealFlare {
  from { box-shadow: 0 0 4px var(--green);  filter: brightness(1); }
  to   { box-shadow: 0 0 13px var(--green), 0 0 24px var(--glow-green); filter: brightness(1.4); }
}
@media (prefers-reduced-motion: reduce) {
  body.scrolling-down .eyebrow::before { animation: none; }
}

/* ============================================================
   RED FLARE — same bloom, warm reddish tint, while scrolling up
   ============================================================ */
body.scrolling-up .eyebrow,
body.scrolling-up .bio__meta dd,
body.scrolling-up .learn-card__num,
body.scrolling-up .merch-cta__eyebrow,
body.scrolling-up .free-card__type,
body.scrolling-up .track__label,
body.scrolling-up .mix__num {
  text-shadow: 0 0 6px var(--red), 0 0 16px rgba(255, 77, 94, 0.55);
}
body.scrolling-up .divider::before,
body.scrolling-up .divider::after {
  box-shadow: 0 0 8px var(--red), 0 0 16px rgba(255, 77, 94, 0.35);
}
body.scrolling-up .eyebrow::before {
  animation: redFlare 0.9s var(--ease) infinite alternate;
}
@keyframes redFlare {
  from { box-shadow: 0 0 4px var(--red);  filter: brightness(1); }
  to   { box-shadow: 0 0 13px var(--red), 0 0 24px rgba(255, 77, 94, 0.35); filter: brightness(1.4); }
}
@media (prefers-reduced-motion: reduce) {
  body.scrolling-up .eyebrow::before { animation: none; }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--delay, 0ms);
}
[data-reveal].in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  body::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 6rem;
  padding: 0.2rem var(--gutter) 0.4rem;
  background: var(--bg);
  transition: border-color 0.4s var(--ease);
  border-bottom: 1px solid var(--line);
}
.nav__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  flex: 0 0 auto;
}
.nav__socials {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex: 0 0 auto;
}
.nav__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0;
  color: var(--text-dim);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.nav__socials a:hover {
  color: var(--green);
  transform: translateY(-2px);
}
.nav__socials svg { width: 16px; height: 16px; display: block; }
.nav.scrolled {
  border-bottom: 1px solid var(--line-strong);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: var(--text);
}
.nav__brand img {
  display: block;
  height: 5.5rem;
  width: auto;
}
.nav__links {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  justify-content: center;
}
.nav__links a {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  position: relative;
  padding: 0.3rem 0;
  transition: color 0.3s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* hamburger toggle — hidden on desktop, shown on mobile */
.nav__toggle {
  display: none;
  position: relative;
  width: 30px; height: 22px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 60;
}
.nav__toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--text);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}
.nav__toggle span:nth-child(1) { top: 2px; }
.nav__toggle span:nth-child(2) { top: 10px; }
.nav__toggle span:nth-child(3) { top: 18px; }
.nav.open .nav__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
    padding: 1rem var(--gutter);
  }
  .nav__socials { display: none; }
  .nav__center {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    gap: 0;
  }
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.25rem var(--gutter) 1rem;
    background: rgba(4, 7, 10, 0.97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    max-height: calc(100svh - 100%);
    overflow-y: auto;
    /* hidden until toggled */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  .nav.open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s;
  }
  .nav__links a {
    font-size: 0.82rem;
    padding: 0.85rem 0.2rem;
    border-bottom: 1px solid var(--line);
  }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a::after { display: none; }
}

/* ============================================================
   INTRO OVERLAY copy — eyebrow, lede paragraph, CTA buttons
   (sits on top of the intro video on the landing screen)
   ============================================================ */
.hero__inner {
  position: relative;
  z-index: 3;
  max-width: 56rem;
}
.hero__tag { margin-bottom: 1.4rem; animation: fadeUp 1s var(--ease) both; }
.hero__sub {
  margin-top: 1.2rem;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 300;
  color: var(--text-dim);
  max-width: 38ch;
  animation: fadeUp 1s var(--ease) 0.25s both;
}
.hero__sub strong { color: var(--text); font-weight: 500; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.2rem;
  animation: fadeUp 1s var(--ease) 0.4s both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--green), var(--blue));
  transform: translateX(-101%);
  transition: transform 0.45s var(--ease);
  z-index: -1;
}
.btn:hover { color: var(--bg); border-color: transparent; }
.btn:hover::before { transform: translateX(0); }
.btn--ghost { border-color: var(--line); color: var(--text-dim); }
.btn--ghost:hover { color: var(--bg); }

/* ============================================================
   BIO
   ============================================================ */
.bio { padding-block: var(--section-pad); }
.bio__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: stretch;
}
.bio__grid > * {
  display: flex;
  flex-direction: column;
}
.bio__statement {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.4;
  letter-spacing: 0.34em;
  padding-left: 0.34em;
  text-transform: uppercase;
  color: #fff;
}
.bio__statement em {
  font-style: normal;
  color: #fff;
}
.bio__body { padding-top: 9rem; }
.bio__body p { margin-bottom: 1.2rem; color: var(--text-dim); }
.bio__body p:first-child { color: var(--text); }
.bio__meta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.bio__meta div { display: flex; flex-direction: column; gap: 0.2rem; }
.bio__meta dt {
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.bio__meta dd {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--green);
}
.bio__portrait {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  margin-top: 1.6rem;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  object-fit: cover;
  filter: saturate(110%) contrast(1.04);
}
.bio__meta { margin-top: auto; }
@media (max-width: 760px) {
  .bio__grid { grid-template-columns: 1fr; }
  .bio__grid > * { display: block; }
  .bio__portrait { aspect-ratio: 4 / 3; flex: none; }
  .bio__body { padding-top: 0; }
  .bio__meta { margin-top: 2rem; }
}

/* ============================================================
   MIXES (YouTube)
   ============================================================ */
.mixes { padding-block: var(--section-pad); }
.mixes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1.4rem;
}
.mix {
  position: relative;
  border: 1px solid var(--line);
  background: var(--bg-card);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.mix:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.mix__embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-raised);
}
.mix__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.mix__poster {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--bg-raised);
  overflow: hidden;
  text-decoration: none;
}
.mix__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.mix:hover .mix__poster img { transform: scale(1.04); }
.mix__poster::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}
.mix__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 86px; height: 86px;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 28px;
  padding-left: 4px;
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(6px);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
  z-index: 1;
}
.mix:hover .mix__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(0,0,0,0.8);
}
.mix__meta {
  padding: 1rem 1.2rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.mix__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
.mix__num {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  color: var(--green);
}

/* ============================================================
   PHOTOS
   ============================================================ */
.photos { padding-block: var(--section-pad); }
/* horizontal scroll-snap carousel */
.photo-carousel { position: relative; padding-inline: 64px; }
.photo-track {
  --slide-w: 170px;
  --slide-h: 230px;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* vertical room so the enlarged center isn't clipped; side padding
     lets the first/last thumbnail sit dead center */
  padding: 2rem calc(50% - var(--slide-w) / 2);
  scrollbar-width: none;            /* Firefox */
}
.photo-track::-webkit-scrollbar { display: none; }  /* WebKit */
.photo {
  position: relative;
  flex: 0 0 auto;
  width: var(--slide-w);
  height: var(--slide-h);
  scroll-snap-align: center;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--bg-card);
  overflow: hidden;
  cursor: zoom-in;
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
  /* default = small, dimmed thumbnail */
  transform: scale(0.82);
  opacity: 0.5;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease), border-color 0.4s var(--ease);
}
.photo:hover { border-color: var(--line-strong); }
/* the centered slide blows up */
.photo.is-active {
  transform: scale(1.18);
  opacity: 1;
  z-index: 2;
  border-color: var(--line-strong);
  box-shadow: 0 16px 44px rgba(0,0,0,0.55), 0 0 0 1px var(--line-strong);
}
.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.6s var(--ease);
  filter: saturate(90%) contrast(1.02);
}
.photo.is-active img { filter: saturate(120%) contrast(1.06); }

/* prev / next controls */
.photo-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(4, 7, 10, 0.72);
  color: var(--text);
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: opacity 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.photo-carousel__btn:hover {
  background: var(--green);
  color: var(--bg);
  border-color: var(--green);
  transform: translateY(-50%) scale(1.07);
}
.photo-carousel__btn--prev { left: 8px; }
.photo-carousel__btn--next { right: 8px; }
@media (max-width: 560px) {
  .photo-carousel { padding-inline: 48px; }
  .photo-carousel__btn { width: 40px; height: 40px; font-size: 16px; }
  .photo-carousel__btn--prev { left: 4px; }
  .photo-carousel__btn--next { right: 4px; }
  .photo-track {
    --slide-w: 118px;
    --slide-h: 160px;
    gap: 0.6rem;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
  }
}
.photo__label {
  position: absolute;
  left: 0.8rem;
  bottom: 0.8rem;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(4,7,10,0.72);
  border: 1px solid var(--line-strong);
  padding: 0.3rem 0.55rem;
  z-index: 2;
  pointer-events: none;
}

/* lightbox */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  color: #fff;
}
.lightbox::backdrop {
  background: rgba(4,7,10,0.94);
  backdrop-filter: blur(8px);
}
.lightbox__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 2rem;
  box-sizing: border-box;
}
.lightbox img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 4rem);
  max-height: calc(100vh - 4rem);
}
.lightbox__btn {
  position: absolute;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.55);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.lightbox__btn:hover { background: rgba(0,0,0,0.85); transform: scale(1.06); }
.lightbox__close { top: 1.2rem; right: 1.2rem; }
.lightbox__prev { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__next:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__counter {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
@media (max-width: 560px) {
  .lightbox__prev { left: 0.4rem; }
  .lightbox__next { right: 0.4rem; }
}

/* ============================================================
   VIDEOS (local)
   ============================================================ */
.videos { padding-block: var(--section-pad); }
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1.2rem;
}
.video-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--bg-card);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease), background 0.5s var(--ease);
}
.video-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
  background: var(--bg-card-hover);
}
.video-card__player iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--bg-raised);
}

/* ============================================================
   YOUTUBE FACADE — lite-youtube-embed style. A static thumbnail
   stands in for the real embed (which pulls in YouTube's player JS,
   its own GTM/gtag calls, and a maxresdefault-sized image) until the
   user actually clicks to watch, at .yt-facade in a <script> near the
   end of <body>. Self-contained (own aspect-ratio) so it drops into
   any 16:9 video slot without relying on the parent's sizing.
   ============================================================ */
.yt-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: var(--bg-raised);
  cursor: pointer;
  overflow: hidden;
}
.yt-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yt-facade__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.75rem;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(4, 7, 10, 0.28);
  transition: background 0.25s var(--ease);
  pointer-events: none;
}
.yt-facade:hover .yt-facade__play,
.yt-facade:focus-visible .yt-facade__play {
  background: rgba(4, 7, 10, 0.45);
}
.yt-facade:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.yt-facade.is-playing { cursor: default; }
.yt-facade.is-playing .yt-facade__play,
.yt-facade.is-playing img {
  display: none;
}
.yt-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-card__info {
  padding: 0.85rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.video-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.video-card__sub {
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

/* ============================================================
   LEARN
   ============================================================ */
.learn { padding-block: var(--section-pad); }
.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.2rem;
}
.learn-card {
  position: relative;
  border: 1px solid var(--line);
  background:
    linear-gradient(160deg, var(--bg-card), var(--bg));
  padding: 1.6rem 1.4rem 1.5rem;
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.learn-card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.learn-card__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  color: var(--green);
  opacity: 0.7;
  letter-spacing: -0.03em;
}
.learn-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0.6rem 0 0.6rem;
}
.learn-card__body { color: var(--text-dim); font-size: 0.92rem; }
.learn-card__cta {
  margin-top: 1.2rem;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ============================================================
   MUSIC — pure cover art grid (no players, no controls)
   ============================================================ */
.music { padding-block: var(--section-pad); }
.music .wrap { width: min(1400px, 100%); }
.track-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.track {
  position: relative;
  display: block;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.track__art {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-raised);
  color: inherit;
}
.track__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* hide every non-art element in the music grid */
.track__info,
.track__player,
.track__label,
.track__buy { display: none !important; }

/* ============================================================
   MERCH
   ============================================================ */
.merch { padding-block: var(--section-pad); }
.merch-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 0;
  align-items: stretch;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.merch-cta:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}
.merch-cta__art {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-raised);
  overflow: hidden;
}
.merch-cta__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.6s var(--ease);
}
.merch-cta:hover .merch-cta__art img { transform: scale(1.04); }
.merch-cta__body {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
}
.merch-cta__eyebrow {
  font-family: var(--font-body);
  color: var(--green);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.merch-cta__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  color: var(--text);
  margin: 0;
}
.merch-cta__desc {
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
}
.merch-cta__go {
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--green);
  transition: transform 0.4s var(--ease);
}
.merch-cta:hover .merch-cta__go { transform: translateX(4px); }
@media (max-width: 720px) {
  .merch-cta { grid-template-columns: 1fr; }
  .merch-cta__art { aspect-ratio: 1 / 1; }
}

/* ============================================================
   FREE SHIT — guitar tabs, email-gated
   ============================================================ */
.freebies { padding-block: var(--section-pad); }

.gate {
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(56,245,181,0.08), transparent 70%),
    var(--bg-card);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}
.gate__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
}
.gate__copy { color: var(--text-dim); max-width: 56ch; }
.gate__form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.gate__form input {
  flex: 1 1 240px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.9rem 1rem;
  transition: border-color 0.3s var(--ease);
}
.gate__form input:focus { outline: none; border-color: var(--green); }
.gate__done {
  color: var(--green);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: none;
}
.freebies.unlocked .gate__form { display: none; }
.freebies.unlocked .gate__done { display: inline-flex; align-items: center; gap: 0.5rem; }

.free-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.2rem;
}
.free-card {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--bg-card), var(--bg));
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  color: inherit;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.free-card:hover { border-color: var(--green); transform: translateY(-4px); }
.free-card__type {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--green);
}
.free-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
}
.free-card__desc { color: var(--text-dim); font-size: 0.9rem; flex: 1; }
.free-card__dl {
  margin-top: 0.4rem;
  align-self: flex-start;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--line-strong);
}
.free-card__dl:hover { color: var(--green); }

/* lock state — until email is submitted, cards are visually dimmed and unclickable */
.free-grid { pointer-events: none; opacity: 0.45; filter: grayscale(0.4); transition: opacity 0.4s var(--ease), filter 0.4s var(--ease); }
.freebies.unlocked .free-grid { pointer-events: auto; opacity: 1; filter: none; }

/* ============================================================
   SHOWS
   ============================================================ */
.shows { padding-block: var(--section-pad); }
.shows__inner {
  border: 1px solid var(--line);
  background: linear-gradient(to bottom right, var(--bg-raised), var(--bg));
  padding: clamp(2rem, 6vw, 4.5rem);
}
.shows__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.2rem;
  padding: 1rem 0;
}
.shows__pulse {
  width: 70px; height: 70px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  position: relative;
}
.shows__pulse::before,
.shows__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--green);
  animation: ping 3s ease-out infinite;
}
.shows__pulse::after { animation-delay: 1.5s; }
@keyframes ping {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}
.shows__pulse i {
  width: 10px; height: 10px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--green);
}
.shows__empty h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.5vw, 2.1rem);
}
.shows__empty p { color: var(--text-dim); max-width: 42ch; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { padding-block: var(--section-pad); }
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.contact__cell h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}
.contact__cell p,
.contact__cell a { color: var(--text-dim); }
.contact__cell a:hover { color: var(--green); }
.contact__cell + .contact__cell { margin-top: 1.4rem; }

.contact__form {
  display: grid;
  gap: 1rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.field label {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.field input,
.field textarea {
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.9rem 1rem;
  transition: border-color 0.3s var(--ease);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
}
.field textarea { min-height: 140px; resize: vertical; }
@media (max-width: 760px) {
  .contact__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER (socials + R5.png repeating strip)
   ============================================================ */
.footer {
  padding: var(--section-pad) var(--gutter) 2rem;
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 2;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(12,79,138,0.18), transparent 70%);
}
.footer__inner {
  width: min(1200px, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
}
.footer__mark {
  display: block;
  width: clamp(220px, 50vw, 480px);
  height: auto;
  filter: brightness(0) invert(1);
}
.footer__line {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}
.socials a {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--text-dim);
  position: relative;
  overflow: hidden;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.socials a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--green), var(--blue));
  transform: translateY(101%);
  transition: transform 0.4s var(--ease);
  z-index: -1;
}
.socials a:hover {
  color: var(--bg);
  border-color: transparent;
  transform: translateY(-4px);
}
.socials a:hover::before { transform: translateY(0); }
.socials svg { width: 20px; height: 20px; }
.footer__legal {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  width: 100%;
}

/* Logo Ring Footer 2.png — single centered instance at the very bottom of the page */
.r5-strip {
  position: relative;
  z-index: 2;
  height: 220px;
  background-image: url("Logo%20Ring%20Footer%202.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  filter: saturate(110%);
}

/* ============================================================
   SECTION DIVIDER GLYPH
   ============================================================ */
.divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text-faint);
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  padding-block: 0.5rem;
}
.divider::before, .divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

/* ============================================================
   BACK-TO-TOP — floating arrow, appears after ~1 viewport scroll
   ============================================================ */
.back-top {
  position: fixed;
  right: clamp(0.9rem, 3vw, 2rem);
  bottom: clamp(0.9rem, 3vw, 2rem);
  z-index: 45;
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(4, 7, 10, 0.72);
  color: var(--text);
  display: grid;
  place-items: center;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
              visibility 0s linear 0.35s,
              background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), box-shadow 0.45s var(--ease);
}
.back-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
              visibility 0s,
              background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), box-shadow 0.45s var(--ease);
}
.back-top:hover {
  background: var(--green);
  color: var(--bg);
  border-color: var(--green);
}
body.scrolling-up .back-top.show {
  box-shadow: 0 0 12px var(--glow-green), 0 0 26px rgba(56, 245, 181, 0.32);
  border-color: var(--green);
}
@media (max-width: 560px) {
  .back-top { width: 42px; height: 42px; }
}

/* ============================================================
   INTRO GATE
   ============================================================ */
html.intro-active,
html.intro-active body {
  overflow: hidden;
  height: 100%;
}
.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 0 0;
  transition: opacity 600ms var(--ease);
}
.intro.is-leaving {
  opacity: 0;
  pointer-events: none;
}
/* Explicit aspect-ratio (the video is a native 1080x1080 square) so this
   box is sized from CSS alone, never from the video's own intrinsic
   size — which isn't known until its metadata loads, and with
   preload="none" that doesn't happen until playback starts. Without
   this, the stage (and the poster <img> stacked inside it) would
   collapse to near-zero height on first paint. video and poster are
   CSS Grid stacked (same grid-area) rather than absolutely positioned,
   so they always match exactly regardless of either one's own sizing. */
.intro__stage {
  width: min(100%, 92vh);
  aspect-ratio: 1 / 1;
  display: grid;
}
.intro__video,
.intro__poster {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: transparent;
}
.intro__poster {
  transition: opacity 0.3s var(--ease);
}
/* hidden (not removed) once the video's 'playing' event fires */
.intro__poster--hidden {
  opacity: 0;
  pointer-events: none;
}
.intro:focus { outline: none; }
/* dark vignette + bottom fade so overlay text stays readable */
.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 90% 80% at 50% 30%, transparent 30%, rgba(4,7,10,0.55) 100%),
    linear-gradient(to bottom, rgba(4,7,10,0.25) 0%, rgba(4,7,10,0) 30%, rgba(4,7,10,0) 60%, rgba(4,7,10,0.95) 100%);
  pointer-events: none;
}
.intro__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8rem var(--gutter) 5rem;
  /* clicks on empty area pass through to the intro and dismiss it */
  pointer-events: none;
}
/* but the text + buttons themselves remain interactive */
.intro__inner .hero__inner { pointer-events: auto; }

/* ============================================================
   FROSTED GLASS — panels turn translucent + blurred against the
   wall texture. Placed last so it overrides solid backgrounds.
   ============================================================ */
:root {
  --glass:       rgba(12, 20, 25, 0.55);
  --glass-hover: rgba(16, 30, 35, 0.68);
  --glass-blur:  blur(14px) saturate(140%);
  --glass-edge:  inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.nav {
  background: rgba(4, 7, 10, 0.55);
  backdrop-filter: var(--glass-blur);
}
.mix,
.video-card,
.merch-cta,
.photo {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge);
}
.video-card:hover {
  background: var(--glass-hover);
}
/* gradient-bg panels: re-derive on glass tokens */
.learn-card,
.free-card {
  background: linear-gradient(160deg, var(--glass), rgba(4, 7, 10, 0.45));
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge);
}
.gate {
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(56, 245, 181, 0.08), transparent 70%),
    var(--glass);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge);
}
.shows__inner {
  background: linear-gradient(to bottom right, rgba(10, 16, 21, 0.55), rgba(4, 7, 10, 0.45));
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge);
}
.field input,
.field textarea,
.gate__form input {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
}
.socials a {
  backdrop-filter: var(--glass-blur);
}