/* =========================================================
   Main landing — auto-rotating full-screen hero
   ========================================================= */
.hero-rotator {
  position: relative; height: 100vh; min-height: 560px; overflow: hidden;
  background: #05060f;
  --px: 0; --py: 0;                 /* pointer offset, -1…1, set by main.js */
}
.hr-slide {
  position: absolute; inset: 0; opacity: 0; z-index: 0;
  transition: opacity 1.4s var(--ease);
}
/* incoming slide fades in ON TOP of the fully-opaque outgoing slide,
   so the swap never shows a translucent mix of both images */
.hr-slide.is-leaving { opacity: 1; z-index: 1; transition: none; }
.hr-slide.is-active { opacity: 1; z-index: 2; }

/* every slide's photography lives on its own .hr-bg layer, so a slide can
   stack two of them (the era wipe) or animate one independently */
.hr-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  will-change: transform, clip-path;
}

/* --- slide 1: light beam ------------------------------------------------ */
.hr-bg--beam {
  background-image: url("../assets/img/bg/hero_main.jpg");
  transform: scale(1.06) translate3d(calc(var(--px) * -16px), calc(var(--py) * -12px), 0);
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
/* the beam itself flares as the pointer approaches it */
.hr-beam {
  position: absolute; top: -10%; bottom: -10%; left: 50%; z-index: 1;
  width: min(620px, 62vw); transform: translateX(-50%);
  background: radial-gradient(closest-side at 50% 58%,
    rgba(150,196,255,.55) 0%, rgba(90,150,255,.22) 42%, transparent 72%);
  opacity: var(--beam-a, 0); mix-blend-mode: screen;
  transition: opacity .45s var(--ease); pointer-events: none;
}
.hr-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* the beam and its motes belong to slide 1 only — drop them the moment the
   slide starts handing off, or they bleed over the incoming photograph */
.hr-slide:not(.is-active) .hr-canvas,
.hr-slide:not(.is-active) .hr-beam { opacity: 0; transition: opacity .35s linear; }

/* --- slide 2: 야경 도심 도로 --------------------------------------------
   원래는 분할 합성 사진을 풀블리드로 깔아 확대가 심했고, 그 뒤엔 인물
   컷아웃을 올려봤지만 현대인 사진이 브랜드와 겉돌아 배경만 남겼다. */
.hr-bg--road { background-image: url("../assets/img/bg/hero_road.jpg"); }
.is-playing .hr-bg--road { animation: hrZoom 11s linear forwards; }

/* 도로 사진이 밝고 복잡해서 문구가 앉는 가운데를 한 겹 더 눌러준다 */
.hr-slide[data-slide="era"] .hr-bg--road::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(85% 70% at 50% 50%, rgba(4,7,22,.72) 0%, rgba(4,7,22,.34) 55%, rgba(4,7,22,.15) 100%);
}

/* --- slide 3: ship under way -------------------------------------------- */
.hr-bg--ship { background-image: url("../assets/img/bg/hero_ship.jpg"); }
.is-playing .hr-bg--ship { animation: hrSail 13s linear forwards; }
/* the vessel's bow points left, so drifting the frame left reads as headway */
@keyframes hrSail {
  from { transform: scale(1.1) translate3d(2.2%, 0, 0); }
  to   { transform: scale(1.1) translate3d(-2.6%, 0, 0); }
}

/* slow ken-burns drift, used by the still layers */
@keyframes hrZoom { from { transform: scale(1); } to { transform: scale(1.08); } }

/* vignette for copy legibility */
.hr-slide::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, rgba(5,6,15,.16), rgba(5,6,15,.62));
}

.hr-copy {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 20px;
}
.hr-copy h1, .hr-copy h2 {
  margin: 0; color: #fff; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(30px, 5.4vw, 74px); line-height: 1.18; word-break: keep-all;
  text-shadow: 0 4px 40px rgba(0,0,0,.35);
}
.hr-copy .ln { display: block; }
.hr-copy p {
  margin: 22px 0 0; color: rgba(255,255,255,.82); font-weight: 500;
  font-size: clamp(14px, 1.7vw, 20px); line-height: 1.6; word-break: keep-all;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
/* copy rises as its slide becomes active */
.hr-copy .ln, .hr-copy p { opacity: 0; transform: translateY(26px); }
.is-playing .hr-copy .ln, .is-playing .hr-copy p { animation: hrCopyIn .9s var(--ease) forwards; }
.is-playing .hr-copy .ln:nth-child(1) { animation-delay: .45s; }
.is-playing .hr-copy .ln:nth-child(2) { animation-delay: .6s; }
.is-playing .hr-copy p { animation-delay: .8s; }
@keyframes hrCopyIn { to { opacity: 1; transform: none; } }

/* dots */
.hr-dots {
  position: absolute; bottom: 122px; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; gap: 10px;
}
.hr-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.35); transition: all .3s var(--ease);
}
.hr-dots button.is-active { background: #fff; width: 26px; border-radius: 100px; }

.scene-hint {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  z-index: 3; color: rgba(255,255,255,.7); font-size: 12px; letter-spacing: .15em;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: opacity .4s var(--ease);
}
.scene-hint::after {
  content: ""; width: 1px; height: 42px;
  background: linear-gradient(rgba(255,255,255,.8), transparent);
  animation: hintMove 1.8s var(--ease) infinite;
}
@keyframes hintMove { 0% { opacity: 0; transform: scaleY(.3); transform-origin: top; }
  40% { opacity: 1; } 100% { opacity: 0; transform: scaleY(1); transform-origin: top; } }

/* ---------- Blue statement ---------- */
.statement {
  position: relative; padding: 160px 0; text-align: center; color: #fff;
  background:
    radial-gradient(120% 120% at 50% -20%, rgba(0,18,90,.0) 30%, rgba(2,6,26,.85) 100%),
    radial-gradient(90% 80% at 50% 30%, #1f49ff 0%, #0032c8 38%, #001a78 72%, #021040 100%);
  overflow: hidden;
}
.statement .eyebrow {
  font-size: clamp(15px, 2vw, 20px); font-weight: 700; color: rgba(255,255,255,.78);
  margin: 0 0 18px; line-height: 1.7;
}
.statement h2 {
  margin: 0; font-weight: 800; letter-spacing: -.02em; color: #fff;
  font-size: clamp(26px, 4.2vw, 54px); line-height: 1.3;
}

/* ---------- Vision panels (glass card + 3D building) ---------- */
.vision { background: #080b25; position: relative; overflow: hidden; }
.vision::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 60% at 78% 40%, rgba(56,98,255,.42), transparent 60%),
    radial-gradient(60% 60% at 15% 80%, rgba(120,80,220,.30), transparent 60%);
}
/* 각 패널이 100vh 를 통째로 차지해 두 카드 사이가 화면 한 장만큼 벌어져 있었다 */
.vision-panel {
  position: relative; display: flex; align-items: center;
  padding: clamp(56px, 7vw, 84px) 0;
}
.vision-panel:first-child { padding-top: clamp(84px, 10vw, 130px); }
.vision-panel:last-child  { padding-bottom: clamp(84px, 10vw, 130px); }
.glass-card {
  position: relative; border-radius: 40px; min-height: 460px; padding: 64px;
  display: flex; align-items: center; gap: 20px;
  border: 2px solid rgba(219,199,225,.3);
  background: linear-gradient(122deg, rgba(191,142,239,.28) 16%, rgba(255,255,255,.08) 82%);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 34px rgba(0,0,0,.25);
}
.glass-text { flex: 1; min-width: 0; }
.glass-text h3 {
  margin: 0 0 36px; color: #fff; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(30px, 4.2vw, 56px); line-height: 1.28;
}
.glass-text h3 .hl { color: #a5d5ff; }
.glass-obj { flex-shrink: 0; width: clamp(220px, 32vw, 460px); }
.glass-obj img {
  width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(40,70,180,.45));
  animation: floatObj 5s ease-in-out infinite;
}
@keyframes floatObj { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* reveal tuning for the glass card */
.vision .reveal { transform: translateY(40px); }

/* ---------- Closing build (white) ---------- */
.closing-white {
  background: #fff; text-align: center; padding: clamp(120px, 22vh, 220px) 0;
  border-radius: 0 0 44px 44px; position: relative; z-index: 1;
}
.closing-white .cw-eyebrow {
  margin: 0 0 26px; font-size: clamp(16px, 2vw, 22px); font-weight: 700; color: #16181d;
}
.closing-white .cw-eyebrow b { color: var(--blue); }
.closing-white h2 {
  margin: 0; font-weight: 800; letter-spacing: -.025em; color: #16181d;
  font-size: clamp(26px, 4.6vw, 58px); line-height: 1.3; word-break: keep-all;
}
.closing-white h2 .hl { color: var(--blue); }

/* ---------- Closing CTA ---------- */
.closing {
  position: relative; z-index: 0; margin-top: -48px;       /* tuck under the white card's rounded bottom */
  padding: 200px 0 160px; text-align: center; color: #fff;
  background:
    radial-gradient(110% 120% at 50% -10%, #02061a 0%, rgba(0,26,110,.85) 45%, #0032c8 100%);
  overflow: hidden;
}
.closing h2 {
  margin: 0; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(30px, 5vw, 80px); line-height: 1.2;
}
.closing .cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.closing .btn { height: 54px; padding: 0 30px; font-size: 18px; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .hero-rotator { min-height: 520px; }
  .hr-dots { bottom: 108px; }
  .statement { padding: 110px 0; }
  .closing { padding: 130px 0 110px; }

  /* vision panels stack on mobile */
  .vision-panel { min-height: auto; padding: 64px 0; }
  .glass-card { flex-direction: column-reverse; text-align: center; padding: 36px 26px; gap: 6px; min-height: 0; }
  .glass-text h3 { margin-bottom: 26px; }
  .glass-obj { width: clamp(180px, 60vw, 300px); margin: 0 auto; }
  .closing-white { padding: 90px 0; border-radius: 0 0 28px 28px; }
  .hr-beam { width: 78vw; }

  /* narrow screens: copy up top, figure standing underneath it */
  .hr-slide[data-slide="era"] .hr-copy {
    align-items: center; text-align: center;
    padding: 0 20px; justify-content: flex-start; padding-top: max(150px, 22vh);
  }
    
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hr-bg, .hr-beam { animation: none !important; transition: none !important; transform: none !important; }
  .hr-bg--present { clip-path: none; }
  .hr-era-tags { display: none; }
  .glass-obj img { animation: none; }
}