/* ========================================
   Hero floating-logo effect (shared)
   ----------------------------------------
   Proximity-reveal T-mark field + cursor-following green glow. Same mechanism and
   look as the blog-overview (blog.css .blog-hero__*) and documentation
   (docs.css .docs-hero__*) heroes, extracted into one reusable layer with a
   density modifier: .hero-fx--full and .hero-fx--subtle.

   Markup:  template-parts/hero-fx.php
   Behavior: assets/js/hero-fx.js (builds the marks, wires mousemove/mouseleave)

   Default state = invisible: marks are opacity:0 and the glow is opacity:0 until
   the cursor is near. The JS only activates on desktop (>1024px) and when the user
   has not requested reduced motion, so touch/mobile and reduced-motion visitors
   simply see the plain hero.

   Layering: the effect is absolutely positioned (inset:0) inside the hero, so it
   adds nothing to layout -> no CLS. Host heroes get position:relative + overflow
   below, and their .container is lifted above the effect.
   ======================================== */

/* Host heroes: establish a positioning + clipping context for the effect.
   None of these set position/overflow themselves, so this is additive. */
.mig-hero,
.cmp-hero,
.contact-hero,
.partners-hero,
.about-hero,
.blog-article-hero {
    position: relative;
    overflow: hidden;
}

/* Keep hero content above the effect layer */
.mig-hero > .container,
.cmp-hero > .container,
.contact-hero > .container,
.partners-hero > .container,
.about-hero > .container,
.blog-article-hero > .container {
    position: relative;
    z-index: 1;
}

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

/* --- Cursor-following green glow (positioned + faded in by JS) ------------- */
.hero-fx__glow {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.4s ease;
}

/* --- T-mark field (built by JS) ------------------------------------------- */
.hero-fx__marks {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    display: grid;
    grid-template-columns: repeat(var(--hero-fx-cols, 20), 1fr);
    grid-template-rows: repeat(var(--hero-fx-rows, 4), 1fr);
    padding: 24px;
}

.hero-fx .tmark {
    width: 18px;
    height: 18px;
    margin: auto;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.3s ease, transform 0.3s ease;
    color: rgba(16, 185, 129, 0.06); /* currentColor -> faint rounded square */
}

.hero-fx .tmark.is-near {
    opacity: 1;
    transform: scale(1);
}

/* ==== SUBTLE variant (blog-detail single post) ==== */
/* Same hover reveal over the whole hero, just dimmer than the marketing
   pages. The text column sits in a layer above the effect, so reveal near
   the title is fine (matches the blog-overview reference). */
.hero-fx--subtle .hero-fx__glow {
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.09) 0%, transparent 70%);
}
.hero-fx--subtle .tmark.is-near {
    opacity: 0.5;
}

/* Respect reduced motion: the JS already skips activation, this is a belt-and-
   suspenders guard so nothing ever transitions/animates. */
@media (prefers-reduced-motion: reduce) {
    .hero-fx__glow,
    .hero-fx .tmark {
        transition: none !important;
    }
}