/* ============================================================
   HAXD hero — modern enhancement layer (additive, reversible)
   Aurora gradient · glassmorphism · grain · entrance animation.
   Loads AFTER pages.css so it layers over the existing hero.
   ============================================================ */

/* ---- Animated aurora gradient behind the hero ---- */
.hero-with-image { position: relative; isolation: isolate; }
.hero-aurora {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  opacity: .72;
}
.hero-aurora::before,
.hero-aurora::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(85px); opacity: .48; mix-blend-mode: multiply;
  animation: heroAurora 24s ease-in-out infinite alternate;
}
.hero-aurora::before {
  width: 55vw; height: 55vw; left: -10vw; top: -12vw;
  background: radial-gradient(circle at 30% 30%, #E8A15A, transparent 62%);
}
.hero-aurora::after {
  width: 50vw; height: 50vw; right: -12vw; bottom: -14vw;
  background: radial-gradient(circle at 70% 70%, #D4AF37, transparent 60%);
  animation-delay: -7s;
}
@keyframes heroAurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(4vw,3vh,0) scale(1.12); }
  100% { transform: translate3d(-3vw,-2vh,0) scale(1.05); }
}
html[data-theme="dark"] .hero-aurora { opacity: .6; mix-blend-mode: screen; }
html[data-theme="dark"] .hero-aurora::before,
html[data-theme="dark"] .hero-aurora::after { mix-blend-mode: screen; }

/* keep real content above the aurora + svg */
.hero-with-image > .container { position: relative; z-index: 2; }
.hero-neural-svg { z-index: 1; }

/* ---- Fine grain / noise overlay (high-end finishing touch) ---- */
.hero-with-image::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: block !important;                 /* pages.css hides ::after; re-enable for grain */
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Glassmorphism on the countdown / CTA bar ---- */
.hero-countdown-bar {
  background: rgba(255,255,255,.45) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow:
    0 10px 40px rgba(44,24,16,.12),
    inset 0 1px 0 rgba(255,255,255,.6) !important;
}
html[data-theme="dark"] .hero-countdown-bar {
  background: rgba(30,20,12,.35) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* subtle glow ring on hover */
.hero-countdown-bar { transition: box-shadow .3s ease, transform .3s ease; }
.hero-countdown-bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(184,81,13,.18), inset 0 1px 0 rgba(255,255,255,.6) !important;
}

/* Glass treatment for the theme pills too, for cohesion */
.hero-theme-tag {
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* ---- Entrance animation (staggered fade/slide on load) ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero-anim { opacity: 0; transform: translateY(20px); animation: heroRise .85s cubic-bezier(.16,.84,.28,1) forwards; }
  .hero-anim-1 { animation-delay: .08s; }
  .hero-anim-2 { animation-delay: .22s; }
  .hero-anim-3 { animation-delay: .36s; }
  .hero-anim-4 { animation-delay: .50s; }
  .hero-anim-5 { animation-delay: .64s; }
}
@keyframes heroRise { to { opacity: 1; transform: translateY(0); } }

/* Gradient shimmer on the key phrase in the title (optional accent) */
.hero-title .grad-accent {
  background: linear-gradient(100deg, #B8510D 20%, #E8A15A 40%, #D4AF37 55%, #B8510D 75%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: heroShimmer 6s linear infinite;
}
@keyframes heroShimmer { to { background-position: 200% center; } }

/* ============================================================
   Living gradient background + interaction ripples (HCI motif)
   The flowing gradient is the focal element; soft touch-ripples
   pulse from behind the title like a tap on a screen.
   Pure CSS. Subtle, premium motion; honours reduced-motion.
   ============================================================ */

/* Retire the photo layer. */
.hero-with-image .hero-background { opacity: 0 !important; }

/* Warm base so nothing shows a flat page color. */
.hero-with-image {
  background: linear-gradient(160deg, #FFF6EC 0%, #FDEBD8 45%, #FBE2C8 72%, #FFF7EF 100%) !important;
}

/* ---- Flowing gradient mesh: big color pools that morph + drift ---- */
.hero-mesh {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(38vw 38vw at 18% 22%, rgba(184,81,13,.55),  transparent 60%),
    radial-gradient(42vw 42vw at 82% 24%, rgba(212,175,55,.50),  transparent 62%),
    radial-gradient(40vw 40vw at 72% 82%, rgba(232,161,90,.55),  transparent 60%),
    radial-gradient(46vw 46vw at 24% 84%, rgba(196,91,40,.42),   transparent 64%),
    radial-gradient(50vw 50vw at 50% 50%, rgba(255,243,225,.30), transparent 70%);
  filter: saturate(1.12);
  animation: heroMeshMorph 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroMeshMorph {
  0%   { transform: translate3d(0,0,0)         scale(1)    rotate(0deg);   }
  33%  { transform: translate3d(-3vw,2vh,0)     scale(1.10) rotate(2deg);  }
  66%  { transform: translate3d(2.5vw,-2.5vh,0) scale(1.06) rotate(-1.5deg); }
  100% { transform: translate3d(1.5vw,1.5vh,0)  scale(1.12) rotate(1deg);  }
}
html[data-theme="dark"] .hero-with-image {
  background: linear-gradient(160deg, #150c07 0%, #1e0f06 45%, #180d05 72%, #1c1108 100%) !important;
}
html[data-theme="dark"] .hero-mesh {
  background:
    radial-gradient(40vw 40vw at 18% 22%, rgba(212,114,42,.48), transparent 60%),
    radial-gradient(44vw 44vw at 82% 24%, rgba(212,175,55,.34), transparent 62%),
    radial-gradient(42vw 42vw at 72% 82%, rgba(232,161,90,.40), transparent 60%),
    radial-gradient(50vw 50vw at 50% 55%, rgba(30,15,6,.55),    transparent 72%);
  mix-blend-mode: screen; filter: saturate(1.15);
}

/* Legibility scrim: soft light pool behind the text so it stays crisp. */
.hero-with-image > .container::before {
  content: ""; position: absolute; inset: -10% -22%; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 52% at 50% 40%, rgba(255,250,244,.62), transparent 74%);
}
html[data-theme="dark"] .hero-with-image > .container::before {
  background: radial-gradient(58% 52% at 50% 40%, rgba(15,9,5,.6), transparent 74%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-mesh { animation: none !important; }
  .hero-exchange .hx-link, .hero-exchange .hx-satellite { animation: none !important; }
}

/* ============================================================
   Signal exchange — human <-> AI dialogue behind the title.
   A prompt pulse travels human->AI, then a response travels
   AI->human; each side glows as it "receives". Loops calmly.
   Sits ambiently over the flowing gradient; honours reduced-motion.
   ============================================================ */
.hero-exchange {
  position: absolute; left: 0; right: 0; top: 46%;
  transform: translateY(-50%);
  width: 100%; height: clamp(180px, 34vh, 320px);
  z-index: 1; pointer-events: none;
}

  54%    { opacity: 1; }
  86%    { opacity: 1; }
  90%    { transform: translateX(140px);  opacity: 0; }
  100%   { transform: translateX(140px);  opacity: 0; }
}


/* connection line: gentle flow */
.hero-exchange .hx-link { animation: hxLink 5s linear infinite; }
@keyframes hxLink { to { stroke-dashoffset: -120; } }

/* AI satellite nodes twinkle softly */
.hero-exchange .hx-satellite { animation: hxTwinkle 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hero-exchange .hx-satellite:nth-of-type(3) { animation-delay: -1s; }
.hero-exchange .hx-satellite:nth-of-type(4) { animation-delay: -2s; }
.hero-exchange .hx-satellite:nth-of-type(5) { animation-delay: -3s; }
@keyframes hxTwinkle { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* Dark mode: brighten strokes/fills */
html[data-theme="dark"] .hero-exchange .hx-human circle,
html[data-theme="dark"] .hero-exchange .hx-human path { stroke: #E8A15A; fill: #E8A15A; }
html[data-theme="dark"] .hero-exchange .hx-link { stroke: #E8A15A; }

@media (prefers-reduced-motion: reduce) {
  .hero-exchange .hx-link, .hero-exchange .hx-satellite { animation: none !important; }
}

/* ---- Responsive: keep the exchange graphic tidy on small screens ---- */
@media (max-width: 767.98px) {
  /* Shrink the exchange band and let the SVG scale so icons hug the edges
     without ever forcing horizontal scroll. */
  .hero-exchange { height: clamp(120px, 26vh, 200px); top: 42%; }
  /* Hide the faint dashed link on very small screens (icons alone read fine). */
  .hero-exchange .hx-link { opacity: .18; }
}
@media (max-width: 480px) {
  /* On phones the icons would sit under the title text; fade the whole
     motif back so it stays purely ambient and never competes with content. */
  .hero-exchange { opacity: .5; }
}

/* Safety: the hero must never cause a horizontal scrollbar. */
.hero-with-image { overflow: hidden; }