@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');

/* ============ RESET ============ */
*, *::after, *::before {
  padding: 0; margin: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --bg:          #1a1a1a;
  --text:        #f0f0f0;
  --text-dim:    #666;
  --accent:      #c8ff00;
  --accent-dark: #a0cc00;
  --border:      rgba(255,255,255,0.08);
  --font:        'JetBrains Mono', monospace;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: var(--text-dim);
  outline: none;
}

a:hover, a:focus {
  color: var(--accent);
  outline: none;
}

/* ============ FIRE VIDEO ============ */
/*
  mix-blend-mode: screen is the key:
  Screen formula = 1 - (1-src)(1-dst)
  Pure black src (0,0,0) → result = dst → pixel is invisible, bg shows through.
  Bright fire colours → they glow additively on top of the dark background.
  No canvas, no JS pixel-crunching — fully GPU-composited by the browser.

  The video sits fixed at the bottom, scaled to cover the full width.
  object-fit: cover crops vertically from centre so the base of the flame
  always hugs the bottom edge regardless of viewport size.

  The CSS mask fades the top edge so the flame tips dissolve softly
  rather than cutting off in a hard horizontal line.
*/
#fire-video {
  position: fixed;
  bottom: 0;
  left: 0;
  /* Full viewport width at natural aspect ratio (1280×720 = 56.25% tall).
     On a 1440px wide desktop this renders ~810px tall, flames fill the bottom
     ~320px — exactly hugging the bottom edge with embers floating above.
     No object-fit needed: the video just sizes like an img at width:100%. */
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  /* Fade out the top ~45% of the video where it's mostly dark smoke/sparks,
     leaving only the bright flame body and base fully visible. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 35%, black 55%);
  mask-image:         linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 35%, black 55%);
}

/* ============ GRAFFITI BG LOGO ============ */
#graffiti-logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(70vw, 500px);
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  filter: blur(1px) saturate(0) contrast(2);
  mix-blend-mode: screen;
  animation: grafDrift 18s ease-in-out infinite alternate;
}

@keyframes grafDrift {
  0%   { transform: translate(-50%, -50%) scale(1)    rotate(-1deg); opacity: 0.04; }
  50%  { transform: translate(-50%, -51%) scale(1.03) rotate(0.5deg); opacity: 0.06; }
  100% { transform: translate(-50%, -50%) scale(1.01) rotate(1deg);  opacity: 0.04; }
}

/* ============ LAYOUT ============ */
main {
  position: relative;
  z-index: 1;
  width: 100%;
}

.content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0 auto;
  padding: 3em 2em;
  z-index: 1;
}

.menu {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
}

/* ============ LOGO ============ */
.logo {
  display: flex;
  justify-content: left;
  margin-bottom: 52px;
}

.logo img {
  width: 140px;
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 0 18px rgba(200,255,0,0.15));
}

/* ============ MENU — TBF style ============ */
.menu--tsula {
  font-family: var(--font);
}

.menu__item {
  line-height: 1.5;
  position: relative;
  display: block;
  margin: 0;
  outline: none;
  padding: 1em 0;
  border-bottom: 1px solid var(--border);
  transition: padding-left 0.25s cubic-bezier(0.4,0,0.2,1);
}

.menu__item:first-of-type {
  border-top: 1px solid var(--border);
}

.menu--tsula .menu__item {
  padding-left: 0;
  margin-bottom: 0;
}

.menu__item::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px;
  height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.2s ease;
}

.menu__item:hover::before,
.menu__item:focus::before {
  transform: scaleY(1);
}

.menu__item:hover {
  padding-left: 0.75em;
}

.menu__item-name {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.2s;
  position: relative;
}

.menu--tsula .menu__item-name {
  font-size: 10.5px;
}

.menu__item-name::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.25s;
}

.menu__item:hover .menu__item-name::after,
.menu__item:focus .menu__item-name::after {
  width: 100%;
}

.menu__item:hover .menu__item-name,
.menu__item:focus .menu__item-name {
  color: var(--accent);
}

.menu__item-label {
  display: inline-block;
  margin: 0.3em 0 0;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  transition: color 0.2s;
}

.menu--tsula .menu__item-label {
  margin: 0;
  display: block;
}

.menu__item:hover .menu__item-label,
.menu__item:focus .menu__item-label {
  color: rgba(200,255,0,0.6);
}

/* ============ FOOTER TEXT ============ */
.footer-text {
  position: fixed;
  bottom: 24px;
  left: 2em;
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
  z-index: 10;
}

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ============ JS FADE-IN ============ */
.js body {
  opacity: 0;
  transition: opacity 0.4s;
}

.js body.render {
  opacity: 1;
}

/* ============ RESPONSIVE ============ */
@media screen and (max-width: 768px) {
  .content {
    align-items: flex-start;
    padding: 25em 1.4em 5em;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .logo {
    margin-bottom: 32px;
  }

  .logo img {
    width: 110px;
  }

  .menu__item {
    padding: 0.75em 0;
  }

  .menu__item-name {
    font-size: 10px;
  }

  .menu__item-label {
    font-size: 9.5px;
  }

  #graffiti-logo {
    width: 90vw;
    opacity: 0.05;
  }

  .footer-text {
    bottom: calc(44px + env(safe-area-inset-bottom, 0px));
    left: 1.4em;
    font-size: 8px;
  }

  #sound-toggle {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    right: 1.4em !important;
  }
}

@media screen and (max-width: 480px) {
  .content {
    padding: 2em 1.2em 5em;
  }

  .footer-text {
    bottom: calc(44px + env(safe-area-inset-bottom, 0px));
    left: 1.2em;
  }

  #sound-toggle {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    right: 1.2em !important;
  }
}