/* =========================================================================
   쿠팡서버 (COUPANG 2.0) - 다층 교차 레이어 & 3D 서버 로고/보물상자 스타일시트 (v7)
   1. 배경 밝기 대폭 개선: 어두운 암전 필터를 제거하고 황금 노을 & 공성전 배경을 화사하게 연출
   2. 3D 메탈릭 골드 서버 로고 이미지 적용: [쿠팡서버] (top: 30%)와 [coupang] (top: 58%) 상하 완전 분리 (겹침 방지)
   3. 게임 컨셉 3D 보물/선물상자 다중 배치:
      - 우측 하단 메인 로얄 황금 보물 선물상자 (intro_giftbox_royal.png, z-index: 20)
      - 중앙 우하단 마법 룬 코발트블루·골드 보급 선물상자 세트 (intro_giftbox_supply.png, z-index: 15)
      - 황금 궤적 중앙 공중 투하 미니 보물 선물상자 (intro_giftbox_royal.png, z-index: 13)
   ========================================================================= */

@font-face {
  font-family: 'GmarketSansBold';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --cp-obsidian: #0c0906;
  --cp-gold-bright: #fff9d2;
  --cp-gold: #f5c451;
  --cp-gold-deep: #c47f18;
  --cp-gold-shadow: #4a2705;
  --font-title: 'GmarketSansBold', 'Pretendard Variable', Pretendard, sans-serif;
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body.coupang-intro-body {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  background-color: var(--cp-obsidian);
  color: #f4eee1;
  font-family: var(--font-sans);
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* =========================================================================
   1. 우측 상단 미니 컨트롤 바
   ========================================================================= */
.intro-top-actions {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
}

.intro-ctrl-pill,
.intro-toggle-plate,
.intro-enter-plate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: #f3ead8;
  text-decoration: none;
  cursor: pointer;
  background: rgba(20, 15, 10, 0.72);
  border: 1px solid rgba(251, 191, 36, 0.48);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.intro-ctrl-pill:hover,
.intro-toggle-plate:hover,
.intro-enter-plate:hover {
  transform: translateY(-1px);
  border-color: rgba(254, 240, 138, 0.95);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 14px rgba(245, 158, 11, 0.4);
}

.intro-ctrl-pill.is-sound-on {
  border-color: var(--cp-gold);
  color: var(--cp-gold-bright);
}

.plate-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

.intro-toggle-plate.is-off .plate-led {
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
}

.plate-state {
  color: var(--cp-gold);
  font-weight: 800;
}

.intro-enter-plate {
  background: linear-gradient(180deg, rgba(205, 32, 32, 0.92) 0%, rgba(110, 14, 16, 0.96) 100%);
  border-color: rgba(253, 224, 71, 0.72);
  color: #fffbeb;
}

/* =========================================================================
   2. 전체화면 시네마틱 스테이지 & 화사하고 밝은 황금 대기 광원
   ========================================================================= */
.hf-stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 1200px;
}

.hf-stage.is-shaking {
  animation: hfCameraShake 0.48s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.hf-stage.is-rumbling {
  animation: hfLaunchRumble 0.11s linear infinite;
}

@keyframes hfCameraShake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  15% { transform: translate3d(-8px, 5px, 0) rotate(-0.3deg); }
  35% { transform: translate3d(8px, -6px, 0) rotate(0.35deg); }
  55% { transform: translate3d(-5px, -3px, 0); }
  75% { transform: translate3d(4px, 3px, 0); }
}

@keyframes hfLaunchRumble {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  20%  { transform: translate3d(-4px, 3px, 0) rotate(-0.18deg); }
  40%  { transform: translate3d(4px, -3px, 0) rotate(0.18deg); }
  60%  { transform: translate3d(-5px, -2px, 0) rotate(-0.15deg); }
  80%  { transform: translate3d(5px, 3px, 0) rotate(0.2deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

/* 공식 홈페이지 입장 시 밝게 페이드아웃되는 전체화면 화이트-골드 오버레이 */
.hf-portal-whiteout {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: radial-gradient(
    circle at 74% 18%,
    #ffffff 0%,
    #fffef4 42%,
    #fef3c7 76%,
    #fde68a 100%
  );
}

.hf-backdrop {
  position: absolute;
  inset: -4%;
  z-index: 1;
  pointer-events: none;
}

/* 배경 공성전 & 황금 노을 이미지를 어둡게 죽이지 않고 밝고 선명하게 노출 (brightness 0.42 -> 0.98) */
.hf-bg-photo {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: brightness(0.98) contrast(1.08) saturate(1.26);
  transform: scale(1.05);
}

/* 하늘과 성채 뒤편을 밝혀주는 화사한 황금 앰버 스크린 광원 */
.hf-sky-radiance {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 68% 55% at 54% 34%, rgba(254, 240, 138, 0.28) 0%, rgba(251, 191, 36, 0.16) 45%, transparent 78%),
    radial-gradient(ellipse 50% 42% at 78% 24%, rgba(255, 251, 235, 0.32) 0%, rgba(245, 158, 11, 0.18) 52%, transparent 78%);
  mix-blend-mode: screen;
}

.hf-clouds-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 64% 48% at 52% 62%, rgba(251, 191, 36, 0.36) 0%, rgba(217, 119, 6, 0.16) 52%, transparent 78%),
    radial-gradient(ellipse 42% 38% at 24% 42%, rgba(253, 224, 71, 0.22) 0%, transparent 70%);
}

/* 기존의 90% 암전 비네팅을 걷어내고 외곽 테두리만 은은하게 잡아주는 라이트 비네팅 */
.hf-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 52% 48%, transparent 56%, rgba(14, 9, 4, 0.44) 100%),
    linear-gradient(180deg, rgba(12, 8, 4, 0.34) 0%, transparent 16%, transparent 80%, rgba(12, 8, 4, 0.56) 100%);
}

.hf-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hf-canvas-bg {
  z-index: 2;
}

.hf-gold-flash {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: radial-gradient(circle at var(--shockwave-cx, 38%) var(--shockwave-cy, 32%), rgba(255, 251, 220, 0.85) 0%, rgba(251, 191, 36, 0.35) 38%, transparent 72%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.hf-gold-shockwave {
  position: absolute;
  left: 38%;
  top: 32%;
  width: 220px;
  height: 220px;
  margin-left: -110px;
  margin-top: -110px;
  border-radius: 50%;
  transform: translate3d(0, 0, 0) scale(0.15);
  transform-origin: center center;
  z-index: 24;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* 외부 대기 파동 (Outer Blast Wave): 은은하고 웅장하게 확장되는 황금 앰버 파동 */
.shockwave-blast-outer {
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 36%,
    rgba(254, 240, 138, 0.22) 48%,
    rgba(251, 191, 36, 0.45) 58%,
    rgba(217, 119, 6, 0.25) 68%,
    transparent 82%
  );
  box-shadow: 0 0 50px rgba(245, 158, 11, 0.45);
}

/* 내부 코어 충격파 링 (Core Shockwave Ring): 선명하고 강렬한 백금-골드 충격파 테두리 */
.shockwave-ring-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3.5px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 22px rgba(254, 240, 138, 0.95),
    0 0 44px rgba(251, 191, 36, 0.8),
    inset 0 0 18px rgba(254, 240, 138, 0.65);
}

/* 보조 엠버 스파크 링: 펄스 디테일 */
.shockwave-spark-ring {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1.5px dashed rgba(254, 240, 138, 0.7);
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.55);
}

/* =========================================================================
   3. 메인 히어로 컴포지션 무대
   ========================================================================= */
.hero-composition {
  --kor-logo-w: clamp(310px, 45vw, 635px);
  position: relative;
  z-index: 10;
  width: min(1420px, 100vw);
  height: min(790px, 88dvh);
  overflow: visible;
  pointer-events: none;
}

/* 공통 구름 패치 스타일 */
.cloud-patch {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

.cloud-patch-img,
.cloud-sprite {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* =========================================================================
   [LAYER z-index: 4] 원경 구름층 & 대각선 황금 광선 (.cloud-layer-far)
   ========================================================================= */
.cloud-layer-far {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.diagonal-godrays {
  position: absolute;
  inset: -15%;
  background:
    repeating-linear-gradient(
      -42deg,
      transparent 0px,
      transparent 46px,
      rgba(254, 240, 138, 0.065) 49px,
      rgba(245, 158, 11, 0.12) 54px,
      transparent 59px,
      transparent 112px
    );
  mask-image: radial-gradient(ellipse 68% 58% at 56% 46%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 68% 58% at 56% 46%, #000 20%, transparent 78%);
  animation: godrayPulse 4s ease-in-out infinite alternate;
}

@keyframes godrayPulse {
  0% { opacity: 0.72; transform: translate3d(-6px, 6px, 0); }
  100% { opacity: 1; transform: translate3d(6px, -6px, 0); }
}

.far-cloud-top-left {
  position: absolute;
  left: -6%;
  top: 4%;
  width: clamp(300px, 35vw, 500px);
  opacity: 0.55;
  filter: brightness(0.95);
  transform: rotate(-8deg);
}

.far-cloud-top-right {
  position: absolute;
  right: -5%;
  top: 6%;
  width: clamp(340px, 39vw, 580px);
  opacity: 0.62;
  filter: brightness(1.0);
  transform: scaleX(-1) rotate(5deg);
}

/* =========================================================================
   [LAYER z-index: 7] 중경 구름층 (.cloud-layer-mid)
   - '쿠팡서버'(z-index: 16) 및 'coupang'(z-index: 12)보다 뒤쪽에 위치!
   ========================================================================= */
.cloud-layer-mid {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.mid-patch-behind-kor-left {
  left: -5%;
  top: 17%;
  width: clamp(330px, 40vw, 570px);
  opacity: 0.92;
  filter: brightness(1.06) drop-shadow(0 10px 24px rgba(0, 0, 0, 0.65));
  animation: patchFloat1 7.0s ease-in-out infinite alternate;
}

.mid-patch-behind-kor-right {
  left: 29%;
  top: 23%;
  width: clamp(310px, 36vw, 520px);
  opacity: 0.86;
  filter: brightness(1.06) drop-shadow(0 10px 24px rgba(0, 0, 0, 0.65));
  animation: patchFloat2 6.4s ease-in-out infinite alternate;
}

.mid-patch-behind-rocket {
  right: -3%;
  bottom: 6%;
  width: clamp(360px, 43vw, 600px);
  opacity: 0.92;
  filter: brightness(1.08);
  animation: patchFloat1 6.8s ease-in-out infinite alternate-reverse;
}

.mid-patch-behind-rocket .cloud-patch-img {
  transform: scaleX(-1);
}

/* =========================================================================
   [LAYER z-index: 9] 다중 황금 혜성 궤적 SVG (.golden-trail-layer)
   - 끝으로 갈수록 부드럽게 블러·마스킹되어 사라지는 원형 호 연출
   ========================================================================= */
.golden-trail-layer {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  transform-origin: 20% 80%;
  mask-image: radial-gradient(
    ellipse 62% 55% at 54% 52%,
    #000 32%,
    rgba(0, 0, 0, 0.78) 58%,
    rgba(0, 0, 0, 0.25) 78%,
    transparent 96%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 62% 55% at 54% 52%,
    #000 32%,
    rgba(0, 0, 0, 0.78) 58%,
    rgba(0, 0, 0, 0.25) 78%,
    transparent 96%
  );
}

.golden-trail-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.trail-strand {
  animation: trailShimmer 2.4s linear infinite;
}

@keyframes trailShimmer {
  0% { filter: brightness(0.98); }
  50% { filter: brightness(1.28); }
  100% { filter: brightness(0.98); }
}

/* =========================================================================
   [LAYER z-index: 12] 3D 메탈릭 골드 영문 로고 이미지 [coupang] (.wordmark-eng-rig)
   - ★ '쿠팡서버'(top: 27%, 높이 = --kor-logo-w * 0.287) 바로 아래에 착 밀착되도록 수식 배치!
   ========================================================================= */
.wordmark-eng-rig {
  position: absolute;
  left: calc(6.2% + var(--kor-logo-w) * 0.06);
  top: calc(27% + var(--kor-logo-w) * 0.266);
  z-index: 12;
  pointer-events: none;
  will-change: transform, opacity;
}

/* =========================================================================
   [LAYER z-index: 18] 게임 컨셉 추가 보물상자 #3: '쿠팡서버' 우측 하단 앞으로 살짝 올라온 보물상자 (.drop-chest-rig)
   - ★ '쿠팡서버'(z-index: 16)보다 위 레이어(z-index: 18)로 배치하고 위치를 살짝 위로(top: 41.5%) 이동!
   ========================================================================= */
.drop-chest-rig {
  position: absolute;
  left: 44%;
  top: 41.5%;
  width: clamp(84px, 9.8vw, 136px);
  height: auto;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform, opacity;
}

.drop-chest-img {
  width: 100%;
  height: auto;
  transform: rotate(-14deg);
  filter:
    drop-shadow(0 12px 20px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 22px rgba(253, 224, 71, 0.55));
}

/* =========================================================================
   [LAYER z-index: 14] 중전경 부분 구름층 (.cloud-layer-near)
   - '쿠팡서버'(z-index: 16)보다는 뒤에 있어서 메인 한글 서버 로고를 절대 가리지 않음!
   - 'coupang'(z-index: 12)의 좌하단 끝자락과 황금 궤적 아래만 자연스럽게 살짝 감쌈
   ========================================================================= */
.cloud-layer-near {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
}

.near-patch-under-eng {
  left: -5%;
  bottom: -11%;
  width: clamp(290px, 35vw, 495px);
  filter: brightness(1.06) drop-shadow(0 12px 26px rgba(0, 0, 0, 0.78));
  animation: patchFloat2 5.8s ease-in-out infinite alternate;
}

.near-patch-bottom-trail {
  left: 33%;
  bottom: -12%;
  width: clamp(280px, 34vw, 480px);
  opacity: 0.92;
  filter: brightness(1.06) drop-shadow(0 12px 26px rgba(0, 0, 0, 0.75));
  animation: patchFloat1 6.2s ease-in-out infinite alternate-reverse;
}

/* =========================================================================
   [LAYER z-index: 15] 게임 컨셉 추가 보물상자 #2: 코발트 블루 & 골드 마법 보급 선물상자 세트 (.supplybox-rig)
   ========================================================================= */
.supplybox-rig {
  position: absolute;
  right: 28.5%;
  bottom: 5.5%;
  width: clamp(140px, 17vw, 238px);
  height: auto;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform, opacity;
}

.supplybox-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 16px 26px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 28px rgba(56, 189, 248, 0.42))
    drop-shadow(0 0 18px rgba(251, 191, 36, 0.45));
}

.giftbox-aura-glow {
  position: absolute;
  inset: -24%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(254, 240, 138, 0.48) 0%,
    rgba(245, 158, 11, 0.22) 42%,
    rgba(217, 119, 6, 0.06) 66%,
    transparent 82%
  );
  filter: blur(20px);
  mask-image: radial-gradient(circle, #000 15%, rgba(0, 0, 0, 0.45) 55%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle, #000 15%, rgba(0, 0, 0, 0.45) 55%, transparent 80%);
  z-index: 1;
  animation: auraPulse 1.8s ease-in-out infinite alternate;
}

.giftbox-aura-glow.supply-aura {
  background: radial-gradient(
    circle,
    rgba(125, 211, 252, 0.42) 0%,
    rgba(251, 191, 36, 0.22) 44%,
    rgba(56, 189, 248, 0.05) 68%,
    transparent 82%
  );
}

/* =========================================================================
   [LAYER z-index: 16] 메인 3D 메탈릭 골드 서버 로고 이미지 [쿠팡서버] (.wordmark-kor-rig)
   - ★ 원경(4)·중경(7)·중전경(14) 구름들보다 앞(z-index: 16)에 위치하여 선명하게 돌출!
   - ★ 하단 'coupang'이 바로 아래에 밀착되도록 top: 27% 기준점으로 설정!
   ========================================================================= */
.wordmark-kor-rig {
  position: absolute;
  left: 6.2%;
  top: 27%;
  z-index: 16;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
  will-change: transform, opacity;
}

.wordmark-3d-wrap {
  position: relative;
  display: inline-block;
  transform-origin: 50% 50%;
  animation: logoBreathing 4.4s ease-in-out infinite alternate;
}

.server-logo-kor-img {
  display: block;
  width: var(--kor-logo-w);
  height: auto;
  filter:
    drop-shadow(0 14px 28px rgba(0, 0, 0, 0.88))
    drop-shadow(0 0 38px rgba(245, 158, 11, 0.46));
}

.server-logo-eng-img {
  display: block;
  width: calc(var(--kor-logo-w) * 0.62);
  height: auto;
  transform-origin: 50% 50%;
  animation: logoBreathing 4.4s ease-in-out infinite alternate;
  filter:
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.82))
    drop-shadow(0 0 24px rgba(245, 158, 11, 0.38));
}

@keyframes logoBreathing {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.034);
  }
}

.star-flare {
  position: absolute;
  width: 44px;
  height: 44px;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(circle, #ffffff 0%, #fef08a 28%, rgba(245, 158, 11, 0) 70%);
  animation: flareTwinkle 2.2s ease-in-out infinite alternate;
}

.star-flare::before,
.star-flare::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent 0%, #fef08a 32%, #ffffff 50%, #fef08a 68%, transparent 100%);
  border-radius: 999px;
}

.star-flare::before {
  width: 58px;
  height: 2.5px;
}

.star-flare::after {
  width: 2.5px;
  height: 58px;
}

.star-flare.flare-1 { left: 24.5%; top: -4%; animation-delay: 0s; }
.star-flare.flare-2 { left: 48%; top: -5%; width: 52px; height: 52px; animation-delay: 0.55s; }
.star-flare.flare-3 { right: 1.5%; top: -4%; width: 50px; height: 50px; animation-delay: 1.1s; }
.star-flare.flare-4 { left: 2%; top: 44%; width: 38px; height: 38px; animation-delay: 1.6s; }

@keyframes flareTwinkle {
  0% { transform: scale(0.65) rotate(0deg); opacity: 0.55; }
  100% { transform: scale(1.22) rotate(12deg); opacity: 1; }
}

/* =========================================================================
   [LAYER z-index: 17] 좌측 외곽 엣지 구름 (.cloud-layer-accent)
   ========================================================================= */
.cloud-layer-accent {
  position: absolute;
  inset: 0;
  z-index: 17;
  pointer-events: none;
}

.accent-patch-left-edge {
  left: -13%;
  top: 26%;
  width: clamp(210px, 24vw, 340px);
  opacity: 0.88;
  filter: brightness(1.06) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.72));
  animation: patchFloat1 5.2s ease-in-out infinite alternate;
}

/* [LAYER z-index: 18] 실시간 로켓 플라즈마 화염 & 별빛 스파크 캔버스 */
.hf-canvas-trail {
  z-index: 18;
}

/* =========================================================================
   [LAYER z-index: 19] 고해상도 3D 메탈릭 코발트블루 로켓 이미지 + 일체형 노즐 화염
   ========================================================================= */
.rocket-rig {
  position: absolute;
  right: 5.5%;
  top: -3%;
  width: clamp(275px, 35.5vw, 470px);
  height: clamp(275px, 35.5vw, 470px);
  z-index: 19;
  pointer-events: none;
  will-change: transform, opacity;
}

.rocket-rotator {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(42deg);
  transform-origin: 50% 50%;
}

.rocket-sonic-aura {
  position: absolute;
  left: 14%;
  top: 4%;
  width: 72%;
  height: 82%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 42%,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(254, 240, 138, 0.45) 32%,
    rgba(245, 158, 11, 0.18) 58%,
    transparent 80%
  );
  filter: blur(22px);
  mask-image: radial-gradient(ellipse at 50% 45%, #000 12%, rgba(0, 0, 0, 0.5) 52%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 12%, rgba(0, 0, 0, 0.5) 52%, transparent 78%);
  z-index: 0;
  animation: auraPulse 1.2s ease-in-out infinite alternate;
}

@keyframes auraPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(1.06); opacity: 1; }
}

.rocket-3d-img {
  position: relative;
  z-index: 2;
  display: block;
  width: 44%;
  height: auto;
  filter:
    drop-shadow(0 16px 30px rgba(0, 0, 0, 0.88))
    drop-shadow(0 0 26px rgba(245, 158, 11, 0.52))
    drop-shadow(0 0 38px rgba(217, 119, 6, 0.42));
}

.rocket-thruster {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 85.5%;
  width: 34%;
  height: 64%;
  transform: translateX(-50%);
  transform-origin: 50% 0%;
  pointer-events: none;
  mask-image: radial-gradient(
    ellipse 52% 92% at 50% 8%,
    #000 16%,
    rgba(0, 0, 0, 0.78) 48%,
    rgba(0, 0, 0, 0.22) 76%,
    transparent 96%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 52% 92% at 50% 8%,
    #000 16%,
    rgba(0, 0, 0, 0.78) 48%,
    rgba(0, 0, 0, 0.22) 76%,
    transparent 96%
  );
}

.flame-glow-aura {
  position: absolute;
  left: -55%;
  top: -18%;
  width: 210%;
  height: 150%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 24%,
    rgba(255, 251, 220, 0.92) 0%,
    rgba(253, 224, 71, 0.68) 28%,
    rgba(249, 115, 22, 0.36) 54%,
    transparent 78%
  );
  filter: blur(22px);
  animation: thrusterPulse 0.14s infinite alternate ease-in-out;
}

.flame-outer {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 55% 55% / 22% 22% 78% 78%;
  background: radial-gradient(
    ellipse at 50% 15%,
    #ffffff 0%,
    #fef08a 24%,
    #f97316 52%,
    rgba(220, 38, 38, 0.45) 76%,
    rgba(220, 38, 38, 0) 96%
  );
  filter: blur(8px) drop-shadow(0 0 28px rgba(245, 158, 11, 0.85));
  transform-origin: 50% 0%;
  animation: thrusterPulse 0.11s infinite alternate ease-in-out;
}

.flame-mid {
  position: absolute;
  left: 14%;
  top: 2%;
  width: 72%;
  height: 82%;
  border-radius: 50% 50% 50% 50% / 25% 25% 75% 75%;
  background: linear-gradient(180deg, #ffffff 0%, #fef08a 38%, rgba(245, 158, 11, 0.55) 70%, transparent 96%);
  filter: blur(5px);
  transform-origin: 50% 0%;
  animation: thrusterPulse 0.08s infinite alternate-reverse ease-in-out;
}

.flame-core {
  position: absolute;
  left: 26%;
  top: 0%;
  width: 48%;
  height: 58%;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 251, 235, 0.82) 48%, rgba(254, 240, 138, 0) 94%);
  filter: blur(3px);
  transform-origin: 50% 0%;
  animation: thrusterPulse 0.06s infinite alternate ease-in-out;
}

.svg-flame-plume {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: thrusterPulse 0.11s infinite alternate ease-in-out;
}

.svg-flame-inner {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: thrusterPulse 0.07s infinite alternate-reverse ease-in-out;
}

@keyframes thrusterPulse {
  0% { transform: scaleY(0.92) scaleX(0.94); opacity: 0.94; }
  100% { transform: scaleY(1.18) scaleX(1.07); opacity: 1; }
}

/* =========================================================================
   [LAYER z-index: 20] 게임 컨셉 메인 보물상자 #1: 우측 하단 황금 루비/금화 로얄 보물 선물상자 (.giftbox-rig)
   ========================================================================= */
.giftbox-rig {
  position: absolute;
  right: 5.5%;
  bottom: 8.5%;
  width: clamp(175px, 21.5vw, 295px);
  height: auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform, opacity;
}

.giftbox-main-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 18px 28px rgba(0, 0, 0, 0.88))
    drop-shadow(0 0 32px rgba(251, 191, 36, 0.58));
}

/* =========================================================================
   [LAYER z-index: 21] 최전경 우하단 구름 조각 (.cloud-layer-foremost)
   - 우측 메인 보물 선물상자의 맨 아랫부분 바닥 모서리만 살짝 감싸 안음
   ========================================================================= */
.cloud-layer-foremost {
  position: absolute;
  inset: 0;
  z-index: 21;
  pointer-events: none;
}

.foremost-patch-right-bottom {
  right: -6%;
  bottom: -14%;
  width: clamp(280px, 33vw, 480px);
  filter: brightness(1.06) drop-shadow(0 -8px 20px rgba(0, 0, 0, 0.78));
  animation: patchFloat2 5.6s ease-in-out infinite alternate;
}

.foremost-patch-right-bottom .cloud-patch-img {
  transform: scaleX(-1);
}

@keyframes patchFloat1 {
  0% { transform: translate3d(-8px, 4px, 0); }
  100% { transform: translate3d(10px, -6px, 0); }
}

@keyframes patchFloat2 {
  0% { transform: translate3d(9px, -4px, 0); }
  100% { transform: translate3d(-9px, 6px, 0); }
}

/* =========================================================================
   [LAYER z-index: 30] 하단 중앙 공식 홈페이지 입장 CTA
   ========================================================================= */
.intro-bottom-cta {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-enter-portal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 38px;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #fffbeb;
  background: linear-gradient(180deg, #e11d48 0%, #991b1b 55%, #500709 100%);
  border: 1.5px solid rgba(254, 240, 138, 0.85);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.85),
    0 0 30px rgba(220, 38, 38, 0.55),
    inset 0 1px 2px rgba(255, 255, 255, 0.42);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.btn-enter-portal::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-24deg);
  animation: ctaSweep 2.8s infinite;
}

@keyframes ctaSweep {
  0% { left: -120%; }
  45%, 100% { left: 160%; }
}

.btn-enter-portal:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: #ffffff;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.9),
    0 0 42px rgba(245, 158, 11, 0.65),
    inset 0 1px 2px rgba(255, 255, 255, 0.55);
}

.btn-replay-minimal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 54px;
  padding: 0 20px;
  border-radius: 999px;
  background: rgba(20, 15, 10, 0.78);
  border: 1px solid rgba(245, 196, 81, 0.45);
  backdrop-filter: blur(8px);
  color: #f3ead8;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  transition: all 0.2s ease;
}

.btn-replay-minimal:hover {
  border-color: var(--cp-gold-bright);
  color: #ffffff;
  transform: translateY(-2px);
}

/* =========================================================================
   모바일 & iOS Safari 반응형 및 60fps GPU 가속 최적화 (768px 이하 / 터치 디바이스)
   - 아이폰(WebKit)에서 프레임 드랍을 유발하는 다중 drop-shadow, SVG feGaussianBlur,
     과도한 blur() + mask-image 중첩을 하드웨어 가속 친화적인 경량 셰이더로 전환
   - 세로형(Portrait) 모바일 화면비에 맞춘 로고·로켓·보물상자 구도 재설계
   ========================================================================= */
@media (max-width: 768px) {
  .intro-top-actions {
    top: max(12px, env(safe-area-inset-top, 12px));
    right: 12px;
    left: 12px;
    justify-content: flex-end;
    gap: 5px;
  }

  .intro-ctrl-pill,
  .intro-toggle-plate,
  .intro-enter-plate {
    height: 31px;
    padding: 0 10px;
    font-size: 11px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(18, 13, 8, 0.9);
  }

  .plate-label {
    display: none;
  }

  /* iOS GPU 부하가 큰 배경 사진 filter 및 SVG 중첩 필터 경량화 */
  .hf-bg-photo {
    filter: none;
    transform: translateZ(0) scale(1.03);
  }

  .diagonal-godrays {
    animation: none;
    opacity: 0.82;
  }

  .golden-trail-svg g[filter],
  .golden-trail-svg ellipse[filter] {
    filter: none !important;
  }

  .golden-trail-svg g[mask] {
    mask: none !important;
    -webkit-mask: none !important;
  }

  .trail-strand {
    animation: none;
  }

  /* 모바일에서 가장 무거운 다중 drop-shadow와 무한 부유 애니메이션 최적화 */
  .cloud-patch,
  .mid-patch-behind-kor-left,
  .mid-patch-behind-kor-right,
  .mid-patch-behind-rocket,
  .near-patch-under-eng,
  .near-patch-bottom-trail,
  .accent-patch-left-edge,
  .foremost-patch-right-bottom {
    filter: none !important;
    animation: none !important;
    transform: translateZ(0);
  }

  /* 모바일 화면에서 불필요하게 겹치는 원경/외곽 구름 일부를 숨겨 오버드로우(Overdraw) 절반 감소 */
  .far-cloud-top-left,
  .accent-patch-left-edge,
  .mid-patch-behind-kor-right {
    display: none;
  }

  .mid-patch-behind-kor-left {
    left: -12%;
    top: 16%;
    width: 72vw;
    opacity: 0.78;
  }

  .mid-patch-behind-rocket {
    right: -12%;
    bottom: 14%;
    width: 74vw;
    opacity: 0.8;
  }

  .near-patch-under-eng {
    left: -10%;
    bottom: 2%;
    width: 68vw;
    opacity: 0.85;
  }

  .near-patch-bottom-trail {
    left: 26%;
    bottom: 0%;
    width: 66vw;
    opacity: 0.82;
  }

  .foremost-patch-right-bottom {
    right: -10%;
    bottom: -4%;
    width: 64vw;
    opacity: 0.88;
  }

  /* 오라/불꽃의 과도한 blur() 반경 축소 및 mask 중첩 제거 */
  .giftbox-aura-glow,
  .rocket-sonic-aura {
    filter: blur(10px);
    mask-image: none;
    -webkit-mask-image: none;
    animation: none;
    opacity: 0.88;
  }

  .flame-glow-aura {
    filter: blur(10px);
  }

  .flame-outer {
    filter: blur(4px);
  }

  .flame-mid,
  .flame-core {
    filter: blur(2px);
  }

  .server-logo-kor-img {
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.82));
  }

  .server-logo-eng-img {
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.8));
  }

  .rocket-3d-img,
  .giftbox-main-img,
  .supplybox-img,
  .drop-chest-img {
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.78));
  }

  .wordmark-3d-wrap,
  .server-logo-eng-img {
    animation-duration: 5.5s;
  }

  /* 모바일 세로 화면 구도(Composition) 밸런스 재조정 */
  .hero-composition {
    --kor-logo-w: clamp(235px, 74vw, 350px);
    width: 100vw;
    height: 84dvh;
  }

  .wordmark-kor-rig {
    left: 6%;
    top: 22%;
  }

  .wordmark-eng-rig {
    left: calc(6% + var(--kor-logo-w) * 0.06);
    top: calc(22% + var(--kor-logo-w) * 0.268);
  }

  .star-flare {
    transform: scale(0.75);
    animation: none;
  }

  .rocket-rig {
    right: -4%;
    top: 3%;
    width: clamp(195px, 52vw, 245px);
    height: clamp(195px, 52vw, 245px);
  }

  .drop-chest-rig {
    left: 14%;
    top: 52%;
    width: clamp(68px, 19vw, 88px);
  }

  .supplybox-rig {
    left: 10%;
    right: auto;
    bottom: 15%;
    width: clamp(112px, 31vw, 145px);
  }

  .giftbox-rig {
    right: 4%;
    bottom: 14%;
    width: clamp(138px, 38vw, 178px);
  }

  .intro-bottom-cta {
    bottom: max(18px, env(safe-area-inset-bottom, 18px));
    width: 92vw;
    justify-content: center;
    gap: 8px;
  }

  .btn-enter-portal {
    height: 48px;
    padding: 0 22px;
    font-size: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8), 0 0 18px rgba(220, 38, 38, 0.45);
  }

  .btn-replay-minimal {
    height: 48px;
    padding: 0 14px;
    font-size: 12px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(18, 13, 8, 0.9);
  }
}