/* ============================================================
   INTRO SCREEN — intro.css  (Premium v4 · Salon Entrance)
   ============================================================ */

:root {
  --gold:     #c9a962;
  --gold-lt:  #e8d49a;
  --gold-dim: #7a6530;
  --door-a:   #1c1812;
  --door-b:   #0e0c09;
  --bg:       #06050a;
  --t-door:   1.7s;
  --t-btn:    0.55s;
}

/* ── Overlay ── */
#intro-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
}

/* ── Background atmosphere ── */
.intro-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%,  rgba(201,169,98,.13) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 50% 100%, rgba(201,169,98,.05) 0%, transparent 55%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 30%, rgba(0,0,0,.5) 100%),
    url('background-intro.jpg') center/cover no-repeat;
}

/* ── Particles canvas ── */
.intro-particles {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
}

/* ── Corner marks ── */
.frame-corner {
  position: absolute; width: 22px; height: 22px;
  border-color: rgba(201,169,98,.38); border-style: solid; border-width: 0;
  pointer-events: none; z-index: 20;
}
.frame-corner.tl { top:20px; left:20px; border-top-width:1px; border-left-width:1px; }
.frame-corner.tr { top:20px; right:20px; border-top-width:1px; border-right-width:1px; }
.frame-corner.bl { bottom:20px; left:20px; border-bottom-width:1px; border-left-width:1px; }
.frame-corner.br { bottom:20px; right:20px; border-bottom-width:1px; border-right-width:1px; }

/* ── Top label ── */
.intro-top-label {
  position: absolute; top:24px; left:50%; transform:translateX(-50%);
  z-index:20; pointer-events:none; white-space:nowrap;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(.52rem,.9vw,.68rem); letter-spacing:.65em; text-transform:uppercase;
  color:rgba(226, 201, 138, 0.9);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}
.intro-top-line {
  position:absolute; top:38px; left:50%; transform:translateX(-50%);
  width:90px; height:1px; z-index:20; pointer-events:none;
  background:linear-gradient(to right,transparent,rgba(201,169,98,.25),transparent);
}

/* ── Side candle sconces ── */
.intro-sconce {
  position: absolute; top:42%; z-index:15; pointer-events:none;
  display: flex; flex-direction:column; align-items:center; gap:0;
  opacity: 0; transition: opacity 1.2s ease;
}
.intro-sconce.left  { left: clamp(12px,4%,40px); }
.intro-sconce.right { right: clamp(12px,4%,40px); }
.intro-sconce.lit   { opacity: 1; }

.sconce-flame {
  width:3px; height:9px; border-radius:50% 50% 30% 30%;
  background:linear-gradient(to top,rgba(201,169,98,.9),rgba(255,220,100,.5),transparent);
  animation: flicker 1.9s ease-in-out infinite;
}
@keyframes flicker {
  0%,100% { transform:scaleX(1) scaleY(1); }
  33%     { transform:scaleX(1.25) scaleY(.93); }
  66%     { transform:scaleX(.82) scaleY(1.07); }
}
.sconce-candle { width:5px; height:22px; border-radius:2px;
  background:linear-gradient(to right,#a89060,#d4b878,#a89060); }
.sconce-arm    { width:18px; height:1px; background:rgba(201,169,98,.38); }
.sconce-wall   { width:2px; height:20px;
  background:linear-gradient(to bottom,rgba(201,169,98,.28),transparent); }

/* ── Door outer wrapper — fixed tall proportions ── */
.door-wrap {
  position: absolute;
  /* tall elegant proportions, max ~1:2 w:h */
  width:  min(50vw, 320px);
  height: min(92vh, 580px);
  z-index: 5;
}

/* ── Stone frame ── */
.door-outer-frame {
  position: relative;
  width: 100%; height: 100%;
  background: #090806;
  border: 1px solid rgba(201,169,98,.22);
  box-shadow:
    0 0 0 6px #06050a,
    0 0 0 7px rgba(201,169,98,.11),
    0 0 100px rgba(0,0,0,.9),
    inset 0 0 50px rgba(0,0,0,.55);
}

/* arch cap above frame */
.door-outer-frame::before {
  content: '';
  position: absolute;
  top: -15px; left: 18%; right: 18%; height: 15px;
  background: #090806;
  border: 1px solid rgba(201,169,98,.22);
  border-bottom: none;
}
/* keystone diamond */
.door-outer-frame::after {
  content: '';
  position: absolute;
  top: -24px; left:50%; transform:translateX(-50%) rotate(45deg);
  width: 11px; height: 11px;
  background: #090806;
  border: 1px solid rgba(201,169,98,.35);
}

/* inner rule lines on frame */
.frame-rule {
  position: absolute; pointer-events: none;
}
.frame-rule.h { left:0; right:0; height:1px;
  background:linear-gradient(to right,transparent 5%,rgba(201,169,98,.13) 30%,rgba(201,169,98,.13) 70%,transparent 95%); }
.frame-rule.v { top:0; bottom:0; width:1px;
  background:linear-gradient(to bottom,transparent 5%,rgba(201,169,98,.13) 30%,rgba(201,169,98,.13) 70%,transparent 95%); }
.frame-rule.t { top:10px; }
.frame-rule.b { bottom:10px; }
.frame-rule.l { left:10px; }
.frame-rule.r { right:10px; }

/* ── 3D scene ── */
.door-scene {
  width:100%; height:100%;
  perspective: 1200px;
  perspective-origin: 50% 40%;
  position: relative;
  overflow: hidden;
}

/* Interior visible after open */
.door-interior {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 38%,rgba(201,169,98,.08) 0%,transparent 55%),
    var(--bg);
  display: flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
}
.door-interior-sub {
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(.55rem,.9vw,.72rem); letter-spacing:.55em; text-transform:uppercase;
  color:rgba(201,169,98,0); transition:color 1s ease .7s;
}
.door-interior-logo {
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1rem,2.5vw,2rem); font-weight:400; letter-spacing:.18em;
  color:rgba(201,169,98,0); transition:color 1.1s ease .8s;
  text-align: center;
}
#intro-screen.doors-open .door-interior-sub,
#intro-screen.doors-open .door-interior-logo { color:rgba(201,169,98,.5); }

/* floor threshold */
.door-threshold {
  position:absolute; bottom:0; left:0; right:0; height:3px; z-index:5;
  background:linear-gradient(to right,
    transparent 2%,rgba(201,169,98,.35) 15%,rgba(226,201,138,.62) 50%,rgba(201,169,98,.35) 85%,transparent 98%);
  box-shadow:0 0 12px rgba(201,169,98,.15);
}

/* center seam */
.door-center-line {
  position:absolute; top:0; bottom:0; left:50%; width:1px; z-index:7; pointer-events:none;
  background:linear-gradient(to bottom,
    transparent 2%,rgba(201,169,98,.42) 20%,rgba(201,169,98,.6) 50%,rgba(201,169,98,.42) 80%,transparent 98%);
  transition:opacity .45s ease;
}
#intro-screen.doors-open .door-center-line { opacity:0; }

/* ── Door panels ── */
.door-panel {
  position:absolute; top:0; width:50%; height:100%;
  background:linear-gradient(175deg, var(--door-a) 0%,#151210 42%, var(--door-b) 100%);
  transform-style:preserve-3d;
  transition: transform var(--t-door) cubic-bezier(.3,0,.06,1),
              box-shadow var(--t-door) ease;
  will-change:transform; backface-visibility:hidden; z-index:4; overflow:hidden;
}
.door-left  { left:0; transform-origin:left center; }
.door-right { right:0; transform-origin:right center; }

.door-left::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right,rgba(255,255,255,.022) 0%,transparent 45%);
}
.door-right::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to left,rgba(255,255,255,.022) 0%,transparent 45%);
}

#intro-screen.doors-open .door-left  { transform:rotateY(-116deg); box-shadow:-30px 0 80px rgba(0,0,0,.95); }
#intro-screen.doors-open .door-right { transform:rotateY(116deg);  box-shadow:30px 0 80px rgba(0,0,0,.95); }

/* center shadow */
.door-shadow-l {
  position:absolute; top:0; bottom:0; right:0; width:22px; z-index:6; pointer-events:none;
  background:linear-gradient(to right,rgba(0,0,0,.6),transparent);
  transition:opacity var(--t-door);
}
.door-shadow-r {
  position:absolute; top:0; bottom:0; left:0; width:22px; z-index:6; pointer-events:none;
  background:linear-gradient(to left,rgba(0,0,0,.6),transparent);
  transition:opacity var(--t-door);
}
#intro-screen.doors-open .door-shadow-l,
#intro-screen.doors-open .door-shadow-r { opacity:0; }

/* edge glow on open */
.door-edge-l, .door-edge-r {
  position:absolute; top:0; bottom:0; width:3px; z-index:8; pointer-events:none;
  background:linear-gradient(to bottom,
    transparent 5%,rgba(201,169,98,.2) 25%,rgba(226,201,138,.32) 50%,rgba(201,169,98,.2) 75%,transparent 95%);
  opacity:0; transition:opacity .9s ease .3s;
}
.door-edge-l { right:0; }
.door-edge-r { left:0; }
#intro-screen.doors-open .door-edge-l,
#intro-screen.doors-open .door-edge-r { opacity:1; }

/* ── Panel decorative details ── */
.door-mold-top, .door-mold-bot {
  position:absolute; left:6%; right:6%; height:3px; pointer-events:none;
  background:linear-gradient(to right,transparent,rgba(201,169,98,.2),transparent);
}
.door-mold-top { top:4%; }
.door-mold-bot { bottom:4%; }

.door-panel-arch {
  position:absolute; top:5.5%; left:7%; right:7%; height:34%;
  border:1px solid rgba(201,169,98,.18); pointer-events:none;
}
.door-panel-arch::before {
  content:''; position:absolute; inset:4px; border:1px solid rgba(201,169,98,.08);
}
.door-panel-arch::after {
  content:''; position:absolute;
  top:-1px; left:20%; right:20%; height:3px;
  background:linear-gradient(to right,transparent,rgba(201,169,98,.28),transparent);
}

.door-panel-mid {
  position:absolute; top:42%; left:7%; right:7%; height:18%;
  border:1px solid rgba(201,169,98,.14); pointer-events:none;
}
.door-panel-mid::before {
  content:''; position:absolute; inset:3px; border:1px solid rgba(201,169,98,.06);
}

.door-panel-bot {
  position:absolute; bottom:5.5%; left:7%; right:7%; height:28%;
  border:1px solid rgba(201,169,98,.18); pointer-events:none;
}
.door-panel-bot::before {
  content:''; position:absolute; inset:4px; border:1px solid rgba(201,169,98,.08);
}

/* vertical stile */
.door-stile {
  position:absolute; top:5%; bottom:5%; width:1px; pointer-events:none;
  background:linear-gradient(to bottom,
    transparent,rgba(201,169,98,.18) 25%,rgba(201,169,98,.28) 50%,rgba(201,169,98,.18) 75%,transparent);
}
.door-left  .door-stile { right:0; }
.door-right .door-stile { left:0; }

/* ── Escutcheon handle ── */
.door-handle {
  position:absolute; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none;
}
.door-left  .door-handle { right:12%; }
.door-right .door-handle { left:12%; }

.door-escutcheon {
  width:18px; height:72px;
  background:linear-gradient(to right,#6b5420,#b8922e 25%,#d4a84a 50%,#b8922e 75%,#6b5420);
  border-radius:9px;
  box-shadow:0 3px 16px rgba(0,0,0,.8),0 0 0 1px rgba(201,169,98,.18),
             inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:8px 0;
}
.door-escutcheon::before, .door-escutcheon::after {
  content:''; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.15),rgba(0,0,0,.5));
  border:1px solid rgba(0,0,0,.4);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6);
}
.door-lever {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:6px; height:36px; border-radius:3px;
  background:linear-gradient(to right,#8a6c2a,#dab84a 30%,#f0d070 55%,#dab84a 75%,#8a6c2a);
  box-shadow:0 2px 10px rgba(0,0,0,.7);
}

/* ── Button ── */
.intro-btn-wrap {
  position:absolute;
  bottom:clamp(12px,5%,24px);
  left:50%; transform:translateX(-50%);
  z-index:30;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  white-space:nowrap;
  transition:opacity var(--t-btn) ease, transform var(--t-btn) ease;
}
.intro-btn-wrap.hidden {
  opacity:0; transform:translateX(-50%) translateY(10px); pointer-events:none;
}

.intro-btn-hint {
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(.55rem,1vw,.72rem); letter-spacing:.55em; text-transform:uppercase;
  color:rgba(226, 201, 138, 0.5);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

.intro-btn {
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(.62rem,1.3vw,.82rem); font-weight:400;
  letter-spacing:.45em; text-transform:uppercase;
  color:rgba(226,201,138,.88);
  background:rgba(201,169,98,.04);
  border:1px solid rgba(201,169,98,.35);
  border-radius:1px; padding:13px 44px;
  cursor:pointer; outline:none;
  position:relative; overflow:hidden;
  transition:background .3s, border-color .3s, transform .25s;
}
.intro-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(201,169,98,.09) 0%,transparent 55%);
  opacity:0; transition:opacity .3s;
}
.intro-btn:hover {
  background:rgba(201,169,98,.09);
  border-color:rgba(201,169,98,.65);
  transform:translateY(-2px);
}
.intro-btn:hover::before { opacity:1; }
.intro-btn:focus-visible { box-shadow:0 0 0 2px rgba(201,169,98,.45); }
.intro-btn:active { transform:translateY(0); }

/* ── Responsive ── */
@media (max-width:480px) {
  .door-wrap { 
    width:min(80vw,280px); 
    height:min(85vh,460px); }
  .intro-btn { 
    padding:12px 32px; }
  .intro-btn-wrap {
    bottom: 6vh; 
  }
  
}
@media (prefers-reduced-motion:reduce) {
  .door-panel, .intro-btn-wrap, .intro-btn, .intro-sconce {
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}