/* ==========================================================================
   APP HEADER — shared ARCESYS bar (landing look) on all pages via base.html
   ========================================================================== */

.landing-page-header {
  position: relative;
  z-index: 20;
  isolation: isolate;
  width: 100%;
  /* Do not use overflow-x: hidden here: paired with overflow-y: visible it
     computes to overflow-y: auto (CSS 2.1), which clips the beam + drop-shadow
     vertically; horizontal hidden also cuts the soft radial behind Arceus. */
  overflow: visible;
  /* Horizontal inset matches LP .hero-landing-search / .top-nav-scroll rhythm */
  padding: 18px max(14px, env(safe-area-inset-right, 0px)) 16px max(14px, env(safe-area-inset-left, 0px));
  display: block;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.045) 0%,
      transparent 42%,
      rgba(0, 0, 0, 0.12) 100%
    ),
    linear-gradient(
      104deg,
      rgba(120, 215, 250, 0.14) -20%,
      rgba(90, 185, 225, 0.05) 30%,
      transparent 58%
    ),
    linear-gradient(
      122deg,
      rgba(105, 205, 245, 0.28) -14%,
      rgba(68, 165, 215, 0.12) 10%,
      rgba(42, 105, 165, 0.08) 22%,
      rgba(28, 36, 48, 0.14) 40%,
      rgba(22, 26, 36, 0.16) 56%,
      rgba(18, 22, 32, 0.12) 72%,
      rgba(44, 52, 62, 0.1) 86%,
      rgba(14, 18, 24, 0.34) 96%,
      rgba(5, 7, 16, 0.44) 100%
    ),
    rgba(2, 5, 18, 0.91);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 0 0 rgba(255, 224, 170, 0.1),
    0 4px 24px rgba(0, 0, 0, 0.45);
}

/* ARCESYS + tagline (+ search trên trang app) — căn giữa thật sự trong header */
.lph-mid-track {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: max-content;
  /* Same horizontal band as LP .carousel-viewport-align (min(680px, 95vw)) */
  max-width: min(95vw, 680px);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  pointer-events: none;
}

.lph-mid-track .lph-brand,
.lph-mid-track .lph-tagline {
  pointer-events: auto;
}

/* .lph-search-text — landing hero search label (index.html); see landing.css overrides */
.lph-search-text {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}

.lph-header-art-wrap {
  position: absolute;
  top: 0;
  height: 100%;
  max-height: 100%;
  margin: 0;
  display: block;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.lph-header-art-wrap--right {
  right: 0;
  left: auto;
  max-width: min(300px, 56vw);
}

/* Beam Arceus: chỉ trắng-vàng nhẹ + vàng gold */
.lph-header-art-wrap--right .lph-header-art-beam {
  position: absolute;
  z-index: 0;
  top: -32%;
  right: -22%;
  width: 260%;
  height: 165%;
  pointer-events: none;
  transform: rotate(-8deg);
  transform-origin: 98% 0%;
  background:
    radial-gradient(
      ellipse 88% 72% at 96% -2%,
      rgba(255, 253, 245, 0.52) 0%,
      rgba(255, 214, 120, 0.28) 48%,
      transparent 86%
    ),
    linear-gradient(
      198deg,
      rgba(255, 251, 238, 0.36) 0%,
      rgba(255, 200, 85, 0.22) 52%,
      transparent 80%
    );
  filter: blur(34px);
  opacity: 0.92;
  mix-blend-mode: screen;
}

.lph-header-art {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  margin: 0;
  object-fit: contain;
  user-select: none;
}

/* Silhouette Arceus — chỉ glow trắng-vàng + vàng */
.lph-header-art--right {
  object-position: right center;
  filter:
    drop-shadow(0 0 6px rgba(255, 252, 235, 0.95))
    drop-shadow(0 0 20px rgba(255, 210, 95, 0.55))
    drop-shadow(0 3px 12px rgba(0, 0, 0, 0.48));
}

.lph-brand {
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 6.5vw, 3.35rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  /* Hai màu: trắng-vàng + vàng Arceus */
  background: linear-gradient(
    118deg,
    rgba(255, 252, 235, 0.99) 0%,
    rgba(255, 188, 58, 0.98) 100%
  );
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 24px rgba(255, 220, 160, 0.22))
    drop-shadow(0 0 48px rgba(255, 190, 90, 0.12));
  user-select: none;
}

.lph-tagline {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(0.56rem, 1.2vw, 0.72rem);
  color: rgba(255, 224, 175, 0.52);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  font-weight: 500;
  max-width: min(100%, 92vw);
}

@keyframes specularShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (hover: hover) and (pointer: fine) {
  .lph-brand {
    animation: specularShift 10s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lph-brand {
    animation: none;
  }

  .lph-header-art-wrap--right .lph-header-art-beam {
    opacity: 0.35;
    filter: blur(12px);
  }
}

@media (hover: none), (pointer: coarse) {
  .landing-page-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .lph-header-art-wrap--right .lph-header-art-beam {
    opacity: 0.5;
    filter: blur(16px);
  }
}

@media (max-width: 860px) {
  .landing-page-header {
    padding: 14px max(14px, env(safe-area-inset-right, 0px)) 12px max(14px, env(safe-area-inset-left, 0px));
  }
}

@media (max-width: 560px) {
  .landing-page-header {
    padding: 12px max(12px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px));
  }

  .lph-mid-track {
    max-width: min(95vw, 680px);
  }
}