/* ═══════════════════════════════════════════════════════════════════════
   option.black — COUTURE elevation layer (2026-06-12)
   VIP / avant-garde / max-style overlay on the Heavy-Metal Heraldic system.
   Additive only — enhances the existing foyer; never rewrites its structure.
   Register: velvet-rope gallery. Void black, specular gold (#D4A838),
   chrome steel, a single oxblood heat. Slow, deliberate, expensive.
   All motion gated behind body.ob-js + honours prefers-reduced-motion.
   No gavels. No scales. No cliché. Numismatic restraint.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --ob-gold:#D4A838; --ob-gold-hi:#F0D27A; --ob-gold-lo:#8B6914;
  --ob-ox:#7B0F1F; --ob-ox-hi:#9C1A2A;
  --ob-ease:cubic-bezier(.2,.7,.2,1);
  --ob-ease-lux:cubic-bezier(.16,1,.3,1);
}

/* ── 1 · The gallery mat — a hairline frame around the whole work ─────── */
.ob-mat{position:fixed;inset:14px;border:1px solid rgba(212,168,56,.16);
  pointer-events:none;z-index:60;mix-blend-mode:screen}
.ob-mat::before,.ob-mat::after{content:"";position:absolute;width:14px;height:14px;
  border:1px solid rgba(212,168,56,.5)}
.ob-mat::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.ob-mat::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.ob-mat-tr,.ob-mat-bl{position:absolute;width:14px;height:14px;border:1px solid rgba(212,168,56,.5)}
.ob-mat-tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.ob-mat-bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
@media(max-width:640px){.ob-mat{inset:8px}}

/* ── 2 · Film grain + vignette + a slow ambient light overhead ───────── */
.ob-grain{position:fixed;inset:-50%;width:200%;height:200%;z-index:55;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body.ob-js .ob-grain{animation:ob-grain 7s steps(6) infinite}
@keyframes ob-grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-3%)}60%{transform:translate(-2%,2%)}
  80%{transform:translate(2%,-1%)}100%{transform:translate(0,0)}}
.ob-vignette{position:fixed;inset:0;z-index:54;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 18%,rgba(212,168,56,.05),transparent 42%),
             radial-gradient(140% 120% at 50% 50%,transparent 55%,rgba(0,0,0,.72) 100%)}

/* ── 3 · The velvet rope — refined status band ──────────────────────── */
body.ob-js .lang-band-status,body.ob-js .lang-band{letter-spacing:.42em}

/* ── 4 · Cinematic entrance — "the vault opens" ─────────────────────── */
#ob-veil{position:fixed;inset:0;z-index:9999;background:#050507;pointer-events:none;
  display:grid;place-items:center}
#ob-veil::before,#ob-veil::after{content:"";position:absolute;left:0;width:100%;height:50.2%;
  background:#050507;transition:transform 1.05s var(--ob-ease-lux)}
#ob-veil::before{top:0;transform-origin:top}
#ob-veil::after{bottom:0;transform-origin:bottom}
#ob-veil .ob-veil-line{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:0;height:1px;background:linear-gradient(90deg,transparent,var(--ob-gold),transparent);
  box-shadow:0 0 18px 1px rgba(212,168,56,.6);transition:width .7s var(--ob-ease)}
body.ob-enter #ob-veil .ob-veil-line{width:62%}
body.ob-enter #ob-veil::before{transform:translateY(-101%)}
body.ob-enter #ob-veil::after{transform:translateY(101%)}
body.ob-entered #ob-veil{opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}

/* wordmark resolves from darkness, letter by letter */
body.ob-js .threshold-wordmark{position:relative}
body.ob-js .threshold-wordmark .ob-ch{display:inline-block;opacity:0;
  transform:translateY(.5em) scale(.96);filter:blur(8px);
  transition:opacity .7s var(--ob-ease-lux),transform .9s var(--ob-ease-lux),filter .7s var(--ob-ease-lux)}
body.ob-entered .threshold-wordmark .ob-ch{opacity:1;transform:none;filter:none;
  transition-delay:calc(var(--i,0)*70ms + 250ms)}
/* the dot — a struck gold rivet that lands last */
body.ob-js .threshold-wordmark .dot{color:var(--ob-gold)}
body.ob-entered .threshold-wordmark .dot{animation:ob-strike .5s var(--ob-ease) calc(var(--n,8)*70ms + 360ms) both}
@keyframes ob-strike{0%{transform:scale(2.4);opacity:0;text-shadow:0 0 30px var(--ob-gold)}
  60%{transform:scale(.86)}100%{transform:scale(1);opacity:1;text-shadow:0 0 14px rgba(212,168,56,.55)}}

/* tagline / attribution / CTA rise after the wordmark */
body.ob-js .threshold-tagline,body.ob-js .threshold-attribution,
body.ob-js .threshold-cta,body.ob-js .threshold-scroll{
  opacity:0;transform:translateY(14px);transition:opacity .9s var(--ob-ease-lux),transform .9s var(--ob-ease-lux)}
body.ob-entered .threshold-tagline{opacity:1;transform:none;transition-delay:.95s}
body.ob-entered .threshold-attribution{opacity:.9;transform:none;transition-delay:1.1s}
body.ob-entered .threshold-cta{opacity:1;transform:none;transition-delay:1.25s}
body.ob-entered .threshold-scroll{opacity:.8;transform:none;transition-delay:1.5s}

/* ── 5 · Living gold — slow specular sweep across wordmark + shield ──── */
.threshold-wordmark{background-image:
    linear-gradient(105deg,var(--ob-gold-lo) 0%,var(--ob-gold) 30%,var(--ob-gold-hi) 47%,var(--ob-gold) 64%,var(--ob-gold-lo) 100%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;background-position:0% 50%}
body.ob-js .threshold-wordmark{animation:ob-sheen 9s var(--ob-ease) 1.8s infinite}
@keyframes ob-sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* safety: if text-clip is unsupported, fall back to solid gold (never invisible) */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .threshold-wordmark{-webkit-text-fill-color:var(--ob-gold)!important;color:var(--ob-gold)!important}}
.threshold-shield{position:relative;transition:transform .25s var(--ob-ease)}
.threshold-shield::after{content:""}
.ob-shield-wrap{position:relative;display:inline-block}
.ob-shield-glow{position:absolute;inset:-12% -12% -4%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(212,168,56,.22),transparent 72%);
  filter:blur(8px)}
body.ob-js .ob-shield-glow{animation:ob-breathe 6s ease-in-out infinite}
@keyframes ob-breathe{0%,100%{opacity:.55;transform:scale(.98)}50%{opacity:1;transform:scale(1.04)}}

/* ── 6 · Custom cursor — a fine gold ring that lags the pointer ──────── */
@media(hover:hover) and (pointer:fine){
  body.ob-js{cursor:none}
  body.ob-js a,body.ob-js button,body.ob-js textarea,body.ob-js input,body.ob-js .door,body.ob-js .room{cursor:none}
  .ob-cursor{position:fixed;top:0;left:0;width:26px;height:26px;margin:-13px 0 0 -13px;
    border:1px solid var(--ob-gold);border-radius:50%;z-index:9998;pointer-events:none;
    mix-blend-mode:screen;transition:width .25s var(--ob-ease),height .25s var(--ob-ease),
    margin .25s var(--ob-ease),background .25s var(--ob-ease),border-color .25s var(--ob-ease);
    will-change:transform}
  .ob-cursor-dot{position:fixed;top:0;left:0;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
    background:var(--ob-gold-hi);border-radius:50%;z-index:9998;pointer-events:none;will-change:transform}
  body.ob-hot .ob-cursor{width:54px;height:54px;margin:-27px 0 0 -27px;
    border-color:var(--ob-gold-hi);background:rgba(212,168,56,.08)}
  body.ob-press .ob-cursor{width:20px;height:20px;margin:-10px 0 0 -10px}
}

/* ── 7 · Magnetic + reveal micro-interactions ───────────────────────── */
body.ob-js .threshold-cta,body.ob-js .door{will-change:transform;
  transition:transform .35s var(--ob-ease-lux),border-color .35s,color .35s,background .35s}
/* doors: a hairline that ignites oxblood on approach */
.door{position:relative;overflow:hidden}
.door::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--ob-gold),var(--ob-ox-hi));
  transition:transform .5s var(--ob-ease-lux)}
body.ob-js .door:hover::after{transform:scaleX(1)}
body.ob-js .door:hover{border-color:rgba(212,168,56,.55)}
.door-eye,.room-eyebrow,.doors-band-eye,.rooms-band-eye{transition:color .4s,letter-spacing .4s}
body.ob-js .door:hover .door-eye{color:var(--ob-gold-hi);letter-spacing:.4em}

/* CTA — a luxury button: gold hairline, fills on hover with a wipe */
.threshold-cta{position:relative;overflow:hidden;isolation:isolate}
.threshold-cta::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-101%);
  background:linear-gradient(90deg,var(--ob-gold-lo),var(--ob-gold) 60%,var(--ob-gold-hi));
  transition:transform .55s var(--ob-ease-lux)}
body.ob-js .threshold-cta:hover{color:#0a0b0e;border-color:var(--ob-gold-hi)}
body.ob-js .threshold-cta:hover::before{transform:translateX(0)}

/* sections rise + unmask on scroll */
body.ob-js .ob-reveal{opacity:0;transform:translateY(22px);
  clip-path:inset(0 0 8% 0);transition:opacity 1s var(--ob-ease-lux),
  transform 1s var(--ob-ease-lux),clip-path 1.1s var(--ob-ease-lux)}
body.ob-js .ob-reveal.ob-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* rooms — refined hover: lift + chrome rim + image bloom */
body.ob-js .room{transition:transform .45s var(--ob-ease-lux),border-color .45s}
body.ob-js .room:hover{transform:translateY(-4px);border-color:rgba(200,202,208,.35)}
body.ob-js .room .room-img{transition:transform .8s var(--ob-ease-lux),filter .6s}
body.ob-js .room:hover .room-img{transform:scale(1.045);filter:saturate(1.1) contrast(1.04)}

/* ── 8 · Avant-garde section dividers — hairline with center cartouche ─ */
.ob-rule{display:flex;align-items:center;gap:1.2rem;max-width:680px;margin:3.4rem auto;opacity:.8}
.ob-rule::before,.ob-rule::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,168,56,.35),transparent)}
.ob-rule i{width:6px;height:6px;transform:rotate(45deg);border:1px solid var(--ob-gold);display:block}

/* ── 9 · Reduced motion — keep the elegance, drop the movement ───────── */
@media(prefers-reduced-motion:reduce){
  #ob-veil{display:none}
  body.ob-js .ob-grain{animation:none}
  body.ob-js .threshold-wordmark{animation:none;background-position:30% 50%}
  body.ob-js .threshold-wordmark .ob-ch,body.ob-js .threshold-tagline,
  body.ob-js .threshold-attribution,body.ob-js .threshold-cta,
  body.ob-js .threshold-scroll,body.ob-js .ob-reveal{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  body.ob-js .ob-shield-glow{animation:none}
}

/* ═══════════════ COUTURE II — pushed further (2026-06-12) ═══════════════ */

/* ── Knock-to-enter — the velvet rope ──────────────────────────────────── */
.ob-knock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;gap:1.5rem;opacity:0;transition:opacity .6s var(--ob-ease)}
body.ob-armed .ob-knock{opacity:1}
body.ob-enter .ob-knock{opacity:0;transform:translate(-50%,-50%) scale(1.5);transition:opacity .5s,transform .9s var(--ob-ease-lux)}
.ob-knock-seal{width:128px;height:128px;border-radius:50%;display:grid;place-items:center;
  position:relative;cursor:pointer;
  background:radial-gradient(circle at 50% 38%,rgba(212,168,56,.10),rgba(7,8,10,.4) 70%);
  border:1px solid rgba(212,168,56,.45);
  box-shadow:0 0 0 7px rgba(212,168,56,.05),0 0 40px rgba(212,168,56,.12),inset 0 0 22px rgba(0,0,0,.6)}
.ob-knock-seal::before{content:"";position:absolute;inset:9px;border-radius:50%;
  border:1px solid rgba(212,168,56,.22)}
.ob-knock-seal::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent,rgba(240,210,122,.5),transparent 30%);
  -webkit-mask:radial-gradient(circle,transparent 62px,#000 63px);mask:radial-gradient(circle,transparent 62px,#000 63px);
  animation:ob-orbit 5.5s linear infinite}
@keyframes ob-orbit{to{transform:rotate(360deg)}}
.ob-knock-mono{font-family:'Fraunces','Cinzel',serif;font-weight:600;font-size:38px;letter-spacing:.06em;
  background:linear-gradient(160deg,#F0D27A,#D4A838 55%,#8B6914);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:ob-knock-pulse 2.4s ease-in-out infinite}
@keyframes ob-knock-pulse{0%,100%{filter:drop-shadow(0 0 6px rgba(212,168,56,.25))}50%{filter:drop-shadow(0 0 16px rgba(240,210,122,.6))}}
.ob-knock-cue{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.5em;
  text-transform:uppercase;color:var(--ob-gold);padding-left:.5em;
  animation:ob-cue 2.4s ease-in-out infinite}
@keyframes ob-cue{0%,100%{opacity:.45}50%{opacity:.95}}

/* ── Cursor torch — a soft gallery light follows the pointer ───────────── */
.ob-torch{position:fixed;inset:0;z-index:53;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(220px circle at var(--tx,50%) var(--ty,40%),rgba(212,168,56,.07),transparent 70%)}

/* ── Persistent corner sigil — docks after admittance ─────────────────── */
.ob-sigil{position:fixed;top:30px;left:30px;z-index:58;opacity:0;transform:translateY(-6px);
  transition:opacity .8s var(--ob-ease-lux) .4s,transform .8s var(--ob-ease-lux) .4s;pointer-events:none}
body.ob-entered .ob-sigil{opacity:1;transform:none}
.ob-sigil a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(212,168,56,.4);text-decoration:none;pointer-events:auto;
  background:rgba(7,8,10,.55);backdrop-filter:blur(3px);transition:transform .4s var(--ob-ease-lux),border-color .4s,box-shadow .4s}
.ob-sigil a:hover{transform:rotate(-6deg) scale(1.06);border-color:var(--ob-gold-hi);box-shadow:0 0 18px rgba(212,168,56,.3)}
.ob-sigil span{font-family:'Fraunces','Cinzel',serif;font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--ob-gold)}
@media(max-width:640px){.ob-sigil{top:20px;left:18px}.ob-sigil a{width:34px;height:34px}}

/* ── Scroll meridian — right-edge rail with a travelling node ──────────── */
.ob-meridian{position:fixed;top:8%;right:26px;height:84%;width:18px;z-index:58;
  opacity:0;transition:opacity .6s var(--ob-ease);pointer-events:none}
body.ob-entered .ob-meridian{opacity:.9}
.ob-mer-rail{position:absolute;top:0;left:9px;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,rgba(212,168,56,.4) 12%,rgba(212,168,56,.4) 88%,transparent)}
.ob-mer-node{position:absolute;left:5px;top:8%;width:9px;height:9px;transform:rotate(45deg) translateY(-50%);
  background:var(--ob-gold);box-shadow:0 0 10px rgba(212,168,56,.7);transition:top .15s linear}
.ob-mer-pct{position:absolute;bottom:-26px;right:-2px;font-family:'JetBrains Mono',monospace;
  font-size:.6rem;letter-spacing:.2em;color:var(--ob-gold);writing-mode:vertical-rl;transform:rotate(180deg)}
@media(max-width:880px){.ob-meridian{display:none}}

/* ── Kinetic eyebrows — tracking settles in as labels arrive ───────────── */
.ob-in .ob-kin{animation:ob-track 1s var(--ob-ease-lux) both}
@keyframes ob-track{0%{letter-spacing:.05em;opacity:0;clip-path:inset(0 100% 0 0)}
  100%{opacity:1;clip-path:inset(0 0 0 0)}}

@media(prefers-reduced-motion:reduce){
  .ob-knock-seal::after,.ob-knock-mono,.ob-knock-cue{animation:none}
  .ob-torch{display:none}
  .ob-in .ob-kin{animation:none}
}