:root{
  --bg:#07070a;
  --fg:#f4f1ea;
  --muted:#b9b2a6;

  /* warm saloon glow */
  --ember: rgba(255, 170, 90, 0.22);
  --ember2: rgba(255, 120, 55, 0.16);

  --shadow: rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  background: radial-gradient(1200px 600px at 50% 30%, #121018 0%, var(--bg) 60%, #050508 100%);
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.page{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

/* =========================
   HERO STAGE
   ========================= */
.hero{
  position:relative;
  min-height:100vh;      /* fallback */
  min-height:100svh;     /* modern */
  width:100%;
  overflow:hidden;

  /* mobile safari: allow custom drag/pan */
  touch-action:none;
  -webkit-tap-highlight-color: transparent;
}

/* Background image layer */
.hero-bg{
  position:absolute;
  inset:0; /* ✅ DO NOT use negative inset; it causes forced zoom/crop */

  background-image:url("./assets/tavern.png");
  background-size:cover;
  background-repeat:no-repeat;

  /* Slight upward bias so sign/top aren’t punished on common aspect ratios */
  background-position: 50% 20%;

  filter:saturate(1.05) contrast(1.05);

  /* JS-driven pan */
  transform: translate3d(var(--pan-x, 0px), var(--pan-y, 0px), 0);
  transition: transform 120ms ease-out;
  will-change: transform;

  /* Fade-in */
  opacity:0;
  animation: heroFade 1.6s ease-out forwards;

  /* Important: background layer never steals interaction */
  pointer-events:none;
}

@keyframes heroFade{
  to { opacity:1; }
}

/* Warm flicker overlay */
.flicker-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;

  background:
    radial-gradient(55% 45% at 72% 34%, rgba(255, 175, 85, 0.20), rgba(0,0,0,0) 62%),
    radial-gradient(62% 50% at 26% 58%, rgba(255, 120, 55, 0.14), rgba(0,0,0,0) 68%),
    radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.40) 100%);

  opacity:0.55;
  animation:flicker 2.8s infinite ease-in-out;
}

@keyframes flicker{
  0%   { opacity:0.45; filter:brightness(1.00); }
  18%  { opacity:0.62; filter:brightness(1.04); }
  36%  { opacity:0.48; filter:brightness(1.01); }
  58%  { opacity:0.70; filter:brightness(1.05); }
  76%  { opacity:0.50; filter:brightness(1.02); }
  100% { opacity:0.58; filter:brightness(1.03); }
}

/* Cursor spotlight */
.spotlight{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;

  opacity:0;
  transition:opacity 200ms ease;
  background: radial-gradient(
    240px 240px at var(--sx, 50%) var(--sy, 50%),
    rgba(255, 170, 90, 0.18),
    rgba(0,0,0,0) 70%
  );
}

.hero:hover .spotlight{ opacity:1; }

@media (hover: none){
  .spotlight{ opacity:0.35; }
}

/* =========================
   HOTSPOTS (no boxes; glow/illumination)
   ========================= */
.hotspot{
  position:absolute;
  border:0;
  background:transparent;
  cursor:pointer;
  outline:none;
  z-index:4;

  -webkit-tap-highlight-color: transparent;
}

/* The “illumination” effect */
.hotspot::after{
  content:"";
  position:absolute;
  inset:-22px;
  border-radius:999px;

  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 200, 140, 0.28) 0%,
      rgba(255, 150, 70, 0.18) 26%,
      rgba(255, 120, 55, 0.10) 46%,
      rgba(0,0,0,0) 72%
    );

  opacity:0;
  transform:scale(0.92);
  transition:opacity 160ms ease, transform 160ms ease;
  pointer-events:none;

  /* blend-mode is pretty but can be quirky; keep it but don’t rely on it */
  mix-blend-mode: screen;
  filter: blur(0.2px);
}

.hotspot:hover::after,
.hotspot:focus-visible::after,
.hotspot.is-hot::after{
  opacity:1;
  transform:scale(1.0);
}

/* Labels */
.hotspot-label{
  position:absolute;
  z-index:5;
  pointer-events:none;

  padding:6px 10px;
  font-size:14px;
  color: rgba(255, 225, 190, 0.96);
  background: rgba(10, 8, 6, 0.55);
  border: 1px solid rgba(255, 190, 120, 0.18);
  border-radius:12px;
  backdrop-filter: blur(6px);

  opacity:0;
  transition: opacity 160ms ease;
  text-shadow: 0 2px 12px rgba(0,0,0,0.85);
}

/* Requires label is immediately after button in DOM */
.hotspot:hover + .hotspot-label,
.hotspot:focus-visible + .hotspot-label,
.hotspot.is-hot + .hotspot-label{
  opacity:1;
}

/* ===== Desktop hotspot placement ===== */
.hotspot-turntable{
  left: 2%;
  top: 62%;
  width: 34%;
  height: 34%;
}

.hotspot-whiskey{
  left: 49%;
  top: 72%;
  width: 9%;
  height: 16%;
}

.label-turntable{ left: 6%; top: 58%; }
.label-whiskey{ left: 49%; top: 67%; }

/* =========================
   MOBILE PORTRAIT FIXES
   ========================= */
@media (max-width: 768px){
  .hero-bg{
    /* mobile tends to crop right side; bias left a bit */
    background-position: 18% 20%;
  }

  .hotspot-turntable{
    left: 3%;
    top: 64%;
    width: 42%;
    height: 32%;
  }

  .hotspot-whiskey{
    left: 56%;
    top: 73%;
    width: 10%;
    height: 16%;
  }

  .label-turntable{ left: 7%; top: 60%; }
  .label-whiskey{ left: 56%; top: 68%; }
}

/* =========================
   FOOTER + AUDIO BUTTON
   ========================= */
.footer-band{
  flex:0 0 auto;
  padding:14px 16px;
  background: linear-gradient(
    180deg,
    rgba(10,8,6,0.0),
    rgba(10,8,6,0.92) 35%,
    rgba(10,8,6,0.98)
  );
  border-top: 1px solid rgba(255, 190, 120, 0.12);
}

.footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  color: rgba(255, 220, 180, 0.90);
  letter-spacing:0.04em;
}

.footer-text{ font-weight:600; }
.footer-dim{ opacity:0.7; }

.audio-toggle{
  position:absolute;
  right:16px;
  bottom:16px;
  z-index:6;

  background: rgba(10, 8, 6, 0.65);
  border: 1px solid rgba(255, 190, 120, 0.25);
  border-radius:14px;
  padding:8px 10px;

  color: rgba(255, 220, 180, 0.9);
  font-size:14px;
  cursor:pointer;

  backdrop-filter: blur(6px);
}

.audio-toggle:hover{
  box-shadow: 0 0 18px rgba(255, 140, 50, 0.35);
}

/* Accessibility helper */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Reduce motion for folks who request it */
@media (prefers-reduced-motion: reduce){
  .hero-bg{ animation:none; opacity:1; transition:none; }
  .flicker-overlay{ animation:none; }
  .spotlight{ transition:none; }
  .hotspot::after{ transition:none; }
}