/* =====================================================
   Into the Storm — custom CSS
   Layered on top of Tailwind. Handles the things utilities
   can't express: atmosphere, animation, custom cursor,
   chapter rhythm, marquees.
   ===================================================== */

:root {
  --bezier-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --bezier-storm: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Tailwind CDN doesn't emit font-display utility (CSS-name clash); set it ourselves */
.font-display {
  font-family: 'Bodoni Moda', 'Didot', 'Bodoni 72', serif;
}

html { scroll-behavior: smooth; }

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

body {
  cursor: none;
}
@media (max-width: 1023px) {
  body { cursor: auto; }
}

/* ===========================================
   ENTRY SEQUENCE — clouds part on first load
   =========================================== */
.entry-shutter {
  position: absolute;
  inset-inline: 0;
  height: 50%;
  background: #000;
  transform-origin: center;
  animation: shutter-clear 1.4s var(--bezier-storm) 0.2s forwards;
}
.entry-shutter-top    { top: 0;    transform-origin: top; }
.entry-shutter-bottom { bottom: 0; transform-origin: bottom; }
.entry-shutter-top    { animation-name: shutter-clear-top; }
.entry-shutter-bottom { animation-name: shutter-clear-bottom; }

@keyframes shutter-clear-top {
  0%   { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}
@keyframes shutter-clear-bottom {
  0%   { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}
#entry.is-done { display: none; }

/* ===========================================
   CUSTOM CURSOR (desktop only)
   =========================================== */
.cursor-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #E6E8EC;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease, transform 0.18s var(--bezier-soft), background 0.2s ease;
  mix-blend-mode: difference;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid rgba(230, 232, 236, 0.45);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.35s var(--bezier-soft), border-color 0.3s ease, opacity 0.3s ease;
}
.cursor-ring.is-hot {
  transform: translate(-50%, -50%) scale(1.6);
  border-color: rgba(156, 182, 204, 0.9);
}
.cursor-dot.is-hot {
  background: #9CB6CC;
  transform: translate(-50%, -50%) scale(1.6);
}

/* ===========================================
   ATMOSPHERE — fixed background layers
   =========================================== */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%,    #1A1D24 0%, #07080A 55%, #000 100%),
    #000;
}
.atmosphere-grain {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  opacity: 0.18;
  mix-blend-mode: overlay;
  animation: grain-shift 8s steps(8) infinite;
  pointer-events: none;
}
@keyframes grain-shift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0,0); }
}

.atmosphere-clouds {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  opacity: 0.85;
}
.atmosphere-clouds--far  { animation: cloud-drift-far  120s linear infinite; }
.atmosphere-clouds--near { animation: cloud-drift-near 80s  linear infinite; opacity: 0.55; }

@keyframes cloud-drift-far {
  0%   { transform: translate3d(-3%, 0, 0); }
  100% { transform: translate3d(3%, -2%, 0); }
}
@keyframes cloud-drift-near {
  0%   { transform: translate3d(2%, 1%, 0); }
  100% { transform: translate3d(-4%, -1%, 0); }
}

.atmosphere-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}

/* ===========================================
   LIGHTNING BOLT (sharp jagged vector)
   =========================================== */
.atmosphere-bolt {
  position: absolute;
  top: 0;
  height: 100vh;
  width: clamp(140px, 22vw, 360px);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 0 6px  rgba(245, 250, 255, 1))
    drop-shadow(0 0 18px rgba(200, 225, 255, 0.95))
    drop-shadow(0 0 48px rgba(150, 195, 245, 0.7))
    drop-shadow(0 0 96px rgba(100, 160, 230, 0.5));
}
.atmosphere-bolt .bolt-stroke {
  stroke: #FFFFFF;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1700;
  stroke-dashoffset: 1700;
  transition: stroke-dashoffset 110ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.atmosphere-bolt .bolt-main   { stroke-width: 4; }
.atmosphere-bolt .bolt-branch { stroke-width: 2; opacity: 0.9; }

.atmosphere-bolt.is-flashing {
  animation: bolt-flash 700ms ease-out;
}
@keyframes bolt-flash {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  18%  { opacity: 1; }
  28%  { opacity: 0.4; }
  40%  { opacity: 1; }
  60%  { opacity: 0.3; }
  100% { opacity: 0; }
}
/* Path drawing is animated via Web Animations API in JS (Chromium doesn't
   reliably restart CSS animations on SVG descendants triggered by an
   ancestor class toggle, so we drive each path explicitly). */

/* ===========================================
   SCREEN FLASH (bright sky-wide whiteout)
   =========================================== */
.screen-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 30%, rgba(240, 248, 255, 0.85) 0%, rgba(170, 200, 240, 0.35) 35%, rgba(0, 0, 0, 0) 75%),
    linear-gradient(180deg, rgba(220, 235, 255, 0.3) 0%, rgba(0, 0, 0, 0) 60%);
  mix-blend-mode: screen;
}
.screen-flash.is-flashing {
  animation: screen-flash 700ms ease-out;
}
@keyframes screen-flash {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  20%  { opacity: 0.25; }
  35%  { opacity: 0.95; }
  55%  { opacity: 0.1; }
  100% { opacity: 0; }
}

/* "Heat lightning" — distant glow inside the clouds, no visible bolt */
.screen-flash.is-flashing-soft {
  animation: screen-flash-soft 1400ms ease-out;
}
@keyframes screen-flash-soft {
  0%   { opacity: 0; }
  22%  { opacity: 0.55; }
  45%  { opacity: 0.35; }
  70%  { opacity: 0.18; }
  100% { opacity: 0; }
}

/* All sections sit above atmosphere */
nav, header, section, footer { position: relative; z-index: 1; }

/* ===========================================
   LINK UNDERLINE — animated wipe
   =========================================== */
.link-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--bezier-soft);
}
.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

a:focus-visible,
button:focus-visible {
  outline: 1px solid #9CB6CC;
  outline-offset: 4px;
  border-radius: 2px;
}

/* ===========================================
   HERO WORDMARK
   =========================================== */
.wordmark {
  font-size: clamp(4.25rem, 19vw, 22rem);
  line-height: 0.88;
}
.wordmark-line {
  display: block;
  will-change: transform;
}
.wordmark-line--shift {
  padding-left: clamp(1rem, 6vw, 6rem);
}

.wordmark-flicker {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(230,232,236,0.45) 50%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.wordmark-flicker.is-flashing {
  animation: wordmark-flicker 700ms steps(8) 1;
}
@keyframes wordmark-flicker {
  0%   { opacity: 0; transform: translateX(-30%); }
  35%  { opacity: 1; }
  60%  { opacity: 0.2; transform: translateX(20%); }
  100% { opacity: 0; transform: translateX(40%); }
}

/* ===========================================
   SCROLL REVEALS
   =========================================== */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 1s var(--bezier-soft) var(--reveal-delay, 0s),
    transform 1.1s var(--bezier-soft) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ===========================================
   CHAPTER META STRIP
   =========================================== */
.chapter-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(31, 34, 40, 0.7);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #9CA0A8;
}

/* ===========================================
   SCROLL CUE
   =========================================== */
.scroll-cue-line {
  display: inline-block;
  width: 56px;
  height: 1px;
  background: currentColor;
  position: relative;
  overflow: hidden;
}
.scroll-cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #E6E8EC;
  transform: translateX(-100%);
  animation: scroll-cue 2.4s var(--bezier-storm) infinite;
}
@keyframes scroll-cue {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ===========================================
   PORTRAIT FRAME (The Hand section)
   =========================================== */
.portrait-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(156, 182, 204, 0.15);
  background: #07080A;
}
.portrait-frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.95) contrast(1.05);
  transition: filter 0.6s var(--bezier-soft);
}
.portrait-frame:hover .portrait-frame-img {
  filter: brightness(1.05) contrast(1.05);
}

/* ===========================================
   STYLE TAGS
   =========================================== */
.style-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #E6E8EC;
  border: 1px solid rgba(156, 182, 204, 0.35);
  padding: 0.6rem 1rem;
  border-radius: 999px;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
  cursor: pointer;
}
.style-tag:hover {
  border-color: #9CB6CC;
  background: rgba(156, 182, 204, 0.08);
}

/* ===========================================
   WORK TILES (image grid)
   =========================================== */
.work-tile {
  position: relative;
  overflow: hidden;
  background: #07080A;
  border: 1px solid rgba(31, 34, 40, 0.8);
  cursor: pointer;
  aspect-ratio: 3 / 4;
  margin: 0;
  display: block;
}
.work-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.92) contrast(1.05);
  transition: transform 1.1s var(--bezier-soft), filter 0.6s var(--bezier-soft);
  display: block;
}
.work-tile:hover .work-tile-img {
  transform: scale(1.04);
  filter: brightness(1.05) contrast(1.05);
}
.work-tile-cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.25rem 1.25rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: linear-gradient(to top, rgba(7, 8, 10, 0.92) 0%, rgba(7, 8, 10, 0.7) 60%, rgba(7, 8, 10, 0) 100%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--bezier-soft), transform 0.4s var(--bezier-soft);
}
.work-tile:hover .work-tile-cap,
.work-tile:focus-within .work-tile-cap {
  opacity: 1;
  transform: translateY(0);
}
.work-tile-style {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #9CB6CC;
}
.work-tile-name {
  font-family: 'Bodoni Moda', 'Didot', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1;
  color: #E6E8EC;
  letter-spacing: -0.01em;
}

/* Permanent style chip in the top-left corner of every tile */
.work-tile::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(230, 232, 236, 0.85);
  z-index: 1;
  box-shadow: 0 0 0 4px rgba(7, 8, 10, 0.6);
  transition: transform 0.4s var(--bezier-soft);
}
.work-tile:hover::before {
  transform: scale(1.3);
}

/* CTA tile (anchor styled to fit grid rhythm) */
.work-tile--cta {
  cursor: pointer;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.75rem 1.5rem;
  background: linear-gradient(135deg, #0E1014 0%, #07080A 100%);
  border: 1px solid rgba(156, 182, 204, 0.18);
  text-decoration: none;
  min-height: clamp(220px, 26vw, 320px);
  transition: background 0.5s ease, border-color 0.4s ease, transform 0.4s var(--bezier-soft);
}
.work-tile--cta:hover {
  background: linear-gradient(135deg, #161A22 0%, #0A0B0E 100%);
  border-color: rgba(156, 182, 204, 0.45);
}
.work-tile--cta::before {
  display: none;
}
.work-tile-cta-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #9CB6CC;
}
.work-tile-cta-name {
  font-family: 'Bodoni Moda', 'Didot', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1;
  color: #E6E8EC;
  letter-spacing: -0.02em;
  margin-top: auto;
}
.work-tile-cta-arrow {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(156, 182, 204, 0.5);
  color: #E6E8EC;
  margin-top: 1rem;
  transition: transform 0.4s var(--bezier-soft), border-color 0.4s ease, background 0.4s ease;
}
.work-tile--cta:hover .work-tile-cta-arrow {
  transform: translate(4px, -4px);
  border-color: #9CB6CC;
  background: rgba(156, 182, 204, 0.1);
}

/* ===========================================
   SERVICES
   =========================================== */
.service-card {
  background: #07080A;
  padding: 2.5rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 360px;
  position: relative;
  transition: background 0.5s var(--bezier-soft);
  cursor: pointer;
}
.service-card:hover {
  background: #0E1014;
}
.service-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #9CB6CC;
}
.service-title {
  font-family: 'Bodoni Moda', 'Didot', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1;
  color: #E6E8EC;
}
.service-body {
  color: #9CA0A8;
  line-height: 1.65;
  flex-grow: 1;
}
.service-price {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9CA0A8;
  border-top: 1px solid rgba(31, 34, 40, 0.8);
  padding-top: 1.25rem;
  margin-top: auto;
}
.service-price-num {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: 'Bodoni Moda', 'Didot', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0;
  color: #E6E8EC;
}

/* ===========================================
   VISIT
   =========================================== */
.visit-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #5A5E68;
  margin-bottom: 0.75rem;
}
.visit-value {
  font-family: 'Bodoni Moda', 'Didot', serif;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.5;
  color: #E6E8EC;
}
.visit-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9CB6CC;
  position: relative;
  padding-bottom: 2px;
}
.visit-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--bezier-soft);
}
.visit-link:hover::after { transform: scaleX(1); transform-origin: left center; }

/* ===========================================
   STUDIO LOCATION CARD (map + info + actions)
   =========================================== */
.map-card {
  position: relative;
  margin: 0;
  border: 1px solid rgba(156, 182, 204, 0.18);
  background: #0E1014;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 30px 80px -40px rgba(0, 0, 0, 0.9);
}

/* Map portion (top of card) */
.map-card-canvas-wrap {
  position: relative;
  width: 100%;
  height: clamp(240px, 32vh, 320px);
  background: #07080A;
  overflow: hidden;
}
.map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #07080A;
  cursor: grab;
}
.map-canvas:active { cursor: grabbing; }

/* Floating storm-pin badge straddling map / body boundary */
.map-card-pin {
  position: absolute;
  top: clamp(240px, 32vh, 320px);
  right: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #9CB6CC;
  color: #07080A;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  transform: translateY(-50%);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.55),
    0 0 0 6px rgba(14, 16, 20, 1);
}
.map-card-pin svg { display: block; }

/* Card body (info + actions) */
.map-card-body {
  padding: 1.5rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .map-card-body { padding: 1.75rem 2rem 1.75rem; }
}
.map-card-info {
  padding-right: 4rem; /* keep address clear of the floating pin */
}
.map-card-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #9CB6CC;
  margin: 0 0 0.4rem;
}
.map-card-name {
  font-family: 'Bodoni Moda', 'Didot', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1;
  color: #E6E8EC;
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
.map-card-address {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #9CA0A8;
  margin: 0;
  max-width: 32ch;
}

.map-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.map-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s var(--bezier-soft);
}
.map-card-btn svg { flex-shrink: 0; }
.map-card-btn--primary {
  background: #E6E8EC;
  color: #07080A;
  border: 1px solid #E6E8EC;
}
.map-card-btn--primary:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
}
.map-card-btn--ghost {
  background: transparent;
  color: #E6E8EC;
  border: 1px solid rgba(156, 182, 204, 0.35);
}
.map-card-btn--ghost:hover {
  border-color: #9CB6CC;
  color: #9CB6CC;
  background: rgba(156, 182, 204, 0.06);
}

/* Hide Leaflet's default attribution box and zoom controls visually,
   keep them accessible (we keep attribution on .leaflet-control-attribution at low opacity). */
.leaflet-container {
  background: #07080A !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  outline: 0 !important;
}
.leaflet-control-attribution {
  background: rgba(0, 0, 0, 0.45) !important;
  color: #5A5E68 !important;
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
  padding: 3px 8px !important;
  backdrop-filter: blur(6px);
  border: 0 !important;
}
.leaflet-control-attribution a {
  color: #9CA0A8 !important;
}

/* Studio marker */
.storm-marker { background: transparent; border: 0; }
.storm-marker-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
.storm-marker-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(156, 182, 204, 0.5);
  animation: marker-pulse 2.4s var(--bezier-soft) infinite;
}
.storm-marker-pulse--lag {
  animation-delay: 1.2s;
  background: rgba(230, 232, 236, 0.35);
}
.storm-marker-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 2px #07080A,
    0 0 0 4px rgba(156, 182, 204, 0.7),
    0 0 16px rgba(255, 255, 255, 0.65);
}
@keyframes marker-pulse {
  0%   { transform: scale(0.4);  opacity: 0.85; }
  80%  { transform: scale(2.4);  opacity: 0; }
  100% { transform: scale(2.4);  opacity: 0; }
}

/* Studio metadata strip overlaid top-left */
.map-meta {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.85rem;
  background: rgba(7, 8, 10, 0.78);
  border: 1px solid rgba(156, 182, 204, 0.18);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.map-meta-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #9CB6CC;
}
.map-meta-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #E6E8EC;
}

/* Coords block top-right */
.map-coords {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  padding: 0.55rem 0.75rem;
  background: rgba(7, 8, 10, 0.78);
  border: 1px solid rgba(156, 182, 204, 0.18);
  backdrop-filter: blur(8px);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9CA0A8;
  pointer-events: none;
}

/* Open in Maps CTA */
.map-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.85rem 1.25rem;
  border: 1px solid rgba(156, 182, 204, 0.35);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #E6E8EC;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.map-cta:hover {
  border-color: #9CB6CC;
  color: #9CB6CC;
  background: rgba(156, 182, 204, 0.06);
}
.map-cta svg {
  transition: transform 0.3s ease;
}
.map-cta:hover svg {
  transform: translate(2px, -2px);
}

/* ===========================================
   FOOTER — wordmark, marquee, storm watch
   =========================================== */
.storm-watch {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border: 1px solid rgba(156, 182, 204, 0.25);
  border-radius: 999px;
  width: fit-content;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.storm-watch-label { color: #9CB6CC; }
.storm-watch-readout { color: #E6E8EC; }
.storm-watch-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #9CB6CC;
  box-shadow: 0 0 0 0 rgba(156, 182, 204, 0.6);
  animation: pulse 2s var(--bezier-soft) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   rgba(156, 182, 204, 0.6); }
  70%  { box-shadow: 0 0 0 12px rgba(156, 182, 204, 0); }
  100% { box-shadow: 0 0 0 0   rgba(156, 182, 204, 0); }
}

.footer-wordmark {
  font-family: 'Bodoni Moda', 'Didot', serif;
  font-weight: 800;
  font-size: clamp(5rem, 18vw, 18rem);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: #E6E8EC;
  margin: 4rem 0 3rem;
  user-select: none;
}

.marquee {
  overflow: hidden;
  border-block: 1px solid rgba(31, 34, 40, 0.8);
  padding: 1.25rem 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9CA0A8;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  gap: 0;
  animation: marquee 40s linear infinite;
  will-change: transform;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}