/* ============================================================
   hero.css — landing page (home.twig) ONLY.
   Animated hero background + interactive touches.
   - GPU-friendly: every animation is transform/opacity only.
   - The global prefers-reduced-motion switch in app.css already
     neutralizes all animation/transition; explicit static
     fallbacks below double down on it.
   - Scroll-reveal styles are gated behind html.js-anim (added by
     hero.js only when JS + IntersectionObserver + motion OK), so
     content is never hidden without JS.
   ============================================================ */

/* ---------- Hero: layered animated background ---------- */
.hero { isolation: isolate; }
.hero > .container { position: relative; z-index: 2; }

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

/* Slow-drifting soft light glows over the navy gradient */
.hero-bg-glow {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}
.hero-bg-glow-gold {
    width: 58rem;
    height: 58rem;
    left: -16rem;
    top: -24rem;
    background: radial-gradient(circle at center,
        rgba(176, 138, 46, .18) 0%,
        rgba(176, 138, 46, .06) 42%,
        transparent 68%);
    animation: hero-drift-a 34s ease-in-out infinite alternate;
}
.hero-bg-glow-navy {
    width: 66rem;
    height: 66rem;
    right: -22rem;
    bottom: -32rem;
    background: radial-gradient(circle at center,
        rgba(74, 116, 182, .22) 0%,
        rgba(74, 116, 182, .08) 45%,
        transparent 70%);
    animation: hero-drift-b 44s ease-in-out infinite alternate;
}
@keyframes hero-drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(6rem, 3rem, 0) scale(1.12); }
}
@keyframes hero-drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.08); }
    to   { transform: translate3d(-5rem, -4rem, 0) scale(1); }
}

/* Faint blueprint grid, faded out toward the edges */
.hero-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(95% 95% at 50% 30%, rgba(0, 0, 0, .8), transparent 78%);
    mask-image: radial-gradient(95% 95% at 50% 30%, rgba(0, 0, 0, .8), transparent 78%);
}

/* Neural particle-network canvas (created by hero.js; does not
   exist without JS or under reduced motion → static gradient) */
.hero-net {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Floating legal glyphs at varying depths (mouse-parallax wrapper) */
.hero-bg-parallax {
    position: absolute;
    inset: 0;
    will-change: transform;
    transition: transform 1.1s cubic-bezier(.2, .6, .3, 1);
}
.hero-glyph {
    position: absolute;
    line-height: 1;
    font-weight: 800;
    color: rgba(255, 255, 255, .06);
    animation: hero-float var(--gf-dur, 18s) ease-in-out var(--gf-delay, 0s) infinite alternate;
    will-change: transform;
}
@keyframes hero-float {
    from { transform: translate3d(0, 12px, 0) rotate(-3deg); }
    to   { transform: translate3d(0, -14px, 0) rotate(3deg); }
}
.hero-glyph.g1 { left: 5%;   top: 14%; font-size: 5.2rem; --gf-dur: 19s; color: rgba(255, 255, 255, .05); }
.hero-glyph.g2 { left: 13%;  top: 64%; font-size: 3rem;   --gf-dur: 23s; --gf-delay: -7s;  color: rgba(212, 178, 94, .10); }
.hero-glyph.g4 { right: 23%; top: 15%; font-size: 2.8rem; --gf-dur: 21s; --gf-delay: -11s; color: rgba(255, 255, 255, .05); }
.hero-glyph.g5 { right: 8%;  top: 52%; font-size: 4.6rem; --gf-dur: 25s; --gf-delay: -5s;  color: rgba(212, 178, 94, .095); }

/* Reduced motion: freeze the whole backdrop to a static gradient scene */
@media (prefers-reduced-motion: reduce) {
    .hero-bg-glow, .hero-glyph, .hero-bg-parallax { animation: none; transition: none; }
}

/* ---------- Hero: search focus glow + gentle scale ---------- */
.hero-search {
    transition: transform var(--z-dur-med) var(--z-ease),
        box-shadow var(--z-dur-med) var(--z-ease);
}
.hero-search:focus-within {
    transform: scale(1.015);
    box-shadow: 0 0 0 .25rem rgba(176, 138, 46, .42),
        0 16px 38px rgba(10, 20, 38, .35);
}
@media (prefers-reduced-motion: reduce) {
    .hero-search:focus-within { transform: none; }
}

/* ---------- Hero: example-question chips ---------- */
.hero-hints-label { color: rgba(255, 255, 255, .6); font-size: .875rem; }
.hero-hints .hint-chip {
    display: inline-flex;
    align-items: center;
    padding: .32rem .95rem;
    border-radius: 2rem;
    font-size: .875rem;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    text-decoration: none;
    transition: transform var(--z-dur-fast) var(--z-ease),
        background-color var(--z-dur-fast) var(--z-ease),
        border-color var(--z-dur-fast) var(--z-ease),
        box-shadow var(--z-dur-fast) var(--z-ease),
        color var(--z-dur-fast) var(--z-ease);
}
.hero-hints .hint-chip:hover,
.hero-hints .hint-chip:focus-visible {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .15);
    border-color: rgba(212, 178, 94, .7);
    color: #fff;
    box-shadow: 0 8px 18px rgba(10, 20, 38, .28);
}
.hero-hints .hint-chip:active { transform: translateY(0); }

/* ---------- Hero: corpus stats (count-up garnish) ---------- */
.hero-stats {
    color: rgba(255, 255, 255, .78);
    font-size: .9rem;
    letter-spacing: .01em;
}
.hero-stats .hero-stat-num {
    color: var(--z-gold-soft);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.hero-stat-sep { margin: 0 .55rem; opacity: .5; }

/* ---------- Scroll reveal (html.js-anim gate: never hides content without JS) ---------- */
.js-anim [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--z-ease), transform .6s var(--z-ease);
    transition-delay: var(--rvd, 0s);
}
.js-anim [data-reveal].is-in {
    opacity: 1;
    transform: translateY(0);
}

/* Step numbers pop in sequence once their card is revealed */
.js-anim [data-reveal] .step-number { opacity: 0; transform: scale(.4); }
.js-anim [data-reveal].is-in .step-number {
    animation: z-step-pop .55s var(--z-ease) both;
    animation-delay: calc(var(--rvd, 0s) + .18s);
}
@keyframes z-step-pop {
    0%   { opacity: 0; transform: scale(.4); }
    70%  { opacity: 1; transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
}

/* ---------- Value cards: hover depth + icon nudge ---------- */
.section-pad .value-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--z-shadow);
}
.value-card .value-icon {
    transition: transform var(--z-dur-med) var(--z-ease);
}
.value-card:hover .value-icon {
    transform: translateY(-2px) rotate(-4deg) scale(1.06);
}

/* ---------- Pricing teaser banner treatment ---------- */
.pricing-teaser {
    position: relative;
    background: var(--z-bg);
}
.pricing-teaser .price-card {
    transition: transform var(--z-dur-med) var(--z-ease),
        box-shadow var(--z-dur-med) var(--z-ease);
}
.pricing-teaser .price-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--z-shadow);
}

/* ---------- Mobile: fewer, smaller glyphs; calmer scene ---------- */
@media (max-width: 768px) {
    .hero-glyph.g4 { display: none; }
    .hero-glyph.g1 { font-size: 3.4rem; top: 8%; left: 3%; }
    .hero-glyph.g2 { font-size: 2.4rem; top: 74%; left: 6%; }
    .hero-glyph.g5 { font-size: 3.2rem; top: 68%; right: 4%; }
    .hero-stat-sep { margin: 0 .35rem; }
}

/* ============================================================
   APPENDED: admin-managed hero cover images (settings key
   `hero_images`, Admin → Тохиргоо → "Нүүр хуудасны зураг").
   home.twig renders .hero-bg-photo + .hero-bg-photo-scrim as the
   FIRST children of .hero-bg only when an image is configured, so
   with zero images this block is inert and the hero stays exactly
   flat navy. The image URL itself (desktop / mobile variant swap
   at ≤640px) comes from a tiny per-request <style> block in the
   template. Scrim keeps headline/typing/particles readable.
   ============================================================ */
.hero-bg-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero-bg-photo-scrim {
    position: absolute;
    inset: 0;
    /* --z-navy-deep #0C1B33 at ~78% — tuned for headline contrast */
    background: rgba(12, 27, 51, .78);
}