@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;900&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=JetBrains+Mono:wght@300;400;500;700&family=Plus+Jakarta+Sans:wght@200;300;400;500;600&display=swap');

    @font-face {
      font-family: 'Gehirn Isomorphic';
      src: url('/GehirnIsomorphic-Regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }

    :root {
      --bg: #050507;
      --burgundy: #a21c38;
      --burgundy-deep: #580b1d;
      --gold: #dfb15b;
      --gold-bright: #f3d489;
      --gold-dim: rgba(223, 177, 91, 0.45);
      --cream: #fdfaf6;
      --cream-dim: #d8cfc4;
      --gehirn-font: 'Gehirn Isomorphic', 'Cinzel', Didot, 'Playfair Display', Georgia, serif;
      --serif: 'Gehirn Isomorphic', 'Cinzel', Didot, 'Playfair Display', Georgia, serif;
      --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    }

    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    html, body {
      width: 100%;
      height: 100%;
      min-height: 100vh;
      min-height: 100dvh;
      background: var(--bg);
      color: var(--cream);
      font-family: var(--serif);
      user-select: none;
      -webkit-user-select: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow: hidden;
    }

    /* -------------------------------------------------------------
       INITIAL SCREEN: ULTRA-CLEAN PURIFIED MYSTERIOUS SPEAKEASY VOID
       Zero headers, zero buttons, zero typography. Pure symbol in void.
       ------------------------------------------------------------- */
    #initial-view {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(162, 28, 56, 0.22) 0%, rgba(36, 7, 18, 0.12) 46%, transparent 74%),
        radial-gradient(ellipse 45% 38% at 50% 80%, rgba(223, 177, 91, 0.08) 0%, transparent 68%),
        radial-gradient(circle at 50% 50%, #090407 0%, var(--bg) 100%);
      z-index: 10;
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
      touch-action: none;
    }

    #initial-view.evolved {
      opacity: 0;
      transform: scale(1.08);
      pointer-events: none;
    }

    .vignette-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      box-shadow: inset 0 0 clamp(90px, 16vw, 240px) rgba(0, 0, 0, 0.88);
      background: radial-gradient(ellipse 85% 75% at 50% 50%, transparent 55%, rgba(4, 2, 6, 0.6) 100%);
      z-index: 2;
    }

    /* 3D Perspective Stage for Living Entity */
    .symbol-stage-3d {
      perspective: 1200px;
      perspective-origin: 50% 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5;
    }

    .symbol-center-stage {
      position: relative;
      z-index: 5;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      outline: none;
      transform-style: preserve-3d;
      will-change: transform;
      transition: filter 0.4s ease;
      touch-action: none;
    }

    .symbol-aura {
      position: absolute;
      width: clamp(260px, 40vw, 420px);
      height: clamp(320px, 50vw, 480px);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(223, 177, 91, 0.25) 0%, rgba(162, 28, 56, 0.16) 45%, transparent 75%);
      filter: blur(54px);
      pointer-events: none;
      animation: auraBreathe 5.5s ease-in-out infinite alternate;
      z-index: 1;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
    }

    .living-canvas-wrap {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transform-style: preserve-3d;
      animation: symbolBreathe 6s ease-in-out infinite alternate;
      will-change: transform;
    }

    #living-entity-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 4;
      image-rendering: -webkit-optimize-contrast;
    }

    .specular-glint-flare {
      position: absolute;
      width: 48px;
      height: 3.5px;
      border-radius: 9999px;
      background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(223, 177, 91, 0.4) 15%, 
        rgba(255, 255, 255, 1) 50%, 
        rgba(223, 177, 91, 0.4) 85%, 
        transparent 100%
      );
      mix-blend-mode: screen;
      pointer-events: none;
      z-index: 6;
      opacity: 0;
      transform: translate(-50%, -50%);
      transition: opacity 0.22s ease;
      filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 16px rgba(243, 212, 137, 0.95)) drop-shadow(0 0 28px rgba(223, 177, 91, 0.6));
    }

    .specular-glint-flare::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 16px;
      height: 2px;
      transform: translate(-50%, -50%);
      background: #ffffff;
      border-radius: 9999px;
      box-shadow: 0 0 8px #ffffff, 0 0 16px #f3d489;
    }

    /* Easter Egg: Hidden 1880s Frankfurt Atelier Coordinates Engraving */
    .secret-atelier-engraving {
      position: absolute;
      bottom: 7%;
      right: -24%;
      transform: translateY(6px);
      font-family: var(--serif);
      font-size: clamp(8.5px, 0.8vw, 11px);
      font-weight: 600;
      letter-spacing: 0.22em;
      color: var(--gold-bright);
      text-shadow: 0 0 12px rgba(243, 212, 137, 0.95), 0 0 24px rgba(223, 177, 91, 0.75);
      opacity: 0;
      pointer-events: none;
      white-space: nowrap;
      z-index: 8;
      transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
      background: rgba(5, 5, 7, 0.75);
      padding: 5px 12px;
      border-radius: 9999px;
      border: 1px solid rgba(223, 177, 91, 0.45);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 16px rgba(223, 177, 91, 0.3);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .secret-atelier-engraving.revealed {
      opacity: 1;
      transform: translateY(0);
    }

    .secret-atelier-engraving .engraving-star {
      color: #fffdf6;
      display: inline-block;
      margin: 0 4px;
      animation: engravingStarSpin 5s linear infinite;
    }

    @keyframes engravingStarSpin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .pure-symbol-img {
      position: relative;
      z-index: 2;
      height: clamp(190px, 32vh, 290px);
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0 0 28px rgba(223, 177, 91, 0.45)) drop-shadow(0 20px 42px rgba(0, 0, 0, 0.98));
      transition: filter 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
    }

    .symbol-center-stage:hover .pure-symbol-img {
      filter: drop-shadow(0 0 45px rgba(223, 177, 91, 0.9)) drop-shadow(0 25px 50px rgba(0, 0, 0, 0.98));
    }

    .symbol-center-stage:hover .symbol-aura {
      transform: scale(1.18);
      opacity: 1;
      filter: blur(52px);
    }

    .pulse-ring {
      position: absolute;
      width: clamp(180px, 28vw, 260px);
      height: clamp(180px, 28vw, 260px);
      border-radius: 50%;
      border: 1px solid rgba(223, 177, 91, 0.25);
      pointer-events: none;
      z-index: 1;
      animation: ringRipple 4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    }

    @keyframes auraBreathe {
      0% { opacity: 0.6; transform: scale(0.92); filter: blur(36px); }
      100% { opacity: 1; transform: scale(1.12); filter: blur(48px); }
    }

    @keyframes symbolBreathe {
      0% { transform: translateY(0) scale(0.98); }
      100% { transform: translateY(-10px) scale(1.02); }
    }

    @keyframes ringRipple {
      0% { transform: scale(0.82); opacity: 0.8; }
      100% { transform: scale(1.42); opacity: 0; }
    }

    /* -------------------------------------------------------------
       0-STAGE: PURE PITCH-BLACK OBSIDIAN VOID BACKGROUND
       Background glow completely removed to prevent any light bleed
       outside the black card.
       ------------------------------------------------------------- */
    .heartbeat-bloom {
      display: none !important;
      opacity: 0 !important;
      pointer-events: none;
    }

    .heartbeat-bloom.hover-approach,
    #initial-view.hover-approach .heartbeat-bloom,
    #initial-view:has(.symbol-center-stage:hover) .heartbeat-bloom,
    .symbol-center-stage:hover ~ .heartbeat-bloom,
    .symbol-center-stage.hover-approach ~ .heartbeat-bloom,
    .symbol-center-stage:hover .heartbeat-bloom,
    .symbol-center-stage.hover-approach .heartbeat-bloom {
      opacity: 0.88;
      animation: atmosphericBloomBreathe 3.6s ease-in-out infinite alternate;
    }

    @keyframes atmosphericBloomBreathe {
      0% { transform: translate(-50%, -50%) scale(0.96); opacity: 0.60; filter: blur(75px); }
      50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.95; filter: blur(95px); }
      100% { transform: translate(-50%, -50%) scale(1.00); opacity: 0.70; filter: blur(85px); }
    }

    /* Fullscreen High-Performance Cursor Particle Canvas */
    #cursor-notes-canvas {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 99999;
    }

    /* -------------------------------------------------------------
       SCROLL-DRIVEN PROGRESSION GAUGE (Unsealed on Click)
       ------------------------------------------------------------- */
    .swirl-gauge-svg {
      position: absolute;
      width: clamp(260px, 44vw, 420px);
      height: clamp(260px, 44vw, 420px);
      pointer-events: none;
      z-index: 3;
      overflow: visible;
      transform-style: preserve-3d;
      opacity: 0;
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .swirl-gauge-svg.unsealed {
      opacity: 0.85;
    }

    .gauge-track {
      stroke: rgba(223, 177, 91, 0.12);
      transition: stroke 0.4s ease;
    }

    .gauge-arc {
      stroke-dasharray: 904.78;
      stroke-dashoffset: 904.78;
      transition: stroke-dashoffset 0.12s linear, stroke 0.4s ease;
    }

    .gauge-pip {
      transition: fill 0.4s ease, r 0.4s ease, filter 0.4s ease;
    }

    .gauge-pip.reached {
      fill: #f3d489;
      filter: drop-shadow(0 0 8px #dfb15b) drop-shadow(0 0 14px rgba(243, 212, 137, 0.8));
      r: 5;
    }

    /* -------------------------------------------------------------
       3D BACCARAT CRYSTAL & GOLD MASTERPIECE SCULPTURE
       Stage 3 (Wax Seal) & Stage 4 (Skeleton Key) Deferred per directive
       ------------------------------------------------------------- */
    /* -------------------------------------------------------------
       MOLTEN GOLD MATERIALIZATION SWEEP BEAM & CORONA LINE
       Laser scan wipe materializing 3D Baccarat Crystal & Gold Sculpture
       Contour-responsive width and organic caustics (Zero rectangular cutoff)
       ------------------------------------------------------------- */
    .materialize-sweep-beam {
      position: absolute;
      left: 50%;
      top: 100%;
      width: 100%;
      height: 18px;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 5;
      opacity: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.22s ease, width 0.08s ease-out;
    }

    .materialize-sweep-beam.active {
      opacity: 1;
    }

    /* Ultra-sharp molten gold laser core */
    .materialize-sweep-beam .beam-laser-core {
      position: absolute;
      width: 100%;
      height: 2.2px;
      background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(223, 177, 91, 0.4) 8%, 
        rgba(255, 248, 230, 0.95) 25%, 
        #ffffff 50%, 
        rgba(255, 248, 230, 0.95) 75%, 
        rgba(223, 177, 91, 0.4) 92%, 
        transparent 100%
      );
      box-shadow: 0 0 10px #ffffff, 0 0 22px #dfb15b, 0 0 38px rgba(243, 212, 137, 0.95);
      border-radius: 9999px;
    }

    /* Soft radiant corona aura along the threshold */
    .materialize-sweep-beam .beam-corona-aura {
      position: absolute;
      width: 110%;
      height: 32px;
      background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(243, 212, 137, 0.58) 0%, rgba(223, 177, 91, 0.32) 45%, rgba(162, 28, 56, 0.18) 72%, transparent 100%);
      mix-blend-mode: screen;
      filter: blur(4.5px);
    }

    /* Dynamic shimmering caustics along the beam */
    .materialize-sweep-beam .beam-caustic-fringe {
      position: absolute;
      width: 95%;
      height: 7px;
      background: repeating-linear-gradient(90deg, 
        transparent, 
        transparent 10px, 
        rgba(255, 255, 255, 0.8) 14px, 
        rgba(243, 212, 137, 0.9) 18px, 
        transparent 24px
      );
      mix-blend-mode: screen;
      animation: causticFringeFlow 1.6s linear infinite;
      filter: blur(0.5px);
    }

    @keyframes causticFringeFlow {
      0% { transform: scaleX(0.96) translateX(-15px); opacity: 0.7; }
      50% { transform: scaleX(1.02) translateX(15px); opacity: 1.0; }
      100% { transform: scaleX(0.96) translateX(-15px); opacity: 0.7; }
    }

    .morph-clef-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
      opacity: 0;
      z-index: 3;
      transition: filter 0.8s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .lv0-sculpture-img {
      /* Drop shadow is rendered smoothly on the organic alpha contour */
      filter: drop-shadow(0 0 28px rgba(223, 177, 91, 0.75)) drop-shadow(0 18px 40px rgba(0, 0, 0, 0.92));
    }

    .morph-clef-img.angle-view {
      transition: opacity 0.12s ease-out;
    }

    .lv1-seal-img {
      filter: drop-shadow(0 0 24px rgba(162, 28, 56, 0.85)) drop-shadow(0 0 45px rgba(223, 177, 91, 0.45));
    }

    .lv2-key-img {
      filter: drop-shadow(0 0 28px rgba(223, 177, 91, 0.9)) drop-shadow(0 0 48px rgba(243, 212, 137, 0.5));
    }

    .morph-clef-img.active {
      opacity: 1;
    }

    /* -------------------------------------------------------------
       3-SECOND MACRO CINEMATIC SHOWCASE CUTS & HUD
       ------------------------------------------------------------- */
    .symbol-center-stage.cinematic-cut-1 {
      transform: scale(2.4) translate(0%, 26%) !important;
      filter: drop-shadow(0 0 55px rgba(223, 177, 91, 0.95)) drop-shadow(0 30px 60px rgba(0, 0, 0, 0.98)) !important;
    }

    .symbol-center-stage.cinematic-cut-2 {
      transform: scale(2.65) translate(-7%, -9%) !important;
      filter: drop-shadow(0 0 65px rgba(243, 212, 137, 1)) drop-shadow(0 30px 60px rgba(0, 0, 0, 0.98)) !important;
    }

    .symbol-center-stage.cinematic-cut-3,
    .symbol-center-stage.masterpiece-unlocked {
      filter: drop-shadow(0 0 55px rgba(223, 177, 91, 0.95)) drop-shadow(0 25px 55px rgba(0, 0, 0, 0.98)) !important;
    }

    .showcase-hud {
      position: absolute;
      top: clamp(24px, 4.2vh, 44px);
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      pointer-events: none;
      z-index: 20;
      opacity: 0;
      transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .showcase-hud.visible {
      opacity: 1;
    }

    .showcase-macro-tag {
      font-family: var(--mono);
      font-size: clamp(9px, 0.82vw, 11px);
      font-weight: 700;
      letter-spacing: 0.28em;
      color: #fffdf6;
      background: radial-gradient(circle, rgba(162, 28, 56, 0.8) 0%, rgba(20, 5, 12, 0.92) 85%);
      border: 1px solid rgba(223, 177, 91, 0.65);
      padding: 7px 20px;
      border-radius: 9999px;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.88), 0 0 20px rgba(223, 177, 91, 0.4);
      text-transform: uppercase;
      animation: macroTagPulse 2s ease-in-out infinite alternate;
    }

    .showcase-sub-tag {
      font-family: var(--mono);
      font-size: clamp(7.5px, 0.68vw, 9px);
      letter-spacing: 0.32em;
      color: var(--gold-bright);
      text-transform: uppercase;
      text-shadow: 0 0 12px rgba(223, 177, 91, 0.6);
    }

    @keyframes macroTagPulse {
      0% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.88), 0 0 16px rgba(223, 177, 91, 0.3); }
      100% { box-shadow: 0 14px 38px rgba(0, 0, 0, 0.95), 0 0 30px rgba(243, 212, 137, 0.7); }
    }

    /* -------------------------------------------------------------
       SPEAKEASY DOCK: ATELIER ENTRY PILL
       ------------------------------------------------------------- */
    .early-entry-dock {
      position: absolute;
      bottom: clamp(28px, 5vh, 48px);
      left: 50%;
      transform: translateX(-50%) translateY(16px);
      opacity: 0;
      pointer-events: none;
      z-index: 45;
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .early-entry-dock.visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    .early-entry-dock.masterpiece-unlocked .early-entry-pill {
      background: radial-gradient(circle at 50% 0%, rgba(200, 36, 70, 0.9) 0%, rgba(30, 8, 18, 0.96) 85%);
      border: 1.5px solid var(--gold-bright);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.92), 0 0 36px rgba(223, 177, 91, 0.65), inset 0 0 20px rgba(243, 212, 137, 0.35);
      animation: masterPillBreathe 2.4s ease-in-out infinite alternate;
    }

    @keyframes masterPillBreathe {
      0% { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.92), 0 0 30px rgba(223, 177, 91, 0.5), inset 0 0 16px rgba(243, 212, 137, 0.25); border-color: rgba(223, 177, 91, 0.7); }
      100% { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.96), 0 0 45px rgba(243, 212, 137, 0.85), inset 0 0 24px rgba(243, 212, 137, 0.45); border-color: var(--gold-bright); }
    }

    .early-entry-pill {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 11px 26px;
      border-radius: 9999px;
      background: radial-gradient(circle at 50% 0%, rgba(162, 28, 56, 0.65) 0%, rgba(20, 5, 12, 0.88) 85%);
      border: 1px solid rgba(223, 177, 91, 0.55);
      box-shadow: 0 10px 32px rgba(0, 0, 0, 0.85), 0 0 24px rgba(223, 177, 91, 0.25), inset 0 0 16px rgba(223, 177, 91, 0.12);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      color: var(--cream);
      font-family: var(--mono);
      font-size: clamp(9.5px, 0.9vw, 12px);
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      cursor: pointer;
      outline: none;
      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      animation: pillGlowBreathe 3s ease-in-out infinite alternate;
    }

    .early-entry-pill:hover {
      background: radial-gradient(circle at 50% 0%, rgba(200, 36, 70, 0.85) 0%, rgba(35, 8, 20, 0.95) 85%);
      border-color: var(--gold-bright);
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.9), 0 0 36px rgba(223, 177, 91, 0.55);
    }

    .pill-gem-glow {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #f3d489;
      box-shadow: 0 0 10px #f3d489, 0 0 20px #dfb15b;
      animation: dotPulse 1.8s ease-in-out infinite;
    }

    .pill-arrow {
      font-size: 14px;
      color: var(--gold);
      transition: transform 0.28s ease;
    }

    .early-entry-pill:hover .pill-arrow {
      transform: translateX(4px);
    }

    @keyframes pillGlowBreathe {
      0% { box-shadow: 0 10px 32px rgba(0, 0, 0, 0.85), 0 0 18px rgba(223, 177, 91, 0.2); }
      100% { box-shadow: 0 12px 38px rgba(0, 0, 0, 0.88), 0 0 32px rgba(223, 177, 91, 0.45); }
    }

    /* -------------------------------------------------------------
       WEBGL 3D CANVAS & DIVE OVERLAY
       ------------------------------------------------------------- */
    #canvas-container {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.6s ease;
      background: #050507;
    }

    #canvas-container.active {
      opacity: 1;
    }

    #webgl-canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Cinematic Wine Meniscus Dive Flash / Vortex Overlay */
    #dive-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 20;
      opacity: 0;
      background: radial-gradient(circle at 50% 50%, rgba(162, 28, 56, 0.92) 0%, rgba(88, 11, 29, 0.85) 45%, rgba(5, 5, 7, 0.95) 100%);
      mix-blend-mode: screen;
      transition: opacity 0.3s ease;
    }

    /* -------------------------------------------------------------
       STAGE 4: ARRIVAL STATE HUD & 19m² ATELIER AMBIENT CONTROLS
       ------------------------------------------------------------- */
    #atelier-hud {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 30;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: clamp(18px, 3.2vh, 36px) clamp(20px, 3.5vw, 44px);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, visibility 1.2s;
    }

    #atelier-hud.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .hud-top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }

    .hud-brand {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .hud-title {
      font-family: var(--serif);
      font-size: clamp(12px, 1.25vw, 15.5px);
      font-weight: 700;
      letter-spacing: 0.24em;
      color: var(--cream);
      text-shadow: 0 0 20px rgba(0, 0, 0, 0.95), 0 0 30px rgba(223, 177, 91, 0.4);
    }

    .hud-sub {
      font-family: var(--mono);
      font-size: clamp(8.5px, 0.8vw, 10.5px);
      letter-spacing: 0.22em;
      color: var(--gold);
      opacity: 0.9;
    }

    .hud-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      pointer-events: auto;
    }

    .hud-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 16px;
      border-radius: 9999px;
      background: rgba(18, 5, 14, 0.78);
      border: 1px solid rgba(223, 177, 91, 0.35);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 0 12px rgba(223, 177, 91, 0.08);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      font-family: var(--mono);
      font-size: clamp(8.5px, 0.78vw, 10px);
      letter-spacing: 0.2em;
      color: var(--cream-dim);
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .hud-pill:hover {
      background: rgba(38, 10, 25, 0.9);
      border-color: var(--gold);
      color: var(--cream);
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(223, 177, 91, 0.4);
    }

    .hud-dot-active {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 8px #10b981;
      animation: statusDotPulse 2s ease-in-out infinite;
    }

    @keyframes statusDotPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.85); }
    }

    /* Center Exploration Prompt */
    .hud-center-hint {
      align-self: center;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      font-family: var(--mono);
      font-size: clamp(8.5px, 0.8vw, 10px);
      letter-spacing: 0.28em;
      color: rgba(243, 212, 137, 0.7);
      text-transform: uppercase;
      animation: hintFadePulse 4s ease-in-out infinite alternate;
    }

    @keyframes hintFadePulse {
      0% { opacity: 0.35; transform: translateY(2px); }
      100% { opacity: 0.85; transform: translateY(-2px); }
    }

    /* Bottom Navigation Dock to Ecosystem */
    .hud-bottom {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 16px;
    }

    .portals-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      pointer-events: auto;
    }

    .portal-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 12px;
      background: rgba(22, 6, 17, 0.75);
      border: 1px solid rgba(223, 177, 91, 0.28);
      color: var(--cream);
      font-family: var(--mono);
      font-size: clamp(8.5px, 0.78vw, 10.5px);
      font-weight: 500;
      letter-spacing: 0.14em;
      text-decoration: none;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .portal-link:hover {
      background: rgba(162, 28, 56, 0.45);
      border-color: var(--gold);
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.75), 0 0 18px rgba(223, 177, 91, 0.3);
    }

    .hud-footnote {
      font-family: var(--mono);
      font-size: clamp(8px, 0.72vw, 9.5px);
      letter-spacing: 0.2em;
      color: rgba(216, 207, 196, 0.55);
      text-align: right;
    }

    /* -------------------------------------------------------------
       2026 GERMAN MINIMAL SHADOW-GAP FLOATER FRAME (SCHATTENFUGENRAHMEN)
       Dual-Sided 3D Artifact: 2D Corporate Metaphor -> 45mm 3D Awakening
       Front: Sean Atelier Portrait | Back: Speakeasy VIP Invitation Card
       ------------------------------------------------------------- */
    .floater-frame-container {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 25;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s;
    }

    .floater-frame-container.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    /* Top Metaphor Status Indicator */
    .frame-top-status {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 18px;
      margin-bottom: clamp(14px, 2.5vh, 24px);
      border-radius: 9999px;
      background: rgba(14, 5, 10, 0.82);
      border: 1px solid rgba(223, 177, 91, 0.35);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
      transition: all 0.4s ease;
      z-index: 30;
    }

    .status-phase-dot {
      width: 6.5px;
      height: 6.5px;
      border-radius: 50%;
      background: #dfb15b;
      box-shadow: 0 0 10px #f3d489, 0 0 20px #dfb15b;
      animation: dotPulse 1.8s ease-in-out infinite;
    }

    .status-phase-text {
      font-family: var(--mono);
      font-size: clamp(8px, 0.72vw, 9.5px);
      font-weight: 600;
      letter-spacing: 0.24em;
      color: var(--cream);
      text-transform: uppercase;
    }

    /* 3D Perspective Stage */
    .floater-frame-stage {
      position: relative;
      width: min(360px, 82vw);
      aspect-ratio: 4 / 5.2;
      perspective: 1600px;
      perspective-origin: 50% 50%;
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
    }

    .floater-frame-stage.grabbing {
      cursor: grabbing;
    }

    /* 3D Box Container (Preserve-3D with Center Anchor) */
    .floater-frame-3d {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transform: rotateX(0deg) rotateY(0deg) translateZ(0);
      will-change: transform;
      transition: filter 0.5s ease;
    }

    .floater-frame-3d.awakened-3d {
      filter: drop-shadow(0 35px 70px rgba(0, 0, 0, 0.98)) drop-shadow(0 0 35px rgba(223, 177, 91, 0.2));
    }

    /* Face Culling & Pointer Isolation based on Orbit Orientation */
    .floater-frame-3d.facing-back .frame-face-front {
      display: none !important;
      pointer-events: none !important;
    }
    .floater-frame-3d:not(.facing-back) .frame-face-back {
      display: none !important;
      pointer-events: none !important;
    }

    /* Hide background symbol when floater frame is active */
    #initial-view:has(.floater-frame-container.active) #symbol-stage-3d,
    .floater-frame-container.active ~ #symbol-stage-3d {
      display: none !important;
    }

    /* Common Face Properties */
    .frame-face {
      position: absolute;
      box-sizing: border-box;
      pointer-events: auto;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    /* FRONT FACE (Z = 22.5px) */
    .frame-face-front {
      inset: 0;
      width: 100%;
      height: 100%;
      transform: translateZ(22.5px);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      border-radius: 4px;
      overflow: hidden;
      background: #110e10;
      box-shadow: 0 0 0 1px rgba(223, 177, 91, 0.15);
    }

    /* 2D Drafting Assembly Lines (Metaphor: Corporate Legal Establishment) */
    .drafting-corner {
      position: absolute;
      width: 14px;
      height: 14px;
      z-index: 12;
      pointer-events: none;
      border-color: rgba(223, 177, 91, 0.7);
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .corner-tl { top: 6px; left: 6px; border-top: 1.5px solid; border-left: 1.5px solid; }
    .corner-tr { top: 6px; right: 6px; border-top: 1.5px solid; border-right: 1.5px solid; }
    .corner-br { bottom: 6px; right: 6px; border-bottom: 1.5px solid; border-right: 1.5px solid; }
    .corner-bl { bottom: 6px; left: 6px; border-bottom: 1.5px solid; border-left: 1.5px solid; }

    .floater-frame-3d.drafting-active .drafting-corner {
      opacity: 1;
    }

    .draft-edge {
      position: absolute;
      z-index: 14;
      pointer-events: none;
      background: linear-gradient(90deg, #dfb15b, #fffdf8, #dfb15b);
      box-shadow: 0 0 12px #dfb15b, 0 0 24px #f3d489;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .edge-top { top: 0; left: 0; height: 2px; width: 0%; }
    .edge-right { top: 0; right: 0; width: 2px; height: 0%; }
    .edge-bottom { bottom: 0; right: 0; height: 2px; width: 0%; }
    .edge-left { bottom: 0; left: 0; width: 2px; height: 0%; }

    .draft-edge.sealed {
      opacity: 1;
    }
    .edge-top.sealed { width: 100%; transition: width 0.85s cubic-bezier(0.16, 1, 0.3, 1); }
    .edge-right.sealed { height: 100%; transition: height 0.85s cubic-bezier(0.16, 1, 0.3, 1); }
    .edge-bottom.sealed { width: 100%; transition: width 0.85s cubic-bezier(0.16, 1, 0.3, 1); }
    .edge-left.sealed { height: 100%; transition: height 0.85s cubic-bezier(0.16, 1, 0.3, 1); }

    /* Outer Black Ash Wooden Lip (Floater Frame Outer Rim) */
    .frame-outer-rim {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 11px solid #161314;
      border-radius: 4px;
      box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(223, 177, 91, 0.25);
      background: #080607;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* 10mm Recessed Shadow Gap Trough */
    .shadow-gap-trough {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 50%, #060506 0%, #020203 100%);
      box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.98);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 9px;
    }

    /* Floating Inner Canvas */
    .inner-canvas-box {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 2px;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(223, 177, 91, 0.2);
    }

    .portrait-canvas-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none;
      filter: saturate(1.02) contrast(1.04);
      opacity: 0;
      transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
      transform: scale(1.02);
    }

    .portrait-canvas-img.active-layer {
      opacity: 1;
      transform: scale(1.0);
    }

    /* Minimal Frosted Glass Toggle Capsule [ 01 ATELIER ✦ 02 SALON ] */
    .canvas-photo-toggle {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 9999px;
      background: rgba(12, 6, 10, 0.72);
      border: 1px solid rgba(223, 177, 91, 0.45);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7), inset 0 0 8px rgba(223, 177, 91, 0.1);
      pointer-events: auto;
      user-select: none;
      -webkit-user-select: none;
      transition: all 0.3s ease;
    }

    .canvas-photo-toggle:hover {
      border-color: var(--gold-bright);
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.8), 0 0 14px rgba(223, 177, 91, 0.35);
    }

    .toggle-seg {
      background: transparent;
      border: none;
      color: rgba(251, 248, 243, 0.65);
      font-family: var(--mono);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 9999px;
      cursor: pointer;
      outline: none;
      transition: all 0.25s ease;
    }

    .toggle-seg:hover {
      color: var(--cream);
    }

    .toggle-seg.active {
      color: #120d10;
      background: #dfb15b;
      box-shadow: 0 0 10px rgba(223, 177, 91, 0.7);
    }

    .toggle-divider {
      font-size: 7px;
      color: var(--gold-bright);
      opacity: 0.7;
    }

    /* Museum Anti-Reflective Glass Layer */
    .museum-glass-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(223, 177, 91, 0.05) 30%, transparent 60%);
      mix-blend-mode: screen;
      opacity: 0.75;
      transition: opacity 0.4s ease;
    }

    /* Subtle Amber Gobo Bloom */
    .gobo-bloom-overlay {
      position: absolute;
      top: 26%;
      right: 18%;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(243, 212, 137, 0.35) 0%, rgba(223, 177, 91, 0.15) 50%, transparent 75%);
      filter: blur(18px);
      pointer-events: none;
      animation: goboGlowBreathe 4s ease-in-out infinite alternate;
    }

    @keyframes goboGlowBreathe {
      0% { opacity: 0.6; transform: scale(0.94); }
      100% { opacity: 1; transform: scale(1.1); }
    }

    /* BACK FACE (Z = -22.5px, Rotated 180deg) */
    .frame-face-back {
      inset: 0;
      width: 100%;
      height: 100%;
      transform: rotateY(180deg) translateZ(22.5px);
      backface-visibility: visible !important;
      -webkit-backface-visibility: visible !important;
      background: #141113;
      border-radius: 4px;
      border: 10px solid #161314;
      box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(223, 177, 91, 0.25);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .back-wood-texture {
      width: 100%;
      height: 100%;
      background:
        repeating-linear-gradient(45deg, rgba(223, 177, 91, 0.02) 0px, rgba(223, 177, 91, 0.02) 2px, transparent 2px, transparent 8px),
        linear-gradient(180deg, #181416 0%, #0d0a0c 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 14px;
      box-sizing: border-box;
    }

    /* Speakeasy VIP Invitation Card (Embossed Luxury Cream & Gold Foil) */
    .speakeasy-invitation-card {
      width: 100%;
      height: 100%;
      background: #fbf9f4;
      color: #1a1618;
      border-radius: 3px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), inset 0 0 20px rgba(210, 185, 140, 0.35);
      border: 1px solid #d4c29d;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 14px 16px;
      box-sizing: border-box;
      position: relative;
    }

    .invitation-ornament-border {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid rgba(162, 28, 56, 0.35);
      padding: 10px 12px;
      box-sizing: border-box;
      position: relative;
    }

    .invitation-header {
      text-align: center;
    }

    .invitation-seal {
      font-family: var(--mono);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.3em;
      color: #8f152b;
      text-transform: uppercase;
      display: block;
      margin-bottom: 2px;
    }

    .invitation-title {
      font-family: var(--serif);
      font-size: clamp(10.5px, 1.05vw, 13px);
      font-weight: 900;
      letter-spacing: 0.16em;
      color: #120e10;
      text-transform: uppercase;
      line-height: 1.25;
    }

    .invitation-meta {
      font-family: var(--mono);
      font-size: 8px;
      font-weight: 600;
      letter-spacing: 0.22em;
      color: #6d5b4a;
      margin-top: 3px;
      text-transform: uppercase;
    }

    .invitation-body {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 8px 0;
      border-top: 1px solid rgba(180, 150, 100, 0.3);
      border-bottom: 1px solid rgba(180, 150, 100, 0.3);
      margin: 4px 0;
    }

    .invitation-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 8px;
      font-family: var(--mono);
      letter-spacing: 0.1em;
    }

    .row-label {
      color: #7b6d61;
      font-weight: 500;
    }

    .row-value {
      color: #161214;
      font-weight: 700;
      text-align: right;
    }

    /* 3D Surface Interactive Controls */
    .invitation-controls {
      display: flex;
      gap: 8px;
      margin-top: 6px;
    }

    .inv-btn {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 7px 10px;
      border-radius: 4px;
      font-family: var(--mono);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      cursor: pointer;
      outline: none;
      transition: all 0.25s ease;
      border: 1px solid;
    }

    .inv-btn-audio {
      background: #181316;
      color: #f3d489;
      border-color: #dfb15b;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }
    .inv-btn-audio:hover {
      background: #2b141e;
      color: #ffffff;
      border-color: #f3d489;
      transform: translateY(-1px);
    }
    .inv-btn-audio.playing {
      background: #8f152b;
      color: #ffffff;
      border-color: #dfb15b;
      animation: audioPulse 1.5s ease-in-out infinite alternate;
    }

    @keyframes audioPulse {
      0% { box-shadow: 0 0 8px rgba(143, 21, 43, 0.5); }
      100% { box-shadow: 0 0 16px rgba(223, 177, 91, 0.8); }
    }

    .inv-btn-rsvp {
      background: #8f152b;
      color: #ffffff;
      border-color: #6d0f20;
      box-shadow: 0 4px 12px rgba(143, 21, 43, 0.35);
    }
    .inv-btn-rsvp:hover {
      background: #ad1c37;
      transform: translateY(-1px);
    }
    .inv-btn-rsvp.confirmed {
      background: #14532d;
      border-color: #22c55e;
      color: #f0fdf4;
    }

    .inv-flip-btn {
      width: 100%;
      margin-top: 6px;
      padding: 5px 8px;
      background: transparent;
      border: 1px dashed rgba(180, 150, 100, 0.5);
      color: #6d5b4a;
      font-family: var(--mono);
      font-size: 7.5px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 3px;
      transition: all 0.2s ease;
    }
    .inv-flip-btn:hover {
      background: rgba(180, 150, 100, 0.15);
      color: #120e10;
      border-style: solid;
    }

    /* 45mm EXTRUDED 3D WOOD SIDES (Black Ash) */
    .frame-side-top {
      top: -22.5px;
      left: 0;
      width: 100%;
      height: 45px;
      transform: rotateX(90deg);
      transform-origin: center center;
      background: linear-gradient(180deg, #221d20 0%, #110e10 100%);
      border: 1px solid rgba(223, 177, 91, 0.2);
    }

    .frame-side-bottom {
      bottom: -22.5px;
      left: 0;
      width: 100%;
      height: 45px;
      transform: rotateX(-90deg);
      transform-origin: center center;
      background: linear-gradient(0deg, #221d20 0%, #110e10 100%);
      border: 1px solid rgba(223, 177, 91, 0.2);
    }

    .frame-side-left {
      top: 0;
      left: -22.5px;
      width: 45px;
      height: 100%;
      transform: rotateY(-90deg);
      transform-origin: center center;
      background: linear-gradient(90deg, #221d20 0%, #110e10 100%);
      border: 1px solid rgba(223, 177, 91, 0.2);
    }

    .frame-side-right {
      top: 0;
      right: -22.5px;
      width: 45px;
      height: 100%;
      transform: rotateY(90deg);
      transform-origin: center center;
      background: linear-gradient(-90deg, #221d20 0%, #110e10 100%);
      border: 1px solid rgba(223, 177, 91, 0.2);
    }

    /* Floating Bottom Interaction Prompt */
    .frame-bottom-prompt {
      margin-top: clamp(14px, 2.5vh, 22px);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--mono);
      font-size: clamp(8px, 0.72vw, 9.5px);
      letter-spacing: 0.24em;
      color: var(--gold-bright);
      text-transform: uppercase;
      opacity: 0.85;
      text-shadow: 0 0 12px rgba(223, 177, 91, 0.5);
      transition: opacity 0.4s ease;
      pointer-events: none;
      z-index: 30;
    }

    .prompt-icon {
      font-size: 13px;
      display: inline-block;
      animation: promptSpin 4s linear infinite;
    }

    @keyframes promptSpin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* =============================================================
       LIVING GOBOS OPTICAL CANVAS STAGE (5-STEP CINEMATIC ARCHITECTURE)
       Step 0: Pure Void Slate (0.0s~0.8s, 0% Tilt, pitch black void inside)
       Step 1: Vintage Gobo 3-Second Warm-up Flicker (0.8s~3.8s, 2700K optical warmth)
       Step 2: Optical Stencil Symbol Materialization (3.8s~5.3s, 1.5s dissolve)
       Step 3: 2.5D Double Parallax Porthole (0x Frame, 0.4x Light, 1.0x Symbol)
       Step 4: On Click 10% Whisper Sound, 30% Wine Sloshing, Cursor Trail
       Step 5: Architectural Worm's-Eye Monolith 3D Camera & Gyro Anchor Offset
       ============================================================= */

    /* Ceiling Spotlight Rig: Completely disabled per Sean's directive ("위에 위에 조명 저거는 없애줘") */
    .ceiling-spotlight-rig {
      display: none !important;
    }

    .spotlight-mount {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 52px;
      height: 12px;
      background: #151119;
      border-bottom: 1px solid rgba(223, 177, 91, 0.4);
      border-radius: 0 0 4px 4px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.85);
    }

    .spotlight-lamp-body {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 42px;
      height: 36px;
      background: linear-gradient(180deg, #241d2c 0%, #120d18 100%);
      border: 1px solid rgba(223, 177, 91, 0.55);
      border-radius: 4px 4px 12px 12px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.92), 0 0 24px rgba(223, 177, 91, 0.35);
    }

    .spotlight-lamp-lens {
      position: absolute;
      bottom: -2px;
      left: 50%;
      transform: translateX(-50%);
      width: 28px;
      height: 10px;
      background: radial-gradient(ellipse at 50% 50%, #ffffff 0%, #fae29e 45%, #dfb15b 100%);
      border-radius: 50%;
      box-shadow: 0 0 28px 10px rgba(243, 212, 137, 0.95), 0 0 60px 20px rgba(235, 145, 45, 0.65);
    }

    .volumetric-light-cone {
      position: absolute;
      top: 40px;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: calc(100vh - 40px);
      /* Theatrical trapezoid beam: starts narrow at lamp (top 46%-54%), expands exactly to card edges at bottom */
      clip-path: polygon(46% 0%, 54% 0%, 98% 100%, 2% 100%);
      background: radial-gradient(ellipse 65% 80% at 50% 0%,
        rgba(255, 238, 195, 0.30) 0%,
        rgba(223, 177, 91, 0.16) 32%,
        rgba(235, 145, 45, 0.06) 55%,
        transparent 78%);
      filter: blur(12px);
      opacity: 0.85;
      animation: ceilingConeBreathe 6s ease-in-out infinite alternate;
    }

    @keyframes ceilingConeBreathe {
      0% { opacity: 0.78; transform: translateX(-50%) scaleX(0.98); }
      100% { opacity: 0.92; transform: translateX(-50%) scaleX(1.02); }
    }

    /* Gobo Canvas Frame: Pure void initially ("처음에는 안보이고 나중에 나타나야지!"),
       illuminates softly into the Matte Obsidian Card when sound check starts */
    /* Ambient Looping Music Video Background Container (from launch_fresh_v2) */
    .video-bg-container {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      z-index: 0;
      pointer-events: none;
    }

    #ambient-bg-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: blur(4px) brightness(0.78) saturate(1.26);
      transform: scale(1.08);
      opacity: 0.88;
      transition: opacity 1.2s ease-in-out, filter 1.2s ease-in-out;
    }

    .video-vignette-overlay {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 50%, rgba(5, 5, 7, 0.12) 0%, rgba(5, 5, 7, 0.66) 100%);
      pointer-events: none;
    }

    .window-room-bg-anchor {
      display: none !important;
    }

    .gobo-canvas-frame {
      position: relative;
      z-index: 2;
      width: clamp(290px, 38vw, 480px);
      aspect-ratio: 976 / 1095;
      border-radius: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      transform-style: preserve-3d;
      perspective: 1400px;
      overflow: visible !important;
      background: transparent;
      border: 1px solid transparent;
      box-shadow: none;
      user-select: none;
      -webkit-user-select: none;
      transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translate3d(0, 0, 0);
      will-change: transform, opacity, box-shadow;
      transition: background 1.8s cubic-bezier(0.16, 1, 0.3, 1),
                  border-color 1.8s ease,
                  box-shadow 2.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .gobo-canvas-frame:not(.frame-illuminated) {
      background: transparent !important;
      border: 1px solid transparent !important;
      box-shadow: none !important;
    }

    .gobo-canvas-frame.frame-illuminated {
      background: radial-gradient(circle at 50% 45%, rgba(20, 17, 15, 0.92) 0%, rgba(11, 10, 9, 0.96) 62%, rgba(5, 5, 6, 0.98) 100%) !important;
      border: 2.2px solid rgba(247, 222, 162, 0.95) !important;
      box-shadow:
        0 0 0 4px rgba(6, 5, 8, 0.82),
        0 0 32px rgba(243, 212, 137, 0.68),
        0 28px 80px rgba(0, 0, 0, 0.98),
        inset 0 0 24px rgba(243, 212, 137, 0.26) !important;
    }

    .gobo-canvas-frame.frame-illuminated.worm-eye-monolith {
      border: 2.2px solid rgba(247, 222, 162, 0.98) !important;
      box-shadow:
        0 0 0 4px rgba(6, 5, 8, 0.85),
        0 0 38px rgba(243, 212, 137, 0.75),
        0 32px 90px rgba(0, 0, 0, 0.98),
        inset 0 0 26px rgba(243, 212, 137, 0.3) !important;
    }

    /* Interactive Floor-Cleaning Game Style Perimeter Border Paint Canvas */
    .card-border-paint-canvas {
      position: absolute;
      inset: -24px;
      width: calc(100% + 48px);
      height: calc(100% + 48px);
      pointer-events: none;
      z-index: 38;
      opacity: 1;
      transition: opacity 0.45s ease;
    }

    .gobo-canvas-frame.card-flipped-out .card-border-paint-canvas {
      opacity: 0 !important;
    }

    /* Luxury 3D Spatial Gyroscope Calibration & HUD */
    .spatial-gyro-calibrator {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 10;
      opacity: 0;
      transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .spatial-gyro-calibrator.activated {
      opacity: 1;
    }

    .gyro-ring-svg {
      position: absolute;
      width: 76%;
      height: 76%;
      top: 10%;
      left: 12%;
      pointer-events: none;
      filter: drop-shadow(0 0 12px rgba(223, 177, 91, 0.45));
    }

    .gyro-ring-outer {
      fill: none;
      stroke: rgba(223, 177, 91, 0.28);
      stroke-width: 1.2;
    }

    .gyro-ring-inner {
      fill: none;
      stroke: rgba(243, 212, 137, 0.45);
      stroke-width: 1;
      animation: gyroInnerSpin 28s linear infinite;
      transform-origin: center;
    }

    @keyframes gyroInnerSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .gyro-tick {
      stroke: rgba(243, 212, 137, 0.75);
      stroke-width: 1.5;
    }

    .gyro-sweep-line {
      stroke: rgba(255, 240, 180, 0.95);
      stroke-width: 1.6;
      stroke-linecap: round;
      transform-origin: 200px 200px;
      opacity: 0;
    }

    .spatial-gyro-calibrator.calibrating .gyro-sweep-line {
      opacity: 1;
      animation: gyroSweepOnce 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes gyroSweepOnce {
      0% { transform: rotate(0deg); opacity: 1; }
      80% { transform: rotate(360deg); opacity: 0.8; }
      100% { transform: rotate(360deg); opacity: 0; }
    }

    /* Live Telemetry Pill */
    .gyro-telemetry-badge {
      position: absolute;
      bottom: 26px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 14px;
      border-radius: 999px;
      background: rgba(12, 12, 14, 0.75);
      border: 1px solid rgba(223, 177, 91, 0.32);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 12px rgba(223, 177, 91, 0.15);
      pointer-events: auto;
      cursor: default;
      user-select: none;
    }

    .gyro-badge-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4ade80;
      box-shadow: 0 0 8px #4ade80, 0 0 14px rgba(74, 222, 128, 0.6);
      animation: gyroPulseDot 1.8s ease-in-out infinite alternate;
    }

    @keyframes gyroPulseDot {
      0% { opacity: 0.6; transform: scale(0.9); }
      100% { opacity: 1; transform: scale(1.2); }
    }

    .gyro-badge-title {
      font-family: 'Cinzel', 'Trajan Pro', serif;
      font-size: 10px;
      letter-spacing: 0.18em;
      color: rgba(243, 212, 137, 0.95);
      font-weight: 600;
    }

    .gyro-badge-coords {
      font-family: 'Courier New', monospace;
      font-size: 10.5px;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.85);
      font-weight: 500;
    }

    @keyframes goboSlateFadeIn {
      0% {
        opacity: 0;
        transform: perspective(1200px) scale(0.975);
      }
      100% {
        opacity: 1;
        transform: perspective(1200px) scale(1.0);
      }
    }

    /* Porthole Layer 1: Inner Circular Light Rig (0.4x Parallax Displacement) */
    .gobo-light-rig {
      position: absolute;
      inset: -6%;
      width: 112%;
      height: 112%;
      pointer-events: none;
      z-index: 2;
      opacity: 0;
      transform-style: preserve-3d;
      will-change: transform, opacity, filter;
      /* Feathered circular boundary so only the circular amber beam illuminates, seamlessly dissolving into dark void */
      mask-image: radial-gradient(circle closest-side at 50% 48%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0.7) 86%, rgba(0, 0, 0, 0.2) 94%, transparent 100%) !important;
      -webkit-mask-image: radial-gradient(circle closest-side at 50% 48%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0.7) 86%, rgba(0, 0, 0, 0.2) 94%, transparent 100%) !important;
    }

    /* Step 1: 3-Photo Real Exposure Sequence (1800K Ember -> 2200K Mid-Bloom -> 2500K Full Spotlight) */
    .gobo-light-rig.flicker-warmup {
      opacity: 1;
    }

    .gobo-photo-step1,
    .gobo-photo-step2,
    .gobo-photo-step3 {
      opacity: 0;
      will-change: opacity, filter;
    }

    .gobo-photo-step1 { z-index: 2; }
    .gobo-photo-step2 { z-index: 3; }
    .gobo-photo-step3 { z-index: 4; }

    .gobo-light-rig.flicker-warmup .gobo-photo-step1 {
      animation: realPhotoStep1 3.0s linear forwards;
    }
    .gobo-light-rig.flicker-warmup .gobo-photo-step2 {
      animation: realPhotoStep2 3.0s linear forwards;
    }
    .gobo-light-rig.flicker-warmup .gobo-photo-step3 {
      animation: realPhotoStep3 3.0s linear forwards;
    }

    /* Rule: 켜질랑말랑 (Slow filament struggle) -> 무적시간 끝날 때처럼 주기가 점점 빨라짐 (Accelerating frequency) -> 확 켜짐 (Full 2500K Lock-in) */
    @keyframes realPhotoStep1 {
      0%   { opacity: 0; }
      6%   { opacity: 0.65; }
      14%  { opacity: 0.08; }
      24%  { opacity: 0.82; }
      32%  { opacity: 0.14; }
      40%  { opacity: 0.92; }
      46%  { opacity: 0.22; }
      52%  { opacity: 0.96; }
      56%  { opacity: 0.30; }
      60%  { opacity: 1.0; }
      63%  { opacity: 0.38; }
      66%  { opacity: 1.0; }
      68.5%{ opacity: 0.45; }
      71%  { opacity: 1.0; }
      73%  { opacity: 0.52; }
      75%  { opacity: 1.0; }
      100% { opacity: 1.0; }
    }

    @keyframes realPhotoStep2 {
      0%, 20% { opacity: 0; }
      26%  { opacity: 0.48; }
      33%  { opacity: 0.05; }
      41%  { opacity: 0.72; }
      47%  { opacity: 0.12; }
      53%  { opacity: 0.88; }
      57%  { opacity: 0.18; }
      61%  { opacity: 0.94; }
      64%  { opacity: 0.25; }
      67%  { opacity: 0.98; }
      69.5%{ opacity: 0.32; }
      72%  { opacity: 1.0; }
      74%  { opacity: 0.42; }
      76%  { opacity: 1.0; }
      77.5%{ opacity: 0.55; }
      79%  { opacity: 1.0; }
      80.5%{ opacity: 0.65; }
      82%  { opacity: 1.0; }
      100% { opacity: 1.0; }
    }

    @keyframes realPhotoStep3 {
      0%, 48% { opacity: 0; }
      54%  { opacity: 0.45; }
      58%  { opacity: 0.06; }
      62%  { opacity: 0.68; }
      65%  { opacity: 0.12; }
      68%  { opacity: 0.84; }
      70.5%{ opacity: 0.18; }
      73%  { opacity: 0.92; }
      75%  { opacity: 0.24; }
      77%  { opacity: 0.96; }
      78.5%{ opacity: 0.32; }
      80%  { opacity: 1.0; }
      81.2%{ opacity: 0.42; }
      82.4%{ opacity: 1.0; }
      83.5%{ opacity: 0.55; }
      84.5%{ opacity: 1.0; }
      85.5%{ opacity: 0.68; }
      86.5%{ opacity: 1.0; }
      100% { opacity: 1.0; }
    }

    /* Step 1/Step 2: Stabilized full 2500K optical warmth breathing between real photos 2 & 3 */
    .gobo-light-rig.stabilized {
      opacity: 1;
    }
    .gobo-light-rig.stabilized .gobo-photo-step1 {
      opacity: 1;
    }
    .gobo-light-rig.stabilized .gobo-photo-step2 {
      opacity: 1;
    }
    .gobo-light-rig.stabilized .gobo-photo-step3 {
      opacity: 1;
      animation: realPhotoBreathe 5.2s ease-in-out infinite alternate;
    }

    @keyframes realPhotoBreathe {
      0% {
        opacity: 0.86;
        filter: brightness(0.97) drop-shadow(0 0 35px rgba(223, 177, 91, 0.22));
      }
      50% {
        opacity: 1;
        filter: brightness(1.04) drop-shadow(0 0 70px rgba(235, 145, 45, 0.40));
      }
      100% {
        opacity: 0.86;
        filter: brightness(0.97) drop-shadow(0 0 35px rgba(223, 177, 91, 0.22));
      }
    }

    .gobo-rim-glow {
      position: absolute;
      inset: -15px;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 46%, rgba(223, 177, 91, 0.28) 0%, rgba(235, 145, 45, 0.14) 45%, transparent 72%);
      filter: blur(48px);
      pointer-events: none;
      z-index: 1;
    }

    .gobo-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 20px;
      pointer-events: none;
    }

    .gobo-layer-clean {
      z-index: 4;
    }

    .gobo-symbol-rig {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 4;
      opacity: 0;
      visibility: hidden;
      transform-style: preserve-3d;
      will-change: transform, opacity;
      transition: opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1), visibility 1.05s;
    }

    .gobo-symbol-rig.materialized {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }

    .emblem-switch-container {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      /* Unclipped full-stage 3D relief cast shadow & golden aura (prevents rectangular box clipping when children use mask-image) */
      filter: drop-shadow(-7px 15px 19px rgba(0, 0, 0, 0.92)) drop-shadow(0 0 18px rgba(243, 212, 137, 0.48));
    }

    .emblem-layer {
      position: absolute;
      top: 17.35%;
      height: 58.08%;
      width: auto;
      left: 50%;
      transform: translateX(-50%);
      object-fit: contain;
      opacity: 0;
      z-index: 4;
      transition: opacity 0.36s cubic-bezier(0.16, 1, 0.3, 1), filter 0.36s ease, transform 0.36s ease;
      pointer-events: none;
      will-change: opacity, filter;
      filter: none;
    }

    .emblem-layer.active-emblem {
      opacity: 1;
      transform: translateX(-50%);
      pointer-events: auto;
    }

    /* Simplified Pure Ivory Logo Overlay (1:1 Exact Alignment over 3D Emblem) */
    .digital-logo-overlay {
      position: absolute;
      top: 17.35%;
      height: 58.08%;
      width: auto;
      left: 50%;
      transform: translateX(-50%) scale(1.0);
      object-fit: contain;
      opacity: 0;
      pointer-events: none;
      z-index: 5;
      will-change: opacity, filter, transform;
      transition: opacity 0.36s cubic-bezier(0.16, 1, 0.3, 1), filter 0.36s ease, transform 0.36s ease;
      filter: none;
    }

    .digital-logo-overlay.materialized,
    .digital-logo-overlay.locked-ivory {
      opacity: 1;
      pointer-events: auto;
    }

    /* FX 01: Golden Meniscus Horizon Line for Liquid Pour Wipe */
    .designer-meniscus-line {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 180px;
      height: 2px;
      transform: translate(-50%, -50%);
      background: linear-gradient(90deg, transparent 0%, rgba(223, 177, 91, 0.45) 20%, rgba(255, 248, 220, 0.98) 50%, rgba(223, 177, 91, 0.45) 80%, transparent 100%);
      box-shadow: 0 0 12px rgba(243, 212, 137, 0.95), 0 0 24px rgba(223, 177, 91, 0.65);
      opacity: 0;
      pointer-events: none;
      z-index: 6;
      will-change: top, opacity, transform;
    }

    /* Top Designer FX Studio Bar (Allows instant live testing of all 3 non-AI designer transitions) */
    .designer-fx-studio-bar {
      position: fixed;
      top: 22px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9500;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(10, 9, 8, 0.82);
      border: 1px solid rgba(223, 177, 91, 0.28);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 248, 231, 0.08);
      pointer-events: auto;
    }

    .designer-fx-label {
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.14em;
      color: rgba(223, 177, 91, 0.75);
      padding: 0 8px 0 6px;
      border-right: 1px solid rgba(223, 177, 91, 0.2);
      white-space: nowrap;
      user-select: none;
    }

    .designer-fx-btn {
      appearance: none;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 999px;
      padding: 5px 11px;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.03em;
      color: rgba(235, 227, 213, 0.72);
      cursor: pointer;
      transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
    }

    .designer-fx-btn:hover {
      color: #fffdf9;
      background: rgba(223, 177, 91, 0.12);
      border-color: rgba(223, 177, 91, 0.32);
    }

    .designer-fx-btn.active {
      color: #fffdf9;
      background: linear-gradient(135deg, rgba(223, 177, 91, 0.26) 0%, rgba(180, 128, 48, 0.18) 100%);
      border-color: rgba(243, 212, 137, 0.75);
      box-shadow: 0 0 14px rgba(223, 177, 91, 0.32);
      text-shadow: 0 0 8px rgba(243, 212, 137, 0.65);
    }

    .gobo-layer-symbol {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 20px;
      z-index: 1;
      opacity: 0 !important;
      display: none !important;
      pointer-events: none !important;
    }

    .gobo-layer-symbol.materialized {
      opacity: 0 !important;
      display: none !important;
      pointer-events: none !important;
    }

    /* Luxury 3-Mode Emblem Live Switcher Capsule (Hidden per Sean Park directive: Ivory locked) */
    .emblem-switcher-capsule {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
      opacity: 0 !important;
    }

    .emblem-switcher-capsule.visible {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
      opacity: 0 !important;
    }

    .emblem-switch-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 9999px;
      padding: 4px 7px;
      color: rgba(216, 207, 196, 0.72);
      font-family: var(--mono);
      font-size: 8px;
      font-weight: 600;
      letter-spacing: 0.08em;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .emblem-switch-btn:hover {
      color: #fffdf8;
      border-color: rgba(223, 177, 91, 0.3);
      background: rgba(255, 255, 255, 0.05);
    }

    .emblem-switch-btn.active {
      color: #ffffff;
      background: rgba(223, 177, 91, 0.22);
      border-color: rgba(243, 212, 137, 0.75);
      box-shadow: 0 0 16px rgba(223, 177, 91, 0.4);
      text-shadow: 0 0 8px rgba(243, 212, 137, 0.9);
    }

    .emblem-switch-btn .btn-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(223, 177, 91, 0.4);
      transition: all 0.35s ease;
    }

    .emblem-switch-btn.active .btn-dot {
      background: #f3d489;
      box-shadow: 0 0 6px #f3d489;
    }

    .gobo-wine-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 6;
      border-radius: 20px;
    }

    /* Crisp 24K Gold Micro-Spark Burst Awakening Canvas */
    .center-spark-burst {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 9;
      border-radius: 20px;
    }

    /* 18K Champagne Gold Laser Micro-Engraving directly along upper curve of Wine Glass Rim (Luxury Watch Caliber Aesthetic) */
    .rim-engraving {
      position: absolute;
      top: 17.35%;
      height: 58.08%;
      width: auto;
      aspect-ratio: 768 / 1376;
      left: 50%;
      transform: translateX(-50%) scale(1.0);
      pointer-events: none;
      z-index: 8;
      opacity: 0;
      transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .rim-engraving.ignited {
      opacity: 1;
      filter: drop-shadow(0 0 4px rgba(243, 212, 137, 0.90)) drop-shadow(0 0 10px rgba(223, 177, 91, 0.50));
    }

    .rim-engraving-svg {
      width: 100%;
      height: 100%;
      overflow: visible;
      display: block;
    }

    .rim-engraving-text {
      font-family: var(--mono, 'JetBrains Mono', 'Cinzel', monospace);
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0.28em;
      fill: #4c3719;
      text-anchor: middle;
      dominant-baseline: central;
      text-shadow: 0 0 2px rgba(255, 248, 220, 0.9), 0 0 6px rgba(243, 212, 137, 0.7);
    }

    .rim-engraving.ignited .rim-engraving-text {
      fill: #3e2e15;
      text-shadow: 0 0 2px #fff9eb, 0 0 8px #f3d489, 0 0 16px rgba(223, 177, 91, 0.85);
    }

    .rim-engraving-val {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .gobo-dust-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 5;
      mix-blend-mode: screen;
      image-rendering: -webkit-optimize-contrast;
    }

    .gobo-edge-vignette {
      display: none !important;
    }

    /* Minimal Optical Stencil Center Affordance [ CLICK TO START_ ] (2X Scale & Contrast Shield) */
    .gobo-affordance-start {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
      opacity: 0 !important;
    }

    .gobo-affordance-start .start-text-row {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      white-space: nowrap;
      align-items: center;
      gap: 10px;
      font-family: var(--mono);
      font-size: clamp(20px, 1.9vw, 26px);
      font-weight: 700;
      letter-spacing: 0.24em;
      color: #fffdf6;
      text-shadow: 
        0 0 12px rgba(0, 0, 0, 0.98),
        0 2px 6px rgba(0, 0, 0, 0.95),
        0 0 24px rgba(243, 212, 137, 0.9),
        0 0 45px rgba(223, 177, 91, 0.6);
    }

    .gobo-affordance-start .start-bracket {
      color: #f3d489;
      font-weight: 300;
      text-shadow: 0 0 12px rgba(0, 0, 0, 0.95), 0 0 20px rgba(243, 212, 137, 0.95);
    }

    .gobo-affordance-start .blinking-cursor {
      display: inline-block;
      width: 12px;
      height: 24px;
      background: #dfb15b;
      box-shadow: 0 0 12px #f3d489, 0 0 24px #dfb15b;
      animation: goboCursorBlink 0.95s step-start infinite;
      margin-left: 4px;
      vertical-align: middle;
    }

    @keyframes goboCursorBlink {
      0%, 48% { opacity: 1; }
      50%, 100% { opacity: 0; }
    }

    .gobo-affordance-start .start-sub-caption {
      display: none;
    }

    /* STAGE 1: Chic Optical Typewriter Audio Calibration inside Ambient Light */
    /* STAGE 1: Chic Pure Typography Audio Calibration inside Ambient Light (No Tacky Box) */
    .gobo-calibration-gauge {
      display: none !important;
      position: absolute;
      top: 44.5%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.96);
      z-index: 10;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      user-select: none;
    }

    .gobo-calibration-gauge.dissolved {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      filter: blur(8px);
      transform: translate(-50%, -50%) scale(1.04);
      transition: all 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Chic Minimal Optical Stencil Typewriter Layout - ZERO CAPSULE / ZERO TACKY BOX */
    .gobo-typewriter-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      pointer-events: none;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    .typewriter-line-vol {
      font-family: var(--mono);
      font-size: clamp(24px, 2.7vw, 36px);
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #fffdf8;
      text-shadow: 
        0 0 14px rgba(0, 0, 0, 0.98), 
        0 2px 8px rgba(0, 0, 0, 1.0),
        0 0 24px rgba(223, 177, 91, 0.55);
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      transition: text-shadow 0.4s ease, color 0.4s ease, transform 0.4s ease;
    }

    .typewriter-line-vol.neon-active {
      color: #ffffff;
      text-shadow: 
        0 0 16px #f3d489, 
        0 0 32px #dfb15b, 
        0 0 54px rgba(223, 177, 91, 0.95),
        0 2px 8px rgba(0, 0, 0, 1.0);
      animation: neonVolPulse 1.2s ease-in-out infinite alternate;
    }

    @keyframes neonVolPulse {
      0% {
        transform: scale(0.99);
        text-shadow: 
          0 0 10px #f3d489, 
          0 0 20px #dfb15b, 
          0 0 35px rgba(223, 177, 91, 0.7);
      }
      100% {
        transform: scale(1.025);
        text-shadow: 
          0 0 16px #ffffff, 
          0 0 30px #f3d489, 
          0 0 52px rgba(243, 212, 137, 0.95),
          0 0 75px rgba(223, 177, 91, 0.65);
      }
    }

    .typewriter-line-sub {
      margin-top: 10px;
      font-family: var(--mono);
      font-size: clamp(10.5px, 0.92vw, 13.5px);
      font-weight: 500;
      letter-spacing: 0.28em;
      color: rgba(243, 212, 137, 0.92);
      text-transform: uppercase;
      text-shadow: 
        0 0 10px rgba(0, 0, 0, 1.0), 
        0 2px 6px rgba(0, 0, 0, 1.0);
      min-height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }

    .typewriter-track-now {
      margin-top: 14px;
      font-family: var(--mono);
      font-size: clamp(9px, 0.78vw, 11px);
      letter-spacing: 0.20em;
      color: rgba(223, 177, 91, 0.85);
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      opacity: 0;
      transition: opacity 0.6s ease;
      cursor: pointer;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.95), 0 2px 6px rgba(0, 0, 0, 1.0);
    }

    .typewriter-track-now.visible {
      opacity: 1;
    }

    .typewriter-track-now .now-badge {
      font-size: 8px;
      padding: 2px 7px;
      border-radius: 9999px;
      background: rgba(223, 177, 91, 0.20);
      border: 1px solid rgba(223, 177, 91, 0.45);
      color: var(--gold-bright);
      letter-spacing: 0.12em;
    }

    .tw-cursor {
      display: inline-block;
      color: #f3d489;
      font-weight: 300;
      margin-left: 3px;
      animation: twCursorBlink 0.75s step-start infinite;
    }

    @keyframes twCursorBlink {
      0%, 49% { opacity: 1; }
      50%, 100% { opacity: 0; }
    }

    /* ======================================================================
       CINEMATIC SOUND SHUTTER [ ||| 30% SOUND CHECK ||| ]
       Awwwards / Luxury Fashion House Aesthetic (Zero-Box)
       ====================================================================== */
    .sound-shutter-container {
      position: absolute;
      top: 44.5%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 25;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), filter 0.85s ease;
      text-align: center;
      padding: 0;
      background: none;
      border: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .sound-shutter-container.active {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, -50%) scale(1.0);
    }

    .sound-shutter-container.absorbed {
      opacity: 0;
      transform: translate(-50%, -65%) scale(0.85);
      filter: blur(6px);
      pointer-events: none;
    }

    .sound-shutter-row {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-family: var(--serif, 'Cinzel', serif);
      font-size: clamp(16px, 1.6vw, 23px);
      font-weight: 700;
      letter-spacing: 0.36em;
      color: #ffffff;
      text-shadow: 
        0 2px 4px rgba(0, 0, 0, 1),
        0 4px 14px rgba(0, 0, 0, 1),
        0 8px 24px rgba(0, 0, 0, 0.98),
        0 0 36px rgba(0, 0, 0, 0.95),
        0 0 20px rgba(243, 212, 137, 0.7);
    }

    .shutter-bracket {
      color: rgba(243, 212, 137, 0.85);
      font-weight: 300;
      font-size: 1.18em;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 1), 0 0 16px rgba(0, 0, 0, 1);
    }

    .shutter-text {
      white-space: nowrap;
      text-transform: uppercase;
      font-weight: 700;
      color: #ffffff;
      text-shadow: 
        0 2px 4px rgba(0, 0, 0, 1),
        0 4px 14px rgba(0, 0, 0, 1),
        0 8px 24px rgba(0, 0, 0, 0.98),
        0 0 36px rgba(0, 0, 0, 0.95),
        0 0 20px rgba(243, 212, 137, 0.75);
    }

    .shutter-bars {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      height: 18px;
    }

    .shutter-bar {
      display: block;
      width: 2.5px;
      height: 7px;
      border-radius: 1px;
      background: #f3d489;
      box-shadow: 0 0 8px rgba(243, 212, 137, 0.95), 0 2px 6px rgba(0, 0, 0, 1);
      transition: height 0.12s ease, opacity 0.12s ease;
    }

    /* 28Hz Sub-Bass Organic Pulse Keyframes */
    .sound-shutter-container.pulsing .bar-1 {
      animation: shutterPulse1 0.72s ease-in-out infinite alternate;
    }
    .sound-shutter-container.pulsing .bar-2 {
      animation: shutterPulse2 0.54s ease-in-out infinite alternate;
    }
    .sound-shutter-container.pulsing .bar-3 {
      animation: shutterPulse3 0.88s ease-in-out infinite alternate;
    }

    @keyframes shutterPulse1 {
      0% { height: 4px; opacity: 0.55; }
      50% { height: 16px; opacity: 1; }
      100% { height: 7px; opacity: 0.75; }
    }
    @keyframes shutterPulse2 {
      0% { height: 6px; opacity: 0.65; }
      50% { height: 20px; opacity: 1; }
      100% { height: 9px; opacity: 0.85; }
    }
    @keyframes shutterPulse3 {
      0% { height: 3px; opacity: 0.5; }
      50% { height: 14px; opacity: 1; }
      100% { height: 5px; opacity: 0.7; }
    }

    .shutter-sub-caption {
      margin-top: 9px;
      font-family: var(--mono, monospace);
      font-size: clamp(9px, 0.8vw, 11px);
      letter-spacing: 0.36em;
      color: rgba(243, 212, 137, 0.95);
      font-weight: 600;
      text-transform: uppercase;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 1), 0 4px 16px rgba(0, 0, 0, 0.98), 0 0 16px rgba(0, 0, 0, 0.9);
    }

    /* Peripheral HUD Removal (100% Pure Minimalist Stage) */
    .sound-suite-dock,
    #sound-suite-dock,
    .mobile-volume-hud,
    #mobile-volume-hud {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    .hud-slider-fill {
      width: 100%;
      height: 0%;
      border-radius: 9999px;
      background: linear-gradient(180deg, #f3d489 0%, #dfb15b 60%, #b88628 100%);
      box-shadow: 0 0 14px rgba(243, 212, 137, 0.9);
      transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .hud-level-badge {
      margin-top: 8px;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: #f3d489;
      text-shadow: 0 0 8px rgba(243, 212, 137, 0.85);
    }

    .gobo-countdown-bar {
      display: none;
    }

    .countdown-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #dfb15b, #f3d489, #ffffff);
      box-shadow: 0 0 10px #f3d489;
      border-radius: 9999px;
      transition: width 5.0s linear;
    }

    /* BRAND SIGNATURE TYPOGRAPHY (Moved from stage bottom to chic front black preloader curtain per Sean Park directive) */
    .gobo-next-affordance,
    .gobo-next-affordance.visible {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    /* 5-SECOND CINEMA STUDIO PRODUCTION VANITY CARD (JSF COLLECTIVE -> JUST.SEAN.FLOWS -> FRANKFURT) */
    .noir-preload-curtain {
      position: fixed;
      inset: 0;
      z-index: 9000;
      background:
        radial-gradient(ellipse 62% 48% at 50% 50%, rgba(223, 177, 91, 0.08) 0%, rgba(12, 9, 8, 0.34) 48%, rgba(5, 5, 7, 0.58) 88%),
        rgba(5, 5, 7, 0.32);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      user-select: none;
      -webkit-user-select: none;
      overflow: hidden;
      cursor: default;
      --noir-speed-inv: 1;
      transition: opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1), visibility 1.05s;
    }

    .noir-preload-curtain.ready-to-unveil {
      cursor: pointer;
    }

    .noir-preload-curtain.unveiled {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    /* 2.39:1 Anamorphic Cinema Scope Letterbox Hairlines (Unified with --jsf-letterbox-h & dvh) */
    :root {
      --jsf-letterbox-h: clamp(38px, 6.2vh, 64px);
      --jsf-safe-bottom: env(safe-area-inset-bottom, 0px);
    }
    @supports (height: 100dvh) {
      :root {
        --jsf-letterbox-h: clamp(38px, 6.2dvh, 64px);
      }
    }

    .cinema-scope-bar {
      position: fixed;
      left: 0;
      right: 0;
      height: var(--jsf-letterbox-h);
      background: #030304;
      z-index: 9005;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
    }

    .cinema-scope-bar.top {
      top: 0;
      border-bottom: 1px solid rgba(223, 177, 91, 0.14);
    }

    .cinema-scope-bar.bottom {
      bottom: 0;
      border-top: 1px solid rgba(223, 177, 91, 0.14);
    }

    .cinema-reel-meta {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(7.5px, 0.68vw, 9px);
      font-weight: 300;
      letter-spacing: 0.42em;
      text-transform: uppercase;
      color: rgba(223, 177, 91, 0.38);
      opacity: 0;
      transform: translateY(3px);
      transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .noir-preload-curtain.cinema-act-3 .cinema-reel-meta,
    .noir-preload-curtain.ready-to-unveil .cinema-reel-meta {
      opacity: 0.65;
      transform: translateY(0);
    }

    /* Subtle Anamorphic Projector Ambient Halo — Constrained to Virtual 3D Square (976/1095) */
    .cinema-projector-halo {
      position: absolute;
      top: 50%;
      left: 50%;
      width: clamp(290px, 38vw, 480px);
      aspect-ratio: 976 / 1095;
      border-radius: 24px;
      transform: translate(-50%, -50%) scale(0.94);
      background: radial-gradient(ellipse 68% 62% at 50% 50%, rgba(243, 212, 137, 0.14) 0%, rgba(223, 177, 91, 0.05) 52%, transparent 82%);
      filter: blur(16px);
      opacity: 0;
      pointer-events: none;
      z-index: 1;
      transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1), transform 2.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .noir-preload-curtain.cinema-act-1 .cinema-projector-halo {
      opacity: 0.55;
      transform: translate(-50%, -50%) scale(0.98);
    }

    .noir-preload-curtain.cinema-act-2 .cinema-projector-halo,
    .noir-preload-curtain.cinema-act-3 .cinema-projector-halo,
    .noir-preload-curtain.ready-to-unveil .cinema-projector-halo {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.02);
    }

    /* MINIMAL 3-STAGE RANDOM CHARACTER CINEMA REVEAL
       Strictly Locked Inside the Invisible 1:1 Virtual 3D Black Square (.gobo-canvas-frame: clamp(290px, 38vw, 480px), 976/1095)
       Uses CSS Container Queries (cqw) so typography maximizes 92~95% of the virtual 3D square without ever overflowing it */
    .noir-signature-reveal {
      position: relative;
      z-index: 5;
      width: clamp(290px, 38vw, 480px);
      aspect-ratio: 976 / 1095;
      border-radius: 24px;
      container-type: inline-size;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      padding: 6cqw 3.5cqw;
      text-align: center;
      box-sizing: border-box;
      transform-style: preserve-3d;
      perspective: 1400px;
      background: transparent;
      border: none;
      box-shadow: none;
      overflow: hidden;
      transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @media (max-width: 768px) {
      .noir-signature-reveal,
      .cinema-projector-halo {
        width: clamp(290px, 88vw, 420px);
      }
    }

    /* Never show gobo light or emblem behind the first loading curtain */
    #initial-view:has(.noir-preload-curtain:not(.unveiled)) #symbol-stage-3d {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    /* 3D Frame Light-Tube Border Layer ("지지지직" 조명 켜지듯 점멸 -> "띵!" -> 0.5s 스르륵 소등, 내부 검은 박스 없음) */
    .noir-signature-reveal::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 24px;
      background: transparent !important;
      border: 2px solid rgba(243, 212, 137, 0.92);
      box-shadow:
        0 0 0 3px rgba(8, 7, 10, 0.92),
        0 0 22px rgba(243, 212, 137, 0.65),
        0 0 48px rgba(235, 145, 45, 0.35),
        inset 0 0 22px rgba(243, 212, 137, 0.32);
      opacity: 0;
      pointer-events: none;
      z-index: 1;
      will-change: opacity, filter, box-shadow;
    }

    .noir-virtual-3d-border-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
      opacity: 0;
      will-change: opacity, filter;
    }

    .noir-virtual-border-track {
      fill: none;
      stroke: rgba(10, 9, 13, 0.88);
      stroke-width: 6;
    }

    .noir-virtual-border-branch {
      fill: none;
      stroke: #fff6d6;
      stroke-width: 2.6;
      stroke-linecap: round;
      stroke-dasharray: none;
      stroke-dashoffset: 0;
      filter: drop-shadow(0 0 10px rgba(243, 212, 137, 0.95)) drop-shadow(0 0 24px rgba(235, 145, 45, 0.75));
    }

    /* Step A: 조명 켜지듯 "지지지직!" 가속 스퍼터 점멸 (0.55s) */
    @keyframes noirBorderZzzFlicker {
      0%    { opacity: 0;   filter: brightness(0.4); }
      7%    { opacity: 0.78; filter: brightness(1.35); }
      13%   { opacity: 0.06; filter: brightness(0.3); }
      22%   { opacity: 0.42; filter: brightness(0.9); }
      28%   { opacity: 0.04; filter: brightness(0.2); }
      37%   { opacity: 0.88; filter: brightness(1.45); }
      43%   { opacity: 0.12; filter: brightness(0.4); }
      50%   { opacity: 0.64; filter: brightness(1.15); }
      55%   { opacity: 0.08; filter: brightness(0.3); }
      61%   { opacity: 0.94; filter: brightness(1.55); }
      65%   { opacity: 0.18; filter: brightness(0.5); }
      70%   { opacity: 0.86; filter: brightness(1.3); }
      74%   { opacity: 0.22; filter: brightness(0.6); }
      78%   { opacity: 0.96; filter: brightness(1.6); }
      81%   { opacity: 0.30; filter: brightness(0.7); }
      85%   { opacity: 1.00; filter: brightness(1.75); }
      88%   { opacity: 0.38; filter: brightness(0.8); }
      92%   { opacity: 1.00; filter: brightness(1.85); }
      95%   { opacity: 0.55; filter: brightness(1.1); }
      100%  { opacity: 1.00; filter: brightness(1.65); }
    }

    .noir-signature-reveal.border-flash-in::before,
    .noir-signature-reveal.border-flash-in .noir-virtual-3d-border-svg {
      animation: noirBorderZzzFlicker calc(0.58s * var(--noir-speed-inv, 1)) linear forwards;
    }

    /* Step B: "띵!" (Crisp 24K Gold Resonance Peak Lock-in) */
    .noir-signature-reveal.border-flash-ping::before {
      animation: none;
      opacity: 1;
      border-color: #fffdf4;
      box-shadow:
        0 0 0 3px rgba(8, 7, 10, 0.95),
        0 0 36px rgba(255, 240, 190, 0.98),
        0 0 76px rgba(243, 212, 137, 0.78),
        inset 0 0 32px rgba(255, 236, 179, 0.52);
      filter: brightness(1.85);
    }
    .noir-signature-reveal.border-flash-ping .noir-virtual-3d-border-svg {
      animation: none;
      opacity: 1;
      filter: brightness(1.9) drop-shadow(0 0 18px rgba(255, 242, 195, 1));
    }
    .noir-signature-reveal.border-flash-ping .noir-virtual-border-branch {
      stroke: #ffffff;
      stroke-width: 3.4;
    }

    /* Step C: Set 10 잔향(2.05s~3.20s, 1.15s) 음량 감쇠(AnalyserNode RMS)와 1:1 싱크되어 스르륵 소멸 */
    .noir-signature-reveal.border-flash-out::before {
      animation: none;
      opacity: var(--noir-reverb-env, 0);
      border-color: rgba(255, 248, 224, 0.95);
      box-shadow:
        0 0 0 3px rgba(8, 7, 10, 0.95),
        0 0 calc(36px * var(--noir-reverb-env, 0)) rgba(255, 240, 190, 0.95),
        0 0 calc(76px * var(--noir-reverb-env, 0)) rgba(243, 212, 137, 0.75),
        inset 0 0 calc(32px * var(--noir-reverb-env, 0)) rgba(255, 236, 179, 0.48);
      filter: brightness(calc(0.95 + 0.90 * var(--noir-reverb-env, 0)));
      transition: opacity 0.06s linear, filter 0.06s linear;
    }
    .noir-signature-reveal.border-flash-out .noir-virtual-3d-border-svg {
      animation: none;
      opacity: var(--noir-reverb-env, 0);
      filter: brightness(calc(1.0 + 0.90 * var(--noir-reverb-env, 0))) drop-shadow(0 0 calc(18px * var(--noir-reverb-env, 0)) rgba(255, 242, 195, 0.95));
      transition: opacity 0.06s linear, filter 0.06s linear;
    }

    .noir-preload-curtain.ready-to-unveil:hover .noir-signature-reveal {
      transform: perspective(1200px) scale(1.015);
    }

    /* Individual Character Span for Random Staggered Phased Reveal (Driven by 1x/2x Virtual Clock) */
    .cinema-rand-char {
      display: inline-block;
      opacity: 0;
      filter: blur(8px);
      transform: translateY(6px) scale(0.94);
      will-change: opacity, filter, transform;
      transition:
        opacity calc(0.95s * var(--noir-speed-inv, 1)) cubic-bezier(0.16, 1, 0.3, 1),
        filter calc(1.05s * var(--noir-speed-inv, 1)) cubic-bezier(0.16, 1, 0.3, 1),
        transform calc(1.05s * var(--noir-speed-inv, 1)) cubic-bezier(0.16, 1, 0.3, 1);
    }

    .cinema-rand-space {
      display: inline-block;
      width: 0.32em;
    }

    .cinema-rand-char.char-visible {
      opacity: 1;
      filter: blur(0px);
      transform: translateY(0) scale(1);
    }

    /* STAGE 1: @just.sean.flows — Fills ~93% of the Virtual 3D Square Width */
    .cinema-act1-house {
      position: relative;
      z-index: 3;
      font-family: 'Playfair Display', 'Cormorant Garamond', 'Cinzel', Georgia, serif;
      font-size: clamp(26px, 9.2cqw, 44px);
      font-weight: 500;
      letter-spacing: 0.08em;
      color: #f3d489;
      margin-right: -0.08em;
      margin-bottom: 7.5cqw;
      white-space: nowrap;
      max-width: 100%;
      text-shadow: 0 8px 28px rgba(0, 0, 0, 0.96), 0 0 28px rgba(223, 177, 91, 0.38);
      transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.8s ease;
    }

    .cinema-act1-house .char-punct {
      color: rgba(223, 177, 91, 0.78);
      font-weight: 400;
    }

    /* Glowing Horizontal Gold Filament — Strictly Inside Virtual 3D Square (88% width) */
    .noir-preload-track {
      position: relative;
      width: 88%;
      height: 2px;
      background: linear-gradient(90deg, transparent 0%, rgba(223, 177, 91, 0.22) 20%, rgba(223, 177, 91, 0.46) 50%, rgba(223, 177, 91, 0.22) 80%, transparent 100%);
      overflow: visible;
      z-index: 6;
      opacity: 0;
      transition: opacity 1.1s ease 0.25s, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .noir-preload-curtain.chars-revealing .noir-preload-track {
      opacity: 1;
    }

    .noir-preload-track::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 7px;
      height: 7px;
      background: #fffdf4;
      transform: translate(-50%, -50%) rotate(45deg);
      box-shadow: 0 0 14px 3px rgba(243, 212, 137, 0.95);
      opacity: 0.94;
    }

    .noir-preload-fill {
      position: absolute;
      top: 0;
      left: 50%;
      width: 0%;
      height: 2px;
      transform: translateX(-50%);
      background: linear-gradient(90deg, transparent 0%, rgba(223, 177, 91, 0.82) 15%, rgba(255, 250, 232, 1) 50%, rgba(223, 177, 91, 0.82) 85%, transparent 100%);
      box-shadow: 0 0 22px rgba(243, 212, 137, 0.9), 0 0 8px rgba(255, 252, 240, 0.95);
      transition: width 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
    }

    /* STAGE 2: music salon — Boldly Fills ~88% of the Virtual 3D Square Width */
    .cinema-act1-presents {
      position: relative;
      z-index: 3;
      margin-top: 8cqw;
      display: inline-flex;
      align-items: baseline;
      justify-content: center;
      white-space: nowrap;
      max-width: 100%;
    }

    .cinema-presents-salon {
      font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
      font-size: clamp(22px, 7.6cqw, 36px);
      font-weight: 500;
      letter-spacing: 0.22em;
      margin-right: -0.22em;
      color: #fdfaf4;
      text-shadow: 0 0 24px rgba(243, 212, 137, 0.46), 0 4px 16px rgba(0, 0, 0, 0.95);
    }

    /* STAGE 3: in frankfurt am main, Germany — Fills ~90% of the Virtual 3D Square Width */
    .noir-sub-group {
      position: relative;
      z-index: 3;
      margin-top: 11cqw;
      display: flex;
      flex-direction: column;
      align-items: center;
      white-space: nowrap;
      max-width: 100%;
    }

    .noir-sub-hairline {
      width: 0px;
      height: 1.5px;
      background: linear-gradient(90deg, transparent 0%, rgba(223, 177, 91, 0.65) 50%, transparent 100%);
      opacity: 0;
      transition: width 1.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.15s ease;
    }

    .noir-preload-curtain.cinema-act-2 .noir-sub-hairline,
    .noir-preload-curtain.cinema-act-3 .noir-sub-hairline,
    .noir-preload-curtain.ready-to-unveil .noir-sub-hairline {
      width: 16cqw;
      opacity: 1;
    }

    .noir-sub-location {
      margin-top: 4.5cqw;
      display: inline-flex;
      align-items: baseline;
      justify-content: center;
      gap: 2.2cqw;
      max-width: 100%;
    }

    .noir-sub-prep {
      font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
      font-style: italic;
      font-weight: 500;
      font-size: clamp(18px, 6.2cqw, 30px);
      letter-spacing: 0.04em;
      color: rgba(223, 177, 91, 0.96);
      margin-right: 1px;
    }

    .noir-sub-city {
      font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: clamp(12.5px, 4.3cqw, 20.5px);
      font-weight: 300;
      letter-spacing: 0.11em;
      color: rgba(246, 239, 226, 0.96);
    }

    .noir-sub-country {
      font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: clamp(12.5px, 4.3cqw, 20.5px);
      font-weight: 500;
      letter-spacing: 0.11em;
      color: rgba(223, 177, 91, 0.94);
      margin-right: -0.11em;
    }

    .noir-preload-curtain.ready-to-unveil:hover .cinema-act1-house {
      transform: translateY(0) scale(1.018);
      text-shadow: 0 10px 28px rgba(0, 0, 0, 0.98), 0 0 30px rgba(243, 212, 137, 0.62);
    }

    .noir-preload-curtain.ready-to-unveil:hover .noir-preload-track {
      transform: scaleX(1.04);
    }

    /* 3D Physical Sculpted Brand Typography Object */
    .brand-3d-typography-img {
      height: clamp(30px, 3.4vw, 44px);
      width: auto;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 16px rgba(223, 177, 91, 0.45));
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
    }

    .gobo-next-affordance:hover .brand-3d-typography-img {
      transform: scale(1.05);
      filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.98)) drop-shadow(0 0 24px rgba(243, 212, 137, 0.85));
    }

    .gobo-next-affordance:hover .next-title {
      filter: drop-shadow(0 0 16px rgba(243, 212, 137, 0.95)) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.95));
      letter-spacing: 0.36em;
    }

    .gobo-next-affordance:hover .next-desc {
      color: rgba(243, 212, 137, 0.95);
      text-shadow: 0 0 10px rgba(243, 212, 137, 0.7);
    }

    .gobo-next-affordance .next-title {
      font-family: var(--serif, 'Cinzel', serif);
      font-size: clamp(12px, 1.1vw, 15px);
      font-weight: 700;
      letter-spacing: 0.32em;
      color: #fffdf6;
      background: linear-gradient(180deg, #fffdf8 0%, #f3d489 55%, #dfb15b 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 12px rgba(243, 212, 137, 0.65)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.95));
      transition: all 0.4s ease;
      text-transform: uppercase;
      line-height: 1.2;
    }

    .gobo-next-affordance .next-desc {
      font-family: var(--mono, monospace);
      font-size: clamp(7.5px, 0.65vw, 9.5px);
      font-weight: 600;
      letter-spacing: 0.26em;
      color: rgba(223, 177, 91, 0.75);
      text-shadow: 0 0 6px rgba(223, 177, 91, 0.4);
      margin-top: 4px;
      transition: all 0.4s ease;
      text-transform: uppercase;
    }

    .symbol-center-stage.stage-dissolved {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: scale(1.08);
      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.9s;
    }
  
    /* 5-Second 3D Item Unlock & Scanline */
    .gobo-symbol-rig.item-unlocking {
      animation: obsidianItemUnlockTurn 4.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes obsidianItemUnlockTurn {
      0% { transform: perspective(1200px) translate3d(0, 0, 65px) rotateY(0deg) scale(0.96); }
      22% { transform: perspective(1200px) translate3d(0, -10px, 85px) rotateY(18deg) scale(1.04); }
      55% { transform: perspective(1200px) translate3d(0, -5px, 75px) rotateY(-8deg) scale(1.02); }
      80% { transform: perspective(1200px) translate3d(0, -2px, 68px) rotateY(2deg) scale(1.0); }
      100% { transform: perspective(1200px) translate3d(0, 0, 65px) rotateY(0deg) scale(1.0); }
    }

    /* Descending Laser Scanline completely disabled per Sean's directive ("여기 이거 내려오는 효과 말고") */
    .obsidian-scanline {
      display: none !important;
    }

    /* Big Stage 1 Corporate HUD Metadata Index (Deferred per Sean's directive) */
    .corp-hud-index {
      display: none !important;
    }

    /* Minimal Gold Scroll Guide (Deferred per Sean's directive) */
    .scroll-explore-guide {
      display: none !important;
    }
    @keyframes scrollPulseGuide {
      0% { transform: translateX(-50%) translateY(0); opacity: 0.45; }
      100% { transform: translateX(-50%) translateY(4px); opacity: 0.85; }
    }

    /* -------------------------------------------------------------
       WINDOW GOBO PORTAL TRANSITION (SEAMLESS 1:1 TO 3D ATELIER)
       ------------------------------------------------------------- */
    #portal-transition-curtain {
      position: fixed;
      inset: 0;
      background: radial-gradient(circle at 50% 50%, rgba(223, 177, 91, 0.28) 0%, #070608 62%, #050507 100%);
      z-index: 99999;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    }
    #portal-transition-curtain.active {
      opacity: 1;
      pointer-events: auto;
    }

    .gobo-canvas-frame.portal-zooming {
      transform: perspective(1200px) scale(8.5) translateZ(480px) !important;
      filter: brightness(1.75) blur(2.5px) !important;
      opacity: 0.1 !important;
      transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 1.1s ease !important;
      pointer-events: none;
    }

    /* Elegant Floating VIP Portal Button */
    .atelier-portal-capsule {
      position: fixed;
      bottom: clamp(28px, 5vh, 52px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 10px 24px;
      background: rgba(14, 12, 17, 0.88);
      border: 1px solid rgba(223, 177, 91, 0.38);
      border-radius: 999px;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 10px 32px rgba(0, 0, 0, 0.85), 0 0 20px rgba(223, 177, 91, 0.22);
      cursor: pointer;
      text-decoration: none;
      color: #fffdf8;
      font-family: var(--serif, 'Cinzel', serif);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .atelier-portal-capsule:hover {
      background: rgba(223, 177, 91, 0.24);
      border-color: #ffd700;
      transform: translateX(-50%) translateY(-2px);
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.9), 0 0 28px rgba(223, 177, 91, 0.6);
      color: #ffd700;
    }
    .atelier-portal-capsule .portal-beacon {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #ffd700;
      box-shadow: 0 0 10px #ffd700;
      animation: portalBeaconPulse 1.8s infinite ease-in-out;
    }
    @keyframes portalBeaconPulse {
      0%, 100% { transform: scale(1); opacity: 0.8; }
      50% { transform: scale(1.6); opacity: 1; }
    }

    /* ======================================================================
       3D CARD-FLIP VIP SALON PARTY INVITATION PASS (FROM LAUNCH_FRESH_V2)
       ====================================================================== */
    .gobo-canvas-frame {
      transition: transform 0.92s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 0.65s ease,
                  background 1.8s cubic-bezier(0.16, 1, 0.3, 1),
                  border-color 1.8s ease,
                  box-shadow 2.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    .gobo-canvas-frame.card-flipped-out {
      transform: perspective(1400px) rotateY(180deg) scale(0.92) !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    /* Front Flip Hint Pill (Appears when Ivory Logo locks in) */
    .front-flip-hint-pill {
      position: absolute;
      bottom: 6px;
      left: 50%;
      transform: translateX(-50%) translateY(6px);
      z-index: 30;
      background: rgba(10, 9, 12, 0.84);
      border: 1px solid rgba(223, 177, 91, 0.35);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 7px 18px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 10px;
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: 0.14em;
      color: #f6ebd9;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 16px rgba(223, 177, 91, 0.18);
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      cursor: pointer;
      transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .gobo-next-affordance.visible ~ .front-flip-hint-pill,
    .front-flip-hint-pill.visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    .front-flip-hint-pill:hover {
      border-color: #ffd700;
      color: #ffd700;
      box-shadow: 0 0 22px rgba(223, 177, 91, 0.45);
    }

    /* Overhead Spotlight & Volumetric Cone for Flipped VIP Pass */
    .vip-pass-spotlight-fixture {
      position: fixed;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 72px;
      height: 10px;
      background: linear-gradient(180deg, #1c1920 0%, #0c0b0f 100%);
      border-bottom: 1.5px solid #dfb15b;
      border-radius: 0 0 8px 8px;
      z-index: 58;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.9), 0 0 24px rgba(255, 170, 51, 0.45);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.7s ease;
    }

    .vip-pass-spotlight-fixture::after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 50%;
      transform: translateX(-50%);
      width: 28px;
      height: 6px;
      background: #fff3db;
      border-radius: 50%;
      filter: blur(1.5px);
      box-shadow: 0 0 16px #ffaa33, 0 0 32px #ffaa33;
    }

    .vip-pass-volumetric-cone {
      position: fixed;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: clamp(280px, 48vw, 560px);
      height: 92vh;
      background: radial-gradient(ellipse 55% 85% at 50% 0%, rgba(255, 170, 51, 0.18) 0%, rgba(223, 177, 91, 0.05) 50%, transparent 80%);
      clip-path: polygon(48% 0%, 52% 0%, 96% 100%, 4% 100%);
      pointer-events: none;
      z-index: 57;
      opacity: 0;
      transition: opacity 0.7s ease;
    }

    body.vip-pass-flipped .vip-pass-spotlight-fixture,
    body.vip-pass-flipped .vip-pass-volumetric-cone {
      opacity: 1;
    }

    body.vip-pass-flipped .designer-fx-studio-bar {
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translateX(-50%) translateY(-14px);
    }

    .designer-fx-studio-bar {
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Back Face: 1:1 Matched Size with Front .gobo-canvas-frame Black Border (976 / 1095) */
    .under-dev-card-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      width: clamp(290px, 38vw, 480px);
      aspect-ratio: 976 / 1095;
      height: auto;
      max-width: 90vw;
      z-index: 65;
      border-radius: 24px;
      container-type: inline-size;
      background:
        radial-gradient(circle at 50% 12%, rgba(223, 177, 91, 0.16) 0%, transparent 58%),
        radial-gradient(circle at 50% 88%, rgba(162, 28, 56, 0.20) 0%, transparent 65%),
        linear-gradient(180deg, #121017 0%, #0b0a0e 100%);
      border: 1.5px solid rgba(223, 177, 91, 0.45);
      box-shadow:
        0 28px 64px rgba(0, 0, 0, 0.94),
        0 1px 0 rgba(255, 255, 255, 0.12) inset;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 4.2cqw 4.6cqw;
      box-sizing: border-box;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      will-change: transform;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transform: translate(-50%, -50%) perspective(1500px) rotateY(-180deg) translateZ(17px) scale(0.92);
      transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
      cursor: pointer;
      user-select: none;
      font-family: 'Plus Jakarta Sans', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    @media (max-width: 768px) {
      .under-dev-card-overlay {
        width: clamp(290px, 88vw, 420px);
      }
    }

    .under-dev-card-overlay::before {
      content: '';
      position: absolute;
      inset: 8px;
      border: 1px solid rgba(223, 177, 91, 0.18);
      border-radius: 18px;
      pointer-events: none;
    }

    .under-dev-card-overlay.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(-50%, -50%) perspective(1400px) rotateY(0deg) scale(0.92);
    }

    /* BACK OF 3D WINDOW FRAME -> 0.3S PAUSE -> FULL LUXURY SALON WEBPAGE ZOOM-IN */
    .salon-stardust-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      background:
        radial-gradient(circle at 18% 15%, rgba(243, 212, 137, 0.14) 0%, transparent 42%),
        radial-gradient(circle at 84% 22%, rgba(190, 45, 78, 0.16) 0%, transparent 48%),
        radial-gradient(circle at 50% 88%, rgba(223, 177, 91, 0.15) 0%, transparent 55%);
    }

    .jesse-pass-header {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(223, 177, 91, 0.28);
    }

    .jesse-pass-brand-col {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
    }

    .jesse-pass-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.20em;
      color: #e8b4b8;
      text-transform: uppercase;
    }

    .jesse-pass-eyebrow-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #f43f5e;
      box-shadow: 0 0 10px #f43f5e, 0 0 18px rgba(244, 63, 94, 0.8);
      animation: gyroPulseDot 1.6s ease-in-out infinite alternate;
    }

    .jesse-pass-title-row {
      display: flex;
      align-items: baseline;
      gap: 12px;
      flex-wrap: wrap;
    }

    .jesse-pass-title {
      font-family: 'Playfair Display', 'Cinzel', Georgia, serif;
      font-size: clamp(20px, 3.2vw, 27px);
      font-weight: 700;
      letter-spacing: 0.08em;
      color: #fbf0d9;
      line-height: 1.05;
      text-shadow: 0 2px 18px rgba(223, 177, 91, 0.38);
    }

    .jesse-pass-tagline {
      font-family: 'Playfair Display', Georgia, serif;
      font-style: italic;
      font-size: 13px;
      color: rgba(243, 212, 137, 0.88);
      letter-spacing: 0.03em;
    }

    .jesse-header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .salon-live-audio-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 11px;
      border-radius: 999px;
      background: rgba(223, 177, 91, 0.10);
      border: 1px solid rgba(223, 177, 91, 0.35);
      color: #f5dfb0;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: 0.08em;
    }

    .salon-eq-bars {
      display: inline-flex;
      align-items: flex-end;
      gap: 2px;
      height: 10px;
    }

    .salon-eq-bars span {
      width: 2px;
      background: #ffd700;
      border-radius: 1px;
      animation: salonEqBounce 0.9s ease-in-out infinite alternate;
    }

    .salon-eq-bars span:nth-child(1) { height: 4px; animation-delay: 0.0s; }
    .salon-eq-bars span:nth-child(2) { height: 9px; animation-delay: 0.2s; }
    .salon-eq-bars span:nth-child(3) { height: 6px; animation-delay: 0.4s; }
    .salon-eq-bars span:nth-child(4) { height: 10px; animation-delay: 0.15s; }

    @keyframes salonEqBounce {
      0% { transform: scaleY(0.35); opacity: 0.65; }
      100% { transform: scaleY(1.0); opacity: 1; }
    }

    .jesse-flip-back-pill {
      appearance: none;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(223, 177, 91, 0.48);
      color: #fbf0d9;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.10em;
      padding: 6px 13px;
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.22s ease;
    }

    .jesse-flip-back-pill:hover {
      background: #dfb15b;
      color: #09080c;
      box-shadow: 0 0 18px rgba(223, 177, 91, 0.65);
    }

    /* 1. Large Luxury Nocturne Google Map Hero Stage */
    .pass-map-widget {
      position: relative;
      z-index: 3;
      width: 100%;
      height: 156px;
      border-radius: 16px;
      overflow: hidden;
      border: 1.5px solid rgba(223, 177, 91, 0.48);
      background: #09080d;
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.85), inset 0 0 28px rgba(0, 0, 0, 0.9);
      cursor: grab;
    }

    /* Crop out ugly default Google Maps top/bottom UI chrome so only pure streets show */
    .pass-google-map-iframe {
      width: 108%;
      height: 175%;
      margin-left: -4%;
      margin-top: -19%;
      border: 0;
      display: block;
      filter: invert(93%) hue-rotate(180deg) sepia(36%) saturate(160%) contrast(110%) brightness(0.84);
    }

    .pass-map-radar-hud {
      position: absolute;
      inset: 0;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(circle at 50% 44%, transparent 25%, rgba(9, 7, 13, 0.68) 92%),
        linear-gradient(180deg, rgba(9, 7, 13, 0.55) 0%, transparent 26%, transparent 65%, rgba(9, 7, 13, 0.88) 100%);
    }

    .pass-map-radar-ring {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      border: 1px solid rgba(243, 212, 137, 0.72);
      background: radial-gradient(circle, rgba(223, 177, 91, 0.28) 0%, rgba(190, 45, 78, 0.12) 55%, transparent 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      box-shadow: 0 0 32px rgba(223, 177, 91, 0.42), inset 0 0 16px rgba(243, 212, 137, 0.22);
    }

    .pass-map-radar-ring::before {
      content: '300M SECRET RADIUS';
      position: absolute;
      top: -19px;
      white-space: nowrap;
      background: rgba(12, 9, 16, 0.92);
      border: 1px solid rgba(243, 212, 137, 0.55);
      color: #ffd700;
      font-family: 'JetBrains Mono', monospace;
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      padding: 2px 8px;
      border-radius: 999px;
    }

    .pass-map-radar-ring::after {
      content: '';
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 1.2px solid rgba(243, 212, 137, 0.65);
      animation: mapRadarPulse 2.4s ease-out infinite;
    }

    .pass-map-center-dot {
      width: 11px;
      height: 11px;
      transform: rotate(45deg);
      background: #ffd700;
      border: 2px solid #09080c;
      box-shadow: 0 0 14px #ffd700, 0 0 24px rgba(255, 215, 0, 0.9);
    }

    .pass-map-top-tag {
      position: absolute;
      top: 10px;
      left: 12px;
      pointer-events: none;
      background: rgba(12, 9, 16, 0.88);
      border: 1px solid rgba(223, 177, 91, 0.45);
      color: #f5dfb0;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      padding: 4px 11px;
      border-radius: 999px;
      backdrop-filter: blur(8px);
    }

    @keyframes mapRadarPulse {
      0% { transform: scale(0.78); opacity: 0.9; }
      100% { transform: scale(1.42); opacity: 0; }
    }

    .pass-map-overlay-bar {
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 9px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: rgba(12, 10, 16, 0.92);
      border: 1px solid rgba(223, 177, 91, 0.42);
      border-radius: 11px;
      padding: 7px 12px;
      z-index: 4;
      backdrop-filter: blur(10px);
    }

    .map-addr-col {
      display: flex;
      flex-direction: column;
      gap: 1px;
      text-align: left;
    }

    .map-addr-text {
      font-family: 'JetBrains Mono', 'Pretendard', monospace;
      font-size: 11px;
      font-weight: 700;
      color: #fbf0d9;
      letter-spacing: 0.06em;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .map-addr-sub {
      font-family: 'Pretendard', 'Plus Jakarta Sans', sans-serif;
      font-size: 10.5px;
      color: rgba(232, 180, 184, 0.9);
      padding-left: 13px;
    }

    .map-addr-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #ffd700;
      box-shadow: 0 0 8px #ffd700;
      flex-shrink: 0;
    }

    .map-open-link {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.10em;
      color: #09080c;
      background: linear-gradient(135deg, #f3d489 0%, #dfb15b 100%);
      padding: 6px 13px;
      border-radius: 999px;
      text-decoration: none;
      text-transform: uppercase;
      transition: all 0.22s ease;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(223, 177, 91, 0.35);
    }

    .map-open-link:hover {
      background: #ffd700;
      box-shadow: 0 0 18px rgba(255, 215, 0, 0.8);
      transform: translateY(-1px);
    }

    /* Section Divider Label */
    .salon-section-heading-row {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-bottom: -4px;
    }

    .salon-section-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 13.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: #f5dfb0;
    }

    .salon-section-hint {
      font-family: 'Pretendard', sans-serif;
      font-size: 11px;
      color: rgba(232, 180, 184, 0.88);
    }

    /* 2. Middle 3 Editorial U22 Atelier Concept Cards */
    .salon-concept-strip {
      position: relative;
      z-index: 3;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
    }

    .salon-concept-card {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      height: 158px;
      border: 1px solid rgba(223, 177, 91, 0.42);
      background: #120e16;
      cursor: pointer;
      padding: 0;
      text-align: left;
      transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.78);
    }

    .salon-concept-card:hover {
      transform: translateY(-4px);
      border-color: #ffd700;
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.9), 0 0 24px rgba(223, 177, 91, 0.42);
    }

    .salon-concept-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: brightness(0.96) contrast(1.06) saturate(1.12);
      transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
    }

    .salon-concept-card:hover img {
      transform: scale(1.09);
      filter: brightness(1.06) contrast(1.08) saturate(1.2);
    }

    .salon-concept-card-shade {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(8, 6, 12, 0.15) 0%, rgba(8, 6, 12, 0.25) 38%, rgba(10, 7, 14, 0.95) 100%);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10px 11px;
    }

    .salon-concept-top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .salon-concept-badge {
      background: rgba(12, 9, 16, 0.84);
      border: 1px solid rgba(243, 212, 137, 0.62);
      color: #ffd700;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 999px;
      letter-spacing: 0.08em;
      backdrop-filter: blur(6px);
    }

    .salon-concept-zoom-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(12, 9, 16, 0.78);
      border: 1px solid rgba(223, 177, 91, 0.45);
      color: #f5dfb0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
    }

    .salon-concept-label-group {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .salon-concept-title {
      font-family: 'Playfair Display', 'Cinzel', Georgia, serif;
      font-size: 15.5px;
      font-weight: 700;
      color: #fff8ea;
      letter-spacing: 0.03em;
      line-height: 1.15;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    }

    .salon-concept-sub {
      font-family: 'Pretendard', 'Plus Jakarta Sans', sans-serif;
      font-size: 10.5px;
      color: rgba(245, 223, 176, 0.88);
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* 3. #4 Secret Forest Ticket Portal Banner */
    .pass-footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 3;
      width: 100%;
    }

    .pass-forest-ticket-btn {
      position: relative;
      width: 100%;
      height: 74px;
      border-radius: 15px;
      overflow: hidden;
      border: 1.5px solid #dfb15b;
      background: #07120d;
      cursor: pointer;
      padding: 0 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.88), 0 0 28px rgba(223, 177, 91, 0.28);
      transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
      box-sizing: border-box;
    }

    .pass-forest-ticket-btn:hover {
      border-color: #ffd700;
      box-shadow: 0 14px 36px rgba(0, 0, 0, 0.92), 0 0 36px rgba(255, 215, 0, 0.62);
      transform: translateY(-2px);
    }

    .pass-forest-ticket-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 46%;
      filter: brightness(0.82) contrast(1.12) saturate(1.22);
      transition: transform 0.55s ease, filter 0.45s ease;
    }

    .pass-forest-ticket-btn:hover .pass-forest-ticket-bg {
      transform: scale(1.06);
      filter: brightness(0.95) contrast(1.15) saturate(1.3);
    }

    .pass-forest-ticket-shade {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(6, 12, 10, 0.92) 0%, rgba(6, 12, 10, 0.42) 55%, rgba(10, 9, 14, 0.90) 100%);
    }

    .pass-forest-left {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
      text-align: left;
    }

    .pass-forest-eyebrow {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px;
      font-weight: 800;
      color: #86efac;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    .pass-forest-main-title {
      font-family: 'Playfair Display', 'Cinzel', Georgia, serif;
      font-size: 18px;
      font-weight: 700;
      color: #fff8e7;
      letter-spacing: 0.04em;
    }

    .pass-forest-sub-desc {
      font-family: 'Pretendard', sans-serif;
      font-size: 11px;
      color: rgba(245, 223, 176, 0.9);
    }

    .pass-forest-right-badge {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
      background: rgba(12, 10, 16, 0.90);
      border: 1.5px solid rgba(255, 215, 0, 0.78);
      padding: 8px 14px;
      border-radius: 12px;
      box-shadow: 0 0 20px rgba(255, 215, 0, 0.32);
    }

    .pass-forest-price-distant {
      font-family: 'Playfair Display', 'Cinzel', serif;
      font-size: 17px;
      font-weight: 800;
      color: #ffd700;
      letter-spacing: 0.05em;
    }

    .pass-forest-walk-cta {
      font-family: 'JetBrains Mono', 'Pretendard', monospace;
      font-size: 10px;
      font-weight: 700;
      color: #86efac;
      letter-spacing: 0.06em;
    }

    /* High-Res Interior Concept Drawer inside the Back Frame */
    .salon-concept-drawer {
      position: absolute;
      inset: 10px;
      z-index: 30;
      border-radius: 16px;
      background: rgba(10, 8, 14, 0.98);
      border: 1.5px solid rgba(223, 177, 91, 0.6);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 16px;
      box-sizing: border-box;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: scale(0.96);
      transition: all 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .salon-concept-drawer.open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: scale(1);
    }

    .concept-drawer-img-wrap {
      position: relative;
      width: 100%;
      height: 64%;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(223, 177, 91, 0.45);
    }

    .concept-drawer-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .concept-drawer-close {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(9, 8, 13, 0.9);
      border: 1px solid rgba(223, 177, 91, 0.6);
      color: #ffd700;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 999px;
      cursor: pointer;
    }

    .concept-drawer-tabs {
      display: flex;
      gap: 8px;
    }

    .concept-drawer-tab {
      flex: 1;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(223, 177, 91, 0.28);
      color: #d6c7b2;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      padding: 8px 6px;
      border-radius: 9px;
      cursor: pointer;
    }

    .concept-drawer-tab.active {
      background: rgba(223, 177, 91, 0.24);
      border-color: #ffd700;
      color: #ffd700;
    }

    /* ======================================================================
       3.5 NOCTURNAL TORCH ALTAR PUZZLE ENGINE (DETACHABLE TORCH & 3 BRAZIER SLOTS)
       ====================================================================== */
    /* Real-time 2500K radial firelight halo following the torch while dragging/exploring */
    .torch-firelight-halo {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 24;
      border-radius: 16px;
      opacity: 0;
      transition: opacity 0.35s ease;
      background: radial-gradient(
        circle 210px at var(--torch-x, 50%) var(--torch-y, 12%),
        rgba(255, 196, 85, 0.28) 0%,
        rgba(235, 125, 34, 0.14) 42%,
        rgba(0, 0, 0, 0.72) 88%
      );
      mix-blend-mode: screen;
    }

    .under-dev-card-overlay.torch-dragging .torch-firelight-halo {
      opacity: 1;
    }

    /* Torch Quest Status & Home Cradle Bar */
    .torch-quest-bar {
      position: relative;
      z-index: 26;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      padding: 6px 12px;
      border-radius: 12px;
      background: linear-gradient(90deg, rgba(24, 17, 15, 0.94) 0%, rgba(15, 12, 18, 0.94) 100%);
      border: 1px solid rgba(243, 212, 137, 0.38);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.75), inset 0 0 14px rgba(255, 165, 45, 0.10);
      box-sizing: border-box;
    }

    .torch-quest-left {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
    }

    .torch-quest-step-pills {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
    }

    .torch-step-dot {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(223, 177, 91, 0.35);
      color: rgba(245, 223, 176, 0.55);
      transition: all 0.3s ease;
    }

    .torch-step-dot.ember {
      background: rgba(217, 91, 38, 0.22);
      border-color: rgba(251, 146, 60, 0.75);
      color: #fdba74;
      box-shadow: 0 0 10px rgba(251, 146, 60, 0.45);
    }

    .torch-step-dot.lit {
      background: radial-gradient(circle, #fde047 0%, #f59e0b 100%);
      border-color: #fffbeb;
      color: #09080c;
      box-shadow: 0 0 14px #f59e0b, 0 0 24px rgba(245, 158, 11, 0.75);
    }

    .torch-step-dot.hidden-step {
      opacity: 0.25;
      border-style: dashed;
    }

    .torch-quest-guide-text {
      font-family: 'Pretendard', 'Plus Jakarta Sans', sans-serif;
      font-size: 11.5px;
      font-weight: 600;
      color: #fde68a;
      letter-spacing: 0.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Home Cradle where the Torch starts (or returns when pulled out) */
    .torch-cradle-dock {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 3px 10px;
      border-radius: 999px;
      background: rgba(10, 8, 13, 0.9);
      border: 1px dashed rgba(243, 212, 137, 0.55);
      min-height: 28px;
      flex-shrink: 0;
    }

    .torch-cradle-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.10em;
      color: rgba(243, 212, 137, 0.8);
      text-transform: uppercase;
    }

    /* The Physical Draggable Golden Torch Artifact */
    .salon-torch-artifact {
      position: relative;
      z-index: 60;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px 4px 9px;
      border-radius: 999px;
      background: linear-gradient(135deg, #3b1d0e 0%, #1c0f08 60%, #2a170b 100%);
      border: 1.5px solid #fbbf24;
      box-shadow:
        0 0 18px rgba(251, 191, 36, 0.75),
        0 0 34px rgba(234, 88, 12, 0.55),
        0 6px 14px rgba(0, 0, 0, 0.9);
      color: #fffbeb;
      font-family: 'JetBrains Mono', 'Pretendard', monospace;
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.08em;
      cursor: grab;
      user-select: none;
      touch-action: none;
      transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
      animation: torchArtifactPulse 1.5s ease-in-out infinite alternate;
    }

    .salon-torch-artifact:hover {
      transform: scale(1.07) translateY(-1px);
      box-shadow:
        0 0 24px rgba(254, 240, 138, 0.95),
        0 0 44px rgba(249, 115, 22, 0.85),
        0 8px 18px rgba(0, 0, 0, 0.95);
    }

    .salon-torch-artifact.dragging {
      position: fixed !important;
      z-index: 99999 !important;
      cursor: grabbing !important;
      pointer-events: none !important;
      transform: translate(-50%, -50%) scale(1.16) rotate(-8deg) !important;
      animation: none !important;
      box-shadow:
        0 0 32px #fef08a,
        0 0 64px rgba(249, 115, 22, 0.95),
        0 14px 28px rgba(0, 0, 0, 0.95) !important;
    }

    @keyframes torchArtifactPulse {
      0% {
        box-shadow: 0 0 14px rgba(251, 191, 36, 0.65), 0 0 28px rgba(234, 88, 12, 0.45);
      }
      100% {
        box-shadow: 0 0 24px rgba(254, 240, 138, 0.95), 0 0 42px rgba(249, 115, 22, 0.78);
      }
    }

    /* Animated Multi-Layer Flame Icon on the Torch */
    .torch-flame-rig {
      position: relative;
      width: 16px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .torch-flame-outer {
      position: absolute;
      width: 14px;
      height: 18px;
      border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
      background: radial-gradient(ellipse at 50% 65%, #fffbeb 0%, #facc15 38%, #ea580c 78%, transparent 100%);
      filter: blur(0.4px) drop-shadow(0 0 8px #f59e0b);
      animation: torchFlameFlicker 0.28s ease-in-out infinite alternate;
    }

    .torch-flame-core {
      position: absolute;
      bottom: 2px;
      width: 7px;
      height: 10px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 0 8px #fef08a;
    }

    @keyframes torchFlameFlicker {
      0% { transform: scaleX(0.92) scaleY(0.95) rotate(-4deg); }
      100% { transform: scaleX(1.08) scaleY(1.08) rotate(4deg); }
    }

    /* Brazier Sconce Slot Socket on each Zone (Altar I, Altar II, Altar III) */
    .torch-altar-zone {
      position: relative;
      transition: filter 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.55s ease;
    }

    /* UNLIT STATE: Shrouded in mystery darkness until the Torch is plugged in */
    .torch-altar-zone[data-zone-state="unlit"] .zone-illuminated-content {
      filter: brightness(0.09) saturate(0.15) contrast(1.15) blur(3.5px);
      opacity: 0.32;
      pointer-events: none;
      user-select: none;
      transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
    }

    /* EMBER STATE: Previously visited after Torch was pulled out -> warm glowing ember rim + dim silhouette */
    .torch-altar-zone[data-zone-state="ember"] .zone-illuminated-content {
      filter: brightness(0.34) saturate(0.65) sepia(0.28) contrast(1.08) blur(1px);
      opacity: 0.62;
      pointer-events: none;
      transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
    }

    .torch-altar-zone[data-zone-state="ember"]::after {
      content: '🔥 잔불이 남아 있습니다 (화로를 눌러 다시 점화)';
      position: absolute;
      bottom: 8px;
      right: 12px;
      z-index: 19;
      pointer-events: none;
      font-family: 'JetBrains Mono', 'Pretendard', monospace;
      font-size: 9.5px;
      font-weight: 700;
      color: #fdba74;
      background: rgba(22, 11, 7, 0.88);
      border: 1px solid rgba(251, 146, 60, 0.55);
      padding: 3px 9px;
      border-radius: 999px;
      box-shadow: 0 0 14px rgba(234, 88, 12, 0.35);
    }

    /* LIT STATE: Torch is plugged into this Altar (or Master Unlock achieved) -> 100% vivid Golden Salon! */
    .torch-altar-zone[data-zone-state="lit"] .zone-illuminated-content {
      filter: brightness(1.0) saturate(1.08) contrast(1.02) blur(0px);
      opacity: 1;
      pointer-events: auto;
      transition: filter 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.65s ease;
    }

    /* The Altar Sconce Socket Badge (Drop Target & One-Click Magnet Target) */
    .torch-sconce-socket {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 22;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 16px;
      border-radius: 999px;
      background: radial-gradient(circle at 50% 0%, rgba(48, 31, 16, 0.96) 0%, rgba(14, 11, 16, 0.98) 100%);
      border: 1.5px dashed rgba(243, 212, 137, 0.78);
      color: #fde68a;
      font-family: 'JetBrains Mono', 'Pretendard', monospace;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      cursor: pointer;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.92), 0 0 22px rgba(223, 177, 91, 0.28);
      transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
    }

    .torch-sconce-socket:hover,
    .torch-sconce-socket.drag-over {
      border-style: solid;
      border-color: #fef08a;
      background: radial-gradient(circle at 50% 50%, rgba(92, 48, 16, 0.98) 0%, rgba(24, 15, 10, 0.98) 100%);
      transform: translate(-50%, -50%) scale(1.06);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.95), 0 0 34px rgba(251, 191, 36, 0.72);
    }

    /* When the zone is LIT, dock the sconce socket cleanly at the top-right corner of the zone so it never blocks content! */
    .torch-altar-zone[data-zone-state="lit"] .torch-sconce-socket {
      top: -11px;
      left: auto;
      right: 14px;
      transform: none;
      padding: 2px 6px;
      border-style: solid;
      border-color: #fbbf24;
      background: rgba(24, 14, 8, 0.92);
      box-shadow: 0 0 20px rgba(251, 191, 36, 0.65);
      font-size: 9.5px;
    }

    /* When the zone is in EMBER state, show a warm glowing mini sconce at the center to re-plug anytime */
    .torch-altar-zone[data-zone-state="ember"] .torch-sconce-socket {
      border-color: rgba(251, 146, 60, 0.82);
      color: #fed7aa;
      background: rgba(28, 14, 9, 0.92);
      padding: 6px 14px;
      font-size: 10px;
    }

    .sconce-hole-ring {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1.5px solid #fbbf24;
      background: radial-gradient(circle, rgba(251, 191, 36, 0.35) 0%, rgba(10, 8, 12, 0.95) 75%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9), 0 0 10px rgba(251, 191, 36, 0.45);
      flex-shrink: 0;
    }

    /* STAGE-2 HIDDEN TRIGGER: Zone 3 (Secret Forest Ticket Sanctuary) is sealed/hidden until Zone 1 & Zone 2 are both visited! */
    .torch-altar-zone.stage2-hidden-sanctuary {
      transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .torch-altar-zone.stage2-hidden-sanctuary[data-sanctuary-sealed="true"] {
      opacity: 0.16;
      filter: grayscale(1) brightness(0.25);
      transform: translateY(6px) scale(0.98);
      pointer-events: none;
    }

    .torch-altar-zone.stage2-hidden-sanctuary[data-sanctuary-sealed="true"] .torch-sconce-socket {
      display: none !important;
    }

    .sanctuary-sealed-mystery-lock {
      position: absolute;
      inset: 0;
      z-index: 23;
      border-radius: 15px;
      background: linear-gradient(90deg, rgba(10, 8, 14, 0.96) 0%, rgba(18, 14, 22, 0.96) 50%, rgba(10, 8, 14, 0.96) 100%);
      border: 1px dashed rgba(223, 177, 91, 0.32);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: rgba(243, 212, 137, 0.65);
      font-family: 'JetBrains Mono', 'Pretendard', monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .torch-altar-zone.stage2-hidden-sanctuary[data-sanctuary-sealed="false"] .sanctuary-sealed-mystery-lock {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.45s ease, visibility 0.45s ease;
    }

    .torch-altar-zone.stage2-hidden-sanctuary[data-sanctuary-sealed="false"] {
      animation: altarSanctuaryRise 0.75s cubic-bezier(0.18, 1.25, 0.4, 1);
    }

    @keyframes altarSanctuaryRise {
      0% { opacity: 0; transform: translateY(18px) scale(0.94); filter: brightness(2.2); }
      100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
    }

    .torch-altar-zone[data-zone-state="lit"] .torch-sconce-socket .sconce-socket-text,
    .torch-altar-zone[data-zone-state="lit"] .torch-sconce-socket .sconce-hole-ring {
      display: none !important;
    }
    .under-dev-card-overlay.master-torch-unlocked .torch-sconce-socket {
      opacity: 0 !important;
      pointer-events: none !important;
    }
    /* Master Unlock Banner Glow when all 3 Altars are lit */
    .under-dev-card-overlay.master-torch-unlocked .torch-quest-bar {
      background: linear-gradient(90deg, rgba(42, 28, 12, 0.95) 0%, rgba(22, 38, 26, 0.95) 100%);
      border-color: #ffd700;
      box-shadow: 0 0 24px rgba(255, 215, 0, 0.38);
    }

    /* Forest First-Person Carried Torch & Spotlight Overlay inside #forest-ticket-modal */
    .forest-carried-torch-hud {
      position: absolute;
      bottom: -8px;
      right: 11%;
      z-index: 28;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform-origin: bottom center;
      animation: forestTorchWalkSway 2.2s ease-in-out infinite alternate;
      filter: drop-shadow(0 0 36px rgba(251, 191, 36, 0.85));
    }

    @keyframes forestTorchWalkSway {
      0% { transform: translateY(0px) rotate(-4deg); }
      100% { transform: translateY(-10px) rotate(3deg); }
    }

    .forest-carried-torch-flame {
      width: 44px;
      height: 62px;
      border-radius: 50% 50% 35% 35% / 65% 65% 35% 35%;
      background: radial-gradient(ellipse at 50% 68%, #ffffff 0%, #fef08a 28%, #f59e0b 62%, #ea580c 85%, transparent 100%);
      box-shadow: 0 0 48px 18px rgba(251, 191, 36, 0.75), 0 0 90px 36px rgba(234, 88, 12, 0.55);
      animation: torchFlameFlicker 0.24s ease-in-out infinite alternate;
    }

    .forest-carried-torch-handle {
      width: 14px;
      height: 95px;
      margin-top: -8px;
      border-radius: 5px;
      background: linear-gradient(90deg, #271509 0%, #78350f 48%, #dfb15b 52%, #1c0f06 100%);
      border: 1.5px solid #dfb15b;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.95);
    }

    /* ======================================================================
       4. ENCHANTED FOREST TICKET SANCTUARY MODAL (20 EUR -> WALK -> 99% COUPON -> 1 EUR)
       ====================================================================== */
    .forest-ticket-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: #040806;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.55s ease;
      font-family: 'Plus Jakarta Sans', 'Pretendard', sans-serif;
    }

    .forest-ticket-modal.open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .forest-scene-stage {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      transform-origin: 50% 49%;
      transform: scale(1.0);
      transition: transform 1.85s cubic-bezier(0.22, 1, 0.36, 1), filter 1.2s ease;
      will-change: transform;
    }

    /* Walking forward camera states */
    .forest-ticket-modal[data-walk-stage="walking"] .forest-scene-stage {
      transform: scale(1.26) translateY(-1.2%);
      animation: forestFootstepBob 0.62s ease-in-out 3;
    }

    .forest-ticket-modal[data-walk-stage="coupon"] .forest-scene-stage {
      transform: scale(1.28) translateY(-1.2%);
      filter: brightness(0.78);
    }

    .forest-ticket-modal[data-walk-stage="arrived"] .forest-scene-stage {
      transform: scale(1.52) translateY(-2.0%);
      filter: brightness(0.92);
    }

    @keyframes forestFootstepBob {
      0%, 100% { margin-top: 0px; }
      50% { margin-top: -9px; }
    }

    .forest-scene-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 48%;
      display: block;
    }

    .forest-scene-vignette {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 48%, transparent 25%, rgba(3, 8, 6, 0.72) 88%),
        linear-gradient(180deg, rgba(3, 8, 6, 0.55) 0%, transparent 28%, transparent 68%, rgba(3, 8, 6, 0.88) 100%);
      pointer-events: none;
    }

    /* Distant Glowing €20 Signpost over the Forest U22 Pavilion */
    .forest-distant-price-sign {
      position: absolute;
      top: 34%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(10, 14, 12, 0.86);
      border: 1.5px solid rgba(255, 215, 0, 0.78);
      border-radius: 14px;
      padding: 8px 18px;
      text-align: center;
      box-shadow: 0 0 32px rgba(255, 200, 80, 0.55), inset 0 0 14px rgba(255, 215, 0, 0.18);
      backdrop-filter: blur(8px);
      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
    }

    .forest-sign-eyebrow {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #86efac;
      text-transform: uppercase;
      margin-bottom: 2px;
    }

    .forest-sign-price-row {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 8px;
    }

    .forest-sign-old-price {
      font-family: 'Playfair Display', 'Cinzel', serif;
      font-size: 24px;
      font-weight: 800;
      color: #ffd700;
      letter-spacing: 0.06em;
      text-shadow: 0 0 18px rgba(255, 215, 0, 0.65);
      transition: all 0.4s ease;
    }

    .forest-sign-old-price.slashed {
      font-size: 15px;
      color: rgba(255, 255, 255, 0.45);
      text-decoration: line-through;
      text-shadow: none;
    }

    .forest-sign-new-price {
      display: none;
      font-family: 'Playfair Display', 'Cinzel', serif;
      font-size: 28px;
      font-weight: 900;
      color: #4ade80;
      letter-spacing: 0.04em;
      text-shadow: 0 0 22px rgba(74, 222, 128, 0.85);
    }

    .forest-sign-new-price.visible {
      display: inline-block;
      animation: couponPopBounce 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Top Navigation Bar inside Forest Modal */
    .forest-modal-topbar {
      position: absolute;
      top: 20px;
      left: 24px;
      right: 24px;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      pointer-events: none;
    }

    .forest-topbar-badge {
      pointer-events: auto;
      background: rgba(8, 14, 11, 0.85);
      border: 1px solid rgba(223, 177, 91, 0.45);
      color: #f5dfb0;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      padding: 7px 14px;
      border-radius: 999px;
      backdrop-filter: blur(10px);
    }

    .forest-close-btn {
      pointer-events: auto;
      background: rgba(10, 12, 14, 0.88);
      border: 1px solid rgba(223, 177, 91, 0.5);
      color: #ffd700;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      padding: 7px 16px;
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .forest-close-btn:hover {
      background: #dfb15b;
      color: #060807;
    }

    /* Stage 1 Prompt at Bottom of Forest Path */
    .forest-walk-prompt-wrap {
      position: absolute;
      bottom: 38px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .forest-ticket-modal:not([data-walk-stage="distant"]) .forest-walk-prompt-wrap {
      opacity: 0;
      pointer-events: none;
      transform: translateX(-50%) translateY(14px);
    }

    .forest-walk-start-btn {
      background: linear-gradient(135deg, rgba(22, 46, 33, 0.95) 0%, rgba(12, 24, 18, 0.98) 100%);
      border: 1.5px solid #ffd700;
      color: #ffd700;
      font-family: 'JetBrains Mono', 'Pretendard', sans-serif;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.12em;
      padding: 13px 26px;
      border-radius: 999px;
      cursor: pointer;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 24px rgba(255, 215, 0, 0.35);
      transition: all 0.25s ease;
    }

    .forest-walk-start-btn:hover {
      background: #ffd700;
      color: #06100b;
      transform: translateY(-2px);
    }

    /* Stage 2: Mid-Walk Secret Pop-Out Coupon Card */
    .forest-coupon-popcard {
      position: relative;
      z-index: 25;
      width: min(92vw, 430px);
      background:
        radial-gradient(circle at 50% 0%, rgba(74, 222, 128, 0.18) 0%, transparent 62%),
        linear-gradient(180deg, rgba(11, 20, 15, 0.97) 0%, rgba(8, 12, 10, 0.99) 100%);
      border: 2px solid #ffd700;
      border-radius: 22px;
      padding: 24px 22px;
      box-shadow: 0 28px 70px rgba(0, 0, 0, 0.95), 0 0 42px rgba(255, 215, 0, 0.32);
      text-align: center;
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .forest-ticket-modal[data-walk-stage="coupon"] .forest-coupon-popcard {
      display: flex;
      animation: couponPopBounce 0.52s cubic-bezier(0.18, 1.25, 0.4, 1);
    }

    @keyframes couponPopBounce {
      0% { opacity: 0; transform: scale(0.65) translateY(35px); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }

    .coupon-pop-badge {
      background: rgba(74, 222, 128, 0.16);
      border: 1px solid #4ade80;
      color: #4ade80;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.12em;
      padding: 4px 12px;
      border-radius: 999px;
    }

    .coupon-pop-headline {
      font-family: 'Pretendard', 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(16px, 4.2vw, 20px);
      font-weight: 800;
      color: #fff8e7;
      line-height: 1.35;
    }

    .coupon-pop-highlight-box {
      width: 100%;
      background: rgba(255, 215, 0, 0.10);
      border: 1px dashed rgba(255, 215, 0, 0.75);
      border-radius: 12px;
      padding: 10px 12px;
      color: #ffd700;
      font-family: 'JetBrains Mono', 'Pretendard', monospace;
      font-size: 12.5px;
      font-weight: 700;
      line-height: 1.45;
    }

    .coupon-input-row {
      display: flex;
      width: 100%;
      gap: 8px;
      margin-top: 2px;
    }

    .forest-coupon-input {
      flex: 1;
      background: rgba(5, 8, 7, 0.95);
      border: 1.5px solid rgba(223, 177, 91, 0.6);
      border-radius: 10px;
      padding: 11px 13px;
      color: #ffd700;
      font-family: 'JetBrains Mono', monospace;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.06em;
      outline: none;
      text-align: center;
    }

    .forest-coupon-input:focus {
      border-color: #4ade80;
      box-shadow: 0 0 14px rgba(74, 222, 128, 0.35);
    }

    .coupon-autofill-chip {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(223, 177, 91, 0.45);
      color: #f5dfb0;
      font-family: 'JetBrains Mono', 'Pretendard', monospace;
      font-size: 11px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .coupon-autofill-chip:hover {
      background: rgba(223, 177, 91, 0.22);
      border-color: #ffd700;
      color: #ffd700;
    }

    .coupon-apply-btn {
      width: 100%;
      background: linear-gradient(135deg, #dfb15b 0%, #f3d489 100%);
      border: none;
      color: #060907;
      font-family: 'JetBrains Mono', 'Pretendard', sans-serif;
      font-size: 13.5px;
      font-weight: 900;
      letter-spacing: 0.08em;
      padding: 13px 18px;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 8px 24px rgba(223, 177, 91, 0.45);
      transition: all 0.22s ease;
    }

    .coupon-apply-btn:hover {
      background: #ffd700;
      transform: translateY(-1px);
    }

    /* Stage 3: Arrived at Forest Pavilion €1.00 Checkout Card */
    .forest-checkout-card {
      position: relative;
      z-index: 25;
      width: min(92vw, 440px);
      background:
        radial-gradient(circle at 50% 0%, rgba(223, 177, 91, 0.22) 0%, transparent 65%),
        linear-gradient(180deg, rgba(12, 16, 14, 0.96) 0%, rgba(7, 10, 9, 0.99) 100%);
      border: 1.5px solid #ffd700;
      border-radius: 22px;
      padding: 22px;
      box-shadow: 0 28px 70px rgba(0, 0, 0, 0.95), 0 0 38px rgba(223, 177, 91, 0.28);
      display: none;
      flex-direction: column;
      gap: 12px;
      color: #f6ebd9;
    }

    .forest-ticket-modal[data-walk-stage="arrived"] .forest-checkout-card {
      display: flex;
      animation: couponPopBounce 0.48s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .forest-concept-pick-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }

    .forest-concept-pick-btn {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(223, 177, 91, 0.3);
      border-radius: 9px;
      padding: 8px 6px;
      color: #d6c7b2;
      font-family: 'JetBrains Mono', 'Pretendard', sans-serif;
      font-size: 10.5px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .forest-concept-pick-btn.active {
      background: rgba(223, 177, 91, 0.22);
      border-color: #ffd700;
      color: #ffd700;
      box-shadow: 0 0 12px rgba(255, 215, 0, 0.25);
    }

    .forest-price-receipt {
      background: rgba(5, 8, 7, 0.85);
      border: 1px solid rgba(223, 177, 91, 0.32);
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
    }

    .receipt-line {
      display: flex;
      justify-content: space-between;
      color: rgba(246, 235, 217, 0.78);
    }

    .receipt-line.discount {
      color: #4ade80;
      font-weight: 700;
    }

    .receipt-line.total {
      border-top: 1px dashed rgba(223, 177, 91, 0.35);
      padding-top: 7px;
      margin-top: 2px;
      font-size: 16px;
      font-weight: 900;
      color: #ffd700;
    }

    .forest-pay-1eur-btn {
      width: 100%;
      background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
      border: none;
      color: #041208;
      font-family: 'JetBrains Mono', 'Pretendard', sans-serif;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.06em;
      padding: 14px 18px;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 8px 25px rgba(74, 222, 128, 0.45);
      transition: all 0.22s ease;
    }

    .forest-pay-1eur-btn:hover {
      filter: brightness(1.08);
      transform: translateY(-1px);
    }

    /* ======================================================================
       U22 3D WINDOW-SASH PICTURE FRAME RIG (3D 창문틀 액자)
       Matches the real U22 left casement window frame (976:1095) with:
       - 34px physical 3D extruded side walls (Top/Bottom/Left/Right)
       - Stepped architectural window-sash molding bezel & recessed inner rabbet
       - Subtle real-window context rim & hardware (hinges / casement latch)
       - Interactive 3D perspective tilt on the flipped Party Info screen
       ====================================================================== */
    #symbol-trigger {
      perspective: 1500px;
      transform-style: preserve-3d;
    }

    /* Subtle feathered crop of the real U22 window frame & fairy lights right around the 3D frame */
    .window-room-bg-anchor {
      display: block !important;
      position: absolute;
      top: 50%;
      left: 50%;
      width: clamp(336px, 44vw, 556px);
      aspect-ratio: 976 / 1095;
      transform: translate(-50%, -50%) translateZ(-28px) scale(0.95);
      pointer-events: none;
      z-index: 1;
      opacity: 0;
      border-radius: 14px;
      overflow: hidden;
      mask-image: radial-gradient(ellipse 56% 56% at 50% 50%, rgba(0,0,0,0.95) 55%, rgba(0,0,0,0.45) 78%, transparent 98%);
      -webkit-mask-image: radial-gradient(ellipse 56% 56% at 50% 50%, rgba(0,0,0,0.95) 55%, rgba(0,0,0,0.45) 78%, transparent 98%);
      transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @media (max-width: 768px) {
      .window-room-bg-anchor {
        width: clamp(320px, 95vw, 468px);
      }
    }

    .window-room-bg-img {
      position: absolute;
      /* Align left casement window of u22_window_card_aligned_bg.jpg (x:31%..55.5%, y:20%..80%) to fill the frame */
      width: 315%;
      height: 156%;
      left: -96%;
      top: -28%;
      max-width: none;
      object-fit: cover;
      filter: brightness(0.88) contrast(1.08) saturate(1.12);
    }

    /* Show the surrounding real window frame & fairy-light lintel when frame is illuminated or flipped */
    #symbol-trigger:has(.gobo-canvas-frame.frame-illuminated) .window-room-bg-anchor,
    body.vip-pass-flipped .window-room-bg-anchor {
      opacity: 0.72;
      transform: translate(-50%, -50%) translateZ(-28px) scale(1.0);
    }

    /* 3D Extruded Window-Sash Frame Thickness Box (Rotates 0deg -> 180deg with the card) */
    .u22-3d-window-frame-box {
      position: absolute;
      top: 50%;
      left: 50%;
      width: clamp(290px, 38vw, 480px);
      aspect-ratio: 976 / 1095;
      pointer-events: none;
      z-index: 64;
      will-change: transform;
      transform-style: preserve-3d;
      opacity: 0;
      transform: translate(-50%, -50%) perspective(1500px) rotateX(0deg) rotateY(0deg) scale(0.92);
      transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
    }

    @media (max-width: 768px) {
      .u22-3d-window-frame-box {
        width: clamp(290px, 88vw, 420px);
      }
    }

    #symbol-trigger:has(.gobo-canvas-frame.frame-illuminated) .u22-3d-window-frame-box,
    body.vip-pass-flipped .u22-3d-window-frame-box {
      opacity: 1;
    }

    /* 4 Extruded 3D Side Slabs (34px Thickness in Z-space: -17px to +17px) */
    .u22-wf-slab {
      position: absolute;
      pointer-events: none;
      box-sizing: border-box;
      backface-visibility: visible;
    }

    .u22-wf-slab-left {
      top: 0;
      left: -17px;
      width: 34px;
      height: 100%;
      transform: rotateY(-90deg);
      transform-origin: center center;
      background:
        linear-gradient(90deg,
          #16120f 0%,
          #2e251e 28%,
          #dfb15b 48%,
          #f3d489 50%,
          #dfb15b 52%,
          #2e251e 72%,
          #120f0c 100%);
      border-top: 1px solid rgba(243, 212, 137, 0.45);
      border-bottom: 1px solid rgba(243, 212, 137, 0.45);
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.85);
    }

    .u22-wf-slab-right {
      top: 0;
      right: -17px;
      width: 34px;
      height: 100%;
      transform: rotateY(90deg);
      transform-origin: center center;
      background:
        linear-gradient(90deg,
          #120f0c 0%,
          #2e251e 28%,
          #dfb15b 48%,
          #f3d489 50%,
          #dfb15b 52%,
          #2e251e 72%,
          #16120f 100%);
      border-top: 1px solid rgba(243, 212, 137, 0.45);
      border-bottom: 1px solid rgba(243, 212, 137, 0.45);
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.85);
    }

    .u22-wf-slab-top {
      top: -17px;
      left: 0;
      width: 100%;
      height: 34px;
      transform: rotateX(90deg);
      transform-origin: center center;
      background:
        linear-gradient(180deg,
          #1a1511 0%,
          #352b22 30%,
          #dfb15b 48%,
          #f3d489 50%,
          #dfb15b 52%,
          #352b22 70%,
          #14100d 100%);
      border-left: 1px solid rgba(243, 212, 137, 0.45);
      border-right: 1px solid rgba(243, 212, 137, 0.45);
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.85);
    }

    .u22-wf-slab-bottom {
      bottom: -17px;
      left: 0;
      width: 100%;
      height: 34px;
      transform: rotateX(-90deg);
      transform-origin: center center;
      background:
        linear-gradient(180deg,
          #100d0a 0%,
          #251e18 30%,
          #b88c3e 48%,
          #dfb15b 50%,
          #b88c3e 52%,
          #251e18 70%,
          #0c0a08 100%);
      border-left: 1px solid rgba(223, 177, 91, 0.38);
      border-right: 1px solid rgba(223, 177, 91, 0.38);
      box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.92);
    }

    /* Architectural Window-Sash Molding Bezel on Front & Back Faces */
    .u22-window-sash-molding {
      position: absolute;
      inset: -14px;
      pointer-events: none;
      z-index: 40;
      border-radius: 10px;
      /* Stepped 3D window frame profile: outer dark bronze-wood sash + mitered highlight + deep inner rabbet */
      border: 14px solid #231d18;
      box-shadow:
        0 0 0 1.5px rgba(243, 212, 137, 0.65),
        0 0 0 5px #14110e,
        0 0 0 6px rgba(223, 177, 91, 0.32),
        0 26px 70px rgba(0, 0, 0, 0.96),
        inset 0 0 0 1.5px rgba(243, 212, 137, 0.52),
        inset 0 0 0 7px #120f0d,
        inset 0 0 0 8px rgba(223, 177, 91, 0.25),
        inset 0 10px 26px rgba(0, 0, 0, 0.95);
      background:
        linear-gradient(135deg, rgba(255, 236, 190, 0.12) 0%, transparent 22%, transparent 78%, rgba(223, 177, 91, 0.08) 100%);
      opacity: 0;
      transition: opacity 0.7s ease;
    }

    /* Subtle U22 Window Casement Hardware Details (Left Hinge Barrels & Bottom-Right Latch) */
    .u22-window-sash-molding::before {
      content: '';
      position: absolute;
      left: -13px;
      top: 16%;
      width: 5px;
      height: 34px;
      border-radius: 3px;
      background: linear-gradient(90deg, #5c4b37, #dfb15b, #3a2f23);
      box-shadow:
        0 260px 0 0 #8a7048,
        0 0 6px rgba(0, 0, 0, 0.9);
    }

    .u22-window-sash-molding::after {
      content: '';
      position: absolute;
      right: -12px;
      bottom: 14%;
      width: 6px;
      height: 42px;
      border-radius: 3px;
      background: linear-gradient(90deg, #3e3326, #f3d489, #544432);
      box-shadow: -2px 3px 8px rgba(0, 0, 0, 0.92);
    }

    .gobo-canvas-frame.frame-illuminated .u22-window-sash-molding,
    .under-dev-card-overlay .u22-window-sash-molding {
      opacity: 1;
    }

    /* True 3D Synchronized Flip Physics (GPU Compositor Only, Zero Plane Intersection) */
    .gobo-canvas-frame {
      border-radius: 8px !important;
      will-change: transform;
      transform: perspective(1500px) rotateX(0deg) rotateY(0deg) translateZ(17px) !important;
      transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                  background 0.8s ease,
                  border-color 0.8s ease !important;
      backface-visibility: hidden !important;
      -webkit-backface-visibility: hidden !important;
    }

    .gobo-canvas-frame.frame-illuminated {
      border-radius: 8px !important;
      transform: perspective(1500px) rotateX(0deg) rotateY(0deg) translateZ(17px) scale(0.92) !important;
    }

    .gobo-canvas-frame.card-flipped-out {
      /* Smoothly fade out front circle once flipped so it NEVER slices through the zoomed-in back webpage! */
      opacity: 0 !important;
      visibility: hidden !important;
      transform: perspective(1500px) rotateX(2deg) rotateY(180deg) translateZ(-60px) scale(0.62) !important;
      transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.38s ease 0.22s, visibility 0s linear 0.62s !important;
      pointer-events: none !important;
    }

    .gobo-canvas-frame.card-flipped-out .gobo-light-rig *,
    .gobo-canvas-frame.card-flipped-out .gobo-symbol-rig * {
      animation-play-state: paused !important;
    }

    .under-dev-card-overlay {
      width: min(92vw, 760px) !important;
      height: min(85vh, 624px) !important;
      aspect-ratio: auto !important;
      container-type: normal !important;
      overflow: visible !important;
      border-radius: 16px !important;
      padding: 18px 24px !important;
      opacity: 1 !important;
      visibility: visible !important;
      will-change: transform, box-shadow;
      transform-style: flat !important;
      backface-visibility: hidden !important;
      -webkit-backface-visibility: hidden !important;
      background:
        radial-gradient(circle at 50% 8%, rgba(223, 177, 91, 0.20) 0%, transparent 55%),
        radial-gradient(circle at 85% 85%, rgba(162, 28, 56, 0.24) 0%, transparent 60%),
        linear-gradient(180deg, #151119 0%, #0b090f 100%) !important;
      /* Start at 0.62 scale so during the 180deg flip it matches the exact 470px size of the front 3D window frame */
      transform: translate(-50%, -50%) perspective(1500px) rotateX(0deg) rotateY(-180deg) translateZ(24px) scale(0.62) !important;
      transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.85s ease !important;
    }

    /* Step 1: Flip 180deg & pause 0.3s at the tilted 3D window frame pose */
    .under-dev-card-overlay.active {
      pointer-events: auto !important;
      transform-style: flat !important;
      z-index: 90 !important;
      transform: translate(-50%, -50%) perspective(1500px) rotateX(2.5deg) rotateY(-7deg) translateZ(24px) scale(0.64) !important;
    }

    /* Step 2 (After 0.3s pause): Zoom in smoothly to full-screen Luxury Salon Webpage with crisp outer frame margin! */
    .under-dev-card-overlay.active.webpage-zoomed {
      transform: translate(-50%, -50%) perspective(1500px) rotateX(0deg) rotateY(0deg) translateZ(0px) scale(0.93) !important;
      box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.96),
        0 0 60px rgba(223, 177, 91, 0.22),
        0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
    }

    body.vip-pass-flipped .u22-3d-window-frame-box {
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translate(-50%, -50%) perspective(1500px) rotateX(2deg) rotateY(174deg) translateZ(-30px) scale(0.92) !important;
    }

    body.vip-pass-flipped .vip-pass-spotlight-fixture,
    body.vip-pass-flipped .vip-pass-volumetric-cone {
      pointer-events: none !important;
      z-index: 95 !important;
      transition: top 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease !important;
    }

    #symbol-trigger:has(.under-dev-card-overlay.webpage-zoomed) .vip-pass-spotlight-fixture {
      top: -42px !important;
    }
    #symbol-trigger:has(.under-dev-card-overlay.webpage-zoomed) .vip-pass-volumetric-cone {
      top: -32px !important;
    }

    .forest-ticket-modal[data-walk-stage='coupon'] .forest-distant-price-sign {
      opacity: 0;
      transform: translate(-50%, -70%) scale(0.9);
    }

    .forest-ticket-modal[data-walk-stage='arrived'] .forest-distant-price-sign {
      top: 14%;
      transform: translate(-50%, -50%) scale(0.82);
    }


    /* ======================================================================
       JSF BESPOKE COUTURE TYPOGRAPHY: 3-SECOND CENTER REVEAL (ZERO-BOX)
       & ULTRA-MINIMAL BOTTOM MP3 PLAYER (TITLE + MUTE ONLY)
       ====================================================================== */
    /* Gently soften background elements for 3s while center track title blooms so it is 100% legible without any box */
    body.jsf-nowplaying-center-active .noir-signature-reveal {
      opacity: 0.14 !important;
      filter: blur(5px) !important;
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    body.jsf-nowplaying-center-active .gobo-symbol-rig,
    body.jsf-nowplaying-center-active .gobo-light-rig {
      filter: brightness(0.45) blur(3px) !important;
      transition: filter 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* 1. Center 3-Second Zero-Box Floating Track Typography */
    .jsf-center-nowplaying-stage {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -46%) scale(0.96);
      z-index: 100500;
      pointer-events: none;
      user-select: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      /* STRICT ZERO-BOX DOCTRINE: No background, no border, no pill */
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      opacity: 0;
      visibility: hidden;
      filter: blur(10px);
      will-change: opacity, transform, filter;
      transition:
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.85s;
    }

    .jsf-center-nowplaying-stage.active {
      opacity: 1;
      visibility: visible;
      filter: blur(0px);
      transform: translate(-50%, -50%) scale(1.0);
    }

    .jsf-center-nowplaying-stage.dissolving-to-bottom {
      opacity: 0;
      visibility: hidden;
      filter: blur(6px);
      transform: translate(-50%, calc(-50% + 26px)) scale(0.94);
      transition:
        opacity 0.78s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.78s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.78s ease,
        visibility 0.78s;
    }

    .jsf-np-main-line {
      display: inline-flex;
      align-items: baseline;
      justify-content: center;
      gap: clamp(10px, 1.4vw, 18px);
      white-space: nowrap;
      font-family: 'JSF Maison', 'Gehirn Isomorphic', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
      font-size: clamp(22px, 3.1vw, 38px);
      line-height: 1.15;
      letter-spacing: 0.08em;
      /* Multi-layer dark optical veil + 18K champagne gold luminescence so it is subtle yet unmistakably clear without a box */
      filter:
        drop-shadow(0 2px 10px rgba(0, 0, 0, 0.98))
        drop-shadow(0 0 26px rgba(0, 0, 0, 0.96))
        drop-shadow(0 0 22px rgba(243, 212, 137, 0.42));
      animation: jsfCenterTrackBreathe 3.0s ease-in-out infinite alternate;
    }

    @keyframes jsfCenterTrackBreathe {
      0% { letter-spacing: 0.075em; }
      100% { letter-spacing: 0.095em; }
    }

    /* Bespoke Musical Note Icon (♪) with subtle golden harmonic pulse */
    .jsf-np-music-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #f3d489;
      font-family: 'JSF Maison', 'Cormorant Garamond', serif;
      font-size: 1.05em;
      font-style: normal;
      transform: translateY(-0.04em);
      text-shadow: 0 0 18px rgba(243, 212, 137, 0.88), 0 0 34px rgba(223, 177, 91, 0.55);
      animation: jsfNoteFloat 1.8s ease-in-out infinite alternate;
    }

    @keyframes jsfNoteFloat {
      0% { transform: translateY(-0.02em) rotate(-4deg) scale(0.96); opacity: 0.85; }
      100% { transform: translateY(-0.10em) rotate(4deg) scale(1.06); opacity: 1.0; }
    }

    .jsf-np-artist {
      font-family: 'JSF Maison', 'Gehirn Isomorphic', 'Cormorant Garamond', Georgia, serif;
      font-weight: 600;
      font-style: normal;
      color: #fdf9f0;
      letter-spacing: 0.12em;
      text-shadow: 0 0 20px rgba(255, 248, 231, 0.35);
    }

    .jsf-np-dash {
      font-family: 'JSF Maison', 'Cormorant Garamond', serif;
      font-weight: 300;
      color: rgba(223, 177, 91, 0.82);
      margin: 0 2px;
    }

    .jsf-np-title {
      font-family: 'JSF Maison', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
      font-weight: 500;
      font-style: italic;
      letter-spacing: 0.06em;
      background: linear-gradient(90deg, #fffdf8 0%, #f5dfb0 48%, #dfb15b 82%, #fffdf8 100%);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: jsfGoldSilkShimmer 3.2s linear infinite;
    }

    @keyframes jsfGoldSilkShimmer {
      0% { background-position: 0% center; }
      100% { background-position: 200% center; }
    }

    /* Delicate optical filament underline that expands beneath the typography */
    .jsf-np-filament {
      margin-top: 10px;
      width: 0px;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(223, 177, 91, 0.72) 50%, transparent 100%);
      box-shadow: 0 0 12px rgba(243, 212, 137, 0.65);
      transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
    }

    .jsf-center-nowplaying-stage.active .jsf-np-filament {
      width: min(68vw, 340px);
    }

    /* 2. Bottom Ultra-Minimal MP3 Player (1:1 Locked Inside Bottom Cinema Letterbox Bar, dvh + cqw + Flex 50/50 Centered) */
    .jsf-minimal-mp3-bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: calc(var(--jsf-letterbox-h, clamp(38px, 6.2dvh, 64px)) + var(--jsf-safe-bottom, 0px));
      padding: 0 16px var(--jsf-safe-bottom, 0px) 16px;
      box-sizing: border-box;
      z-index: 100400;
      container-type: inline-size;
      container-name: jsf-mp3-letterbox;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(9px, 2.2cqw, 15px);
      /* Persistent subtle cinema letterbox black band so even after intro curtain unveils, the bottom black bar frames the MP3 player cleanly */
      background: linear-gradient(180deg, rgba(3, 3, 4, 0.92) 0%, #030304 100%) !important;
      border-top: 1px solid rgba(223, 177, 91, 0.14) !important;
      box-shadow: none !important;
      line-height: 1 !important;
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(4px);
      transition:
        opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.75s;
      user-select: none;
      white-space: nowrap;
    }

    .jsf-minimal-mp3-bar.visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }

    .jsf-mp3-track-info {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: clamp(5px, 1.4cqw, 8px);
      height: 16px;
      font-family: 'JSF Maison', 'Gehirn Isomorphic', 'Cormorant Garamond', Georgia, serif;
      font-size: clamp(12px, 3.4cqw, 15.5px);
      line-height: 1 !important;
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
      letter-spacing: 0.06em;
      color: rgba(251, 240, 217, 0.94);
      text-shadow:
        0 1px 8px rgba(0, 0, 0, 0.98),
        0 0 16px rgba(0, 0, 0, 0.95),
        0 0 12px rgba(223, 177, 91, 0.32);
      white-space: nowrap;
      pointer-events: none;
      transition: opacity 0.3s ease;
      margin: 0;
      padding: 0;
    }

    .jsf-mp3-track-info > span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      line-height: 1 !important;
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
    }

    .jsf-minimal-mp3-bar.is-muted .jsf-mp3-track-info {
      opacity: 0.46;
    }

    .jsf-mp3-note-glyph {
      color: #f3d489;
      font-size: 1.02em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transform: translateY(0);
      animation: jsfNoteBreath 2.2s ease-in-out infinite alternate;
    }

    @keyframes jsfNoteBreath {
      0% { opacity: 0.82; text-shadow: 0 0 8px rgba(243, 212, 137, 0.45); }
      100% { opacity: 1.0; text-shadow: 0 0 16px rgba(243, 212, 137, 0.95); }
    }

    .jsf-minimal-mp3-bar.is-muted .jsf-mp3-note-glyph {
      animation: none;
      opacity: 0.5;
    }

    .jsf-mp3-artist {
      font-weight: 600;
      color: #fdf9f0;
      letter-spacing: 0.08em;
    }

    .jsf-mp3-sep {
      color: rgba(223, 177, 91, 0.78);
      margin: 0 1px;
    }

    .jsf-mp3-song {
      font-style: italic;
      font-weight: 500;
      color: #f3d489;
    }

    /* Ultra-minimal Mute/Unmute button (Subtle Couture Interactive Affordance & Breathing Shimmer) */
    .jsf-mp3-mute-btn {
      appearance: none;
      background: radial-gradient(ellipse at 50% 50%, rgba(223, 177, 91, 0.11) 0%, rgba(223, 177, 91, 0.03) 68%, transparent 100%);
      border: 1px solid rgba(223, 177, 91, 0.28);
      border-radius: 999px;
      padding: 0 clamp(8px, 1.8cqw, 11px);
      margin: 0;
      height: clamp(20px, 3.8dvh, 23px);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: clamp(4px, 1.1cqw, 6px);
      color: #f6dfa4;
      font-family: 'JSF Maison', 'Gehirn Isomorphic', Georgia, serif;
      font-size: clamp(10px, 2.7cqw, 12.5px);
      line-height: 1 !important;
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.98);
      transition:
        color 0.28s ease,
        border-color 0.28s ease,
        background 0.28s ease,
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.28s ease;
      position: relative;
      overflow: hidden;
      animation: jsfMuteAffordanceBreathe 3.2s ease-in-out infinite;
    }

    @keyframes jsfMuteAffordanceBreathe {
      0%, 100% {
        border-color: rgba(223, 177, 91, 0.26);
        box-shadow: 0 0 8px rgba(223, 177, 91, 0.08), inset 0 0 6px rgba(223, 177, 91, 0.05);
      }
      50% {
        border-color: rgba(243, 212, 137, 0.62);
        box-shadow: 0 0 15px rgba(243, 212, 137, 0.26), inset 0 0 10px rgba(243, 212, 137, 0.14);
      }
    }

    /* Subtle traveling 18K silk light sweep across the MUTE button so it feels tactile & clickable */
    .jsf-mp3-mute-btn::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: -120%;
      width: 85%;
      background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 248, 224, 0.04) 30%,
        rgba(255, 238, 186, 0.28) 50%,
        rgba(255, 248, 224, 0.04) 70%,
        transparent 100%
      );
      pointer-events: none;
      animation: jsfMuteSilkSweep 4.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    }

    @keyframes jsfMuteSilkSweep {
      0% { left: -120%; opacity: 0; }
      15% { opacity: 1; }
      55% { left: 140%; opacity: 1; }
      100% { left: 140%; opacity: 0; }
    }

    /* Delicate luminous filament along the bottom rim of the pill */
    .jsf-mp3-mute-btn::after {
      content: '';
      position: absolute;
      left: 20%;
      right: 20%;
      bottom: 0px;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(243, 212, 137, 0.78) 50%, transparent 100%);
      transition: left 0.28s ease, right 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
    }

    .jsf-mp3-mute-btn:hover {
      color: #ffffff;
      border-color: rgba(255, 224, 140, 0.85);
      background: radial-gradient(ellipse at 50% 50%, rgba(223, 177, 91, 0.24) 0%, rgba(223, 177, 91, 0.08) 75%, transparent 100%);
      transform: translateY(-0.5px) scale(1.03);
      text-shadow: 0 0 12px rgba(243, 212, 137, 0.95);
      box-shadow: 0 0 18px rgba(243, 212, 137, 0.42), inset 0 0 10px rgba(243, 212, 137, 0.18);
    }

    .jsf-mp3-mute-btn:hover::after {
      left: 10%;
      right: 10%;
      background: linear-gradient(90deg, transparent 0%, #ffd700 50%, transparent 100%);
      box-shadow: 0 0 8px rgba(255, 215, 0, 0.85);
    }

    .jsf-mp3-mute-btn:active {
      transform: translateY(0.5px) scale(0.97);
    }

    .jsf-minimal-mp3-bar.is-muted .jsf-mp3-mute-btn {
      color: rgba(238, 192, 196, 0.92);
      border-color: rgba(232, 180, 184, 0.38);
      background: radial-gradient(ellipse at 50% 50%, rgba(190, 45, 78, 0.14) 0%, transparent 80%);
      animation-name: jsfUnmuteAffordanceBreathe;
    }

    @keyframes jsfUnmuteAffordanceBreathe {
      0%, 100% {
        border-color: rgba(232, 180, 184, 0.28);
        box-shadow: 0 0 8px rgba(232, 180, 184, 0.08);
      }
      50% {
        border-color: rgba(244, 162, 172, 0.65);
        box-shadow: 0 0 15px rgba(244, 162, 172, 0.28);
      }
    }

    .jsf-minimal-mp3-bar.is-muted .jsf-mp3-mute-btn::after {
      background: linear-gradient(90deg, transparent 0%, rgba(232, 180, 184, 0.72) 50%, transparent 100%);
    }

    .jsf-mp3-eq-mini {
      display: inline-flex;
      align-items: flex-end;
      gap: 1.5px;
      height: 9px;
      flex-shrink: 0;
    }

    .jsf-mp3-eq-mini i {
      display: block;
      width: 1.5px;
      background: currentColor;
      border-radius: 1px;
      animation: salonEqBounce 0.85s ease-in-out infinite alternate;
    }
    .jsf-mp3-eq-mini i:nth-child(1) { height: 4px; animation-delay: 0s; }
    .jsf-mp3-eq-mini i:nth-child(2) { height: 9px; animation-delay: 0.22s; }
    .jsf-mp3-eq-mini i:nth-child(3) { height: 6px; animation-delay: 0.4s; }

    .jsf-minimal-mp3-bar.is-muted .jsf-mp3-eq-mini i {
      animation: none !important;
      height: 2px !important;
      opacity: 0.5;
    }


    /* ======================================================================
       PURE 3-BLOCK VISUAL BACK FACE (LOCATION · PHOTOS · PAYMENT)
       + ZERO FRONT CIRCLE ARTIFACT WHEN FLIPPED
       ====================================================================== */
    body.vip-pass-flipped #gobo-canvas-frame,
    body.vip-pass-flipped .gobo-canvas-frame,
    body.vip-pass-flipped .gobo-light-rig,
    body.vip-pass-flipped .gobo-symbol-rig,
    body.vip-pass-flipped #gobo-canvas {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transition: opacity 0.25s ease, visibility 0s linear 0.25s !important;
    }

    .under-dev-card-overlay {
      display: grid !important;
      grid-template-rows: 1.15fr 1.15fr 0.78fr !important;
      gap: 12px !important;
      padding: 14px !important;
      background: #040407 !important;
    }

    /* Minimal Corner Flip Back Button */
    .under-dev-card-overlay .jesse-flip-back-pill {
      position: absolute !important;
      top: 22px !important;
      right: 24px !important;
      z-index: 45 !important;
      width: 32px !important;
      height: 32px !important;
      padding: 0 !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: rgba(8, 7, 12, 0.78) !important;
      border: 1px solid rgba(223, 177, 91, 0.45) !important;
      color: #f3d489 !important;
      font-size: 14px !important;
      backdrop-filter: blur(8px) !important;
    }

    /* Floating Grab-Torch Dock (Bottom-Center / Left Floating Sconce) */
    .under-dev-card-overlay .torch-cradle-dock {
      position: absolute !important;
      top: 22px !important;
      left: 24px !important;
      z-index: 48 !important;
      padding: 4px !important;
      min-height: 0 !important;
      border-radius: 50% !important;
      background: radial-gradient(circle, rgba(44, 24, 10, 0.92) 0%, rgba(10, 8, 12, 0.95) 100%) !important;
      border: 1.5px solid rgba(251, 191, 36, 0.75) !important;
      box-shadow: 0 0 24px rgba(251, 191, 36, 0.45) !important;
    }

    .under-dev-card-overlay .salon-torch-artifact {
      padding: 7px 11px !important;
      border-radius: 999px !important;
    }

    /* Each of the 3 Visual Zones fills its grid row 100% */
    .pure-visual-zone-map,
    .pure-visual-zone-photos,
    .pure-visual-zone-pay {
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      border-radius: 14px !important;
      overflow: hidden !important;
      position: relative !important;
    }

    .pure-visual-zone-map .pass-map-widget {
      width: 100% !important;
      height: 100% !important;
      border-radius: 14px !important;
    }

    .pure-map-pin-btn {
      position: absolute !important;
      bottom: 12px !important;
      right: 12px !important;
      z-index: 8 !important;
      font-family: 'JSF Maison', Georgia, serif !important;
      font-size: 11.5px !important;
      letter-spacing: 0.12em !important;
      padding: 7px 15px !important;
    }

    .pure-visual-zone-photos .salon-concept-strip {
      width: 100% !important;
      height: 100% !important;
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 10px !important;
    }

    .pure-visual-zone-photos .salon-concept-card {
      width: 100% !important;
      height: 100% !important;
      border-radius: 12px !important;
    }

    .pure-visual-zone-pay .pass-forest-ticket-btn {
      width: 100% !important;
      height: 100% !important;
      border-radius: 14px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .pure-pay-center-pill {
      position: relative;
      z-index: 5;
      display: inline-flex;
      align-items: center;
      gap: 16px;
      padding: 10px 28px;
      border-radius: 999px;
      background: rgba(8, 10, 9, 0.86);
      border: 1.5px solid rgba(243, 212, 137, 0.85);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 28px rgba(223, 177, 91, 0.42);
      backdrop-filter: blur(10px);
    }

    .pure-pay-amount {
      font-family: 'JSF Maison', Georgia, serif;
      font-size: clamp(20px, 2.4vw, 28px);
      font-weight: 600;
      color: #ffd700;
      letter-spacing: 0.08em;
    }

    .pure-pay-arrow {
      font-family: 'JSF Maison', Georgia, serif;
      font-size: 13px;
      font-weight: 600;
      color: #fdf9f0;
      letter-spacing: 0.16em;
      padding-left: 14px;
      border-left: 1px solid rgba(223, 177, 91, 0.45);
    }

    /* Pitch-Black Unlit State -> Pure Golden Sconce Ring in the dark */
    .torch-altar-zone[data-zone-state="unlit"] .zone-illuminated-content {
      filter: brightness(0.02) saturate(0) blur(6px) !important;
      opacity: 0.08 !important;
    }

    .torch-altar-zone[data-zone-state="ember"] .zone-illuminated-content {
      filter: brightness(0.78) saturate(0.95) blur(0px) !important;
      opacity: 0.92 !important;
      pointer-events: auto !important;
    }

    .torch-altar-zone[data-zone-state="ember"]::after {
      display: none !important;
    }

    .torch-sconce-socket {
      width: 44px !important;
      height: 44px !important;
      padding: 0 !important;
      border-radius: 50% !important;
      justify-content: center !important;
      background: radial-gradient(circle, rgba(68, 38, 12, 0.95) 0%, rgba(10, 8, 12, 0.98) 100%) !important;
      border: 1.5px solid rgba(251, 191, 36, 0.85) !important;
      box-shadow: 0 0 28px rgba(251, 191, 36, 0.55), inset 0 0 10px rgba(251, 191, 36, 0.35) !important;
    }

    .torch-altar-zone[data-zone-state="lit"] .torch-sconce-socket,
    .torch-altar-zone[data-zone-state="ember"] .torch-sconce-socket {
      top: 10px !important;
      right: 10px !important;
      left: auto !important;
      transform: none !important;
      width: 32px !important;
      height: 32px !important;
    }


    body.vip-pass-flipped .vip-pass-spotlight-fixture,
    body.vip-pass-flipped .vip-pass-volumetric-cone {
      top: -42px !important;
    }
    @media (max-width: 768px) {
      .under-dev-card-overlay {
        width: min(92vw, 440px) !important;
        height: min(76vh, 620px) !important;
      }
      body.vip-pass-flipped .vip-pass-spotlight-fixture {
        top: 6px !important;
      }
      body.vip-pass-flipped .vip-pass-volumetric-cone {
        top: 14px !important;
      }
    }

                            /* === MINIATURE SEAN STOP-MOTION PUPPET & INSTAGRAM VIP SYSTEM START === */
    /* ======================================================================
       CREATIVE INSTAGRAM CIRCULAR AVATAR TORCH BADGE & MINI PASS CARD
       3 Switchable Haute Designs:
       - [data-badge-design="ring"]  : Circular IG Story Flame-Ring Medallion Badge
       - [data-badge-design="card"]  : Horizontal Glassmorphic IG Profile Pass Card
       - [data-badge-design="vinyl"] : Spinning Vinyl LP / 24K Gold Wax-Seal Stamp
       ====================================================================== */
    .under-dev-card-overlay .torch-cradle-dock {
      position: absolute !important;
      top: 14px !important;
      left: 16px !important;
      z-index: 52 !important;
      padding: 0 !important;
      min-height: 0 !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      cursor: grab !important;
    }

    .salon-torch-artifact.ig-torch-badge {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      padding: 5px 10px 5px 5px !important;
      border-radius: 999px !important;
      background: linear-gradient(145deg, rgba(18, 14, 12, 0.94) 0%, rgba(8, 7, 11, 0.97) 100%) !important;
      border: 1.5px solid rgba(243, 212, 137, 0.72) !important;
      box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.92),
        0 0 24px rgba(251, 191, 36, 0.38),
        inset 0 1px 0 rgba(255, 248, 224, 0.25) !important;
      cursor: grab !important;
      user-select: none !important;
      -webkit-user-select: none !important;
      backdrop-filter: blur(10px) !important;
      transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
    }

    .salon-torch-artifact.ig-torch-badge:hover {
      transform: translateY(-2px) scale(1.04) !important;
      border-color: #ffd700 !important;
      box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.95),
        0 0 34px rgba(251, 191, 36, 0.72) !important;
    }

    /* Circular Instagram Story / Flame Ring Wrapper */
    .ig-badge-avatar-ring {
      position: relative !important;
      width: 52px !important;
      height: 52px !important;
      border-radius: 50% !important;
      padding: 3px !important;
      background: conic-gradient(
        from 0deg,
        #f59e0b 0deg,
        #ec4899 95deg,
        #fbbf24 190deg,
        #fde047 275deg,
        #f59e0b 360deg
      ) !important;
      box-shadow: 0 0 18px rgba(251, 191, 36, 0.55) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-shrink: 0 !important;
    }

    /* 3-Segment SVG Progress Ring around the IG Avatar */
    .ig-badge-progress-svg {
      position: absolute !important;
      inset: -4px !important;
      width: calc(100% + 8px) !important;
      height: calc(100% + 8px) !important;
      transform: rotate(-90deg) !important;
      pointer-events: none !important;
      z-index: 3 !important;
    }

    .ig-ring-track {
      fill: none !important;
      stroke: rgba(255, 255, 255, 0.12) !important;
      stroke-width: 2.2 !important;
    }

    .ig-ring-seg {
      fill: none !important;
      stroke: rgba(251, 191, 36, 0.18) !important;
      stroke-width: 3.0 !important;
      stroke-linecap: round !important;
      transition: stroke 0.35s ease, filter 0.35s ease !important;
    }

    .ig-ring-seg.lit {
      stroke: #fde047 !important;
      filter: drop-shadow(0 0 6px rgba(253, 224, 71, 0.95)) !important;
    }

    /* Inner Circular Portrait Photo (Zoomed cleanly onto Sean's smiling face) */
    .ig-badge-photo-circle {
      width: 100% !important;
      height: 100% !important;
      border-radius: 50% !important;
      overflow: hidden !important;
      border: 2px solid #09080c !important;
      background: #121016 !important;
      position: relative !important;
      z-index: 2 !important;
    }

    .ig-badge-portrait-img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: 48% 26% !important;
      transform: scale(1.65) !important;
      filter: contrast(1.06) brightness(1.04) !important;
      pointer-events: none !important;
      display: block !important;
    }

    /* Live 2200K Torch Flame Crown at the Top-Right of the Circular IG Ring */
    .ig-badge-avatar-ring .ig-crown-flame {
      position: absolute !important;
      top: -11px !important;
      right: -5px !important;
      width: 20px !important;
      height: 25px !important;
      z-index: 6 !important;
      pointer-events: none !important;
      filter: drop-shadow(0 0 10px rgba(255, 190, 40, 0.98)) drop-shadow(0 0 20px rgba(255, 110, 15, 0.85)) !important;
    }

    /* Verified Star / Check Pip at Bottom-Right of Circular IG Ring */
    .ig-verified-check-pip {
      position: absolute !important;
      bottom: -2px !important;
      right: -2px !important;
      width: 17px !important;
      height: 17px !important;
      border-radius: 50% !important;
      background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
      border: 1.5px solid #09080c !important;
      color: #09080c !important;
      font-size: 9.5px !important;
      font-weight: 800 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      z-index: 6 !important;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
    }

    /* Card Text Meta (@just.sean.flows + 🔥 TORCH KEY) */
    .ig-badge-card-meta {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      justify-content: center !important;
      gap: 2px !important;
      padding-right: 4px !important;
    }

    .ig-badge-handle {
      font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
      font-size: 10.5px !important;
      font-weight: 600 !important;
      letter-spacing: 0.03em !important;
      color: #fff8e7 !important;
      line-height: 1.1 !important;
      white-space: nowrap !important;
    }

    .ig-badge-sub {
      font-family: 'JSF Maison', Georgia, serif !important;
      font-size: 9px !important;
      font-weight: 600 !important;
      letter-spacing: 0.10em !important;
      color: #fbbf24 !important;
      line-height: 1.1 !important;
      white-space: nowrap !important;
    }

    /* DESIGN 1: Pure Circular IG Coin Medallion (Compact Circle with bottom pill tag) */
    .salon-torch-artifact.ig-torch-badge[data-badge-design="ring"] {
      flex-direction: column !important;
      gap: 4px !important;
      padding: 4px !important;
      border-radius: 28px !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }

    .salon-torch-artifact.ig-torch-badge[data-badge-design="ring"] .ig-badge-avatar-ring {
      width: 56px !important;
      height: 56px !important;
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.92), 0 0 24px rgba(251, 191, 36, 0.55) !important;
    }

    .salon-torch-artifact.ig-torch-badge[data-badge-design="ring"] .ig-badge-card-meta {
      align-items: center !important;
      background: rgba(10, 8, 12, 0.92) !important;
      border: 1px solid rgba(243, 212, 137, 0.68) !important;
      border-radius: 999px !important;
      padding: 2.5px 8px !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.85) !important;
    }

    .salon-torch-artifact.ig-torch-badge[data-badge-design="ring"] .ig-badge-handle {
      display: none !important;
    }

    /* DESIGN 2: Horizontal Mini IG Backstage Profile Pass Card */
    .salon-torch-artifact.ig-torch-badge[data-badge-design="card"] {
      flex-direction: row !important;
      padding: 5px 12px 5px 6px !important;
      border-radius: 16px !important;
      background: linear-gradient(135deg, rgba(24, 19, 15, 0.95) 0%, rgba(10, 9, 14, 0.98) 100%) !important;
      border: 1.5px solid rgba(243, 212, 137, 0.82) !important;
    }

    .salon-torch-artifact.ig-torch-badge[data-badge-design="card"] .ig-badge-avatar-ring {
      width: 44px !important;
      height: 44px !important;
    }

    /* DESIGN 3: Spinning Vinyl LP / 24K Gold Wax-Seal Medallion */
    .salon-torch-artifact.ig-torch-badge[data-badge-design="vinyl"] {
      flex-direction: column !important;
      gap: 4px !important;
      padding: 4px !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }

    .salon-torch-artifact.ig-torch-badge[data-badge-design="vinyl"] .ig-badge-avatar-ring {
      width: 60px !important;
      height: 60px !important;
      padding: 11px !important;
      background:
        repeating-radial-gradient(
          circle at 50% 50%,
          #141218 0px,
          #141218 2px,
          #2a2419 3px,
          #141218 4px
        ) !important;
      border: 2px solid #fbbf24 !important;
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.95), 0 0 26px rgba(251, 191, 36, 0.6) !important;
    }

    .salon-torch-artifact.ig-torch-badge[data-badge-design="vinyl"] .ig-badge-photo-circle {
      border: 2px solid #fbbf24 !important;
      animation: igVinylSlowSpin 8s linear infinite !important;
    }

    .salon-torch-artifact.ig-torch-badge[data-badge-design="vinyl"] .ig-badge-card-meta {
      align-items: center !important;
      background: rgba(14, 10, 8, 0.92) !important;
      border: 1px solid rgba(251, 191, 36, 0.72) !important;
      border-radius: 999px !important;
      padding: 2.5px 8px !important;
    }

    .salon-torch-artifact.ig-torch-badge[data-badge-design="vinyl"] .ig-badge-handle {
      display: none !important;
    }

    @keyframes igVinylSlowSpin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    /* Dragging & Socket Docking States */
    .salon-torch-artifact.ig-torch-badge.dragging {
      z-index: 99999 !important;
      cursor: grabbing !important;
      transform: scale(1.12) !important;
      filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 28px rgba(251, 191, 36, 0.85)) !important;
    }

    /* When docked inside one of the 3 circular sconces (#torch-socket-1/2/3) */
    .torch-sconce-socket .salon-torch-artifact.ig-torch-badge {
      position: relative !important;
      top: 0 !important;
      left: 0 !important;
      transform: scale(0.92) !important;
    }

    .torch-altar-zone[data-zone-state="lit"] .torch-sconce-socket,
    .torch-altar-zone[data-zone-state="ember"] .torch-sconce-socket {
      top: 8px !important;
      right: 12px !important;
      left: auto !important;
      transform: none !important;
      width: auto !important;
      height: auto !important;
      min-width: 44px !important;
      min-height: 44px !important;
      padding: 2px !important;
      border-radius: 999px !important;
    }

    .torch-altar-zone[data-zone-state="lit"] .sconce-hole-ring,
    .torch-altar-zone[data-zone-state="ember"] .sconce-hole-ring {
      background: radial-gradient(circle, #fffbeb 0%, #fbbf24 45%, #d97706 80%, transparent 100%) !important;
      box-shadow: 0 0 18px #fbbf24, 0 0 32px rgba(245, 158, 11, 0.85) !important;
      border-color: #fef08a !important;
    }

    /* Top Controls: Clean Zero-Overlap Layout */
    .jsf-puppet-style-pill {
      display: none !important;
    }

    .jsf-backface-vip-pill {
      position: absolute !important;
      top: 22px !important;
      right: 62px !important;
      z-index: 48 !important;
      height: 32px !important;
      padding: 0 10px !important;
      border-radius: 999px !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 5px !important;
      background: rgba(12, 10, 16, 0.86) !important;
      border: 1px solid rgba(243, 212, 137, 0.55) !important;
      color: #f3d489 !important;
      font-family: 'JSF Maison', Georgia, serif !important;
      font-size: 9.5px !important;
      font-weight: 600 !important;
      letter-spacing: 0.10em !important;
      cursor: pointer !important;
      backdrop-filter: blur(8px) !important;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.75), 0 0 14px rgba(223, 177, 91, 0.25) !important;
      transition: all 0.25s ease !important;
    }

    .jsf-backface-vip-pill.is-verified {
      background: linear-gradient(135deg, rgba(42, 32, 12, 0.94) 0%, rgba(16, 12, 6, 0.96) 100%) !important;
      border-color: rgba(74, 222, 128, 0.75) !important;
      color: #bbf7d0 !important;
      box-shadow: 0 0 20px rgba(74, 222, 128, 0.35) !important;
    }

    /* Instagram VIP Verification Modal (#jsf-ig-vip-modal) */
    .jsf-ig-vip-modal {
      position: absolute !important;
      inset: 0 !important;
      z-index: 85 !important;
      background: rgba(4, 4, 8, 0.86) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 16px !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.35s !important;
    }

    .jsf-ig-vip-modal.open {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s !important;
    }

    .jsf-ig-vip-card {
      position: relative !important;
      width: min(100%, 420px) !important;
      background: linear-gradient(165deg, rgba(22, 18, 14, 0.98) 0%, rgba(9, 8, 12, 0.99) 100%) !important;
      border: 1.5px solid rgba(243, 212, 137, 0.72) !important;
      border-radius: 18px !important;
      padding: 20px 18px 18px !important;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95), 0 0 40px rgba(223, 177, 91, 0.32), inset 0 1px 0 rgba(255, 245, 214, 0.25) !important;
      color: #f7f0e4 !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
    }

    .jsf-ig-vip-close {
      position: absolute !important;
      top: 12px !important;
      right: 12px !important;
      width: 28px !important;
      height: 28px !important;
      border-radius: 50% !important;
      border: 1px solid rgba(223, 177, 91, 0.4) !important;
      background: rgba(15, 12, 10, 0.8) !important;
      color: #e2c992 !important;
      font-size: 13px !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .jsf-ig-vip-header {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      padding-right: 24px !important;
    }

    .jsf-ig-vip-puppet-avatar {
      position: relative !important;
      width: 58px !important;
      height: 58px !important;
      border-radius: 50% !important;
      padding: 3px !important;
      background: conic-gradient(from 0deg, #f59e0b, #ec4899, #fbbf24, #fde047, #f59e0b) !important;
      box-shadow: 0 0 20px rgba(251, 191, 36, 0.5) !important;
      flex-shrink: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .jsf-ig-vip-puppet-avatar img {
      width: 100% !important;
      height: 100% !important;
      border-radius: 50% !important;
      object-fit: cover !important;
      object-position: 48% 26% !important;
      border: 2px solid #09080c !important;
    }

    .jsf-ig-vip-flame-dot {
      position: absolute !important;
      bottom: -2px !important;
      right: -2px !important;
      width: 18px !important;
      height: 18px !important;
      border-radius: 50% !important;
      background: #fbbf24 !important;
      color: #09080c !important;
      font-size: 10px !important;
      font-weight: 800 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border: 1.5px solid #09080c !important;
    }

    .jsf-ig-vip-eyebrow {
      display: block !important;
      font-family: 'JSF Maison', Georgia, serif !important;
      font-size: 10px !important;
      font-weight: 600 !important;
      letter-spacing: 0.14em !important;
      color: #fbbf24 !important;
      margin-bottom: 3px !important;
    }

    .jsf-ig-vip-title {
      margin: 0 !important;
      font-family: 'JSF Maison', Georgia, serif !important;
      font-size: 16.5px !important;
      font-weight: 600 !important;
      color: #fff6dc !important;
      letter-spacing: 0.04em !important;
    }

    .jsf-ig-vip-desc {
      margin: 0 !important;
      font-size: 11.8px !important;
      line-height: 1.52 !important;
      color: #dfd3c0 !important;
      background: rgba(255, 255, 255, 0.03) !important;
      border: 1px solid rgba(223, 177, 91, 0.2) !important;
      border-radius: 10px !important;
      padding: 9px 11px !important;
    }

    .jsf-ig-follow-link-btn {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 8px !important;
      padding: 10px 13px !important;
      border-radius: 11px !important;
      background: linear-gradient(90deg, rgba(131, 58, 180, 0.28) 0%, rgba(253, 29, 29, 0.26) 50%, rgba(252, 176, 69, 0.28) 100%) !important;
      border: 1px solid rgba(243, 212, 137, 0.55) !important;
      color: #fff8eb !important;
      text-decoration: none !important;
      font-size: 12px !important;
      transition: all 0.22s ease !important;
    }

    .jsf-ig-input-group {
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
    }

    .jsf-ig-input-label {
      font-size: 11px !important;
      color: #e9d5aa !important;
      font-weight: 600 !important;
    }

    .jsf-ig-input-row {
      display: flex !important;
      gap: 7px !important;
    }

    .jsf-ig-handle-input {
      flex: 1 !important;
      height: 36px !important;
      padding: 0 12px !important;
      border-radius: 9px !important;
      background: rgba(6, 6, 10, 0.92) !important;
      border: 1px solid rgba(223, 177, 91, 0.5) !important;
      color: #fff7e2 !important;
      font-family: 'JetBrains Mono', monospace !important;
      font-size: 12.5px !important;
      outline: none !important;
    }

    .jsf-ig-quickfill-btn {
      height: 36px !important;
      padding: 0 10px !important;
      border-radius: 9px !important;
      background: rgba(223, 177, 91, 0.14) !important;
      border: 1px solid rgba(223, 177, 91, 0.45) !important;
      color: #f3d489 !important;
      font-size: 11px !important;
      cursor: pointer !important;
      white-space: nowrap !important;
    }

    .jsf-ig-autoskip-row {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      font-size: 11.2px !important;
      color: #d7cbb8 !important;
      cursor: pointer !important;
    }

    .jsf-ig-feedback {
      min-height: 14px !important;
      font-size: 11.2px !important;
      font-family: 'JetBrains Mono', monospace !important;
      color: #4ade80 !important;
    }

    .jsf-ig-verify-submit-btn {
      width: 100% !important;
      padding: 11px 16px !important;
      border-radius: 999px !important;
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important;
      border: 1px solid #fde68a !important;
      color: #fffbeb !important;
      font-family: 'JSF Maison', Georgia, serif !important;
      font-size: 12.5px !important;
      font-weight: 600 !important;
      letter-spacing: 0.06em !important;
      cursor: pointer !important;
      box-shadow: 0 8px 24px rgba(217, 119, 6, 0.45) !important;
    }

    .jsf-ig-vip-issued-box {
      background: rgba(22, 101, 52, 0.22) !important;
      border: 1px solid rgba(74, 222, 128, 0.68) !important;
      border-radius: 12px !important;
      padding: 11px 12px !important;
      text-align: center !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 7px !important;
    }

    .vip-issued-badge-line {
      font-family: 'JSF Maison', Georgia, serif !important;
      font-size: 12.5px !important;
      color: #86efac !important;
      letter-spacing: 0.08em !important;
    }

    .vip-issued-sub {
      font-size: 11px !important;
      color: #d1fae5 !important;
    }

    .vip-issued-actions {
      display: flex !important;
      gap: 8px !important;
      margin-top: 3px !important;
    }

    .vip-test-skip-btn {
      flex: 1.2 !important;
      padding: 8px 10px !important;
      border-radius: 8px !important;
      background: rgba(74, 222, 128, 0.2) !important;
      border: 1px solid #4ade80 !important;
      color: #bbf7d0 !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      cursor: pointer !important;
    }

    .vip-stay-salon-btn {
      flex: 0.8 !important;
      padding: 8px 10px !important;
      border-radius: 8px !important;
      background: rgba(255, 255, 255, 0.07) !important;
      border: 1px solid rgba(223, 177, 91, 0.4) !important;
      color: #f3d489 !important;
      font-size: 11px !important;
      cursor: pointer !important;
    }

    /* Floating VIP Intro-Skip Button on Initial Intro Screen (#jsf-vip-skip-intro-wrap) */
    .jsf-vip-skip-intro-wrap {
      position: fixed !important;
      left: 50% !important;
      bottom: calc(var(--jsf-letterbox-h, 52px) + 16px) !important;
      transform: translateX(-50%) !important;
      z-index: 2147483646 !important;
      pointer-events: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s !important;
    }

    .jsf-vip-skip-intro-wrap.vip-skip-ready {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0s !important;
    }

    body.vip-pass-flipped .jsf-vip-skip-intro-wrap {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    .jsf-vip-skip-intro-btn {
      display: inline-flex !important;
      align-items: center !important;
      gap: 9px !important;
      padding: 9px 20px !important;
      border-radius: 999px !important;
      background: linear-gradient(135deg, rgba(24, 18, 8, 0.94) 0%, rgba(10, 8, 12, 0.96) 100%) !important;
      border: 1.5px solid rgba(251, 191, 36, 0.88) !important;
      color: #fef08a !important;
      font-family: 'JSF Maison', Georgia, serif !important;
      font-size: clamp(11px, 2.8cqw, 13px) !important;
      font-weight: 600 !important;
      letter-spacing: 0.14em !important;
      cursor: pointer !important;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.9), 0 0 24px rgba(251, 191, 36, 0.45) !important;
      backdrop-filter: blur(10px) !important;
      animation: vipSkipPulseGlow 2.4s ease-in-out infinite !important;
      white-space: nowrap !important;
    }
    /* === MINIATURE SEAN STOP-MOTION PUPPET & INSTAGRAM VIP SYSTEM END === */
                        /* === 2X MONUMENTAL INTRO TYPOGRAPHY OVERRIDE START === */
    /* ======================================================================
       1:1 UNIFIED FRAME SIZE LOCK (BEFORE FLIP === AFTER FLIP)
       Intro (.noir-signature-reveal), Front (.gobo-canvas-frame),
       3D Sash (.u22-3d-window-frame-box), and Back (.under-dev-card-overlay)
       ALL share the exact same width, aspect-ratio (976 / 1095), and scale(1.0)!
       ====================================================================== */
    :root {
      --jsf-unified-frame-w: clamp(320px, 41vw, 500px);
    }

    @media (max-width: 768px) {
      :root {
        --jsf-unified-frame-w: clamp(290px, 88vw, 420px);
      }
    }

    .noir-signature-reveal,
    .cinema-projector-halo,
    .gobo-canvas-frame,
    .gobo-canvas-frame.frame-illuminated,
    .u22-3d-window-frame-box {
      width: var(--jsf-unified-frame-w) !important;
      aspect-ratio: 976 / 1095 !important;
      height: auto !important;
    }

    .noir-signature-reveal {
      container-type: inline-size !important;
      padding: 4.5cqw 2.2cqw !important;
      overflow: hidden !important;
    }

    .gobo-canvas-frame,
    .gobo-canvas-frame.frame-illuminated {
      transform: perspective(1500px) rotateX(0deg) rotateY(0deg) translateZ(0px) scale(1.0) !important;
    }

    .gobo-canvas-frame.card-flipped-out {
      opacity: 0 !important;
      visibility: hidden !important;
      transform: perspective(1500px) rotateX(0deg) rotateY(180deg) translateZ(0px) scale(1.0) !important;
      pointer-events: none !important;
    }

    /* Back Face (#under-dev-card-overlay): 100% identical dimensions & scale(1.0) to Front Frame!
       70% Map (top) + 30% Studio Photos 3장 (bottom) + Small Bottom-Right Ticket Button */
    .under-dev-card-overlay,
    .under-dev-card-overlay.active,
    .under-dev-card-overlay.active.webpage-zoomed {
      width: var(--jsf-unified-frame-w) !important;
      aspect-ratio: 976 / 1095 !important;
      height: calc(var(--jsf-unified-frame-w) * 1095 / 976) !important;
      max-width: 92vw !important;
      max-height: calc(100dvh - var(--jsf-letterbox-h, 52px) * 2 - 20px) !important;
      display: grid !important;
      grid-template-rows: minmax(0, 7fr) minmax(0, 3fr) !important;
      gap: 10px !important;
      padding: 12px !important;
      border-radius: 22px !important;
      box-sizing: border-box !important;
    }

    .under-dev-card-overlay:not(.active) {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transform: translate(-50%, -50%) perspective(1500px) rotateX(0deg) rotateY(-180deg) scale(1.0) !important;
    }

    .under-dev-card-overlay.active,
    .under-dev-card-overlay.active.webpage-zoomed {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      transform: translate(-50%, -50%) perspective(1500px) rotateX(0deg) rotateY(0deg) translateZ(0px) scale(1.0) !important;
    }

    /* Wider, Brighter Frankfurt Map (Messe · Westend · Innenstadt) taking 70% of Frame */
    .pure-visual-zone-map {
      grid-row: 1 / 2 !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      border-radius: 14px !important;
      overflow: hidden !important;
      position: relative !important;
      border: 1px solid rgba(243, 212, 137, 0.42) !important;
    }

    .pure-visual-zone-map .pass-map-widget {
      width: 100% !important;
      height: 100% !important;
      border-radius: 14px !important;
      background: #14131a !important;
    }

    .pass-google-map-iframe {
      width: 116% !important;
      height: 146% !important;
      margin-left: -8% !important;
      margin-top: -15% !important;
      border: 0 !important;
      display: block !important;
      /* Brighter, high-legibility warm dark map so Innenstadt / Westend / Messe streets & labels pop clearly */
      filter: invert(88%) hue-rotate(180deg) sepia(16%) saturate(135%) contrast(106%) brightness(1.14) !important;
    }

    /* Remove heavy dark vignette over the map so the entire 70% map is crisp and bright */
    .pass-map-radar-hud {
      background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(8, 7, 12, 0.32) 100%) !important;
    }

    .pass-map-radar-ring {
      width: 138px !important;
      height: 138px !important;
      border: 1.5px solid rgba(253, 224, 71, 0.85) !important;
      background: radial-gradient(circle, rgba(251, 191, 36, 0.16) 0%, rgba(251, 191, 36, 0.05) 60%, transparent 100%) !important;
      box-shadow: 0 0 28px rgba(251, 191, 36, 0.35), inset 0 0 14px rgba(251, 191, 36, 0.18) !important;
    }

    .pass-map-radar-ring::before {
      content: 'MESSE · WESTEND · INNENSTADT' !important;
      top: auto !important;
      bottom: -24px !important;
      font-size: 9px !important;
      letter-spacing: 0.12em !important;
      padding: 3px 10px !important;
      background: rgba(10, 8, 14, 0.92) !important;
      border: 1px solid rgba(253, 224, 71, 0.75) !important;
      color: #fef08a !important;
    }

    /* Once a section (Map, Photos, or Ticket) is visited/lit, keep it 100% bright and hide the socket ring! */
    .torch-altar-zone[data-zone-state="lit"] .zone-illuminated-content,
    .torch-altar-zone[data-zone-state="ember"] .zone-illuminated-content {
      filter: brightness(1.0) saturate(1.05) blur(0px) !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    .torch-altar-zone[data-zone-state="lit"] .torch-sconce-socket,
    .torch-altar-zone[data-zone-state="ember"] .torch-sconce-socket {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    .pure-map-pin-btn {
      position: absolute !important;
      bottom: 10px !important;
      left: 10px !important;
      right: auto !important;
      z-index: 8 !important;
      font-family: 'JSF Maison', Georgia, serif !important;
      font-size: 10.5px !important;
      letter-spacing: 0.10em !important;
      padding: 6px 12px !important;
    }

    /* 3 Studio Photos taking the remaining 30% of Frame */
    .pure-visual-zone-photos {
      grid-row: 2 / 3 !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      border-radius: 14px !important;
      overflow: hidden !important;
      position: relative !important;
    }

    .pure-visual-zone-photos .salon-concept-strip {
      width: 100% !important;
      height: 100% !important;
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 8px !important;
    }

    .pure-visual-zone-photos .salon-concept-card {
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      border-radius: 11px !important;
    }

    /* Ticket moved to a compact floating button at the Bottom-Right! */
    .pure-visual-zone-pay {
      position: absolute !important;
      bottom: 18px !important;
      right: 18px !important;
      width: auto !important;
      height: auto !important;
      min-height: 0 !important;
      z-index: 54 !important;
      border-radius: 999px !important;
      overflow: visible !important;
      background: transparent !important;
    }

    .pure-visual-zone-pay .pass-forest-ticket-btn {
      width: auto !important;
      height: 36px !important;
      padding: 0 !important;
      border-radius: 999px !important;
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    .pure-visual-zone-pay .pass-forest-ticket-bg,
    .pure-visual-zone-pay .pass-forest-ticket-shade {
      display: none !important;
    }

    .pure-visual-zone-pay .pure-pay-center-pill {
      padding: 7px 14px !important;
      gap: 8px !important;
      border-radius: 999px !important;
      background: linear-gradient(135deg, rgba(20, 15, 10, 0.95) 0%, rgba(8, 7, 12, 0.98) 100%) !important;
      border: 1.5px solid rgba(251, 191, 36, 0.9) !important;
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.92), 0 0 20px rgba(251, 191, 36, 0.45) !important;
    }

    .pure-visual-zone-pay .pure-pay-amount {
      font-size: 13px !important;
      letter-spacing: 0.06em !important;
      color: #fde047 !important;
    }

    .pure-visual-zone-pay .pure-pay-arrow {
      font-size: 10.5px !important;
      letter-spacing: 0.12em !important;
      padding-left: 8px !important;
      color: #fff8e7 !important;
    }

    .pure-visual-zone-pay .torch-sconce-socket {
      width: 34px !important;
      height: 34px !important;
    }

    /* STAGE 1: @just.sean.flows — Maximized to ~97% of inner 3D frame width */
    .cinema-act1-house {
      font-family: 'Playfair Display', 'Cormorant Garamond', 'Cinzel', Georgia, serif !important;
      font-size: clamp(32px, 12.6cqw, 62px) !important;
      font-weight: 500 !important;
      letter-spacing: 0.04em !important;
      margin-right: -0.04em !important;
      margin-bottom: 6.2cqw !important;
      color: #f3d489 !important;
      white-space: nowrap !important;
    }

    /* Center Golden Filament — 95% of 3D frame width */
    .noir-preload-track {
      width: 95% !important;
      height: 2px !important;
    }

    .noir-preload-track::after {
      width: 9px !important;
      height: 9px !important;
    }

    /* STAGE 2: MUSIC SALON — Maximized to ~96% of inner 3D frame width */
    .cinema-act1-presents {
      margin-top: 6.8cqw !important;
    }

    .cinema-presents-salon {
      font-family: 'Cinzel', 'Playfair Display', Georgia, serif !important;
      font-size: clamp(28px, 11.4cqw, 56px) !important;
      font-weight: 600 !important;
      letter-spacing: 0.21em !important;
      margin-right: -0.21em !important;
      color: #fdfaf4 !important;
      white-space: nowrap !important;
    }

    /* STAGE 3: Stacked 3-Line Location (in / frankfurt am main / germany) */
    .noir-sub-group {
      margin-top: 7.8cqw !important;
    }

    .noir-preload-curtain.cinema-act-2 .noir-sub-hairline,
    .noir-preload-curtain.cinema-act-3 .noir-sub-hairline,
    .noir-preload-curtain.ready-to-unveil .noir-sub-hairline {
      width: 24cqw !important;
      opacity: 1 !important;
    }

    .noir-sub-location {
      margin-top: 3.6cqw !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 1.6cqw !important;
      text-align: center !important;
    }

    .noir-sub-prep {
      font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
      font-style: italic !important;
      font-weight: 500 !important;
      font-size: clamp(21px, 8.2cqw, 40px) !important;
      line-height: 1.05 !important;
      margin-right: 0 !important;
      color: rgba(223, 177, 91, 0.98) !important;
    }

    .noir-sub-city {
      font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
      font-size: clamp(18px, 7.2cqw, 35px) !important;
      font-weight: 300 !important;
      letter-spacing: 0.14em !important;
      margin-right: -0.14em !important;
      line-height: 1.15 !important;
      color: rgba(246, 239, 226, 0.98) !important;
    }

    .noir-sub-country {
      font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
      font-size: clamp(17px, 6.8cqw, 33px) !important;
      font-weight: 500 !important;
      letter-spacing: 0.22em !important;
      margin-right: -0.22em !important;
      line-height: 1.15 !important;
      color: rgba(223, 177, 91, 0.96) !important;
    }
    /* === 2X MONUMENTAL INTRO TYPOGRAPHY OVERRIDE END === */

    /* === HARRY POTTER LIVING NEWSPAPER & BRASS GALLERY LAMP SYSTEM START === */
    /* Lock Back-Face Grid to 1 single full-width column (70% Map + 30% 3 Living Portraits) */
    .under-dev-card-overlay,
    .under-dev-card-overlay.active,
    .under-dev-card-overlay.active.webpage-zoomed {
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-rows: minmax(0, 7fr) minmax(0, 3fr) !important;
      align-items: stretch !important;
      justify-items: stretch !important;
    }

    /* Hide the floating draggable badge & top badge switcher & legacy top spotlight so they NEVER clutter the frame */
    .vip-pass-spotlight-fixture,
    .vip-pass-volumetric-cone,
    #ceiling-spotlight-rig,
    .under-dev-card-overlay .torch-cradle-dock,
    .under-dev-card-overlay .jsf-puppet-style-pill,
    .under-dev-card-overlay .torch-sconce-socket {
      display: none !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    /* Make non-grid modals & drawers explicitly position: absolute so they NEVER create a 2nd implicit grid column! */
    .under-dev-card-overlay .u22-window-sash-molding,
    .under-dev-card-overlay .torch-firelight-halo,
    .under-dev-card-overlay .salon-concept-drawer,
    .under-dev-card-overlay .jsf-ig-vip-modal {
      position: absolute !important;
    }

    .pure-visual-zone-map {
      grid-column: 1 / -1 !important;
      grid-row: 1 / 2 !important;
      width: 100% !important;
      height: 100% !important;
      overflow: visible !important;
      margin-top: 6px !important;
    }

    .pure-visual-zone-photos {
      grid-column: 1 / -1 !important;
      grid-row: 2 / 3 !important;
      width: 100% !important;
      height: 100% !important;
      overflow: visible !important;
      padding-top: 8px !important;
      box-sizing: border-box !important;
    }

    /* Keep top-left VIP Pass pill sleek and compact */
    .under-dev-card-overlay .jsf-backface-vip-pill {
      top: 18px !important;
      left: 18px !important;
      right: auto !important;
      z-index: 60 !important;
      padding: 5px 11px !important;
      font-size: 9.5px !important;
      background: rgba(10, 8, 12, 0.88) !important;
      border: 1px solid rgba(243, 212, 137, 0.65) !important;
    }

    .under-dev-card-overlay .jesse-flip-back-pill {
      top: 16px !important;
      right: 18px !important;
      z-index: 60 !important;
    }

    /* Allow brass lamp switches to protrude slightly above each frame box */
    .pure-visual-zone-map {
      overflow: visible !important;
      margin-top: 6px !important;
    }

    .pure-visual-zone-map .pass-map-widget {
      overflow: hidden !important;
      position: relative !important;
      border-radius: 14px !important;
      border: 1.5px solid rgba(223, 177, 91, 0.28) !important;
      transition: filter 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease, box-shadow 0.55s ease !important;
    }

    /* Unlit Map State: Vintage Daily Prophet Sepia/Noir Ink Engraving */
    .pure-visual-zone-map[data-lamp-lit="false"] .pass-map-widget {
      filter: grayscale(0.88) sepia(0.38) brightness(0.36) contrast(1.15) !important;
      opacity: 0.92 !important;
      cursor: pointer !important;
    }

    /* Lit Map State: Warm 2200K Illuminated Marauder/Salon Map */
    .pure-visual-zone-map[data-lamp-lit="true"] .pass-map-widget {
      filter: brightness(1.04) saturate(1.08) !important;
      opacity: 1 !important;
      border-color: rgba(253, 224, 71, 0.85) !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 28px rgba(251, 191, 36, 0.28), inset 0 18px 36px rgba(251, 191, 36, 0.16) !important;
    }

    /* Photorealistic Brass Museum Picture Lamp Button */
    .hp-brass-lamp-switch {
      position: absolute !important;
      top: -13px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: 96px !important;
      height: 36px !important;
      padding: 0 !important;
      margin: 0 !important;
      background: transparent !important;
      border: none !important;
      cursor: pointer !important;
      z-index: 55 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s ease !important;
    }

    .hp-map-lamp-switch {
      width: 126px !important;
      height: 44px !important;
      top: -16px !important;
    }

    .hp-brass-lamp-switch:hover {
      transform: translateX(-50%) translateY(-2px) scale(1.07) !important;
      filter: drop-shadow(0 0 14px rgba(253, 224, 71, 0.85)) !important;
    }

    .hp-brass-lamp-switch:active {
      transform: translateX(-50%) translateY(1px) scale(0.95) !important;
    }

    .hp-lamp-img {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      pointer-events: none !important;
      transition: opacity 0.3s ease, filter 0.3s ease !important;
    }

    .hp-lamp-off {
      opacity: 1 !important;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.95)) brightness(1.08) contrast(1.08) !important;
    }

    .hp-lamp-on {
      opacity: 0 !important;
      filter: drop-shadow(0 4px 12px rgba(251, 191, 36, 0.92)) drop-shadow(0 0 24px rgba(245, 158, 11, 0.75)) !important;
    }

    /* Subtle breathing gold ring on unlit lamps so user immediately knows to click them */
    .pure-visual-zone-map[data-lamp-lit="false"] .hp-brass-lamp-switch::after,
    .hp-living-frame-cell[data-lamp-lit="false"] .hp-brass-lamp-switch::after {
      content: '' !important;
      position: absolute !important;
      inset: 4px 12px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(253, 224, 71, 0.65) !important;
      box-shadow: 0 0 14px rgba(251, 191, 36, 0.55) !important;
      animation: hpLampInvitePulse 1.8s ease-in-out infinite alternate !important;
      pointer-events: none !important;
    }

    @keyframes hpLampInvitePulse {
      0% { opacity: 0.35; transform: scale(0.96); }
      100% { opacity: 0.95; transform: scale(1.05); }
    }

    .hp-lamp-pull-tag {
      position: absolute !important;
      bottom: -14px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      font-family: 'JSF Maison', Georgia, serif !important;
      font-size: 8.5px !important;
      font-weight: 600 !important;
      letter-spacing: 0.14em !important;
      color: #fef08a !important;
      background: rgba(10, 8, 12, 0.92) !important;
      border: 1px solid rgba(251, 191, 36, 0.72) !important;
      border-radius: 999px !important;
      padding: 1.5px 7px !important;
      white-space: nowrap !important;
      pointer-events: none !important;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.9) !important;
      transition: opacity 0.3s ease !important;
    }

    .pure-visual-zone-map[data-lamp-lit="true"] .hp-lamp-pull-tag {
      opacity: 0 !important;
    }

    /* Switched ON states for Lamp Images */
    .pure-visual-zone-map[data-lamp-lit="true"] .hp-lamp-off,
    .hp-living-frame-cell[data-lamp-lit="true"] .hp-lamp-off {
      opacity: 0 !important;
    }

    .pure-visual-zone-map[data-lamp-lit="true"] .hp-lamp-on,
    .hp-living-frame-cell[data-lamp-lit="true"] .hp-lamp-on {
      opacity: 1 !important;
    }

    /* Warm 2200K Volumetric Light Cone pouring down from the Brass Lamp into the Box */
    .hp-lamp-light-cone {
      position: absolute !important;
      top: 4px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: 92% !important;
      height: 75% !important;
      background: radial-gradient(ellipse 65% 85% at 50% 0%, rgba(253, 224, 71, 0.34) 0%, rgba(245, 158, 11, 0.14) 48%, transparent 85%) !important;
      clip-path: polygon(28% 0%, 72% 0%, 100% 100%, 0% 100%) !important;
      opacity: 0 !important;
      pointer-events: none !important;
      z-index: 25 !important;
      mix-blend-mode: screen !important;
      transition: opacity 0.45s ease !important;
    }

    .pure-visual-zone-map[data-lamp-lit="true"] > .hp-lamp-light-cone,
    .hp-living-frame-cell[data-lamp-lit="true"] > .hp-lamp-light-cone {
      opacity: 1 !important;
      animation: hp TungstenFlickerCone 3.2s ease-in-out infinite alternate !important;
    }

    /* 3 Living Portrait Cells in the Bottom 30% Row */
    .pure-visual-zone-photos {
      overflow: visible !important;
      padding-top: 8px !important;
      box-sizing: border-box !important;
    }

    .pure-visual-zone-photos .salon-concept-strip {
      overflow: visible !important;
    }

    .hp-living-frame-cell {
      position: relative !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      overflow: visible !important;
    }

    .hp-living-card {
      position: relative !important;
      width: 100% !important;
      height: 100% !important;
      border-radius: 12px !important;
      overflow: hidden !important;
      padding: 0 !important;
      background: #0a090d !important;
      border: 1.5px solid rgba(223, 177, 91, 0.30) !important;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.85) !important;
      transition: border-color 0.4s ease, box-shadow 0.45s ease, transform 0.3s ease !important;
    }

    .hp-still-print,
    .hp-living-video {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block !important;
      pointer-events: none !important;
    }

    /* Unlit Cell: Harry Potter Daily Prophet Vintage Sepia/Noir Newspaper Print */
    .hp-living-frame-cell[data-lamp-lit="false"] .hp-still-print {
      opacity: 1 !important;
      filter: grayscale(0.92) sepia(0.42) contrast(1.22) brightness(0.42) !important;
      transition: opacity 0.55s ease, filter 0.55s ease !important;
    }

    .hp-living-frame-cell[data-lamp-lit="false"] .hp-living-video {
      opacity: 0 !important;
      transition: opacity 0.55s ease !important;
    }

    /* Lit Cell: Awakened 2200K Living Moving Video Frame! */
    .hp-living-frame-cell[data-lamp-lit="true"] .hp-living-card {
      border-color: rgba(253, 224, 71, 0.90) !important;
      box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.92),
        0 0 22px rgba(251, 191, 36, 0.35),
        inset 0 0 18px rgba(251, 191, 36, 0.22) !important;
    }

    .hp-living-frame-cell[data-lamp-lit="true"] .hp-still-print {
      opacity: 0 !important;
    }

    .hp-living-frame-cell[data-lamp-lit="true"] .hp-living-video {
      opacity: 1 !important;
      filter: contrast(1.05) saturate(1.08) brightness(1.04) !important;
    }

    /* Subtle Harry Potter Daily Prophet Serif Micro-Caption at Bottom-Left of Each Portrait */
    .hp-newspaper-tag {
      position: absolute !important;
      bottom: 6px !important;
      left: 7px !important;
      z-index: 28 !important;
      font-family: 'JSF Maison', 'Playfair Display', Georgia, serif !important;
      font-size: 8.5px !important;
      font-weight: 600 !important;
      letter-spacing: 0.12em !important;
      padding: 2px 6px !important;
      border-radius: 4px !important;
      background: rgba(8, 7, 11, 0.82) !important;
      border: 1px solid rgba(223, 177, 91, 0.38) !important;
      color: rgba(246, 235, 217, 0.72) !important;
      pointer-events: none !important;
      transition: color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
    }

    .hp-living-frame-cell[data-lamp-lit="true"] .hp-newspaper-tag {
      color: #fef08a !important;
      border-color: rgba(253, 224, 71, 0.85) !important;
      box-shadow: 0 0 10px rgba(251, 191, 36, 0.45) !important;
    }

    /* Compact Floating Ticket Pill at Bottom-Right (Does not cover 3rd photo's lamp or center) */
    .pure-visual-zone-pay {
      position: absolute !important;
      bottom: 16px !important;
      right: 16px !important;
      z-index: 62 !important;
    }

    .pure-visual-zone-pay .zone-illuminated-content {
      filter: brightness(1.0) saturate(1.0) blur(0px) !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }
    /* === HARRY POTTER LIVING NEWSPAPER & BRASS GALLERY LAMP SYSTEM END === */

    /* === OPTION A: REAL-ESTATE DISTRICT BOUNDARY POLYGON (MESSE · WESTEND-SÜD · BOCKENHEIM) === */
    .immo-polygon-hud {
      position: absolute !important;
      inset: 0 !important;
      pointer-events: none !important;
      z-index: 6 !important;
      background: radial-gradient(circle at 50% 48%, transparent 52%, rgba(8, 7, 12, 0.36) 100%) !important;
    }

    .immo-district-polygon-svg {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      overflow: visible !important;
    }

    .immo-poly-halo {
      fill: none !important;
      stroke: rgba(251, 191, 36, 0.26) !important;
      stroke-width: 8px !important;
      stroke-linejoin: round !important;
    }

    .immo-poly-fill {
      transition: opacity 0.45s ease !important;
      animation: immoZoneBreathe 3.2s ease-in-out infinite alternate !important;
    }

    @keyframes immoZoneBreathe {
      0% { opacity: 0.72; }
      100% { opacity: 1.0; }
    }

    .immo-poly-stroke {
      fill: none !important;
      stroke: #fde047 !important;
      stroke-width: 2.2px !important;
      stroke-linejoin: round !important;
      stroke-dasharray: 7 4 !important;
      animation: immoDashMarch 18s linear infinite !important;
    }

    @keyframes immoDashMarch {
      0% { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: -110; }
    }

    .immo-vertex {
      fill: #09080c !important;
      stroke: #fde047 !important;
      stroke-width: 1.6px !important;
    }

    .immo-core-pulse {
      fill: rgba(253, 224, 71, 0.18) !important;
      stroke: rgba(253, 224, 71, 0.65) !important;
      stroke-width: 1.2px !important;
      transform-origin: 192px 132px !important;
      animation: immoCorePulseAnim 2.4s ease-out infinite !important;
    }

    @keyframes immoCorePulseAnim {
      0% { transform: scale(0.55); opacity: 0.95; }
      100% { transform: scale(1.65); opacity: 0; }
    }

    .immo-core-dot {
      fill: #fde047 !important;
      stroke: #09080c !important;
      stroke-width: 1.8px !important;
    }

    .immo-district-badge {
      position: absolute !important;
      top: 66% !important;
      left: 49% !important;
      transform: translate(-50%, -50%) !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      padding: 4px 11px !important;
      border-radius: 999px !important;
      background: rgba(10, 8, 14, 0.92) !important;
      border: 1px solid rgba(253, 224, 71, 0.82) !important;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.9), 0 0 16px rgba(251, 191, 36, 0.35) !important;
      white-space: nowrap !important;
    }

    .immo-badge-dot {
      width: 6px !important;
      height: 6px !important;
      border-radius: 50% !important;
      background: #fde047 !important;
      box-shadow: 0 0 8px #fde047 !important;
    }

    .immo-badge-text {
      font-family: 'JSF Maison', Georgia, serif !important;
      font-size: 8.8px !important;
      font-weight: 600 !important;
      letter-spacing: 0.13em !important;
      color: #fef08a !important;
      line-height: 1 !important;
    }





/* === HP ELEMENT TRANSLUCENT COVER VEIL (LOCATION) START === */
/* When unlit, keep #pass-map-widget crisp so the Europe-Germany Cover Veil owns the visual state */
#torch-zone-1[data-lamp-lit="false"] .pass-map-widget {
  filter: none !important;
  opacity: 1 !important;
}

/* Translucent Cover Veil over the Map Box (hides underlying content ~94% when unlit, vanishes when lit) */
.hp-element-cover-veil.hp-map-cover-veil {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  z-index: 15 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(8, 7, 10, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  /* Isolation ensures mix-blend-mode: difference inverts strictly against the Europe/Germany cover image! */
  isolation: isolate !important;
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.65s !important;
}

/* Unlit/Disabled state: dark moody Europe relief with glowing Germany silhouette + inverted LOCATION text */
.hp-map-cover-veil .hp-cover-bg-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0.92 !important;
  filter: brightness(0.76) contrast(1.18) saturate(0.88) !important;
  transform: scale(1.01) !important;
  transition: filter 0.45s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 1 !important;
}

.hp-map-cover-veil:hover .hp-cover-bg-img {
  filter: brightness(0.92) contrast(1.22) saturate(1.0) !important;
  transform: scale(1.035) !important;
}

.hp-map-cover-veil .hp-cover-matte-scrim {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(
    ellipse 72% 68% at 50% 50%,
    rgba(8, 7, 10, 0.06) 0%,
    rgba(8, 7, 10, 0.48) 72%,
    rgba(6, 5, 8, 0.82) 100%
  ) !important;
  box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.88) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Inverted Background-to-Text Typography Wrapper */
.hp-cover-inverted-title-wrap {
  position: relative !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 0 16px !important;
  mix-blend-mode: difference !important;
  pointer-events: none !important;
  user-select: none !important;
}

.hp-cover-inverted-text {
  font-family: 'Cinzel', 'Playfair Display', 'Plus Jakarta Sans', Georgia, serif !important;
  font-size: clamp(28px, 6.2vw, 42px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.28em !important;
  margin-right: -0.28em !important;
  color: #fff6dc !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  /* Pure white/cream with mix-blend-mode: difference automatically inverts the bright golden Germany map into dark obsidian/indigo inside the letters, while turning the dark European continent into bright champagne ivory! */
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hp-map-cover-veil:hover .hp-cover-inverted-text {
  transform: scale(1.04) !important;
  letter-spacing: 0.31em !important;
}

/* WHEN LAMP IS TURNED ON: Translucent Cover Veil dissolves & lifts away to reveal the interactive 60486 Frankfurt Map! */
#torch-zone-1[data-lamp-lit="true"] .hp-element-cover-veil.hp-map-cover-veil {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: scale(1.04) !important;
}
/* === HP ELEMENT TRANSLUCENT COVER VEIL (LOCATION) END === */





/* === OPTION A REAL-ESTATE DISTRICT POLYGON OVERRIDE START === */
/* 1:1 GERMAN REAL-ESTATE EXPOSÉ MAP (IMMOSCOUT24 / GOOGLE MAPS STADTTEIL BENCHMARK)
   - Zero dark vignette / zero orange triangle cone obscuring the map
   - Edge-to-edge 100% legibility of streets, Main river, parks, surrounding districts, and exact red-dashed zone boundary */
.pass-map-widget .pass-expose-map-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  z-index: 1 !important;
  pointer-events: none !important;
  filter: none !important;
}

.pass-map-widget .pass-expose-map-iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
  z-index: 2 !important;
  filter: none !important;
  background: transparent !important;
}

/* Disable the hard-edged triangular light cone over the MAP so the left/right neighborhoods (Bockenheim, Westend-Süd, Hbf, Main) are never darkened or tinted orange! */
.pure-visual-zone-map > .hp-lamp-light-cone,
.pure-visual-zone-map[data-lamp-lit="true"] > .hp-lamp-light-cone {
  display: none !important;
  opacity: 0 !important;
}

/* When lit, give the map frame a clean, crisp 24K gold border and subtle edge shadow without muddying the cartography */
.pure-visual-zone-map[data-lamp-lit="true"] .pass-map-widget {
  filter: none !important;
  opacity: 1 !important;
  border: 1.5px solid rgba(243, 212, 137, 0.88) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.88),
    0 0 24px rgba(223, 177, 91, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}

/* Sleek, compact bottom-left Google Maps link badge */
.pass-map-widget .pure-map-pin-btn {
  z-index: 10 !important;
  bottom: 10px !important;
  left: 10px !important;
  background: rgba(14, 15, 20, 0.90) !important;
  color: #f8f3e6 !important;
  border: 1px solid rgba(243, 212, 137, 0.65) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65) !important;
  font-size: 10px !important;
  padding: 5px 11px !important;
  letter-spacing: 0.10em !important;
}
/* === OPTION A REAL-ESTATE DISTRICT POLYGON OVERRIDE END === */



/* === MINIMAL CITY COVER & LAMP BEAM OVERRIDE START === */
/* ==========================================================================
   GALLERY LAMP SPOTLIGHT COVER & MINIMAL CITY-ONLY MAP (BOXLESS SPOTLIGHT)
   - Clean minimal cartography showing ONLY major city names & borders
   - Top-down warm 2200K volumetric beam originating directly from the
     top-center Brass Gallery Lamp (#hp-lamp-map) down onto Frankfurt am Main
   - Zero inner box, zero mix-blend-mode: difference distortion
   ========================================================================== */
.pure-visual-zone-map .hp-lamp-pull-tag {
  display: none !important;
}

.hp-element-cover-veil.hp-map-cover-veil {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  z-index: 15 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0b0c10 !important;
  isolation: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.65s !important;
}

.hp-map-cover-veil .hp-cover-bg-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0.98 !important;
  filter: brightness(0.96) contrast(1.06) !important;
  transform: scale(1.0) !important;
  transition: filter 0.55s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 1 !important;
}

.pure-visual-zone-map:hover .hp-map-cover-veil .hp-cover-bg-img {
  filter: brightness(1.12) contrast(1.08) !important;
  transform: scale(1.022) !important;
}

/* Seamless Volumetric Gallery Spotlight Cone originating at (50%, -4%) right under the Brass Gallery Lamp */
.hp-cover-lamp-beam-cone {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    conic-gradient(from 142deg at 50% -6%, transparent 0deg, rgba(251, 191, 36, 0.03) 14deg, rgba(254, 232, 160, 0.28) 38deg, rgba(251, 191, 36, 0.03) 62deg, transparent 76deg),
    radial-gradient(ellipse 52% 68% at 50% 44%, rgba(251, 191, 36, 0.18) 0%, rgba(217, 152, 54, 0.06) 52%, transparent 82%) !important;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.15) 96%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.15) 96%, transparent 100%) !important;
  filter: blur(8px) !important;
  opacity: 0.94 !important;
  transition: opacity 0.45s ease, filter 0.45s ease !important;
}

.pure-visual-zone-map:hover .hp-cover-lamp-beam-cone {
  opacity: 1 !important;
  filter: blur(6px) brightness(1.24) !important;
}

/* Subtle vertical golden light ray from the top brass lamp down toward the Frankfurt pin */
.hp-cover-lamp-axis-line {
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 1px !important;
  height: calc(50% - 42px) !important;
  background: linear-gradient(
    180deg,
    rgba(255, 245, 208, 0.85) 0%,
    rgba(243, 212, 137, 0.35) 55%,
    transparent 100%
  ) !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.55) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* Boxless Spotlight Stage centered directly around the Frankfurt Hero Pin */
.hp-cover-lamp-focus-stage {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

.hp-cover-eyebrow-kicker {
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.38em !important;
  margin-right: -0.38em !important;
  color: rgba(248, 224, 160, 0.92) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 16px rgba(251, 191, 36, 0.45) !important;
  transform: translateY(-6px) !important;
}

/* Leaves exact breathing room for the glowing Frankfurt center pin on the map */
.hp-cover-pin-spacer {
  width: 64px !important;
  height: 64px !important;
  flex-shrink: 0 !important;
}

.hp-cover-main-city {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-size: clamp(24px, 5.2cqw, 30px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: #fffdf7 !important;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.98),
    0 4px 20px rgba(0, 0, 0, 0.95),
    0 0 22px rgba(251, 191, 36, 0.55) !important;
  white-space: nowrap !important;
  margin-top: 2px !important;
}

.hp-cover-sub-prompt {
  margin-top: 6px !important;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  font-size: 8.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  margin-right: -0.22em !important;
  color: rgba(243, 212, 137, 0.78) !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.98) !important;
  white-space: nowrap !important;
}
/* === MINIMAL CITY COVER & LAMP BEAM OVERRIDE END === */

/* === INTRO LIVING SALON CARD MEDIA & WAX CREST OVERRIDE START === */
/* ==========================================================================
   HAUTE HORLOGERIE & 2X MONUMENTAL EDITORIAL TITLE CARD TYPOGRAPHY
   1. Official JSF Wine-Clef Symbol placed subtly in the background at the
      EXACT 1:1 coordinates & size (top: 17.35%, height: 58.08%) as the
      next-stage emblem (#digital-logo-overlay / .emblem-layer) for cathartic
      1:1 lock-in on unveil!
   2. 2x Monumental Typography across all 3 stages (@just.sean.flows,
      MUSIC SALON, in / FRANKFURT AM MAIN / GERMANY)
   ========================================================================== */
.noir-signature-reveal {
  container-type: inline-size !important;
  border-radius: 24px !important;
  border: 1px solid rgba(243, 212, 137, 0.34) !important;
  box-shadow:
    0 28px 75px rgba(0, 0, 0, 0.92),
    0 0 42px rgba(223, 177, 91, 0.16),
    inset 0 1px 0 rgba(255, 248, 224, 0.22) !important;
  background: #070609 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  overflow: hidden !important;
}

.noir-living-card-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.noir-living-card-poster,
.noir-living-card-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  filter: contrast(1.08) saturate(1.08) brightness(0.84) !important;
  transform: scale(1.01) !important;
  transition: filter 0.8s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.noir-preload-curtain.ready-to-unveil:hover .noir-living-card-video,
.noir-preload-curtain.ready-to-unveil:hover .noir-living-card-poster {
  filter: contrast(1.12) saturate(1.14) brightness(0.94) !important;
  transform: scale(1.03) !important;
}

/* Refined Chiaroscuro Scrim: velvet contrast behind the 2x typography & subtle 1:1 symbol */
.noir-living-card-scrim {
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 88% 58% at 50% 50%, rgba(5, 4, 7, 0.78) 0%, rgba(7, 6, 10, 0.54) 66%, rgba(5, 4, 7, 0.28) 100%),
    linear-gradient(180deg, rgba(5, 4, 7, 0.36) 0%, rgba(5, 4, 7, 0.68) 46%, rgba(5, 4, 7, 0.72) 78%, rgba(5, 4, 7, 0.42) 100%) !important;
  box-shadow: inset 0 0 42px rgba(0, 0, 0, 0.86) !important;
  z-index: 1 !important;
}

/* 1. SUBTLE 1:1 BACKGROUND JSF SYMBOL CREST
   Matches .digital-logo-overlay / .emblem-layer (top: 17.35%; height: 58.08%; left: 50%; translateX(-50%))
   to the exact pixel so unveiling into the next stage feels cathartically locked! */
.noir-wax-crest-medallion.noir-jsf-symbol-crest {
  position: absolute !important;
  top: 17.35% !important;
  height: 58.08% !important;
  width: auto !important;
  left: 50% !important;
  transform: translateX(-50%) scale(1.0) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: block !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease !important;
}

.noir-preload-curtain.chars-revealing .noir-jsf-symbol-crest,
.noir-preload-curtain.cinema-act-1 .noir-jsf-symbol-crest,
.noir-preload-curtain.cinema-act-2 .noir-jsf-symbol-crest,
.noir-preload-curtain.cinema-act-3 .noir-jsf-symbol-crest {
  opacity: 0.22 !important;
  transform: translateX(-50%) scale(1.0) !important;
}

.noir-preload-curtain.ready-to-unveil .noir-jsf-symbol-crest {
  opacity: 0.28 !important;
  transform: translateX(-50%) scale(1.0) !important;
}

.noir-preload-curtain.ready-to-unveil:hover .noir-jsf-symbol-crest {
  opacity: 0.36 !important;
  transform: translateX(-50%) scale(1.0) !important;
}

.noir-jsf-symbol-img {
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  display: block !important;
  filter:
    sepia(0.26)
    saturate(1.38)
    brightness(1.05)
    drop-shadow(0 8px 24px rgba(0, 0, 0, 0.92))
    drop-shadow(0 0 28px rgba(243, 212, 137, 0.45)) !important;
  transition: filter 0.45s ease !important;
}

/* Ensure all foreground typography & dividers sit cleanly above the subtle 1:1 symbol */
.cinema-act1-house,
.noir-preload-track,
.cinema-act1-presents,
.noir-sub-group {
  position: relative !important;
  z-index: 5 !important;
}

/* 2. STAGE 1 HANDLE: @just.sean.flows — 2x Monumental Editorial Serif (64px at 500px card) */
.cinema-act1-house {
  font-family: var(--font-jsf-maison, 'JSF Maison', 'Cormorant Garamond', 'Playfair Display', Georgia, serif) !important;
  font-size: clamp(42px, 12.8cqw, 64px) !important;
  font-weight: 500 !important;
  font-style: italic !important;
  letter-spacing: 0.04em !important;
  margin-right: -0.04em !important;
  margin-bottom: 5.0cqw !important;
  line-height: 1.04 !important;
  color: #f6e1b5 !important;
  white-space: nowrap !important;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1 !important;
  -webkit-font-smoothing: antialiased !important;
  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.98),
    0 8px 28px rgba(0, 0, 0, 0.96),
    0 0 24px rgba(223, 177, 91, 0.42) !important;
}

.cinema-act1-house .char-punct {
  color: rgba(243, 212, 137, 0.78) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  margin: 0 0.015em !important;
}

/* 3. GOLDEN HORIZON DIVIDER: 88% Architectural Proportion + Diamond Node */
.noir-preload-track {
  width: 88% !important;
  height: 1.5px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(223, 177, 91, 0.24) 15%,
    rgba(243, 212, 137, 0.65) 50%,
    rgba(223, 177, 91, 0.24) 85%,
    transparent 100%
  ) !important;
}

.noir-preload-track::after {
  width: 7px !important;
  height: 7px !important;
  background: #fffdf4 !important;
  box-shadow: 0 0 14px 3px rgba(243, 212, 137, 0.95) !important;
}

.noir-preload-fill {
  height: 2px !important;
  top: -0.25px !important;
}

/* 4. STAGE 2 MAIN TITLE: 2-Line Stacked MUSIC / SALON — Monumental Engraved Roman Capitals */
.cinema-act1-presents {
  margin-top: 5.2cqw !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.cinema-presents-salon {
  display: block !important;
  text-align: center !important;
  font-family: 'Cinzel', var(--font-jsf-maison, 'Playfair Display', serif) !important;
  font-size: clamp(38px, 11.6cqw, 58px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  margin-right: 0 !important;
  line-height: 1.08 !important;
  text-transform: uppercase !important;
  color: #fffdf9 !important;
  white-space: normal !important;
  font-feature-settings: "kern" 1, "cpsp" 1 !important;
  text-shadow:
    0 3px 14px rgba(0, 0, 0, 0.98),
    0 10px 32px rgba(0, 0, 0, 0.96),
    0 0 28px rgba(243, 212, 137, 0.48) !important;
}

/* Zero trailing letter-spacing on the last character of Line 1 ('C') and Line 2 ('N') for 0.0px optical centering */
.cinema-presents-salon .cinema-rand-char:nth-child(5),
.cinema-presents-salon .cinema-rand-char:last-child {
  letter-spacing: 0 !important;
}

/* Stack 'MUSIC' and 'SALON' cleanly onto 2 centered lines */
.cinema-presents-salon .cinema-rand-space {
  display: block !important;
  width: 100% !important;
  height: 0.08em !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

/* 5. STAGE 3 EDITORIAL COLOPHON: 2x Scaled in / FRANKFURT AM MAIN / GERMANY */
.noir-sub-group {
  margin-top: 5.6cqw !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.noir-sub-hairline {
  height: 1.5px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(223, 177, 91, 0.62) 50%, transparent 100%) !important;
}

.noir-preload-curtain.cinema-act-2 .noir-sub-hairline,
.noir-preload-curtain.cinema-act-3 .noir-sub-hairline,
.noir-preload-curtain.ready-to-unveil .noir-sub-hairline {
  width: 24cqw !important;
  opacity: 0.95 !important;
}

.noir-sub-location {
  margin-top: 3.4cqw !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.6cqw !important;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.98), 0 6px 22px rgba(0, 0, 0, 0.96) !important;
}

/* "in" — 2x Scaled Haute-Couture Serif Italic Conjunction (44px at 500px card) */
.noir-sub-prep {
  font-family: var(--font-jsf-italic, 'Cormorant Garamond', 'Playfair Display', Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: clamp(28px, 8.8cqw, 44px) !important;
  letter-spacing: 0.06em !important;
  margin-right: -0.06em !important;
  margin-bottom: 0.6cqw !important;
  line-height: 1.0 !important;
  color: rgba(243, 212, 137, 0.96) !important;
  text-transform: lowercase !important;
  white-space: nowrap !important;
}

/* "FRANKFURT AM MAIN" — 2x Scaled Crisp Architectural Tracking (34px at 500px card) */
.noir-sub-city {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif !important;
  font-size: clamp(22px, 6.8cqw, 34px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  margin-right: -0.14em !important;
  margin-bottom: 0.4cqw !important;
  line-height: 1.12 !important;
  text-transform: uppercase !important;
  color: rgba(252, 248, 240, 0.98) !important;
  white-space: nowrap !important;
  font-feature-settings: "kern" 1, "cpsp" 1 !important;
}

.noir-sub-city .cinema-rand-space {
  width: 0.32em !important;
}

/* "GERMANY" — 2x Scaled Warm 24K Gold Geolocation Anchor (30px at 500px card) */
.noir-sub-country {
  font-family: 'Cinzel', var(--font-jsf-maison, Georgia, serif) !important;
  font-size: clamp(19px, 6.0cqw, 30px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.34em !important;
  margin-right: -0.34em !important;
  line-height: 1.12 !important;
  text-transform: uppercase !important;
  color: rgba(223, 177, 91, 0.96) !important;
  white-space: nowrap !important;
}
/* === INTRO LIVING SALON CARD MEDIA & WAX CREST OVERRIDE END === */