/* 해외근로자 입구 — 웅장 르네상스 · 건물 뒤 빛나는 골드 로고 천천히 회전 */
.oe-renaissance {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  perspective: 1600px;
  transform-style: preserve-3d;
  overflow: hidden;
}
.oe-renaissance.hidden { display: none !important; }

/* —— 웅장한 하늘·광휘 배경 —— */
.oe-ren-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 28%, rgba(255, 220, 120, 0.55), transparent 62%),
    radial-gradient(ellipse 100% 80% at 50% -10%, rgba(255, 236, 170, 0.35), transparent 50%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(60, 20, 30, 0.65), transparent 50%),
    linear-gradient(180deg, #12081c 0%, #2a1428 22%, #5a2e20 48%, #1a1020 100%);
  opacity: 0.92;
}
.oe-ren-godrays {
  position: absolute;
  left: 50%;
  top: -8%;
  width: 140%;
  height: 70%;
  transform: translateX(-50%);
  z-index: 0;
  background:
    conic-gradient(
      from 200deg at 50% 0%,
      transparent 0deg,
      rgba(255, 220, 120, 0.08) 12deg,
      transparent 24deg,
      rgba(255, 200, 80, 0.12) 36deg,
      transparent 48deg,
      rgba(255, 230, 150, 0.1) 60deg,
      transparent 72deg,
      rgba(255, 210, 100, 0.09) 84deg,
      transparent 96deg,
      rgba(255, 230, 140, 0.07) 108deg,
      transparent 140deg
    );
  animation: oeGodrayPulse 10s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  opacity: 0.85;
}
@keyframes oeGodrayPulse {
  from { opacity: 0.55; filter: brightness(0.95); }
  to { opacity: 0.95; filter: brightness(1.15); }
}
.oe-ren-orbs {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 220, 100, 0.28), transparent 22%),
    radial-gradient(circle at 22% 48%, rgba(255, 190, 80, 0.12), transparent 14%),
    radial-gradient(circle at 78% 46%, rgba(255, 190, 80, 0.12), transparent 14%);
  animation: oeRenGlow 7s ease-in-out infinite alternate;
}
@keyframes oeRenGlow {
  from { opacity: 0.65; }
  to { opacity: 1; }
}

/* —— 건물 뒤: Exord premium center (static · NO propeller/wireframe flicker) —— */
.oe-logo-back {
  position: absolute;
  left: 50%;
  top: 10%;
  width: min(360px, 72vw);
  height: auto;
  min-height: min(220px, 42vw);
  transform: translateX(-50%) translateZ(-80px);
  z-index: 1;
  text-align: center;
  filter: drop-shadow(0 0 22px rgba(232, 200, 110, 0.28));
}
.oe-exord-premium {
  position: relative;
  width: 100%;
  padding: 1.25rem 0.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  text-align: center;
}
.oe-exord-premium .exord-premium-center__emblem {
  width: clamp(120px, 22vw, 200px);
  height: clamp(52px, 10vw, 88px);
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(232, 200, 110, 0.22));
  animation: exord-premium-breathe 7s ease-in-out infinite;
}
.oe-exord-premium .exord-premium-center__wordmark {
  height: clamp(28px, 5.5vw, 44px);
  width: auto;
  max-width: min(280px, 56vw);
  object-fit: contain;
}
.oe-exord-premium .exord-premium-center__legal {
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200, 210, 230, 0.42);
}
@keyframes exord-premium-breathe {
  0%, 100% { opacity: 0.92; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .oe-exord-premium .exord-premium-center__emblem { animation: none; }
}
/* Legacy spin/glow/medal — disabled (tacky wireframe flicker killed) */
.oe-logo-spin,
.oe-logo-glow,
.oe-logo-medal,
.oe-logo-ring {
  display: none !important;
  animation: none !important;
}
@keyframes oeLogoSlowSpin {
  from { transform: none; }
  to { transform: none; }
}
@keyframes oeLogoShine {
  from { opacity: 1; transform: none; }
  to { opacity: 1; transform: none; }
}
@keyframes oeRingPulse {
  from { transform: none; opacity: 1; }
  to { transform: scale(1.04); opacity: 1; }
}
.oe-logo-back .oe-logo-caption {
  position: absolute;
  left: 50%;
  bottom: -6%;
  transform: translateX(-50%);
  width: 100%;
  font-family: Georgia, "Times New Roman", "Noto Serif KR", serif;
  font-size: clamp(13px, 2.6vw, 18px);
  letter-spacing: 0.28em;
  color: #ffe9a8;
  text-shadow:
    0 0 12px rgba(255, 210, 80, 0.9),
    0 2px 10px #000;
}

/* —— 앞쪽 건물 파사드 (로고보다 앞) —— */
.oe-ren-facade {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 16%;
  height: 42%;
  z-index: 3;
  background:
    linear-gradient(180deg, transparent 0%, rgba(40, 22, 12, 0.35) 30%, rgba(28, 14, 8, 0.72) 100%);
  box-shadow: 0 -40px 80px rgba(0, 0, 0, 0.35);
  transform: translateZ(40px);
  border-top: 1px solid rgba(212, 175, 55, 0.25);
}
.oe-ren-arch {
  position: absolute;
  left: 50%;
  top: 10%;
  width: min(680px, 88vw);
  height: 52%;
  z-index: 4;
  transform: translateX(-50%) translateZ(50px);
  border: 3px solid rgba(255, 220, 120, 0.65);
  border-bottom: 0;
  border-radius: 360px 360px 0 0 / 280px 280px 0 0;
  box-shadow:
    0 0 0 1px rgba(255, 243, 200, 0.35) inset,
    0 0 64px rgba(255, 200, 80, 0.28),
    inset 0 -24px 70px rgba(0, 0, 0, 0.45);
  background: linear-gradient(180deg, rgba(255, 240, 200, 0.1), transparent 60%);
  /* 중앙 비워 뒤 로고가 아치 사이로 보이게 */
  -webkit-mask-image: radial-gradient(ellipse 70% 85% at 50% 100%, transparent 42%, #000 43%);
  mask-image: radial-gradient(ellipse 70% 85% at 50% 100%, transparent 42%, #000 43%);
}
.oe-ren-arch::before,
.oe-ren-arch::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 64px;
  height: 78%;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 235, 180, 0.45) 0 10px,
      rgba(120, 70, 30, 0.28) 10px 20px
    ),
    linear-gradient(90deg, #c9a227, #fff0c0 45%, #8a6418);
  box-shadow: 0 0 28px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 200, 80, 0.25);
}
.oe-ren-arch::before { left: -22px; border-radius: 10px 10px 0 0; }
.oe-ren-arch::after { right: -22px; border-radius: 10px 10px 0 0; }

.oe-ren-pediment {
  position: absolute;
  left: 50%;
  top: 4%;
  width: min(540px, 76vw);
  height: 78px;
  z-index: 5;
  transform: translateX(-50%) translateZ(60px);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  background: linear-gradient(180deg, #fff3cf, #e8c872 40%, #c9a227 70%, #7a5a18);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(255, 210, 80, 0.35);
}
.oe-ren-pediment-title {
  position: absolute;
  left: 50%;
  top: 42px;
  z-index: 6;
  transform: translateX(-50%) translateZ(70px);
  font-family: Georgia, "Times New Roman", "Noto Serif KR", serif;
  font-size: clamp(11px, 2.4vw, 15px);
  letter-spacing: 0.2em;
  color: #3a2208;
  text-shadow: 0 1px 0 rgba(255, 245, 210, 0.7);
  white-space: nowrap;
}

.oe-ren-col {
  position: absolute;
  bottom: 16%;
  width: clamp(48px, 8vw, 72px);
  height: 52%;
  z-index: 5;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.4), transparent 18%, transparent 82%, rgba(0,0,0,0.35)),
    linear-gradient(180deg, #fff3cf, #e8c872 18%, #c9a227 45%, #8a6418 82%, #5a4010);
  border-radius: 8px 8px 2px 2px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45), 0 0 24px rgba(255, 200, 80, 0.2);
  transform-origin: bottom center;
}
.oe-ren-col::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -12%;
  right: -12%;
  height: 24px;
  background: linear-gradient(180deg, #fff8e0, #c9a227);
  border-radius: 4px;
  box-shadow: 0 0 16px rgba(255, 220, 120, 0.4);
}
.oe-ren-col::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: -22%;
  right: -22%;
  height: 20px;
  background: linear-gradient(180deg, #d4b56a, #5a4010);
  border-radius: 3px;
}
.oe-ren-col-l { left: 4%; transform: rotateY(20deg) translateZ(55px); }
.oe-ren-col-r { right: 4%; transform: rotateY(-20deg) translateZ(55px); }

.oe-ren-floor {
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: 0;
  height: 38%;
  z-index: 3;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 245, 220, 0.1) 0 48px,
      rgba(80, 40, 20, 0.14) 48px 96px
    ),
    linear-gradient(180deg, transparent, rgba(30, 14, 8, 0.88));
  transform: rotateX(58deg);
  transform-origin: bottom center;
  box-shadow: 0 -40px 90px rgba(0, 0, 0, 0.5);
}

body.oe-renaissance-active .oe-scene-root .wbpc-scene-video-wrap {
  opacity: 0.32;
  filter: saturate(0.7) brightness(0.72) sepia(0.28) contrast(1.05);
}
body.oe-renaissance-active .oe-hologram {
  bottom: 12%;
  z-index: 8;
}
body.oe-renaissance-active .oe-holo-caption {
  background: rgba(32, 16, 8, 0.82);
  border-color: rgba(255, 210, 100, 0.55);
  color: #fff8e7;
  font-family: Georgia, "Noto Serif KR", serif;
  box-shadow: 0 0 28px rgba(201, 162, 39, 0.25);
}
body.oe-renaissance-active .oe-hud {
  background: linear-gradient(transparent, rgba(22, 10, 6, 0.96));
  z-index: 9;
}
body.oe-renaissance-active #oe-progress-bar {
  background: linear-gradient(90deg, #8a6418, #f0d78c, #c9a227, #fff3cf);
  box-shadow: 0 0 12px rgba(255, 210, 80, 0.45);
}

body.oe-museum-active .oe-renaissance {
  display: none !important;
}

@media (max-width: 640px) {
  .oe-logo-back {
    width: min(300px, 86vw);
    height: min(300px, 86vw);
    top: 10%;
  }
  .oe-ren-col { height: 44%; width: 40px; }
  .oe-ren-pediment-title { font-size: 10px; top: 46px; }
  /* Keep spin killed on mobile — never reintroduce rotateZ propeller flicker */
  @keyframes oeLogoSlowSpin {
    from { transform: none; }
    to { transform: none; }
  }
}
