/**
 * On Method 2026 — eye-catching H1/H2 headlines
 * SS27 gradient fills (clip), gold underline grow, mask/wipe hooks.
 * prefers-reduced-motion: static but still colorful (never pure black).
 */

:root {
  --om-headline-grad: linear-gradient(
    105deg,
    #0B0B0C 0%,
    #00539C 22%,
    #BC8D1F 48%,
    #2A8F84 72%,
    #CA6C56 88%,
    #0B0B0C 100%
  );
  --om-headline-grad-static: linear-gradient(
    92deg,
    #00539C 0%,
    #0B0B0C 18%,
    #BC8D1F 42%,
    #2A8F84 68%,
    #9B1B30 100%
  );
  --om-headline-underline: linear-gradient(
    90deg,
    var(--om-gold, #BC8D1F) 0%,
    var(--om-secondary, #2A8F84) 55%,
    var(--om-deep, #00539C) 100%
  );
}

/* Sitewide display headings in main content — not footer/nav/card h3 */
#om-main h1,
#om-main h2,
.om-hero h1,
.om-section h2,
.om-band h2,
.om-funnel-form h2 {
  background-image: var(--om-headline-grad);
  background-size: 180% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Fallback if clip unsupported */
  color: #00539C;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #om-main h1,
  #om-main h2,
  .om-hero h1,
  .om-section h2,
  .om-band h2,
  .om-funnel-form h2 {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* Gold / SS27 accent underline — grows on reveal */
#om-main h1,
#om-main h2,
.om-hero h1,
.om-section h2,
.om-band h2 {
  position: relative;
}

#om-main h1::after,
#om-main h2::after,
.om-hero h1::after,
.om-section h2::after,
.om-band h2::after {
  content: "";
  display: block;
  width: 0;
  height: 0.14em;
  max-width: 7.5rem;
  margin-top: 0.42em;
  border-radius: 999px;
  background: var(--om-headline-underline);
  box-shadow: 0 0 12px rgba(var(--om-accent-rgb, 188, 141, 31), 0.35);
  transform-origin: left center;
  transition: width 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

#om-main h1.om-headline--in::after,
#om-main h2.om-headline--in::after,
.om-hero h1.om-headline--in::after,
.om-section h2.om-headline--in::after,
.om-band h2.om-headline--in::after,
body.om-fx-ready #om-main h1:not(.om-headline--split)::after,
body.om-fx-ready #om-main h2:not(.om-headline--split)::after {
  width: 7.5rem;
}

/* Word / line reveal shells (JS injects .om-hw) */
#om-main h1.om-headline--split,
#om-main h2.om-headline--split,
.om-hero h1.om-headline--split,
.om-section h2.om-headline--split {
  /* Keep gradient on the element; children inherit fill via clip on parent */
}

.om-hw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.om-hw__inner {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  will-change: transform, opacity;
}

.om-headline--in .om-hw__inner,
body.om-headline-static .om-hw__inner {
  transform: none;
  opacity: 1;
}

/* Mask wipe variant (hero H1) — soft left-to-right unveil */
.om-hero h1.om-headline--mask {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 70%);
  mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 70%);
  -webkit-mask-size: 220% 100%;
  mask-size: 220% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition: -webkit-mask-position 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    mask-position 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.om-hero h1.om-headline--mask.om-headline--in {
  -webkit-mask-position: 0% 0;
  mask-position: 0% 0;
}

/* Subtle gradient drift when breathing (motion allowed) */
@keyframes om-headline-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body.om2026.om-breathing #om-main h1.om-headline--in,
body.om2026.om-breathing #om-main h2.om-headline--in,
body.om2026.om-breathing .om-hero h1.om-headline--in {
  animation: om-headline-shimmer 14s ease-in-out infinite;
}

/* prefers-reduced-motion: colorful static, no stagger / shimmer / wipe */
@media (prefers-reduced-motion: reduce) {
  #om-main h1,
  #om-main h2,
  .om-hero h1,
  .om-section h2,
  .om-band h2,
  .om-funnel-form h2 {
    background-image: var(--om-headline-grad-static);
    background-size: 100% 100%;
    background-position: 0 0;
    animation: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  #om-main h1::after,
  #om-main h2::after,
  .om-hero h1::after,
  .om-section h2::after,
  .om-band h2::after {
    width: 7.5rem;
    transition: none;
  }

  .om-hw__inner {
    transform: none !important;
    opacity: 1 !important;
  }

  .om-hero h1.om-headline--mask {
    transition: none;
  }
}

/* Safari / older: ensure readable if clip fails oddly on nested spans */
.om-hw__inner {
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* When JS has not split yet, parent gradient is enough.
   After split, re-apply gradient on inners so clip works per word. */
#om-main h1.om-headline--split,
#om-main h2.om-headline--split,
.om-hero h1.om-headline--split,
.om-section h2.om-headline--split {
  background-image: none;
  -webkit-text-fill-color: unset;
  color: inherit;
}

#om-main h1.om-headline--split .om-hw__inner,
#om-main h2.om-headline--split .om-hw__inner,
.om-hero h1.om-headline--split .om-hw__inner,
.om-section h2.om-headline--split .om-hw__inner {
  background-image: var(--om-headline-grad);
  background-size: 180% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  #om-main h1.om-headline--split .om-hw__inner,
  #om-main h2.om-headline--split .om-hw__inner,
  .om-hero h1.om-headline--split .om-hw__inner,
  .om-section h2.om-headline--split .om-hw__inner {
    background-image: var(--om-headline-grad-static);
    background-size: 100% 100%;
  }
}

/* Dark fashion overrides: keep colorful, not pure white/black */
html[data-om-fashion="dark"] #om-main h1,
html[data-om-fashion="dark"] #om-main h2,
html[data-om-fashion="dark"] .om-hero h1,
html[data-om-fashion="dark"] .om-section h2 {
  --om-headline-grad: linear-gradient(
    105deg,
    #F6F0E4 0%,
    #F4E3B5 20%,
    #BC8D1F 45%,
    #3AB0A2 70%,
    #C3A6CD 90%,
    #F6F0E4 100%
  );
  --om-headline-grad-static: linear-gradient(
    92deg,
    #F4E3B5 0%,
    #BC8D1F 35%,
    #3AB0A2 65%,
    #C3A6CD 100%
  );
}