/* ═══════════════════════════════════════════════════
   LUXORIO — Entrance Animation
   ═══════════════════════════════════════════════════ */

/* ── Overlay: covers full screen on all devices ── */
#en {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9800;
  overflow: hidden;
  pointer-events: all;
}

/* ── Dark background ── */
.en-bg {
  position: absolute; inset: 0;
  background: #0C0906;
  /* Extra coverage for iOS safe-area gaps */
  top: -50px; bottom: -50px;
}

/* ── Warm center glow ── */
.en-glow {
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse 30% 50% at 50% 52%,
    rgba(255,238,198,0.20) 0%,
    rgba(240,210,155,0.11) 30%,
    rgba(200,165,95,0.04) 60%,
    transparent 82%
  );
  pointer-events: none;
}
.en-opening .en-glow {
  animation: enGlowIn 2.4s ease 0.7s both;
}
@keyframes enGlowIn {
  0%   { filter: brightness(1);   }
  100% { filter: brightness(2.2); }
}

/* ═══════════════════════════════════════════════════
   DOOR HALVES
   ═══════════════════════════════════════════════════ */
.en-door {
  position: absolute;
  top: -50px; bottom: -50px; /* cover any safe-area gaps */
  width: 50%;
  overflow: hidden;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.en-door-l {
  left: 0;
  box-shadow: inset -10px 0 30px rgba(0,0,0,.45),
              inset -1px  0  3px  rgba(0,0,0,.6);
}
.en-door-r {
  right: 0;
  box-shadow: inset 10px 0 30px rgba(0,0,0,.45),
              inset  1px 0  3px  rgba(0,0,0,.6);
}

/* ── Wood texture ── */
.en-wood {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,  rgba(255,255,255,.038) 0px, transparent 55px),
    linear-gradient(to bottom, rgba(255,255,255,.022) 0px, transparent 80px),
    linear-gradient(to left,   rgba(0,0,0,.10) 0px, transparent 65px),
    repeating-linear-gradient(
      91.3deg,
      transparent 0px, transparent 19px,
      rgba(0,0,0,.010) 19px, rgba(0,0,0,.010) 20px
    ),
    repeating-linear-gradient(
      89.4deg,
      transparent 0px, transparent 48px,
      rgba(0,0,0,.012) 48px, rgba(0,0,0,.012) 50px
    ),
    linear-gradient(
      172deg,
      #D4C4AB  0%,
      #CAB89A 18%,
      #C2AC8A 35%,
      #C8B394 54%,
      #BEAA88 72%,
      #C4B495 100%
    );
}

/* ── SVG ornament ── */
.en-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* ═══════════════════════════════════════════════════
   CENTER SEAM
   ═══════════════════════════════════════════════════ */
.en-seam {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 3px;
  transform: translateX(-50%);
  z-index: 3;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(10,7,3,.92) 8%,
    rgba(10,7,3,.96) 50%,
    rgba(10,7,3,.92) 92%,
    transparent 100%
  );
}
.en-seam::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(201,169,110,.35) 15%,
    rgba(201,169,110,.50) 50%,
    rgba(201,169,110,.35) 85%,
    transparent 100%
  );
}

/* ═══════════════════════════════════════════════════
   OPENING ANIMATION
   ═══════════════════════════════════════════════════ */
.en-opening .en-door-l {
  animation: enOpenL 2.05s cubic-bezier(0.76, 0, 0.24, 1) 0.68s both;
}
.en-opening .en-door-r {
  animation: enOpenR 2.05s cubic-bezier(0.76, 0, 0.24, 1) 0.68s both;
}
.en-opening .en-seam {
  animation: enSeamFade .35s ease .72s both;
}

@keyframes enOpenL {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@keyframes enOpenR {
  0%   { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
@keyframes enSeamFade { to { opacity: 0; } }

/* ── Overlay fade-out ── */
.en-done {
  animation: enFadeOut .68s ease both;
  pointer-events: none;
}
@keyframes enFadeOut { to { opacity: 0; } }

/* ═══════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .en-door-l { box-shadow: inset -5px 0 16px rgba(0,0,0,.38); }
  .en-door-r { box-shadow: inset  5px 0 16px rgba(0,0,0,.38); }
  .en-seam   { width: 2px; }

  /* Hide complex SVG on mobile — much lighter render */
  .en-svg { display: none; }

  /* Simpler wood on mobile */
  .en-wood {
    background: linear-gradient(
      172deg,
      #D4C4AB 0%, #CAB89A 25%, #C2AC8A 50%, #C8B394 75%, #C4B495 100%
    );
  }

  /* Slightly faster on mobile */
  .en-opening .en-door-l {
    animation: enOpenL 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.3s both;
  }
  .en-opening .en-door-r {
    animation: enOpenR 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.3s both;
  }
  .en-opening .en-seam {
    animation: enSeamFade .2s ease .32s both;
  }
}