/* =========================================================
   NakodaBhairav — design tokens
   Palette: temple brass, oxblood carpet, amber LCD glow
   Display type: Yatra One (brand mark)
   Body type: Mukta (humanist, Devanagari-ready)
   Digital type: VT323 (retro LCD/terminal face for the player)
   Signature: the whole UI lives ON the temple photo itself —
   a retro brass radio panel sitting on the carpet, between the
   two lines of text already printed on the artwork.
   ========================================================= */

:root{
  --maroon-950:#170808;
  --ember:#ff7a30;
  --ember-dim:#c24f18;
  --gold:#d9ad4c;
  --gold-soft:#e7c877;
  --cream:#f4e9d4;
  --brass-dim:#a98a5c;
  --line:rgba(217,173,76,0.18);

  --font-display:'Yatra One', system-ui, serif;
  --font-body:'Mukta', 'Segoe UI', sans-serif;
  --font-lcd:'VT323', monospace;

  --radius-md:14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--maroon-950);
  color:var(--cream);
  font-family:var(--font-body);
  line-height:1.5;
  position:relative;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

a{color:var(--gold-soft); text-decoration:none;}
a:hover{color:var(--ember);}
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:2px;
  border-radius:6px;
}

img{max-width:100%; display:block;}

/* ---------- ember particle field ---------- */
.ember-field{
  position:fixed; inset:0; pointer-events:none; z-index:2; overflow:hidden;
}
.ember-field span{
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:var(--ember);
  box-shadow:0 0 6px 2px rgba(255,122,48,0.7);
  opacity:0;
  animation:rise linear infinite;
}
@keyframes rise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:0.9; }
  90%{ opacity:0.4; }
  100%{ transform:translateY(-110vh) translateX(var(--drift,20px)); opacity:0; }
}

/* =========================================================
   THE STAGE — fills the screen edge to edge. The crisp photo
   (.hero-frame) is fit inside it at its true aspect ratio, so
   it's never cropped and never overflows the screen. Any
   leftover space (common on tall phone screens, since this
   photo is wider than it is tall) is filled with a soft
   blurred bleed of the same photo instead of bare background —
   so it never reads as an empty gap.
   ========================================================= */
.hero-stage{
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--maroon-950);
}

.hero-backdrop{
  position:absolute;
  inset:-6%; /* overscan so the blur never shows a hard edge */
  background-image:url('../images/nakoda-bhairav-hero.jpg');
  background-size:cover;
  background-position:center;
  filter:blur(46px) brightness(0.55) saturate(1.2);
  z-index:0;
}

.hero-frame{
  position:relative;
  width:min(100%, calc(100vh * 1536 / 1024));
  width:min(100%, calc(100dvh * 1536 / 1024));
  aspect-ratio:1536/1024;
  line-height:0; /* kill inline-image whitespace gap */
}
.hero-frame img{
  width:100%;
  height:100%;
  object-fit:cover; /* box already matches the image's own ratio, so this never crops */
  display:block;
}

/* ---------- overlaid header ---------- */
.stage-header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:3;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:8px;
  padding:clamp(8px,2vw,20px) clamp(10px,2.4vw,24px);
}
.brand{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-display);
  font-size:clamp(0.8rem, 2.4vw, 1.15rem);
  letter-spacing:0.3px;
  color:var(--cream);
  background:rgba(10,4,2,0.45);
  backdrop-filter:blur(3px);
  border:1px solid rgba(217,173,76,0.35);
  padding:clamp(4px,1vw,7px) clamp(8px,1.6vw,14px);
  border-radius:999px;
  text-shadow:0 1px 3px rgba(0,0,0,0.8);
  white-space:nowrap;
}
.brand .om{ color:var(--ember); }

.platform-links{ display:flex; gap:clamp(4px,1vw,8px); }
.platform-links a{
  font-size:clamp(0.6rem, 1.7vw, 0.8rem);
  padding:clamp(4px,1vw,7px) clamp(8px,1.8vw,13px);
  background:rgba(10,4,2,0.45);
  backdrop-filter:blur(3px);
  border:1px solid rgba(217,173,76,0.35);
  border-radius:999px;
  color:var(--gold-soft);
  white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,0.8);
}
.platform-links a:hover{ border-color:var(--ember); color:var(--ember); }

/* =========================================================
   THE RETRO PLAYER — a slim, light strip (not a solid block)
   sitting over the carpet, well clear of the nameplate above
   it and the www.nakodabhairav.in bar below it.
   ========================================================= */
.retro-player{
  position:absolute;
  left:50%; top:86%;
  transform:translate(-50%,-50%);
  z-index:3;
  width:min(88%, 380px);
  display:flex; align-items:center;
  gap:clamp(6px,1.6vw,10px);
  padding:clamp(5px,1.2vw,8px) clamp(8px,1.8vw,12px);
  border-radius:999px;
  background:rgba(18,9,4,0.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(217,173,76,0.4);
  box-shadow:0 6px 20px rgba(0,0,0,0.4);
}

/* spinning reel — the signature retro touch, kept small */
.reel{
  flex:0 0 auto;
  width:clamp(20px,4.5vw,28px);
  aspect-ratio:1/1;
  border-radius:50%;
  background:
    radial-gradient(circle at center, #1a0f06 0 20%, transparent 21%),
    repeating-conic-gradient(#caa35e 0deg 10deg, #7a5a2c 10deg 20deg);
  border:1px solid rgba(0,0,0,0.5);
  box-shadow:inset 0 0 4px rgba(0,0,0,0.6);
  animation:reel-spin 3s linear infinite;
  animation-play-state:paused;
}
.reel.playing{ animation-play-state:running; }
@keyframes reel-spin{ to{ transform:rotate(360deg); } }

.transport{ display:flex; align-items:center; gap:clamp(2px,0.8vw,5px); flex:0 0 auto; }
.transport button{
  background:none; border:none; cursor:pointer;
  color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.15s, opacity 0.15s;
}
.transport button:hover{ transform:translateY(-1px); opacity:0.85; }
.transport button:not(#play-btn){
  width:clamp(20px,4.5vw,26px); height:clamp(20px,4.5vw,26px);
}
#play-btn{
  width:clamp(24px,5.5vw,32px); height:clamp(24px,5.5vw,32px);
  border-radius:50%;
  background:linear-gradient(160deg, var(--ember), var(--ember-dim));
  color:#2a1206;
  box-shadow:0 2px 6px rgba(0,0,0,0.4);
}

.retro-mid{ flex:1 1 auto; min-width:0; }

.lcd{
  overflow:hidden;
  white-space:nowrap;
  margin-bottom:2px;
}
.lcd span{
  display:inline-block;
  font-family:var(--font-lcd);
  font-size:clamp(0.72rem, 2vw, 0.95rem);
  letter-spacing:0.4px;
  color:#ffb347;
  text-shadow:0 0 5px rgba(255,179,71,0.7);
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  vertical-align:bottom;
}

#seek{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:100%;
  height:12px; /* generous hit area even though the visible line is thin */
  margin:0; padding:0;
  background:transparent;
  cursor:pointer;
}
#seek::-webkit-slider-runnable-track{
  height:3px;
  border-radius:999px;
  background:linear-gradient(to right, var(--ember) var(--seek-pct,0%), rgba(255,255,255,0.25) var(--seek-pct,0%));
}
#seek::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:9px; height:9px;
  margin-top:-3px;
  border-radius:50%;
  background:var(--cream);
  box-shadow:0 0 4px rgba(0,0,0,0.6);
}
#seek::-moz-range-track{ height:3px; border-radius:999px; background:rgba(255,255,255,0.25); }
#seek::-moz-range-progress{ height:3px; border-radius:999px; background:var(--ember); }
#seek::-moz-range-thumb{ width:9px; height:9px; border-radius:50%; border:none; background:var(--cream); }

.onair{
  flex:0 0 auto;
  display:flex; align-items:center; gap:4px;
  font-size:clamp(0.65rem, 1.7vw, 0.8rem);
  color:var(--cream);
  font-weight:600;
}
.onair .dot{
  width:6px; height:6px; border-radius:50%; background:#ff4d3a;
  box-shadow:0 0 5px #ff4d3a;
  animation:onair-blink 1.6s ease-in-out infinite;
}
@keyframes onair-blink{
  0%,100%{ opacity:1; }
  50%{ opacity:0.35; }
}

@media (max-width:420px){
  .onair{ display:none; }
}