/* WEB-HOME-INTRO-02 — Gargantua-Inspired Dramatic Homepage Intro Refinement */

:root {
  --intro-vacuum: #020203;
  --intro-photon-white: #FFF7E8;
  --intro-ion-gold: #FFC15A;
  --intro-orange: #F47A2A;
  --intro-redshift-ember: #A83918;
  --intro-gravity-fringe: #2A1738;
}

.intro-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: var(--intro-vacuum);
  pointer-events: none;
  overflow: hidden;
  contain: layout paint style;
  will-change: opacity;
  opacity: 1;
}

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

/* CSS fallback stage: only shown when neither WebGL nor a 2D canvas context is available */
.intro-fallback-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(42, 23, 56, 0.24) 0%, var(--intro-vacuum) 64%);
}

.intro-overlay.is-fallback .intro-fallback-stage {
  opacity: 1;
}

.intro-overlay.is-fallback.has-canvas-2d .intro-fallback-stage {
  display: none;
}

.intro-fallback-orbit {
  position: absolute;
  width: min(52vw, 390px);
  height: min(17vw, 128px);
  border-radius: 50%;
  border-top: 3px solid var(--intro-ion-gold);
  border-left: 11px solid var(--intro-photon-white);
  border-bottom: 5px solid var(--intro-orange);
  border-right: 3px solid var(--intro-redshift-ember);
  transform: rotate(-26deg) scale(var(--intro-fallback-scale, 1));
  box-shadow:
    0 -18px 34px rgba(255, 193, 90, 0.34),
    0 16px 28px rgba(244, 122, 42, 0.28),
    inset 0 0 22px rgba(168, 57, 24, 0.32);
  filter: drop-shadow(0 0 14px rgba(255, 193, 90, 0.48));
}

.intro-fallback-aperture {
  position: relative;
  width: min(19vw, 144px);
  height: min(19vw, 144px);
  border-radius: 50%;
  background: var(--intro-vacuum);
  box-shadow:
    0 0 0 1.5px var(--intro-photon-white),
    -8px 0 22px 4px rgba(255, 193, 90, 0.65),
    8px 0 20px 2px rgba(168, 57, 24, 0.45),
    0 -18px 36px 8px rgba(244, 122, 42, 0.36),
    0 18px 30px 6px rgba(244, 122, 42, 0.26);
  transform: scale(var(--intro-fallback-aperture-scale, 1));
}

.intro-fallback-companion {
  position: absolute;
  width: min(3.2vw, 22px);
  height: min(3.2vw, 22px);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, var(--intro-photon-white) 0%, var(--intro-ion-gold) 45%, var(--intro-orange) 100%);
  box-shadow: 0 0 16px 3px rgba(244, 122, 42, 0.68);
  transform: translate(min(8vw, 60px), max(-11vw, -84px)) scale(var(--intro-fallback-scale, 1));
}

/* Reduced motion: quiet short opacity reveal (< 250ms), no simulation or zoom */
.intro-overlay.is-reduced-motion .intro-canvas,
.intro-overlay.is-reduced-motion .intro-fallback-stage,
.intro-overlay.is-reduced-motion .intro-skip {
  display: none;
}

.intro-overlay.is-reduced-motion {
  background: var(--intro-vacuum);
  transition: opacity 160ms ease-out;
}

/* Quiet localized Skip / Bỏ qua control */
.intro-skip {
  position: absolute;
  right: clamp(1.25rem, 3vw, 2.5rem);
  bottom: clamp(1.25rem, 3vw, 2.25rem);
  z-index: 2;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(2, 2, 3, 0.72);
  color: var(--intro-photon-white);
  border: 1px solid rgba(255, 247, 232, 0.22);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-family: var(--font-body, 'Gilroy', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  opacity: 0.78;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.intro-skip:hover {
  opacity: 1;
  border-color: var(--intro-orange);
  color: var(--intro-ion-gold);
  background: rgba(2, 2, 3, 0.9);
}

.intro-skip:focus-visible {
  opacity: 1;
  outline: 2px solid var(--intro-ion-gold);
  outline-offset: 3px;
  border-color: var(--intro-orange);
  color: var(--intro-photon-white);
}

@media (max-width: 768px) {
  .intro-skip {
    right: calc(1rem + env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    min-height: 44px;
    padding: 0.55rem 1.1rem;
    font-size: 0.75rem;
  }
}