/*
 * OIT Page Header — non-utility styles.
 *
 * Everything that survives Tailwind's scanner lives inline on the
 * template. This file owns the things that don't translate cleanly:
 *
 *   1. The icon-badge 17-stop red->black gradient (too many comma-
 *      separated stops to round-trip through arbitrary-value Tailwind).
 *
 *   2. The data-proto-animate (manual) pre-state used by view.js. Targets
 *      are hidden up-front so GSAP's fromTo() doesn't flash the final
 *      state for one frame before the timeline starts. The state flips
 *      to data-proto-animate="done" the moment the scroll trigger fires.
 *
 * Wordmark sizing (font-size clamp + negative top margin) used to live
 * here too, but it's emitted by inc/oit-header-partials.php and shared
 * with oit-two-col-header; those rules now live in the theme-wide
 * style.css so they load regardless of which block is on the page.
 */

/* Light-theme circuit decoration -- the source SVG/Lottie ships the
 * brand-red stroke, which gets lost on the white card. brightness(0)
 * crushes the rendered pixels to pure black (transparent areas stay
 * transparent), then the existing opacity-60 wrapper softens the
 * silhouette to a subtle dark trace. Applied via modifier class so the
 * dark variant continues to render red. */
.oit-page-header__decoration--light {
  filter: brightness(0);
}

/* Invert-icon modifier -- lets a black-stroked icon SVG render white on
 * the dark gradient badge. brightness(0) crushes the artwork to pure
 * black (transparent stays transparent), then invert(1) flips it to
 * pure white, so the icon reads regardless of its source stroke color.
 * Toggled per-instance via the "Invert icon color" control. */
.oit-page-header__icon--invert {
  filter: brightness(0) invert(1);
}

/* 1. Icon-badge gradient — Managed IT variant */
.oit-page-header__icon-badge--gradient {
  background-image: linear-gradient(
    139deg,
    #E00523 0%,
    #C6061E 9%,
    #AF0719 18%,
    #99081A 28%,
    #850812 35%,
    #74080F 42%,
    #63080D 49%,
    #55070B 56%,
    #480709 63%,
    #3D0607 70%,
    #340506 77%,
    #2C0505 83%,
    #250404 89%,
    #200404 94%,
    #1D0303 97%,
    #1B0303 99%,
    #1A0303 100%
  );
}

/* 2. Animation pre-state — only applied when GSAP is going to take over */
.oit-page-header[data-proto-animate]:not([data-proto-animate="done"]) .oit-page-header__card,
.oit-page-header[data-proto-animate]:not([data-proto-animate="done"]) .oit-page-header__wordmark,
.oit-page-header[data-proto-animate]:not([data-proto-animate="done"]) .oit-page-header__breadcrumb,
.oit-page-header[data-proto-animate]:not([data-proto-animate="done"]) .oit-page-header__title,
.oit-page-header[data-proto-animate]:not([data-proto-animate="done"]) .oit-page-header__subtitle,
.oit-page-header[data-proto-animate]:not([data-proto-animate="done"]) .oit-page-header__cta,
.oit-page-header[data-proto-animate]:not([data-proto-animate="done"]) .oit-page-header__icon-badge,
.oit-page-header[data-proto-animate]:not([data-proto-animate="done"]) .oit-page-header__decoration {
  opacity: 0;
}