/* ============ MAECHULUTION — Hero 비디오 배경 ============ */

/* video layer sits behind hero content */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0A1A26; /* fallback before video paints */
}
.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;                 /* fade-in once loaded + crossfade between the two */
  transition: opacity 1.6s ease;
  will-change: opacity;
  pointer-events: none;
}
/* the currently-shown clip (only after it has loaded) */
.hero-video video.is-active.is-ready { opacity: 1; }

/* dark overlay — sky-blue → black gradient, ≥35% black for legibility */
.hero-video .hero-video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, rgba(0, 60, 95, .58) 0%, rgba(0, 25, 45, .42) 45%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .55) 100%);
}

/* ---- when the hero has a video (desktop): white text + shadow ---- */
@media (min-width: 769px) {
  .hero.has-video::before { display: none; }          /* drop the light glow */
  .hero.has-video .hero-fx { display: none; }          /* drop the light blobs */

  .hero.has-video .kicker { color: #BFEBFF; }
  .hero.has-video .kicker::before { background: var(--blue); }

  .hero.has-video .hero-title .line-in { color: #fff; }
  .hero.has-video .hero-title .line-in.accent { color: #5FD0FF; }

  .hero.has-video .hero-sub { color: rgba(255, 255, 255, .92); }
  .hero.has-video .hero-meta { color: rgba(255, 255, 255, .82); }
  .hero.has-video .hero-meta .pip::before { background: #5FD0FF; }

  /* subtle shadow so text reads on any frame */
  .hero.has-video .hero-grid > * {
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .35);
  }

  /* ghost button needs to flip to light treatment over dark video */
  .hero.has-video .btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
    text-shadow: none;
  }
  .hero.has-video .btn--ghost:hover {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
  }

  /* scroll cue lighter */
  .hero.has-video .scroll-cue { color: rgba(255, 255, 255, .8); }
  .hero.has-video .scroll-cue .line { background: rgba(255, 255, 255, .4); }
}

/* ---- mobile (≤768px): no video, static sky-blue → white gradient ---- */
@media (max-width: 768px) {
  .hero-video video { display: none; }
  .hero-video {
    background:
      radial-gradient(120% 90% at 80% 0%, var(--blue-tint-2) 0%, rgba(255,255,255,0) 55%),
      linear-gradient(160deg, var(--blue-tint) 0%, #FFFFFF 60%);
  }
  .hero-video .hero-video-overlay { background: none; }
  /* keep the original dark-on-light hero text on mobile (readable on the light gradient) */
}

/* ---- reduced motion: disable autoplay ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-video video { display: none; }
}
/* desktop reduced-motion keeps a dark gradient so the white hero text still reads */
@media (prefers-reduced-motion: reduce) and (min-width: 769px) {
  .hero-video {
    background: linear-gradient(118deg, #04354F 0%, #061826 60%, #000 100%);
  }
}
html.no-motion .hero-video video { opacity: 0 !important; }

/* ---- header sits over the dark hero video: light text until it sticks ---- */
@media (min-width: 769px) {
  .has-hero-video .site-header:not(.is-stuck) .brand .ko { color: #fff; }
  .has-hero-video .site-header:not(.is-stuck) .brand .en { color: rgba(255, 255, 255, .72); }
  .has-hero-video .site-header:not(.is-stuck) .nav-links a { color: rgba(255, 255, 255, .9); }
  .has-hero-video .site-header:not(.is-stuck) .nav-links a:hover { color: #fff; }
  .has-hero-video .site-header:not(.is-stuck) .nav-toggle span { background: #fff; }
}