/* ===== Vortexe — Coming Soon ===== */

:root{
  --ink: #eef0f2;
  --ink-dim: rgba(238,240,242,0.55);
  --ink-faint: rgba(238,240,242,0.28);
  --bg: #06070a;
  --line: rgba(238,240,242,0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-s: 600ms;
  --dur-m: 900ms;
  --dur-l: 1600ms;
}

*{ box-sizing: border-box; }
html,body{ height:100%; width:100%; overflow-x: hidden; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Tenor Sans', sans-serif;
  overflow-x: hidden;
  cursor: default;
}
::selection{ background: rgba(238,240,242,0.2); }

a, button, input{ font-family: inherit; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- background layer: the video, only ---------- */
.bg-layer{
  position: fixed; inset: 0; z-index: 0;
  background: #000;
  filter: contrast(1.06) saturate(1.08) brightness(0.98);
  overflow: hidden;
}
#bg-video{
  position: absolute;
  top: -12%; left: -12%; right: -12%; bottom: -12%;
  width: 124%; height: 124%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: filter 2400ms var(--ease), transform 2400ms var(--ease), opacity 600ms var(--ease);
  filter: blur(0px);
  transform: scale(1) translateZ(0);
  opacity: 1;
  will-change: filter, transform;
  backface-visibility: hidden;
}
/* Once settled: gentle, tasteful blur — enough to lift the UI text without
   erasing the lighthouse or the warm/night color grade, which should still
   read clearly through it. Oversized + scaled so the blur never bleeds a
   visible edge/box against the viewport frame. */
body.settled #bg-video{
  filter: blur(3px) sepia(0.22) saturate(1.35) brightness(1.08) hue-rotate(-6deg) contrast(1.05);
  transform: scale(1.1) translateZ(0);
  transition: filter 500ms var(--ease), transform 500ms var(--ease);
}
/* "Night" isn't just grading stripped away — it's its own subtle, cool,
   crisp look: slightly desaturated, a touch darker, a faint blue lean. */
body.settled.light-off #bg-video{
  filter: blur(3px) saturate(0.92) brightness(0.94) contrast(1.1) hue-rotate(4deg);
}

/* ---------- static poster: replaces the video once it finishes ---------- */
/* This is the actual fix for the "wrong frame" bug: instead of seeking the
   video backward to a centered timestamp (which could silently fail or
   time out on the real hosted 4K file, leaving it stuck on whatever frame
   it happened to be paused on), the video now only ever plays FORWARD to
   its natural end, then a pre-verified static image — extracted and
   confirmed correct — crossfades in underneath it. A static image can't
   drift, stutter, or land on the wrong content; there's nothing left to
   race against.
*/
.bg-poster{
  position: absolute;
  top: -12%; left: -12%; right: -12%; bottom: -12%;
  width: 124%; height: 124%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  filter: blur(3px) sepia(0.22) saturate(1.35) brightness(1.08) hue-rotate(-6deg) contrast(1.05);
  transform: scale(1.1) translateZ(0);
  transition: opacity 600ms var(--ease), filter 500ms var(--ease);
  will-change: opacity;
  backface-visibility: hidden;
}
body.settled .bg-poster{ opacity: 1; }
body.settled #bg-video{ opacity: 0; } /* video fades out from underneath, poster takes over */
body.settled.light-off .bg-poster{
  filter: blur(3px) saturate(0.92) brightness(0.94) contrast(1.1) hue-rotate(4deg);
}

.bg-mist{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 108%, rgba(20,26,34,0.55), transparent 60%),
    linear-gradient(180deg, rgba(4,5,7,0.42) 0%, rgba(4,5,7,0.12) 18%, rgba(4,5,7,0.14) 42%, rgba(4,5,7,0.32) 68%, rgba(2,3,5,0.85) 100%);
  pointer-events:none;
  transition: background 500ms var(--ease);
}
body.settled .bg-mist{
  background:
    radial-gradient(ellipse 80% 50% at 50% 108%, rgba(20,26,34,0.7), transparent 60%),
    linear-gradient(180deg, rgba(3,4,6,0.52) 0%, rgba(3,4,6,0.22) 18%, rgba(3,4,6,0.24) 42%, rgba(3,4,6,0.4) 68%, rgba(2,3,5,0.92) 100%);
}

.vignette{
  position: fixed; inset:0; z-index: 1; pointer-events:none;
  background: radial-gradient(ellipse 70% 70% at 50% 45%, transparent 40%, rgba(0,0,0,0.55) 100%);
}

/* Masks any residual seam/edge artifact right at the top of the frame —
   blends into the same dark tones as the rest of the scene. */
.top-mask{
  position: fixed; top: 0; left: 0; right: 0; z-index: 2; pointer-events:none;
  height: 140px;
  background: linear-gradient(180deg, rgba(2,3,5,0.9) 0%, rgba(2,3,5,0.5) 35%, transparent 100%);
}

/* Subtle bloom over the lighthouse lamp itself — screen blend so it lifts
   the existing glow rather than adding a new light source. Positioned to
   match where the lamp sits in the centered resting frame. */
.lamp-glow{
  position: fixed; z-index: 1; pointer-events:none;
  left: 50%; top: 34%;
  width: 340px; height: 340px;
  --beat-scale: 1;
  --beat-opacity: 1;
  transform: translate(-50%, -50%) scale(var(--beat-scale));
  background: radial-gradient(circle, rgba(255,222,170,0.55) 0%, rgba(255,200,140,0.22) 35%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 500ms var(--ease), background 500ms var(--ease), transform 90ms linear;
}
body.settled .lamp-glow{ opacity: var(--beat-opacity, 1); }
body.settled.light-off .lamp-glow{
  opacity: 0.55;
  background: radial-gradient(circle, rgba(210,228,255,0.4) 0%, rgba(180,205,240,0.16) 35%, transparent 72%);
}

/* ---------- ember particles: ambient drift near the lamp ---------- */
.embers{
  position: fixed; z-index: 1; pointer-events: none;
  left: 50%; top: 34%; width: 2px; height: 2px;
  opacity: 0; transition: opacity 500ms var(--ease);
}
body.settled .embers{ opacity: 1; }
.ember{
  position: absolute;
  width: 2.5px; height: 2.5px; border-radius: 50%;
  background: #ffcf8a;
  box-shadow: 0 0 4px 1px rgba(255,207,138,0.7);
  opacity: 0;
  animation: ember-rise 6s ease-in infinite;
}
.ember:nth-child(1){ left: -30px; animation-delay: 0s; animation-duration: 6.5s; }
.ember:nth-child(2){ left: 10px; animation-delay: 1.4s; animation-duration: 7.2s; }
.ember:nth-child(3){ left: -60px; animation-delay: 2.8s; animation-duration: 5.8s; }
.ember:nth-child(4){ left: 40px; animation-delay: 4.1s; animation-duration: 6.9s; }
.ember:nth-child(5){ left: -10px; animation-delay: 0.7s; animation-duration: 7.6s; }
.ember:nth-child(6){ left: 70px; animation-delay: 3.3s; animation-duration: 6.1s; }
@keyframes ember-rise{
  0%{ transform: translate(0,0) scale(0.6); opacity: 0; }
  12%{ opacity: 0.9; }
  70%{ opacity: 0.5; }
  100%{ transform: translate(var(--drift,18px), -190px) scale(0.2); opacity: 0; }
}
.ember:nth-child(odd){ --drift: 22px; }
.ember:nth-child(even){ --drift: -16px; }

/* ---------- cursor hover-ring: scales up over interactive elements ---------- */
.cursor-ring{
  position: fixed; z-index: 7; pointer-events: none;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  transform: translate(-50%,-50%) scale(0.4);
  opacity: 0;
  transition: transform 260ms var(--ease), opacity 260ms var(--ease);
  will-change: transform;
}
.cursor-ring.on{ opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* ---------- magnetic control buttons (desktop, fine pointer only) ---------- */
@media (hover: hover) and (pointer: fine){
  .control-btn{ transition: transform 180ms var(--ease), background 200ms var(--ease), color 200ms var(--ease); }
}

/* ---------- marquee items become interactive ---------- */
.marquee-track span:not(.dot){
  cursor: default;
  transition: color 200ms var(--ease), text-shadow 200ms var(--ease);
}
@media (hover: hover){
  .marquee-track span:not(.dot):hover{
    color: rgba(255,255,255,0.9);
    text-shadow: 0 0 12px rgba(255,255,255,0.4);
  }
}

/* ---------- countdown glitch flourish ---------- */
.cd-num.glitch{ animation: cd-glitch 420ms steps(2); }
@keyframes cd-glitch{
  0%{ transform: translateX(0); filter: hue-rotate(0deg); }
  25%{ transform: translateX(-2px); filter: hue-rotate(40deg); }
  50%{ transform: translateX(2px); filter: hue-rotate(-40deg); }
  75%{ transform: translateX(-1px); }
  100%{ transform: translateX(0); filter: hue-rotate(0deg); }
}

/* ---------- local time readout ---------- */
.local-time{
  position: fixed; z-index: 4; left: 50%; bottom: 92px;
  transform: translateX(-50%);
  font-size: 8.5px; letter-spacing: 0.2em; color: rgba(238,240,242,0.28);
  opacity: 0; transition: opacity var(--dur-m) var(--ease);
  pointer-events: none;
}
body.chrome-in .local-time{ opacity: 1; }

/* Tap-to-flare: clicking the scene once it's settled gives the beam a
   brief, bright pulse — a small tactile response, distinct from the
   permanent Night/Warm grade toggle. */
.lamp-glow.flare{
  animation: lamp-flare 900ms ease-out;
}
@keyframes lamp-flare{
  0%{ filter: brightness(1); }
  25%{ filter: brightness(2.4); }
  100%{ filter: brightness(1); }
}

.grain{
  position: fixed; inset:0; z-index: 5; pointer-events:none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* cursor glow */
.cursor-glow{
  position: fixed; z-index: 3; pointer-events:none;
  width: 380px; height: 380px; border-radius: 50%;
  left:0; top:0;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: opacity var(--dur-m) var(--ease);
  will-change: transform;
}
body.cursor-ready .cursor-glow{ opacity: 1; }

/* ---------- chrome (top/bottom bars) ---------- */
.chrome{
  position: fixed; left:0; right:0; z-index: 4;
  display:flex; align-items:center; justify-content:space-between;
  padding: 26px 34px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.chrome-bottom{ transform: translateY(8px); }
.chrome-top{ top:0; }
.chrome-bottom{ bottom:0; }
body.chrome-in .chrome{ opacity:1; transform: translateY(0); }

.brand-mark{ font-family:'Tenor Sans', sans-serif; letter-spacing:0.2em; color: var(--ink-dim); font-size: 11px; }
.reg{ font-size: 8px; vertical-align: super; }
.crumb{ position:absolute; left:50%; transform:translateX(-50%); }
.est{ }

.foot-left, .foot-right{ opacity: 0.8; }
.foot-center{ position:absolute; left:50%; transform:translateX(-50%); }

.corner{
  position:absolute; width: 22px; height: 22px; border-color: var(--ink-faint);
  opacity: 0.9;
}
.corner-tl{ top: 16px; left: 16px; border-top:1px solid; border-left:1px solid; }
.corner-tr{ top: 16px; right: 16px; border-top:1px solid; border-right:1px solid; }
.corner-bl{ bottom: 16px; left: 16px; border-bottom:1px solid; border-left:1px solid; }
.corner-br{ bottom: 16px; right: 16px; border-bottom:1px solid; border-right:1px solid; }

/* ---------- stage: center UI only, appears once video settles ---------- */
.stage{
  position: relative; z-index: 2;
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.zone{ padding: 0 5vw; text-align:center; }

/* ---------- sky text: floating over the video itself, timed to the beam ---------- */
.sky-layer{
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  perspective: 900px;
}

.shooting-star{
  position: absolute;
  top: 6%; left: -6%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px rgba(255,255,255,0.8);
  opacity: 0;
}
.shooting-star::before{
  content: '';
  position: absolute;
  top: 50%; right: 100%;
  width: 220px; height: 1.5px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7));
}
.shooting-star.fire{
  animation: shoot 1.4s cubic-bezier(0.3,0,0.7,1) forwards;
}
@keyframes shoot{
  0%{ opacity: 0; transform: translate(0, 0); }
  8%{ opacity: 1; }
  85%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(46vw, 9vh); }
}
.sky-text{
  position: absolute;
  margin: 0;
  opacity: 0;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  transform: translateY(16px) scale(0.94) rotateX(8deg);
  filter: blur(10px);
  transition: opacity 650ms var(--ease), transform 650ms var(--ease), filter 650ms var(--ease);
}
.sky-title{
  font-family: 'Cinzel Decorative', serif;
  font-weight: 700;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1;
  color: rgba(240,242,244,0.96);
  text-shadow:
    0 3px 10px rgba(0,0,0,0.8),
    0 0 30px rgba(255,235,190,0.42),
    0 0 90px rgba(120,150,200,0.28);
}
.sky-sub{
  font-family: 'Tenor Sans', sans-serif;
  font-size: clamp(10px, 1.1vw, 14px);
  letter-spacing: 0.42em;
  color: rgba(238,240,242,0.8);
  text-shadow: 0 2px 6px rgba(0,0,0,0.75), 0 0 20px rgba(0,0,0,0.6);
  margin-top: 10px;
}
.sky-text-right .sky-sub{ margin-left: auto; }
.sky-text.in{
  opacity: 1;
  filter: blur(0px);
  animation: sky-float 6.5s ease-in-out infinite;
}
.sky-text-left{ left: 6%; top: 16%; text-align: left; max-width: 44vw; }
.sky-text-right{ right: 7%; top: 15%; text-align: right; align-items: flex-end; max-width: 44vw; }

@keyframes sky-float{
  0%, 100%{ transform: translateY(0px) scale(1) rotateX(4deg) rotateZ(-0.4deg); }
  50%{ transform: translateY(-12px) scale(1.015) rotateX(6deg) rotateZ(0.4deg); }
}

.zone-center{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align: center;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms var(--ease) 250ms, transform 500ms var(--ease) 250ms;
  position: relative;
  padding: 48px 40px 40px;
}
.zone-center::before{
  content: '';
  position: absolute;
  inset: -20px -60px;
  background: radial-gradient(ellipse 60% 65% at 50% 40%, rgba(4,5,8,0.62) 0%, rgba(4,5,8,0.42) 40%, transparent 78%);
  z-index: -1;
  pointer-events: none;
}
body.settled .zone-center{ opacity: 1; transform: translateY(0); }

.wordmark-wrap{ position:relative; margin-bottom: 6px; }
.wordmark-img{
  width: min(640px, 54vw);
  height: auto;
  transform: scaleY(1.4);
  transform-origin: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.9)) drop-shadow(0 0 18px rgba(0,0,0,0.85)) drop-shadow(0 0 46px rgba(0,0,0,0.6));
  opacity: 1;
}

.coming-soon{
  font-family: 'Tenor Sans', sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 46px);
  letter-spacing: 0.32em;
  margin: 18px 0 10px;
  color: var(--ink);
  text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 24px rgba(0,0,0,0.8), 0 0 56px rgba(0,0,0,0.55);
}
.tagline{
  font-size: 11px;
  letter-spacing: 0.35em;
  color: rgba(238,240,242,0.75);
  margin: 0 0 30px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 18px rgba(0,0,0,0.7);
  transition: opacity 500ms var(--ease);
}

.divider{
  width: 1px; height: 34px;
  background: linear-gradient(180deg, transparent, var(--line), transparent);
  margin-bottom: 26px;
}

.label-sm{
  font-size: 10px; letter-spacing: 0.3em;
  color: var(--ink-faint);
  margin: 0 0 14px;
}

.countdown-block{ margin-bottom: 34px; display:flex; flex-direction:column; align-items:center; }
.countdown{ display:flex; align-items:baseline; gap: 12px; }
.cd-unit{ display:flex; flex-direction:column; align-items:center; min-width: 42px; }
.cd-num{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(30px, 4vw, 42px);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cd-label{
  font-size: 8.5px; letter-spacing: 0.2em; color: var(--ink-faint);
  margin-top: 6px;
}
.cd-sep{ font-size: 22px; color: var(--ink-faint); transform: translateY(-6px); }

.notify-block{ display:flex; flex-direction:column; align-items:center; }
.notify-form{
  display:flex; align-items:center; gap: 22px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  min-width: min(360px, 80vw);
}
.notify-input{
  flex:1; background: transparent; border:0; outline:0;
  color: var(--ink); font-size: 13px; letter-spacing: 0.02em;
  padding: 4px 2px;
}
.notify-input::placeholder{ color: var(--ink-faint); }
.notify-btn{
  background: transparent; border: 0; cursor:pointer;
  color: var(--ink-dim); font-size: 11px; letter-spacing: 0.22em;
  padding: 4px 2px;
  transition: color var(--dur-s) var(--ease), letter-spacing var(--dur-s) var(--ease);
  white-space: nowrap;
}
.notify-btn:hover{ color: var(--ink); letter-spacing: 0.28em; }
.notify-msg{
  font-size: 10.5px; letter-spacing: 0.15em; color: var(--ink-faint);
  height: 14px; margin: 12px 0 0;
  transition: opacity 400ms var(--ease);
}

/* ---------- secret code reveal ---------- */
.secret-reveal{
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2,3,5,0.75);
  backdrop-filter: blur(6px);
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(20px, 4vw, 40px);
  letter-spacing: 0.08em;
  text-align: center;
  color: #ffd27a;
  text-shadow: 0 0 40px rgba(255,210,122,0.6);
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms var(--ease);
}
.secret-reveal.in{ opacity: 1; }

/* ---------- marquee ---------- */
.marquee{
  position: fixed; left:0; right:0; bottom: 62px; z-index: 3;
  overflow:hidden; white-space:nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  opacity: 0;
  transition: opacity var(--dur-l) var(--ease);
}
body.chrome-in .marquee{ opacity: 0.5; }
.marquee-track{
  display:inline-block;
  font-size: 10px; letter-spacing: 0.25em; color: var(--ink-faint);
  animation: scroll-marquee 42s linear infinite;
  padding-left: 100%;
}
.marquee-track span{ margin: 0 6px; }
.marquee-track .dot{ opacity: 0.4; }
@keyframes scroll-marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------- control bar (sound + light) ---------- */
.control-bar{
  position: fixed; z-index: 6; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(8,10,14,0.55);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity var(--dur-m) var(--ease);
}
body.chrome-in .control-bar{ opacity: 1; }
body:not(.settled) .control-bar{ opacity: 0; pointer-events: none; }
body.settled .control-bar{ pointer-events: auto; }

.control-btn{
  display:flex; align-items:center; gap: 8px;
  height: 40px; padding: 0 18px 0 14px;
  border-radius: 999px;
  border: none; background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 10px; letter-spacing: 0.16em;
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
  white-space: nowrap;
}
.control-btn:hover{ background: rgba(255,255,255,0.08); color: var(--ink); }
.control-btn svg{ flex-shrink: 0; }
.control-btn .cb-label{ min-width: 68px; text-align:left; }

.control-divider{ width: 1px; height: 22px; background: var(--line); margin: 0 2px; }

#sound-toggle[aria-pressed="true"]{ color: var(--ink); }
#light-toggle[data-state="warm"]{ color: #ffb95c; }
#light-toggle[data-state="cool"]{ color: var(--ink-dim); }
#light-toggle[data-state="warm"] .cb-dot{ filter: drop-shadow(0 0 3px #ffb95c); }

/* ---------- intro video state ---------- */
body:not(.settled) .chrome,
body:not(.settled) .marquee{
  opacity: 0;
  pointer-events: none;
}
body.settled .chrome,
body.settled .marquee{
  pointer-events: auto;
}

/* ---------- responsive ---------- */
@media (max-width: 860px){
  .stage{ grid-template-columns: 1fr; }
  .sky-text-left{ left: 4%; top: 12%; max-width: 48vw; }
  .sky-text-right{ right: 4%; top: 11%; max-width: 48vw; }
  .sky-title{ font-size: clamp(30px, 10.5vw, 44px); }
  .sky-sub{ font-size: clamp(9px, 2.8vw, 12px); letter-spacing: 0.28em; }
  .sky-text{ padding: 10px 14px; border-radius: 4px; background: radial-gradient(ellipse at center, rgba(2,3,5,0.4) 0%, transparent 75%); }
  .zone-center::before{ inset: -20px -12px; }
  .zone-center{ padding: 0 8vw; }
  .crumb{ display:none; }
  .chrome{ padding: 20px 18px; font-size: 9px; }
  .marquee{ bottom: 56px; }
  .countdown{ gap: 8px; }
  .cd-unit{ min-width: 32px; }
  .notify-form{ min-width: 78vw; }
  .wordmark-img{ width: 86vw; }
  .control-bar{ max-width: 94vw; }
  .control-btn{ height: 44px; padding: 0 14px 0 12px; } /* 44px = comfortable touch target */
  .cb-label{ min-width: 54px; font-size: 9px; }
}

/* Mobile GPUs handle large blurred, oversized video less smoothly —
   trim it back specifically there so the settle transition doesn't stutter. */
@media (max-width: 860px){
  body.settled #bg-video{ filter: blur(2px) sepia(0.22) saturate(1.3) brightness(1.06) hue-rotate(-6deg) contrast(1.04); }
  body.settled.light-off #bg-video{ filter: blur(2px) saturate(0.92) brightness(0.94) contrast(1.08) hue-rotate(4deg); }
}

@media (max-width: 420px){
  .foot-center{ display:none; }
  .local-time{ display:none; } /* footer + control-bar already crowd the bottom on small phones */
  .control-btn{ padding: 0 10px 0 10px; }
  .cb-label{ min-width: 44px; font-size: 8.5px; letter-spacing: 0.1em; }
  .sky-text-left{ left: 3%; top: 10%; max-width: 50vw; }
  .sky-text-right{ right: 3%; top: 9%; max-width: 50vw; }
  .sky-title{ font-size: clamp(26px, 9.5vw, 36px); }
  .sky-sub{ font-size: clamp(8.5px, 2.6vw, 11px); }
}

/* Tablets/iPad-class */
@media (min-width: 600px) and (max-width: 1024px){
  .wordmark-img{ width: min(480px, 60vw); }
  .control-bar{ bottom: 34px; }
}

/* Large displays / TVs */
@media (min-width: 1600px){
  .zone-center{ transform: scale(1.08); }
  .control-btn{ height: 46px; font-size: 12px; }
}

/* Any touch device: guarantee minimum comfortable tap targets */
@media (hover: none) and (pointer: coarse){
  .control-btn{ min-height: 44px; }
  .notify-btn{ padding: 10px 4px; }
}