/* ============================================
   ENTRANCE SCREEN STYLES
   ============================================ */

#screen-entrance {
  background: linear-gradient(160deg, #1a1208 0%, #2e1f0a 50%, #1a1208 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  --entrance-gap: clamp(10px, 2.6dvh, var(--space-xl));
  --entrance-door-min-w: 150px;
  --entrance-door-fluid-w: 54vw;
  --entrance-door-max-w: 280px;
  gap: var(--entrance-gap);
  padding-top: max(clamp(14px, 4dvh, 40px), env(safe-area-inset-top));
  padding-right: clamp(12px, 4vw, 28px);
  padding-left: clamp(12px, 4vw, 28px);
  padding-bottom: calc(max(clamp(14px, 4dvh, 40px), env(safe-area-inset-bottom)) + var(--bottom-nav-h));
  z-index: 160;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Ambient light effect */
#screen-entrance::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,169,110,0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Decorative floating items around the door */
.entrance-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.decor-item {
  --x: 10%;
  --size: 22px;
  --dur: 15s;
  --delay: 0s;
  --drift: 12px;
  --alpha: 0.38;
  position: absolute;
  left: var(--x);
  bottom: -16%;
  width: var(--size);
  height: var(--size);
  opacity: var(--alpha);
  animation: decor-rise var(--dur) linear infinite;
  animation-delay: var(--delay);
}

.decor-core {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  animation: decor-roll-stretch calc(var(--dur) * 0.34) ease-in-out infinite;
  transform-origin: center;
}

.decor-bubble .decor-core {
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(250, 233, 185, 0.75), rgba(200, 169, 110, 0.18));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 0 12px rgba(200,169,110,0.24);
}

.decor-ribbon .decor-core {
  border-radius: 999px;
  background: linear-gradient(140deg, rgba(248,223,156,0.8), rgba(176,119,50,0.3));
  box-shadow: 0 1px 6px rgba(0,0,0,0.2);
}

.decor-confetti .decor-core {
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(255,244,206,0.95), rgba(214,158,81,0.7));
  box-shadow: 0 0 10px rgba(229,188,118,0.26);
}

.decor-icon .decor-core {
  font-size: calc(var(--size) * 0.85);
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.decor-item:nth-child(1)  { --x: 4%;  --size: 18px; --dur: 14s; --delay: -8.2s; --drift: 16px; --alpha: 0.34; }
.decor-item:nth-child(2)  { --x: 14%; --size: 20px; --dur: 17s; --delay: -1.7s; --drift: -22px; --alpha: 0.42; }
.decor-item:nth-child(3)  { --x: 22%; --size: 12px; --dur: 11s; --delay: -3.3s; --drift: 12px; --alpha: 0.5; }
.decor-item:nth-child(4)  { --x: 31%; --size: 24px; --dur: 16s; --delay: -10.8s; --drift: -14px; --alpha: 0.44; }
.decor-item:nth-child(5)  { --x: 42%; --size: 22px; --dur: 13s; --delay: -5.9s; --drift: 20px; --alpha: 0.35; }
.decor-item:nth-child(6)  { --x: 50%; --size: 21px; --dur: 18s; --delay: -2.1s; --drift: -18px; --alpha: 0.42; }
.decor-item:nth-child(7)  { --x: 59%; --size: 16px; --dur: 12s; --delay: -6.4s; --drift: 15px; --alpha: 0.48; }
.decor-item:nth-child(8)  { --x: 67%; --size: 10px; --dur: 10s; --delay: -4.6s; --drift: -11px; --alpha: 0.52; }
.decor-item:nth-child(9)  { --x: 74%; --size: 26px; --dur: 19s; --delay: -9.1s; --drift: 23px; --alpha: 0.38; }
.decor-item:nth-child(10) { --x: 82%; --size: 20px; --dur: 15s; --delay: -0.8s; --drift: -19px; --alpha: 0.36; }
.decor-item:nth-child(11) { --x: 89%; --size: 15px; --dur: 11.5s; --delay: -7.3s; --drift: 9px; --alpha: 0.45; }
.decor-item:nth-child(12) { --x: 95%; --size: 24px; --dur: 17.5s; --delay: -12.4s; --drift: -14px; --alpha: 0.4; }

@keyframes decor-rise {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(var(--drift), -128dvh, 0);
  }
}

@keyframes decor-roll-stretch {
  0% {
    transform: rotate(0deg) scaleX(1) scaleY(1);
  }

  30% {
    transform: rotate(90deg) scaleX(0.84) scaleY(1.16);
  }

  60% {
    transform: rotate(210deg) scaleX(1.2) scaleY(0.8);
  }

  100% {
    transform: rotate(360deg) scaleX(1) scaleY(1);
  }
}

/* ── Store Sign ── */
.entrance-sign {
  text-align: center;
  color: var(--color-primary);
  position: relative;
  z-index: 1;
}

.entrance-sign .store-emoji {
  font-size: clamp(2rem, 8vw, 3.5rem);
  display: block;
  margin-bottom: clamp(4px, 1.6dvh, var(--space-sm));
  animation: float 3s ease-in-out infinite;
}

.entrance-sign h1 {
  font-size: clamp(1.5rem, 6.2vw, var(--font-size-2xl));
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(200,169,110,0.4);
  margin: 0;
}

.store-tagline {
  font-size: clamp(0.8rem, 2.8vw, var(--font-size-sm));
  font-weight: 700;
  color: #f4deb0;
  margin-top: var(--space-xs);
  letter-spacing: 0.08em;
  text-transform: none;
}

/* ── Door Container ── */
.door-container {
  position: relative;
  width: min(
    clamp(var(--entrance-door-min-w), var(--entrance-door-fluid-w), var(--entrance-door-max-w)),
    max(130px, calc((100dvh - 300px) * 0.55))
  );
  min-width: 130px;
  z-index: 1;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.door-container::after {
  content: '';
  position: absolute;
  inset: 2.5% 3.5% 2.5% 3.5%;
  border-radius: 10px 10px 0 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(240,208,128,0.18), rgba(240,208,128,0) 56%),
    linear-gradient(180deg, rgba(8, 7, 6, 0.9), rgba(8, 7, 6, 0.98));
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

.door-frame {
  background: linear-gradient(180deg, #5c3a1e 0%, #3d2410 100%);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: clamp(10px, 3.2vw, var(--space-md));
  box-shadow:
    inset 0 0 0 3px rgba(200,169,110,0.25),
    var(--shadow-lg),
    0 0 40px rgba(200,169,110,0.08);
  aspect-ratio: 0.55 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.door-frame:hover {
  filter: brightness(1.05);
  box-shadow:
    inset 0 0 0 3px rgba(200,169,110,0.34),
    0 10px 22px rgba(0,0,0,0.26),
    0 0 56px rgba(200,169,110,0.12);
}

.door-frame:focus-visible {
  outline: 3px solid rgba(240,208,128,0.7);
  outline-offset: 6px;
}

.door-frame.door-pressed {
  transform: scale(0.985);
}

/* Wood grain texture */
.door-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 18px,
    rgba(0,0,0,0.04) 18px,
    rgba(0,0,0,0.04) 19px
  );
  pointer-events: none;
}

.door-panels {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-sm);
  width: 100%;
  height: 100%;
}

.door-panel {
  background: linear-gradient(135deg, #6b4423 0%, #4a2d14 100%);
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 2px 4px rgba(0,0,0,0.3);
}

.door-knob {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 35% 35%, #f0d080, #c8a030);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 0 8px rgba(200,160,48,0.4);
  animation: knob-glow 3.4s ease-in-out infinite;
}

@keyframes knob-glow {
  0%, 72%, 100% {
    box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 0 8px rgba(200,160,48,0.4);
  }

  78%, 88% {
    box-shadow: 0 1px 5px rgba(0,0,0,0.55), 0 0 14px rgba(240,208,128,0.85);
  }
}

/* Door open animation */
.door-frame.door-opening {
  animation: door-open 0.9s cubic-bezier(0.24, 0.72, 0.18, 1) forwards;
  transform-origin: right center;
  will-change: transform, filter;
  backface-visibility: hidden;
}

.door-frame.door-opening .door-panels {
  animation: door-panels-depth 0.9s ease-out forwards;
}

@keyframes door-open {
  0% {
    transform: perspective(1200px) rotateY(0deg) translateX(0) scale(1);
    filter: brightness(1);
  }

  35% {
    transform: perspective(1200px) rotateY(-42deg) translateX(2px) scale(0.992);
    filter: brightness(0.95);
  }

  100% {
    transform: perspective(1200px) rotateY(-104deg) translateX(8px) scale(0.985);
    filter: brightness(0.72);
    opacity: 0.18;
  }
}

@keyframes door-panels-depth {
  0% {
    transform: translateZ(0);
    filter: brightness(1);
  }

  100% {
    transform: translateZ(-2px);
    filter: brightness(0.86);
  }
}

#screen-entrance.is-entering .door-container::after {
  animation: doorway-reveal 0.86s ease forwards;
}

@keyframes doorway-reveal {
  0% {
    opacity: 0;
    transform: scaleX(0.95);
  }

  45% {
    opacity: 0.55;
    transform: scaleX(1);
  }

  100% {
    opacity: 0.9;
    transform: scaleX(1.02);
  }
}

/* ── Entrance CTA ── */
.entrance-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2dvh, var(--space-md));
  width: min(100%, 420px);
}

.entrance-hint {
  font-size: clamp(0.7rem, 2.4vw, var(--font-size-xs));
  color: rgba(200,169,110,0.45);
}

.door-tap-guide {
  position: absolute;
  left: clamp(-8px, -1vw, -2px);
  top: 50%;
  transform: translate(-100%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  font-size: clamp(0.66rem, 2.3vw, 0.8rem);
  color: #f4deb0;
  background: rgba(20, 13, 6, 0.7);
  border: 1px solid rgba(200,169,110,0.35);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
}

.door-tap-guide.is-visible {
  opacity: 1;
  animation: guide-bob 1.1s ease-in-out 3;
}

.door-tap-guide-icon {
  font-size: 0.95em;
}

@keyframes guide-bob {
  0%, 100% { transform: translate(-100%, -50%); }
  50% { transform: translate(calc(-100% + 6px), -50%); }
}

@media (max-width: 480px) {
  .decor-item:nth-child(n + 10) {
    display: none;
  }

  .door-tap-guide {
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
  }

  .door-tap-guide.is-visible {
    animation: guide-bob-mobile 1.1s ease-in-out 3;
  }

  @keyframes guide-bob-mobile {
    0%, 100% { transform: translateX(-50%); }
    50% { transform: translateX(calc(-50% + 5px)); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .decor-item,
  .decor-core {
    animation: none;
  }

  .decor-item {
    opacity: 0.2;
  }
}

@media (max-height: 680px) {
  #screen-entrance {
    --entrance-door-fluid-w: 45vw;
    --entrance-door-max-w: 230px;
    justify-content: flex-start;
    --entrance-gap: clamp(8px, 2dvh, 16px);
  }

  .entrance-sign .store-emoji {
    font-size: clamp(1.6rem, 7vw, 2.4rem);
  }
}

@media (min-width: 1024px) {
  #screen-entrance {
    --entrance-door-fluid-w: 24vw;
    --entrance-door-max-w: 320px;
    --entrance-gap: clamp(14px, 2.2dvh, 28px);
  }

  .door-container {
    width: clamp(220px, 24vw, 320px);
  }
}

/* ── Floating animation ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── Screen transition: entrance exits ── */
#screen-entrance.exiting {
  animation: screen-zoom-in 0.6s ease-in-out forwards;
}

@keyframes screen-zoom-in {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.12); }
}