/* ═══════════════════════════════════════════════════════════════════
   PRASAD IB — SITE-WIDE MOTION SYSTEM (styles)
   Companion to js/site-motion.js. All hiding/animating of content is
   driven by JS-added classes so pages remain fully visible for
   crawlers and users without JavaScript — no layout shift on load.
═══════════════════════════════════════════════════════════════════ */

/* ── Page transition veil ─────────────────────────────────────────
   A fixed overlay that fades out on load and back in before internal
   navigation. Content underneath is always rendered (no blank page
   for crawlers); the veil only exists once JS creates it. */
.pib-veil {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: var(--color-primary-ink, #06192E);
    opacity: 0;
    pointer-events: none;
}

    .pib-veil.is-active {
        pointer-events: auto;
    }

/* ── Nav underline slide ─────────────────────────────────────────── */
html.pib-motion #mainNavbar .nav-link {
    position: relative;
}

    html.pib-motion #mainNavbar .nav-link::after {
        content: '';
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 4px;
        height: 2px;
        border-radius: 2px;
        background: var(--color-accent);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.28s cubic-bezier(0.65, 0.05, 0.36, 1);
    }

    html.pib-motion #mainNavbar .nav-link:hover::after,
    html.pib-motion #mainNavbar .nav-link:focus-visible::after {
        transform: scaleX(1);
    }

    /* Active pill already has a gold background — skip the underline */
    html.pib-motion #mainNavbar .nav-link.active::after {
        display: none;
    }

/* ── Micro-interaction helpers (JS-driven transforms) ────────────── */
/* .pib-tilt is gone: card hover is a flat lift now, so no 3D context is
   created and cards no longer need preserve-3d. */

html.pib-motion .pib-magnetic {
    will-change: transform;
    display: inline-block;
}

/* Buttons/links that behave as buttons keep their box styling as <a> */
a.btn-explore,
a.btn-contact,
a.mentor-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

a.btn-contact,
a.btn-contact:hover {
    color: #fff;
}

a.btn-explore,
a.btn-explore:hover {
    color: var(--color-text-on-accent);
}

/* ── Icon life ───────────────────────────────────────────────────── */
html.pib-motion .pib-icon-float {
    will-change: transform;
}

/* ═══════════════════════════════════════════════════════════════════
   SITE-WIDE HERO CONTRACT
   One uniform banner treatment for the first section of every page:
   the workshops-style deep-navy gradient with the subtle gold diagonal
   pattern, one min-height, vertically centered content, one spacing
   scale. Selectors use element+class specificity so this layer wins
   over the per-page hero css without touching 35 views.
═══════════════════════════════════════════════════════════════════ */
section.hero-section,
section.about-hero-section,
section.pib-hero,
section.wshop-hero,
section.contact-hero {
    min-height: clamp(420px, 60vh, 640px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding-top: clamp(40px, 6vh, 72px);
    padding-bottom: clamp(40px, 6vh, 72px);
    background: var(--gradient-navy-soft);
}

/* Auth pages join the same treatment but keep their intentional
   top-anchored flex layout (see the note in auth.css). */
section.auth-section {
    min-height: clamp(420px, 60vh, 640px);
    position: relative;
    overflow: hidden;
    background: var(--gradient-navy-soft);
}

/* Workshops-style subtle diagonal gold pattern on every hero.
   Same pseudo-element the pib/wshop heroes already use, so the
   pattern is unified — never doubled. */
section.hero-section::before,
section.about-hero-section::before,
section.pib-hero::before,
section.wshop-hero::before,
section.contact-hero::before,
section.auth-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(-45deg, rgba(244, 187, 68, .04) 0, rgba(244, 187, 68, .04) 1px, transparent 1px, transparent 34px);
    pointer-events: none;
}

/* Keep hero content above the pattern layer */
section.about-hero-section > .about-hero-content,
section.pib-hero > .container-lg,
section.wshop-hero > .container-lg,
section.contact-hero > .container-xl,
section.hero-section > .hero-content,
section.hero-section > .container-xl,
section.auth-section > .container-xl {
    position: relative;
    z-index: 1;
}

/* About: the unified navy backdrop replaces the old hero photo */
section.about-hero-section .about-hero-background {
    display: none;
}

/* Contact: the white in-page header becomes the standard navy banner —
   restyle foreground for AA contrast on navy */
section.contact-hero .contact-header-label {
    color: var(--color-accent);
}

section.contact-hero .contact-header-title {
    color: #fff;
}

    section.contact-hero .contact-header-title .text-gradient {
        background: none;
        -webkit-text-fill-color: var(--color-accent-bright);
        color: var(--color-accent-bright);
    }

section.contact-hero .contact-header-desc {
    color: rgba(255, 255, 255, 0.85);
}

/* Uniform content spacing scale: badge → title → lead → CTAs */
section.hero-section .hero-badge,
section.about-hero-section .about-hero-badge,
section.pib-hero .pib-badge,
section.wshop-hero .wshop-badge,
section.contact-hero .contact-header-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 20px;
}

section.hero-section h1,
section.about-hero-section h1,
section.pib-hero h1,
section.wshop-hero h1,
section.contact-hero h1 {
    margin-top: 0;
    margin-bottom: 20px;
}

section.hero-section .hero-description,
section.about-hero-section .about-hero-desc,
section.pib-hero .pib-hero-lead,
section.wshop-hero .wshop-hero-lead,
section.contact-hero .contact-header-desc {
    margin-bottom: 28px;
    max-width: 640px;
}

/* ── AOS reveal safety net ───────────────────────────────────────────
   AOS hides every [data-aos] element and reveals it by adding
   .aos-animate. The hide half comes from the CDN stylesheet; if the
   reveal half does not arrive or loses the cascade, the content stays
   invisible for good. Pinning the revealed state locally guarantees
   that anything AOS has marked as animated is actually shown. On a
   healthy page this matches what AOS already does, so nothing changes
   visually, and the base rule still supplies the transition. */
[data-aos].aos-animate {
    opacity: 1 !important;
    transform: none !important;
}

/* ── Reduced motion: kill everything the system adds ─────────────── */
@media (prefers-reduced-motion: reduce) {
    .pib-veil {
        display: none !important;
    }

    html.pib-motion #mainNavbar .nav-link::after {
        transition: none;
    }

    /* site-motion.js and hero-3d.js bail out on their own, but AOS 2.3.1 has
       no reduced-motion support and would keep animating. Force every
       data-aos element to its finished state: visible, untransformed, still.
       This doubles as a safety net if the AOS stylesheet ever fails to load. */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}