:root {
  color-scheme: dark;
  --ink: #f2f2f2;
  --ink-dim: rgba(242, 242, 242, 0.6);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: #000;
  color: var(--ink);
  font-family: "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}

.bg {
  position: fixed;
  inset: -5%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.05) contrast(1.05);
  animation: drift 40s ease-in-out infinite alternate;
  will-change: transform;
}

/* Placeholder until assets/background.jpg is dropped in, see assets/README.md */
.bg--placeholder {
  background-image: none;
  background: linear-gradient(120deg, #000000, #0c0c0c, #050505, #000000);
  background-size: 300% 300%;
  animation:
    drift 40s ease-in-out infinite alternate,
    gradient-shift 18s ease infinite;
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes drift {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.12) translate(-1.5%, -1%); }
  100% { transform: scale(1.06) translate(1.5%, 1%); }
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain-shift 1s steps(4) infinite;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1%, 1%); }
  50%  { transform: translate(1%, -1%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%);
}

/* Silhouette art: black shapes on a transparent PNG read as white-on-dark
   via invert. The flame is a jagged extension of the silhouette's outer
   edge (not a separate shape), so assets/flame-mask.png encodes, per row,
   "how close is this pixel to the figure's outer edge" -- it isolates the
   flame contour so it can be recolored and animated independently of the
   plain white body. */
.artwork-wrap {
  position: fixed;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  height: min(44vh, 460px);
  aspect-ratio: 984 / 1212;
  max-width: 68vw;
  animation: artwork-fade-in 2.2s ease-out 0.2s both;
}

.artwork {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1) drop-shadow(0 20px 60px rgba(0, 0, 0, 0.7));
}

@keyframes artwork-fade-in {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

.flame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: url("assets/flame-mask.png");
  mask-image: url("assets/flame-mask.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-image:
    radial-gradient(120% 65% at 50% 105%, #fff3c4 0%, #ffd166 16%, #ff9e2c 34%, #ff5a1f 54%, #c92a0c 76%, transparent 100%),
    linear-gradient(0deg, #ff7a1a 0%, #ffb238 32%, #fff2c2 56%, transparent 82%);
  background-size: 150% 230%, 100% 260%;
  background-position: 50% 22%, 50% 100%;
  background-blend-mode: screen;
  transform-origin: 60% 100%;
  animation:
    flame-rise 9s linear infinite,
    flame-flicker 4.4s ease-in-out infinite,
    flame-micro 1.1s ease-in-out infinite;
}

.flame--glow {
  inset: -6%;
  opacity: 0.6;
  transform-origin: 60% 100%;
  animation:
    flame-rise 9s linear infinite,
    flame-flicker 5.3s ease-in-out infinite reverse,
    flame-micro-glow 1.4s ease-in-out infinite;
}

/* Slow, steady convective drift -- real flame licks climb continuously
   rather than snapping back and forth. */
@keyframes flame-rise {
  0%   { background-position: 50% 26%, 47% 108%; }
  50%  { background-position: 45% -14%, 55% 45%; }
  100% { background-position: 50% 26%, 47% 108%; }
}

/* Irregular, non-symmetric steps (rather than a smooth back-and-forth
   breathe) so the flicker reads as chaotic turbulence instead of a
   mechanical pulse. The two layers run at different durations so they
   drift in and out of phase instead of flickering in lockstep. */
@keyframes flame-flicker {
  0%   { opacity: 1;    transform: scale(1, 1) translateX(0); }
  8%   { opacity: 0.92; transform: scale(0.99, 1.02) translateX(-0.4%); }
  19%  { opacity: 1;    transform: scale(1.015, 0.985) translateX(0.3%); }
  27%  { opacity: 0.9;  transform: scale(0.985, 1.03) translateX(-0.2%); }
  38%  { opacity: 0.99; transform: scale(1.005, 0.99) translateX(0.4%); }
  50%  { opacity: 0.93; transform: scale(0.99, 1.015) translateX(-0.3%); }
  63%  { opacity: 1;    transform: scale(1.02, 0.98) translateX(0.2%); }
  74%  { opacity: 0.91; transform: scale(0.995, 1.025) translateX(-0.4%); }
  85%  { opacity: 0.98; transform: scale(1, 0.995) translateX(0.15%); }
  100% { opacity: 1;    transform: scale(1, 1) translateX(0); }
}

/* Fast, subtle brightness jitter on a third, unsynced timer -- the bit
   that reads as "flame" rather than "gradient" up close. */
@keyframes flame-micro {
  0%, 100% { filter: saturate(1.3) brightness(1); }
  30%      { filter: saturate(1.34) brightness(1.05); }
  55%      { filter: saturate(1.24) brightness(0.96); }
  80%      { filter: saturate(1.3) brightness(1.03); }
}

@keyframes flame-micro-glow {
  0%, 100% { filter: saturate(1.4) brightness(1.1) blur(10px); }
  30%      { filter: saturate(1.45) brightness(1.16) blur(11px); }
  55%      { filter: saturate(1.32) brightness(1.02) blur(9px); }
  80%      { filter: saturate(1.4) brightness(1.08) blur(10px); }
}

.content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8vh clamp(24px, 7vw, 96px) 0;
  text-align: left;
}

/* Futura isn't a free web font, so the title uses Jost (an open geometric
   sans built as a close Futura revival) pushed to extra-bold + oblique to
   approximate "Futura Extra Bold Oblique". The letterforms are then filled
   with a small dot grid via background-clip so they read as an LED /
   dot-matrix sign rather than solid type. */
.title {
  display: flex;
  flex-direction: column;
  font-family: "Jost", "Futura", "Century Gothic", sans-serif;
  font-weight: 800;
  font-style: oblique -12deg;
  font-size: clamp(1.9rem, 6.5vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
  margin: 0;
  animation: fade-in 2s ease-out both;
}

.title span {
  background-image: radial-gradient(circle at 50% 50%, var(--ink) 42%, transparent 44%);
  background-size: 0.14em 0.14em;
  background-position: 0 0;
  background-repeat: repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(242, 242, 242, 0.45));
}

.subtitle {
  margin-top: 18px;
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-dim);
  animation: fade-in 2s ease-out 0.4s both;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sound-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(20, 20, 20, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.sound-toggle:hover {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(255, 255, 255, 0.7);
}

.sound-toggle .icon {
  font-size: 0.7rem;
  line-height: 1;
}

.sound-toggle .icon-on { display: none; }
.sound-toggle[aria-pressed="true"] .icon-on { display: inline; }
.sound-toggle[aria-pressed="true"] .icon-off { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bg, .grain, .title, .subtitle, .flame {
    animation: none;
  }
}