/* ==========================================================================
   MIND ATTIC — SECTION 1 (HERO)
   Luxury Blend of HUD, Minimalism & Sexy Asymmetry
   Brand Guide Palette + Organic Noise Frosted Glass Engine
   ========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-italic-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand Guide Palette */
  --obsidian: #1A1D20;
  --obsidian-deep: #121417;
  --midnight-indigo: #161B24;
  --bone-white: #F4F1EA;
  --platinum-bright: #E4E2DD;
  --platinum-mid: #C5C2B8;
  --platinum-muted: #8E8C84;
  --champagne-glow: #DFC8A2;

  /* Andrej's Exact Frosted Glass Parameters */
  --glass-fill: rgba(230, 230, 250, 0.09);      /* #E6E6FA at 0.09 opacity */
  --glass-fill-elevated: rgba(230, 230, 250, 0.12);
  --glass-blur: 4px;                            /* Blur Level: 4 */
  --glass-radius: 30px;                         /* Corner Radius: 30 */
  --glass-outline: #FFFFFF;                     /* Outline: #FFFFFF Opacity 1 */
  --glass-inset: rgba(255, 255, 255, 0.50);     /* Inset Border: #FFFFFF Opacity 0.5 */
  /* Angle -171° -> dx = -17.78px, dy = -2.82px, Blur = 5px, #000000 @ 0.20 */
  --glass-shadow: -17.78px -2.82px 5px rgba(0, 0, 0, 0.20), 0 28px 64px rgba(0, 0, 0, 0.55);

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  min-height: 100vh;
  background-color: var(--obsidian);
  color: var(--bone-white);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.svg-defs {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ==========================================================================
   MATTE OBSIDIAN CHARCOAL CANVAS (#1A1D20) & AMBIENT CAUSTICS
   ========================================================================== */
.obsidian-canvas {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1100px 640px at 74% 14%, rgba(228, 226, 221, 0.065), transparent 65%),
    radial-gradient(900px 580px at 18% 82%, rgba(197, 194, 184, 0.045), transparent 65%),
    radial-gradient(1400px 900px at 50% 50%, #1F2327 0%, #1A1D20 58%, #131619 100%);
  z-index: 0;
  pointer-events: none;
}

.grain-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.ambient-caustic {
  position: absolute;
  border-radius: 50%;
  filter: blur(68px);
  pointer-events: none;
}

.ambient-caustic--top-right {
  width: 460px;
  height: 460px;
  top: -4%;
  right: 6%;
  background: radial-gradient(circle, rgba(244, 241, 234, 0.20) 0%, rgba(223, 200, 162, 0.10) 42%, transparent 72%);
}

.ambient-caustic--bottom-left {
  width: 480px;
  height: 240px;
  bottom: 7%;
  left: 7%;
  background: linear-gradient(45deg, rgba(228, 226, 221, 0.10), rgba(197, 194, 184, 0.05), transparent);
  transform: rotate(12deg);
}

.ambient-caustic--center {
  width: 880px;
  height: 460px;
  top: 28%;
  left: 26%;
  background: radial-gradient(circle, rgba(22, 27, 36, 0.55), transparent 70%);
}

/* ==========================================================================
   HERO SECTION STAGE & 3-LAYERED ASYMMETRICAL GLASS ARCHITECTURE
   ========================================================================== */
.hero-section {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Generous negative space around the stage so the matte obsidian breathes */
  padding: 58px 88px 54px;
}

.stage-assembly {
  position: relative;
  width: 100%;
  max-width: 1580px;
  height: calc(100vh - 112px);
  min-height: 760px;
  max-height: 940px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

/* ==========================================================================
   REFRACTIVE LIGHT TUBES & CAUSTIC ARCS BEHIND THE GLASS LAYERS (Ref 2)
   ========================================================================== */
.light-emitter-layer {
  position: absolute;
  inset: -26px -34px;
  z-index: 1;
  pointer-events: none;
}

.light-arcs-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.caustic-arc {
  filter: blur(4px) drop-shadow(0 0 14px rgba(244, 241, 234, 0.58)) drop-shadow(0 0 28px rgba(223, 200, 162, 0.36));
}

/* Circular champagne halo sitting behind the top-right caustic crest */
.caustic-halo--top-right {
  position: absolute;
  top: -28px;
  right: 10%;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 250, 240, 0.34) 0%, rgba(244, 241, 234, 0.16) 28%, rgba(223, 200, 162, 0.08) 52%, transparent 72%);
  filter: blur(10px);
}

/* ==========================================================================
   SHARED ORGANIC NOISE FROSTED GLASS ENGINE
   Fill: #E6E6FA @ 0.09 | Blur: 4px | Distortion: 8 | Corner Radius: 30px
   Outline: #FFFFFF @ 1.0 | Inset: #FFFFFF @ 0.5 | Shadow: -171° dist 18 blur 5 @ 0.2
   ========================================================================== */
.glass-layer {
  position: absolute;
  inset: 0;
  border-radius: var(--glass-radius);
  background: var(--glass-fill);
  /* backdrop-filter and CSS filter cannot share this element: a filter
     (drop-shadow or url(#ma-organic-glass-filter)) replaces the backdrop
     sample with an empty plate and the smoked glass goes milky grey.
     The cast shadow lives on box-shadow instead. */
  backdrop-filter: blur(var(--glass-blur)) saturate(125%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(125%);
  box-shadow: -17.78px -2.82px 5px rgba(0, 0, 0, 0.20);
}

/* Organic turbulence noise refraction texture inside each glass sheet */
.glass-refraction-noise {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(700px 260px at 78% 6%, rgba(244, 241, 234, 0.14), transparent 65%),
    radial-gradient(500px 360px at 6% 56%, rgba(228, 226, 221, 0.10), transparent 68%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075) 0%, rgba(230, 230, 250, 0.02) 48%, rgba(255, 255, 255, 0.05) 100%);
  filter: url(#ma-organic-glass-filter);
  opacity: 0.55;
  mix-blend-mode: soft-light;
}

.glass-caustic-bleed {
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.glass-caustic-bleed--tr {
  top: 0;
  right: 10%;
  width: 480px;
  height: 95px;
  background: radial-gradient(ellipse at top, rgba(244, 241, 234, 0.24), rgba(223, 200, 162, 0.09) 52%, transparent 75%);
  filter: url(#ma-organic-glass-filter);
}

.glass-caustic-bleed--bl {
  bottom: 12%;
  left: -10px;
  width: 140px;
  height: 360px;
  background: radial-gradient(ellipse at left, rgba(244, 241, 234, 0.22), transparent 72%);
  filter: url(#ma-organic-glass-filter);
}

.glass-caustic-bleed--terrace {
  top: 0;
  right: 6%;
  width: 580px;
  height: 110px;
  background: radial-gradient(ellipse at 65% 0%, rgba(244, 241, 234, 0.20), rgba(197, 194, 184, 0.06) 60%, transparent 80%);
}

.glass-caustic-bleed--primary {
  inset: 0;
  background:
    radial-gradient(520px 120px at 72% 2%, rgba(244, 241, 234, 0.16), transparent 70%),
    radial-gradient(240px 340px at 0% 54%, rgba(228, 226, 221, 0.13), transparent 72%),
    radial-gradient(240px 300px at 100% 38%, rgba(228, 226, 221, 0.12), transparent 72%);
}

.layer-rim-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 4;
  display: block;
}

/* ==========================================================================
   LAYER 1: DEEPEST BACKGROUND SMOKED CRYSTAL PLANE
   transform: rotate(-1.2deg) translate(-18px, -12px)
   ========================================================================== */
.glass-layer--1 {
  z-index: 2;
  transform: rotate(-1.2deg) translate(-18px, -12px);
  background: rgba(230, 230, 250, 0.065);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ==========================================================================
   LAYER 2: MIDDLE ARCHITECTURAL GLASS CHASSIS
   transform: rotate(0.6deg) translate(14px, 10px)
   ========================================================================== */
.glass-layer--2 {
  z-index: 3;
  transform: rotate(0.6deg) translate(14px, 10px);
  background: rgba(230, 230, 250, 0.075);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  pointer-events: none;
}

/* ==========================================================================
   LAYER 3: PRIMARY ASYMMETRICAL CINEMA STAGE & INTEGRATED HUD
   ========================================================================== */
.glass-layer--3 {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 92px 1fr 78px;
  padding: 0 28px;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  box-shadow: var(--glass-shadow);
}

/* ==========================================================================
   TOP ARCHITECTURAL DECK:
   1. Top-Left Brand Sanctuary (Raised Asymmetrical Wing with New Platinum Foil Logo)
   2. Center-Left Slope Telemetry
   3. Top-Right Stepped Glass HUD Rail
   ========================================================================== */
.stage-top-deck {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 10px 6px 6px 4px;
}

/* Top-Left Brand Sanctuary */
.brand-sanctuary {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--bone-white);
  padding: 5px 24px 5px 5px;
  border-radius: 12px 24px 9px 12px;
  background: linear-gradient(180deg, rgba(28, 31, 35, 0.92), rgba(16, 18, 21, 0.84));
  border: 1px solid rgba(228, 226, 221, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease;
}

.brand-sanctuary:hover {
  transform: translateY(-1px) scale(1.015);
  border-color: rgba(255, 255, 255, 0.65);
}

.brand-mark-pedestal {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: radial-gradient(circle at 30% 25%, #272B30 0%, #16181B 100%);
  border: 1px solid rgba(228, 226, 221, 0.48);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  flex-shrink: 0;
}

.brand-creature-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

.brand-wordmark-svg {
  height: 15px;
  width: auto;
  display: block;
  background: transparent;
}

/* Whisper credit between the lockup and the navigation rail */
.deck-slope-telemetry {
  display: flex;
  align-items: center;
  padding-left: 18px;
  border-left: 1px solid rgba(228, 226, 221, 0.16);
}

.slope-credit {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(197, 194, 184, 0.62);
}

/* Top-Right Stepped Glass HUD Navigation Rail */
.hud-nav-rail {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 5px 8px;
  border-radius: 20px;
  background: rgba(230, 230, 250, 0.09);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.32),
    -17.78px -2.82px 5px rgba(0, 0, 0, 0.20);
}

.hud-nav-item {
  position: relative;
  appearance: none;
  background: transparent;
  border: none;
  color: rgba(244, 241, 234, 0.76);
  font-family: var(--font-sans);
  padding: 9px 18px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.hud-nav-item:hover {
  color: var(--bone-white);
  background: rgba(255, 255, 255, 0.06);
  transform: scale(1.04);
}

.hud-nav-item.is-active {
  color: var(--bone-white);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(228, 226, 221, 0.05) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.nav-label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.nav-specular-bar {
  position: absolute;
  bottom: 3px;
  left: 24%;
  right: 24%;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #FFFFFF, transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.hud-nav-item.is-active .nav-specular-bar {
  opacity: 1;
}

.hud-nav-divider {
  width: 1px;
  height: 20px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.38), transparent);
}

.hud-nav-item--inquire .nav-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--platinum-bright);
  box-shadow: 0 0 8px rgba(244, 241, 234, 0.9);
}

/* Frosted mobile menu. Hidden on the desktop rail. */
.mobile-menu-trigger,
.mobile-glass-menu {
  display: none;
}

/* ==========================================================================
   SCULPTED ASYMMETRICAL CINEMA VIEWPORT
   Dynamic clip-path applied by ResizeObserver in JS (with CSS fallback)
   ========================================================================== */
.cinema-viewport-wrapper {
  position: relative;
  z-index: 6;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* The image, clip, and specular rim are one box: the viewport is absolutely
   inset on the wrapper, and #svg-viewport-rim is absolutely inset on the viewport. */
.cinema-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: #0D0F11;
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.72),
    0 18px 46px rgba(0, 0, 0, 0.45);
}

.viewport-rim-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8;
  overflow: visible;
  display: block;
}

/* 5-Reel Crossfading Visual Slides */
.reel-slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.reel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.035);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reel-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.reel-image,
.reel-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
  display: block;
  filter: contrast(1.05) saturate(1.02);
}

.reel-video {
  object-position: center center;
}

/* Subtle Multi-Stop Luxury Vignette so Typography & Glass HUD Pop */
.viewport-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16, 18, 21, 0.48) 0%, rgba(16, 18, 21, 0.06) 28%, rgba(16, 18, 21, 0.14) 55%, rgba(14, 16, 19, 0.84) 100%),
    radial-gradient(circle at 50% 44%, transparent 38%, rgba(12, 14, 17, 0.56) 100%);
  z-index: 2;
}

/* ==========================================================================
   OPTICAL HUD RETICLES & TELEMETRY INSIDE THE VIEWPORT
   ========================================================================== */
.viewport-hud-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* Top-Left Chamfer Telemetry Badge following the diagonal cut */
.vhud-chamfer-badge {
  position: absolute;
  top: 22px;
  left: 122px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(20, 23, 26, 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 18px rgba(0, 0, 0, 0.35);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-white);
}

.vhud-pulse {
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  background: #E4E2DD;
  box-shadow: 0 0 10px #FFFFFF;
}

.vhud-reel-code {
  font-weight: 600;
  color: var(--platinum-bright);
}

.vhud-sep {
  color: rgba(228, 226, 221, 0.35);
}

.vhud-reel-title {
  color: rgba(244, 241, 234, 0.86);
}

/* ==========================================================================
   QUIET-LUXURY EDITORIAL COPY OVERLAY
   One short headline, low in the frame, so the picture can breathe.
   ========================================================================== */
.cinema-editorial-copy {
  position: absolute;
  left: 50%;
  bottom: 118px;
  transform: translateX(-50%);
  width: min(920px, 78%);
  text-align: center;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

/* Official glass laurels live inside the frame, clear of the notch. */
.viewport-laurels {
  position: absolute;
  left: 28px;
  bottom: 26px;
  z-index: 7;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  max-width: calc(50% - 210px);
  pointer-events: none;
}

.viewport-laurel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 7px 6px;
  border-radius: 16px;
  background: rgba(230, 230, 250, 0.08);
  backdrop-filter: blur(4px) saturate(130%);
  -webkit-backdrop-filter: blur(4px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    -4px -1px 4px rgba(0, 0, 0, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.55);
}

.viewport-laurel img {
  display: block;
  height: 64px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
}

/* A production note, not a festival laurel: hairline only, no frost or shadow. */
.reel-status {
  display: inline-block;
  padding: 6px 10px 7px;
  border: 1px solid rgba(228, 226, 221, 0.62);
  border-radius: 2px;
  background: transparent;
  color: rgba(244, 241, 234, 0.78);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}

.viewport-laurels.has-status {
  gap: 0;
}

.editorial-headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 2.75vw, 44px);
  line-height: 1.12;
  letter-spacing: 0.02em;
  color: var(--bone-white);
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.85);
}

.editorial-headline em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #FFFFFF 0%, #E4E2DD 45%, #DFC8A2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   5 VERTICAL FROSTED GLASS SWITCHER BUTTONS ON THE RIGHT
   Active button scales 1.4x with platinum specular rim & progress hair-ring
   ========================================================================== */
.reel-switcher-rail {
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px 10px;
  border-radius: 26px;
  background: rgba(20, 23, 27, 0.34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 16px 40px rgba(0, 0, 0, 0.45);
}

.switcher-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px 4px;
}

/* Individual Frosted Glass Switcher Button (Andrej's Exact FrostedButton Engine) */
.frosted-reel-btn {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(230, 230, 250, 0.09); /* #E6E6FA @ 0.09 */
  backdrop-filter: blur(4px) saturate(135%);
  -webkit-backdrop-filter: blur(4px) saturate(135%);
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    -17.78px -2.82px 5px rgba(0, 0, 0, 0.20),
    0 6px 16px rgba(0, 0, 0, 0.35);
  color: rgba(244, 241, 234, 0.78);
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  transition:
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  margin: 0;
}

.frosted-reel-btn .frb-noise {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), rgba(230, 230, 250, 0.04) 70%);
  filter: url(#ma-organic-glass-filter);
  opacity: 0.7;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.frosted-reel-btn:hover {
  transform: scale(1.12);
  border-color: #FFFFFF;
  color: var(--bone-white);
}

/* Active Button Scales 1.4x with Platinum Specular Rim & Progress Hair-Ring */
.frosted-reel-btn.is-active {
  transform: scale(1.4);
  margin: 10px 0;
  background: linear-gradient(145deg, rgba(244, 241, 234, 0.20) 0%, rgba(230, 230, 250, 0.10) 100%);
  border-color: #FFFFFF;
  color: var(--bone-white);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.62),
    -17.78px -2.82px 5px rgba(0, 0, 0, 0.26),
    0 0 22px rgba(228, 226, 221, 0.28);
  z-index: 4;
}

.frb-ring-svg {
  position: absolute;
  inset: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.frosted-reel-btn.is-active .frb-ring-svg {
  opacity: 1;
}

.frb-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
}

.frb-ring-progress {
  fill: none;
  stroke: url(#platinum-rim-grad);
  stroke-width: 1.5;
  stroke-dasharray: 220;
  stroke-dashoffset: 65;
  stroke-linecap: round;
}

.frb-num {
  position: relative;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
}

/* ==========================================================================
   BOTTOM ASYMMETRICAL GLASS COMMAND DOCK & SCULPTED NOTCH CTA
   ========================================================================== */
.stage-bottom-dock {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
}

.dock-wing {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dock-wing--left {
  align-items: flex-start;
}

.dock-wing--right {
  grid-column: 2;
  justify-self: end;
  min-width: 0;
  max-width: calc(100% - 210px);
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.dock-wing-label {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--platinum-mid);
  white-space: nowrap;
}

#vhud-director-tag {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.35;
  color: rgba(244, 241, 234, 0.72);
  white-space: normal;
  text-align: right;
  text-transform: none;
  max-width: 34em;
}

/* Center Sculpted Glass Command CTA Dock ("Commission a Work")
   Floats partly over the bottom sculpted notch of the cinema viewport */
.cta-command-dock-wrap {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  margin-top: -42px;
  z-index: 14;
}

.cta-command-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 356px;
  padding: 15px 46px 16px;
  background: linear-gradient(165deg, rgba(32, 36, 41, 0.84) 0%, rgba(20, 23, 27, 0.92) 100%);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: none;
  box-shadow:
    -17.78px -2.82px 5px rgba(0, 0, 0, 0.20),
    0 18px 38px rgba(0, 0, 0, 0.65),
    0 0 28px rgba(228, 226, 221, 0.14);
  text-decoration: none;
  color: var(--bone-white);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease;
  overflow: hidden;
}

.cta-rim-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  display: block;
  overflow: visible;
}

.cta-command-button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    -17.78px -2.82px 5px rgba(0, 0, 0, 0.25),
    0 22px 46px rgba(0, 0, 0, 0.75),
    0 0 36px rgba(244, 241, 234, 0.24);
}

.cta-glass-noise {
  position: absolute;
  inset: 0;
  background: radial-gradient(240px 80px at 50% 0%, rgba(244, 241, 234, 0.22), rgba(230, 230, 250, 0.09) 65%, transparent 100%);
  filter: url(#ma-organic-glass-filter);
  mix-blend-mode: soft-light;
  opacity: 0.85;
  pointer-events: none;
}

.cta-main-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
}

.cta-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #FFFFFF 0%, #F4F1EA 45%, #C5C2B8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cta-arrow-badge {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(230, 230, 250, 0.09);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bone-white);
}

.cta-platinum-lightline {
  position: absolute;
  bottom: 0;
  left: 14%;
  right: 14%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #E4E2DD, #FFFDF9, #DFC8A2, transparent);
  box-shadow: 0 0 12px rgba(244, 241, 234, 0.9);
}

/* Right Audio / Reel Cycle Pill */
.dock-audio-pill {
  appearance: none;
  background: rgba(230, 230, 250, 0.09);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    -17.78px -2.82px 5px rgba(0, 0, 0, 0.20);
  color: var(--bone-white);
  border-radius: 14px;
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: transform 0.22s ease, border-color 0.22s ease;
}

.dock-audio-pill:hover {
  transform: scale(1.05);
  border-color: #FFFFFF;
}

.audio-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 11px;
}

.audio-bars i {
  display: block;
  width: 2px;
  background: var(--platinum-bright);
  border-radius: 1px;
}

.audio-bars i:nth-child(1) { height: 5px; }
.audio-bars i:nth-child(2) { height: 11px; }
.audio-bars i:nth-child(3) { height: 7px; }
.audio-bars i:nth-child(4) { height: 9px; }

.audio-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
}

/* ==========================================================================
   FLUID MOBILE & TABLET RESPONSIVENESS
   Proves the dynamic ResizeObserver glass geometry + fluid layout works on mobile
   ========================================================================== */
@media (max-width: 1180px) {
  .hero-section {
    padding: 36px 32px;
  }
  .deck-slope-telemetry {
    display: none;
  }
  .stage-top-deck {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
  .viewport-laurels {
    flex-direction: column-reverse;
    align-items: flex-start;
    left: 18px;
    right: auto;
    bottom: 18px;
    gap: 6px;
    max-width: 170px;
  }
  .viewport-laurel {
    padding: 4px 7px 5px;
    border-radius: 12px;
  }
  .viewport-laurel img {
    height: 40px;
    max-width: 148px;
  }
  .cinema-editorial-copy {
    bottom: 96px;
    width: min(640px, 58%);
  }
  /* The right pocket beside the commission button is narrower here.
     Stack the teaser over the next control and ease the tracking so the
     sentence stays two or three lines, clear of the button. */
  .dock-wing--right {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    max-width: min(220px, calc(50% - 12px));
  }
  #vhud-director-tag {
    max-width: 210px;
    font-size: 8.5px;
    letter-spacing: 0.04em;
    line-height: 1.35;
  }
}

@media (max-width: 1120px) {
  .hero-section {
    padding: 28px 22px 32px;
  }
  .stage-top-deck {
    gap: 16px;
  }
  .hud-nav-item {
    padding: 8px 12px;
  }
  .editorial-headline {
    font-size: clamp(26px, 3vw, 40px);
  }
  .cta-command-button {
    min-width: 356px;
  }
}

@media (max-width: 768px) {
  .hero-section {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    /* Dark margin around the main sheet. Rear sheets overflow the stage
       into this padding, and still stay inside the screen. */
    padding: clamp(18px, 2.4vh, 26px) clamp(16px, 3.8vw, 24px);
    align-items: stretch;
    overflow: hidden;
  }

  .stage-assembly {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  .glass-layer--1 {
    top: clamp(-14px, -1.35vh, -10px);
    right: clamp(-6px, -1vw, -3px);
    bottom: clamp(-7px, -0.65vh, -4px);
    left: clamp(-11px, -2.05vw, -8px);
    transform: rotate(-0.2deg);
  }
  .glass-layer--2 {
    top: clamp(-4px, -0.3vh, -2px);
    right: clamp(-11px, -2.05vw, -8px);
    bottom: clamp(-11px, -1.05vh, -8px);
    left: clamp(-11px, -2.05vw, -8px);
    transform: rotate(0.15deg);
  }

  .glass-layer--3 {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 14px 12px 0;
    gap: 12px;
  }

  .stage-top-deck {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px 8px;
  }

  .hud-nav-rail {
    display: none;
  }

  .mobile-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    height: 38px;
    padding: 0 14px 0 16px;
    border-radius: 999px;
    appearance: none;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(230, 230, 250, 0.08) 55%, rgba(18, 20, 23, 0.42) 100%);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), -8px -2px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease;
  }

  .mobile-menu-trigger:hover {
    transform: translateY(-1px);
  }

  .mobile-menu-label {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--bone-white);
  }

  .mobile-menu-bars {
    position: relative;
    width: 14px;
    height: 10px;
    display: block;
    flex: 0 0 14px;
  }

  .mobile-menu-bars span {
    position: absolute;
    left: 0;
    height: 1.25px;
    border-radius: 2px;
    background: linear-gradient(90deg, #FFFFFF, #C5C2B8);
    transform-origin: center;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), top 0.32s cubic-bezier(0.22, 1, 0.36, 1), width 0.32s ease;
  }

  .mobile-menu-bars span:first-child {
    top: 1px;
    width: 14px;
  }

  .mobile-menu-bars span:last-child {
    top: 7px;
    width: 10px;
  }

  .mobile-menu-trigger.is-open .mobile-menu-bars span {
    top: 4px;
    width: 14px;
  }

  .mobile-menu-trigger.is-open .mobile-menu-bars span:first-child {
    transform: rotate(42deg);
  }

  .mobile-menu-trigger.is-open .mobile-menu-bars span:last-child {
    transform: rotate(-42deg);
  }

  .mobile-glass-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 90px;
    right: 14px;
    left: 14px;
    z-index: 45;
    padding: 14px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(230, 230, 250, 0.13) 0%, rgba(26, 29, 32, 0.78) 100%);
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 22px 48px rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(0.985);
    transform-origin: top center;
    transition:
      opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0.34s;
  }

  .mobile-glass-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .mobile-menu-row {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 12px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    background: transparent;
    color: var(--bone-white);
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
  }

  .mobile-menu-row.is-active {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(228, 226, 221, 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 0 18px rgba(228, 226, 221, 0.12);
  }

  .mobile-menu-index {
    width: 24px;
    flex: 0 0 24px;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--platinum-mid);
  }

  .mobile-menu-inquire {
    margin-top: 12px;
    min-height: 52px;
    padding: 8px 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    color: var(--bone-white);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(230, 230, 250, 0.08) 48%, rgba(18, 20, 23, 0.55) 100%);
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 24px rgba(0, 0, 0, 0.35);
  }

  .mobile-inquire-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: #E4E2DD;
    box-shadow: 0 0 8px #FFFFFF, 0 0 16px rgba(223, 200, 162, 0.85);
  }

  .mobile-inquire-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .mobile-inquire-kicker {
    font-size: 8px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--platinum-mid);
  }

  .mobile-inquire-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--bone-white);
  }

  .brand-sanctuary {
    width: auto;
    max-width: 100%;
    justify-self: start;
    padding: 4px 18px 4px 4px;
    gap: 10px;
    justify-content: flex-start;
    border-radius: 10px 20px 8px 10px;
  }

  .brand-mark-pedestal {
    width: 38px;
    height: 38px;
    border-radius: 7px;
    padding: 6px;
  }

  .brand-wordmark-svg {
    height: 12px;
  }

  .cinema-viewport-wrapper {
    min-height: 0;
    height: 100%;
  }

  .cinema-viewport {
    border-radius: 22px;
  }

  .vhud-chamfer-badge {
    top: 14px;
    left: 46px;
    padding: 6px 13px;
    gap: 8px;
    font-size: 9.2px;
    max-width: calc(100% - 58px);
    letter-spacing: 0.14em;
  }

  .vhud-pulse {
    width: 6px;
    height: 6px;
  }

  .vhud-reel-title {
    letter-spacing: 0.14em;
  }

  .cinema-editorial-copy {
    z-index: 15;
    left: 50%;
    right: auto;
    bottom: 124px;
    transform: translateX(-50%);
    width: min(88%, 420px);
    text-align: center;
    pointer-events: none;
  }

  .viewport-laurels {
    z-index: 14;
    flex-direction: column-reverse;
    align-items: flex-start;
    left: 14px;
    right: auto;
    bottom: 18px;
    gap: 6px;
    max-width: 156px;
    pointer-events: none;
  }

  .viewport-laurel {
    padding: 4px 7px 5px;
    border-radius: 11px;
  }

  .viewport-laurel img {
    height: 34px;
    max-width: 126px;
  }

  .viewport-laurel:first-child img {
    height: 36px;
    max-width: 132px;
  }

  .editorial-headline {
    font-size: 22px;
    line-height: 1.18;
  }

  .editorial-headline em {
    display: inline;
  }

  /* Own layer, dead-center above the notch. Laurels and the headline do not move it. */
  .reel-switcher-rail {
    position: absolute;
    z-index: 16;
    right: auto;
    top: auto;
    left: 50%;
    bottom: 58px;
    transform: translateX(-50%);
    flex-direction: row;
    gap: clamp(7px, 1.8vw, 10px);
    padding: 6px 10px;
    border-radius: 16px;
    max-width: none;
  }

  .switcher-buttons {
    flex-direction: row;
    gap: clamp(7px, 1.8vw, 10px);
    padding: 0;
  }

  .frosted-reel-btn {
    width: clamp(36px, 8.5vw, 42px);
    height: clamp(36px, 8.5vw, 42px);
    border-radius: 11px;
  }

  .frosted-reel-btn.is-active {
    transform: scale(1.12);
    margin: 0 1px;
  }

  .frb-num {
    font-size: clamp(11px, 2.6vw, 13px);
  }

  .stage-bottom-dock {
    display: block;
    min-height: 22px;
    padding: 6px 14px 8px;
    text-align: center;
  }

  .caustic-halo--top-right {
    width: 190px;
    height: 190px;
    top: -18px;
    right: 6%;
  }

  .cta-command-dock-wrap {
    top: auto;
    bottom: 9px;
    margin-top: 0;
    transform: translateX(-50%);
  }

  .cta-command-button {
    min-width: 0;
    width: max-content;
    max-width: min(78vw, 340px);
    padding: clamp(11px, 2.7vw, 14px) clamp(24px, 5.8vw, 34px) clamp(11px, 2.7vw, 14px) clamp(28px, 6.6vw, 38px);
    gap: clamp(9px, 2.2vw, 13px);
  }

  .cta-title {
    font-size: clamp(12px, 3vw, 14.5px);
    letter-spacing: 0.17em;
    white-space: nowrap;
  }

  .cta-arrow-badge {
    width: clamp(21px, 5vw, 24px);
    height: clamp(21px, 5vw, 24px);
    border-radius: 6px;
  }

  .cta-main-row {
    gap: clamp(9px, 2.2vw, 13px);
  }

  .dock-wing--right {
    display: none;
  }
}

/* The wider mobile notch reaches the laurel stack through about 680px. */
@media (max-width: 680px) {
  .viewport-laurels {
    bottom: 48px;
  }
}

/* Below ~630px the centered reel switcher reaches the laurel corner.
   Keep the note on the same left edge and sit it just above the rail.
   The rail is 58px up plus its button row (clamp matches .frosted-reel-btn). */
@media (max-width: 630px) {
  .viewport-laurels.has-status {
    bottom: calc(78px + clamp(36px, 8.5vw, 42px));
  }
}

/* Narrower than ~480px the second headline line reaches that left edge.
   The open band above the rail is only about 13–17px, so the same hairline
   drops to a shorter box and stays inside the band. */
@media (max-width: 479px) {
  .reel-status {
    padding: 0 8px;
    font-size: 8px;
    line-height: 8px;
  }
  .viewport-laurels.has-status {
    bottom: calc(74px + clamp(36px, 8.5vw, 42px));
  }
}

/* Through 423px the rail is still its shortest, so the band fits the
   desktop 9px type with only the vertical padding pulled in. */
@media (max-width: 423px) {
  .reel-status {
    padding: 1px 8px;
    font-size: 9px;
    line-height: 9px;
  }
}

/* Seven laurels. Desktop splits four to the left of the commission notch
   and three to the right. Below 1180 they use the same stack metrics as
   every other reel, in column order so the narrowest stays on top. */
@media (min-width: 1181px) {
  .viewport-laurels[data-laurel-count="7"] {
    left: 36px;
    right: 36px;
    bottom: 32px;
    max-width: none;
    width: auto;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0;
  }

  .viewport-laurels[data-laurel-count="7"] .laurel-cluster {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: calc(50% - 220px);
  }

  .viewport-laurels[data-laurel-count="7"] .laurel-cluster--right {
    justify-content: flex-end;
  }

  .viewport-laurels[data-laurel-count="7"] .viewport-laurel img {
    height: 58px;
    max-width: 150px;
  }
}

@media (max-width: 1180px) {
  .viewport-laurels[data-laurel-count="7"] {
    flex-direction: column;
  }

  .viewport-laurels[data-laurel-count="7"] .laurel-cluster {
    display: contents;
  }
}

@media (max-width: 768px) {
  .viewport-laurels[data-laurel-count="7"] .viewport-laurel:first-child img {
    height: 34px;
    max-width: 126px;
  }

  .viewport-laurels[data-laurel-count="7"] .viewport-laurel.is-base img {
    height: 36px;
    max-width: 132px;
  }
}