/* ROTPILL — dark video-site (INO-inspired) */

:root {

  --bg: #050508;

  --fg: #f0ebe2;

  --muted: #b8b0a4;

  --accent: #c41e3a;

  --accent2: #d4af37;

  --fire1: #ff4500;

  --fire2: #ff6600;

  --fire3: #c41e3a;

  --panel: rgba(8, 8, 12, 0.28);

  --panel-border: rgba(212, 175, 55, 0.18);

  --border: rgba(212, 175, 55, 0.22);

  --mono: "Consolas", "Courier New", monospace;

  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;

}



*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {

  margin: 0;

  color: var(--fg);

  font-family: var(--sans);

  background: var(--bg);

  line-height: 1.65;

}



a { color: #d8d4cc; text-decoration: none; }

a:hover { text-decoration: underline; }



/* ---- fire title ---- */

.fire-title,

.nav-brand.fire-brand {

  color: #f5f2ec;

  text-shadow:

    0 0 8px rgba(255, 255, 255, 0.15),

    0 1px 2px rgba(0, 0, 0, 0.8);

  animation: none;

}

@keyframes firePulse {

  from { filter: brightness(1) drop-shadow(0 0 4px rgba(255, 100, 0, 0.4)); }

  to   { filter: brightness(1.12) drop-shadow(0 0 10px rgba(255, 80, 0, 0.65)); }

}

.nav-brand.fire-brand {

  font-size: 1.15rem;

  letter-spacing: 0.22em;

}

.nav-brand.fire-brand span { color: #e8e4dc; }



.hero h1.fire-title {

  font-size: clamp(3.2rem, 14vw, 7rem);

  letter-spacing: 0.14em;

}

.roadmap-header h1.fire-title {

  font-size: clamp(2rem, 8vw, 3.8rem);

  letter-spacing: 0.16em;

}

.radio-hero h1.fire-title {

  font-size: clamp(2.4rem, 10vw, 5rem);

  letter-spacing: 0.14em;

}



/* ---- video bg ---- */

.video-bg {

  position: fixed;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  background: #000;

}

.video-bg video {

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.82;

}

.video-bg::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(

    180deg,

    rgba(5, 5, 8, 0.18) 0%,

    rgba(5, 5, 8, 0.32) 50%,

    rgba(5, 5, 8, 0.48) 100%

  );

  pointer-events: none;

}

.tap-play {

  position: fixed;

  inset: 0;

  z-index: 100;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 10px;

  background: rgba(5, 5, 8, 0.35);

  cursor: pointer;

  font-family: var(--mono);

  font-size: 0.75rem;

  letter-spacing: 0.25em;

  text-transform: uppercase;

  color: var(--muted);

  transition: opacity 0.5s;

  backdrop-filter: blur(2px);

}

.tap-play.hidden { opacity: 0; pointer-events: none; }

.tap-play .tap-hint {

  font-size: 0.62rem;

  letter-spacing: 0.18em;

  color: rgba(220, 216, 208, 0.75);

}



.music-ctrl {

  position: fixed;

  right: 16px;

  bottom: 16px;

  z-index: 60;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 8px 12px;

  font-family: var(--mono);

  font-size: 0.62rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: rgba(240, 235, 226, 0.85);

  background: rgba(8, 8, 12, 0.42);

  border: 1px solid rgba(255, 120, 50, 0.28);

  border-radius: 999px;

  backdrop-filter: blur(8px);

  cursor: pointer;

  transition: background 0.2s, border-color 0.2s;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);

}

.music-ctrl:hover {

  background: rgba(196, 30, 58, 0.22);

  border-color: rgba(255, 100, 0, 0.45);

}

.music-ctrl-icon {

  font-size: 0.72rem;

  line-height: 1;

  color: #ff8844;

}

.music-ctrl[data-state="playing"] .music-ctrl-icon { color: #22c55e; }

.music-ctrl[data-state="idle"] { animation: musicPulse 2.2s ease-in-out infinite; }

@keyframes musicPulse {

  50% { border-color: rgba(255, 100, 0, 0.55); }

}



/* ---- layout ---- */

.page { position: relative; z-index: 2; min-height: 100vh; }



/* ---- nav ---- */

.nav {

  position: sticky;

  top: 0;

  z-index: 50;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 14px 24px;

  background: rgba(5, 5, 8, 0.38);

  border-bottom: 1px solid var(--panel-border);

  backdrop-filter: blur(6px);

}

.nav-brand {

  font-family: var(--mono);

  font-weight: 700;

  letter-spacing: 0.18em;

  font-size: 0.95rem;

  color: var(--fg);

  text-decoration: none;

}

.nav-brand:hover { text-decoration: none; }

.nav-links {

  display: flex;

  flex-wrap: wrap;

  gap: 6px 18px;

  list-style: none;

  margin: 0;

  padding: 0;

  font-family: var(--mono);

  font-size: 0.72rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}

.nav-links a { color: var(--muted); }

.nav-links a:hover,

.nav-links a.active { color: #f5f2ec; text-decoration: none; }

.nav-links .soon {

  color: #888;

  cursor: default;

  opacity: 0.7;

}



/* ---- hero ---- */

.hero {

  padding: 72px 24px 48px;

  max-width: 960px;

  margin: 0 auto;

  text-align: center;

}

.eyebrow {

  font-family: var(--mono);

  font-size: 0.7rem;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: #b0aaa0;

  margin-bottom: 16px;

}

.hero h1 {

  font-family: var(--mono);

  font-size: clamp(2.2rem, 8vw, 4rem);

  letter-spacing: 0.12em;

  margin: 0 0 12px;

  line-height: 1.1;

}

.hero .tagline {

  font-size: 1.05rem;

  font-weight: 600;

  color: #ece8e0;

  max-width: 520px;

  margin: 0 auto 32px;

}

.stats {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 10px 24px;

  font-family: var(--mono);

  font-size: 0.78rem;

  letter-spacing: 0.08em;

  color: #e0dcd4;

  margin-bottom: 36px;

}

.stats li { list-style: none; font-weight: 600; }

.stats li::before { content: "◆ "; color: #888; font-size: 0.55rem; }



.cta-row {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 12px;

}

.btn {

  display: inline-block;

  padding: 12px 22px;

  font-family: var(--mono);

  font-size: 0.72rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  border: 1px solid var(--border);

  color: var(--fg);

  background: rgba(196, 30, 58, 0.12);

  backdrop-filter: blur(4px);

  transition: background 0.2s, border-color 0.2s;

}

.btn:hover {

  background: rgba(196, 30, 58, 0.28);

  border-color: var(--accent);

  text-decoration: none;

}

.btn-ghost {

  background: rgba(0, 0, 0, 0.15);

  border-color: rgba(255, 255, 255, 0.15);

}

.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }

.btn.disabled {

  opacity: 0.45;

  pointer-events: none;

  cursor: default;

}



/* ---- sections ---- */

main { max-width: 900px; margin: 0 auto; padding: 0 24px 80px; }

.section {

  margin-bottom: 40px;

  padding: 28px 24px;

  background: var(--panel);

  border: 1px solid var(--panel-border);

  border-radius: 2px;

  backdrop-filter: blur(4px);

}

.section-label {

  font-family: var(--mono);

  font-size: 0.68rem;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: #a8a29a;

  margin-bottom: 8px;

}

.section h2 {

  font-family: var(--mono);

  font-size: 1.35rem;

  letter-spacing: 0.1em;

  margin: 0 0 16px;

  text-transform: uppercase;

}

.section p {

  color: #f0ebe2;

  font-weight: 600;

  margin: 0 0 14px;

}

.section ul {

  margin: 0;

  padding-left: 0;

  list-style: none;

  color: #d8d4cc;

  font-size: 0.92rem;

  font-weight: 600;

}

.section ul li { padding: 6px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.06); }

.section ul li::before { content: "— "; color: #888; }



.sectors {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 16px;

  margin-top: 20px;

}

.sector {

  padding: 18px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  background: rgba(0, 0, 0, 0.18);

  backdrop-filter: blur(3px);

}

.sector h3 {

  font-family: var(--mono);

  font-size: 0.75rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: #d0ccc4;

  margin: 0 0 8px;

}

.sector p { font-size: 0.85rem; margin: 0; color: #c8c4bc; font-weight: 600; }



.disclaimer {

  font-size: 0.8rem;

  color: #888;

  font-style: italic;

  margin-top: 24px;

  text-align: center;

}



/* ---- roadmap page ---- */

.roadmap-header {

  padding: 48px 24px 24px;

  max-width: 900px;

  margin: 0 auto;

  text-align: center;

}

.roadmap-header h1 {

  font-family: var(--mono);

  font-size: clamp(1.4rem, 5vw, 2.2rem);

  letter-spacing: 0.2em;

  margin: 0;

}

.back-link {

  display: inline-block;

  margin-bottom: 24px;

  font-family: var(--mono);

  font-size: 0.7rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--muted);

}

.back-link:hover { color: var(--accent2); }



.acts { max-width: 900px; margin: 0 auto; padding: 0 24px 80px; }

.act {

  margin-bottom: 28px;

  padding: 28px 24px;

  background: var(--panel);

  border-left: 3px solid rgba(255, 255, 255, 0.2);

  border-top: 1px solid var(--panel-border);

  border-right: 1px solid var(--panel-border);

  border-bottom: 1px solid var(--panel-border);

  backdrop-filter: blur(4px);

}

.act-num {

  font-family: var(--mono);

  font-size: 0.68rem;

  letter-spacing: 0.25em;

  color: #a8a29a;

  margin-bottom: 6px;

}

.act h2 {

  font-family: var(--mono);

  font-size: 1.1rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  margin: 0 0 4px;

}

.act .subtitle {

  font-style: italic;

  color: #c0bbb2;

  font-size: 0.9rem;

  font-weight: 600;

  margin-bottom: 14px;

}

.act p {

  color: #f0ebe2;

  font-weight: 600;

  margin: 0;

  font-size: 0.95rem;

}



/* ---- radio page ---- */

.radio-page {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}

.radio-hero {

  padding: 88px 24px 24px;

  text-align: center;

}

.radio-hero .tagline {

  font-size: 1.05rem;

  color: rgba(240, 235, 226, 0.85);

  margin-top: 12px;

}

.radio-stage {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 24px 24px 64px;

  gap: 20px;

}

.radio-glow {

  position: absolute;

  width: 320px;

  height: 320px;

  border-radius: 50%;

  background: radial-gradient(closest-side, rgba(196, 30, 58, 0.45), rgba(255, 100, 0, 0.2) 50%, transparent 75%);

  filter: blur(48px);

  pointer-events: none;

  transition: opacity 0.2s, transform 0.2s;

}

.radio-wrap {

  position: relative;

  width: 100%;

  max-width: 380px;

}

.radio-box {

  position: relative;

  border-radius: 22px;

  border: 1px solid rgba(255, 120, 50, 0.35);

  background: linear-gradient(180deg, rgba(40, 12, 18, 0.42) 0%, rgba(8, 4, 8, 0.5) 100%);

  backdrop-filter: blur(10px);

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, 0.08),

    0 18px 50px -18px rgba(196, 30, 58, 0.45),

    0 0 40px -14px rgba(255, 100, 0, 0.25);

  overflow: hidden;

}

.radio-box-top {

  height: 4px;

  background: linear-gradient(90deg, transparent, #ff6600 30%, #c41e3a 70%, transparent);

}

.radio-handle {

  width: 58px;

  height: 5px;

  margin: 8px auto 4px;

  border-radius: 999px;

  background: linear-gradient(180deg, rgba(80, 40, 30, 0.85), rgba(20, 10, 10, 0.95));

  border: 1px solid rgba(255, 120, 50, 0.25);

}

.radio-body {

  display: grid;

  grid-template-columns: 60px 1fr 60px;

  gap: 10px;

  padding: 8px 12px 12px;

  align-items: stretch;

}

.radio-speaker {

  aspect-ratio: 1;

  border-radius: 16px;

  border: 1px solid rgba(255, 120, 50, 0.2);

  background: radial-gradient(circle at 50% 45%, rgba(255, 100, 0, 0.25), rgba(8, 4, 8, 0.85) 70%);

  box-shadow: inset 0 0 14px rgba(196, 30, 58, 0.2);

  align-self: center;

  position: relative;

  overflow: hidden;

}

.radio-speaker::after {

  content: "";

  position: absolute;

  inset: 18%;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.08);

  background: radial-gradient(circle, rgba(255, 80, 0, 0.35), rgba(8, 4, 8, 0.9));

  transform: scale(var(--spk-scale, 1));

  transition: transform 0.05s linear;

}

.radio-center { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.radio-display {

  border-radius: 6px;

  border: 1px solid rgba(255, 120, 50, 0.3);

  background: linear-gradient(180deg, rgba(20, 8, 8, 0.65), rgba(8, 4, 8, 0.75));

  padding: 8px 10px;

  box-shadow: inset 0 0 16px rgba(255, 80, 0, 0.12);

}

.radio-display-label {

  font-family: var(--mono);

  font-size: 9px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: rgba(255, 160, 80, 0.9);

  display: flex;

  justify-content: space-between;

  gap: 8px;

}

.radio-display-label .live-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #444;

  align-self: center;

  flex-shrink: 0;

}

.radio-display-label .live-dot.on {

  background: #22c55e;

  box-shadow: 0 0 6px #22c55e;

}

.radio-bars {

  display: flex;

  align-items: flex-end;

  gap: 2px;

  height: 36px;

  margin-top: 6px;

  opacity: 0.55;

  transition: opacity 0.3s;

}

.radio-bars.playing { opacity: 1; }

.radio-bars span {

  flex: 1;

  border-radius: 1px;

  background: linear-gradient(180deg, #ff8800 0%, #c41e3a 55%, #8b0000 100%);

  box-shadow: 0 0 4px rgba(255, 100, 0, 0.4);

  height: var(--h, 20%);

  transition: height 0.05s linear;

}

.radio-station-name {

  font-family: var(--mono);

  font-size: 0.62rem;

  letter-spacing: 0.1em;

  color: rgba(255, 255, 255, 0.55);

  margin-top: 6px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.radio-controls {

  display: flex;

  align-items: center;

  gap: 8px;

}

.radio-btn {

  width: 36px;

  height: 36px;

  border-radius: 6px;

  border: 1px solid rgba(255, 120, 50, 0.28);

  background: linear-gradient(180deg, rgba(80, 30, 30, 0.9), rgba(18, 8, 12, 0.95));

  color: #fff;

  cursor: pointer;

  display: grid;

  place-items: center;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);

  transition: border-color 0.2s, box-shadow 0.2s;

}

.radio-btn:hover {

  border-color: #ff6600;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 8px rgba(255, 80, 0, 0.35);

}

.radio-btn svg { fill: currentColor; }

.radio-vol {

  flex: 1;

  height: 4px;

  -webkit-appearance: none;

  appearance: none;

  background: rgba(255, 120, 50, 0.15);

  border-radius: 999px;

  outline: none;

  cursor: pointer;

}

.radio-vol::-webkit-slider-thumb {

  -webkit-appearance: none;

  width: 12px;

  height: 12px;

  border-radius: 50%;

  background: linear-gradient(135deg, #ff8800, #c41e3a);

  box-shadow: 0 0 6px rgba(255, 80, 0, 0.6);

}

.radio-footer-bar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 8px 12px;

  border-top: 1px solid rgba(255, 255, 255, 0.07);

  background: linear-gradient(180deg, rgba(40, 12, 18, 0.35), rgba(0, 0, 0, 0.35));

  font-family: var(--mono);

  font-size: 8px;

  letter-spacing: 0.28em;

  color: rgba(255, 160, 80, 0.75);

}

.radio-hint {

  font-family: var(--mono);

  font-size: 0.68rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.55);

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 8px 16px;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(0, 0, 0, 0.2);

  backdrop-filter: blur(6px);

}

.radio-hint .dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.35);

}

.radio-hint.playing .dot {

  background: #22c55e;

  box-shadow: 0 0 6px #22c55e;

}



/* ---- footer ---- */

footer {

  position: relative;

  z-index: 2;

  text-align: center;

  padding: 32px 24px 48px;

  font-family: var(--mono);

  font-size: 0.68rem;

  letter-spacing: 0.12em;

  color: rgba(255, 255, 255, 0.4);

  border-top: 1px solid rgba(255, 255, 255, 0.06);

  background: rgba(5, 5, 8, 0.2);

}

footer a { color: rgba(255, 255, 255, 0.5); }



@media (max-width: 600px) {

  .nav { padding: 12px 16px; }

  .hero { padding-top: 48px; }

  .section, .act { padding: 20px 16px; }

  .radio-body { grid-template-columns: 48px 1fr 48px; }

}



/* ---- extras: CRT, ticker, reveal, glitch ---- */

.crt-overlay {

  position: fixed;

  inset: 0;

  z-index: 90;

  pointer-events: none;

  background: repeating-linear-gradient(

    0deg,

    rgba(0, 0, 0, 0.14) 0 1px,

    transparent 1px 3px

  );

  opacity: 0.35;

  mix-blend-mode: overlay;

}

.crt-overlay::after {

  content: "";

  position: absolute;

  inset: 0;

  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 100%);

  opacity: 0.5;

}



.specimen-ticker {

  position: sticky;

  top: 52px;

  z-index: 45;

  overflow: hidden;

  border-bottom: 1px solid rgba(255, 100, 0, 0.12);

  background: rgba(5, 5, 8, 0.32);

  backdrop-filter: blur(4px);

}

.specimen-ticker-inner {

  display: flex;

  width: max-content;

  animation: tickerScroll 42s linear infinite;

}

.specimen-ticker-track {

  flex-shrink: 0;

  padding: 6px 0;

  font-family: var(--mono);

  font-size: 0.58rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: rgba(200, 196, 188, 0.55);

  white-space: nowrap;

  padding-right: 4rem;

}

@keyframes tickerScroll {

  from { transform: translateX(0); }

  to { transform: translateX(-50%); }

}



.reveal {

  opacity: 0;

  transform: translateY(22px);

  transition: opacity 0.65s ease, transform 0.65s ease;

}

.reveal.revealed {

  opacity: 1;

  transform: translateY(0);

}

.hero.reveal { transition-delay: 0.05s; }



.fire-title.glitch-hit {

  animation: titleGlitch 0.28s steps(2) 1;

}

@keyframes titleGlitch {

  0%   { transform: translate(0); filter: hue-rotate(0deg); }

  25%  { transform: translate(-2px, 1px); text-shadow: 3px 0 #ff0000, -3px 0 #00ffff; }

  50%  { transform: translate(2px, -1px); }

  75%  { transform: translate(-1px, -1px); text-shadow: -2px 0 #ff4500, 2px 0 #c41e3a; }

  100% { transform: translate(0); }

}