/* Toasted Tans 2.6.3 — "Spray-on tan" hero headline (Erik 2026-09-26)
   Same house technique as Graphix Garage wrap / Eskimo "blow cold" /
   Death Row bug crawl / Sparkling Haven butterflies: no libraries, vanilla JS +
   CSS keyframes + inline SVG, one-shot left→right sweep, decorative nodes
   aria-hidden + pointer-events:none + absolutely positioned (zero layout shift).
   The H1 text itself is never split or replaced — only its fill color changes.
   A spray-gun mist passes across the headline and the letters "develop" from
   pale white to a golden sun-kissed glow, then a few sun glints twinkle.
   JS off → normal white H1. prefers-reduced-motion → golden H1, no motion. */

.hero .hero-copy h1.tt-tan-host {
  --tt-bronze: linear-gradient(100deg, #ffeed8 0%, #ffcd8c 24%, #f5aa5e 48%, #ffbd96 72%, #ffe1bd 100%);
  /* pale "untanned" cover: 3× text width, soft mist edge at 1/3 */
  --tt-pale: linear-gradient(90deg,
      rgba(255,255,255,0) 0%, rgba(255,255,255,0) 29.3%,
      rgba(255,248,238,.8) 33.3%, #fff 37.3%, #fff 100%);
  /* text extent inside the H1 box (set by JS; fallbacks = whole box) */
  --tt-x: 0px;
  --tt-w: 100%;
  --tt-sweep: 1800ms;
}
/* shared by the text fill and the mist so they stay in lock-step */
.hero .hero-copy h1.tt-tan-host,
.tt-tan-fx { --tt-ease: cubic-bezier(.45, .05, .35, 1); }

/* Tanning + tanned share one paint model: gradient clipped to the real glyphs.
   text-shadow is swapped for drop-shadow (text-shadow would paint over a
   background-clip:text fill and muddy it). */
.hero .hero-copy h1.tt-tan-host.is-tanning,
.hero .hero-copy h1.tt-tan-host.is-tanned {
  text-shadow: none;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff; /* fallback if background-clip:text is unsupported */
  filter: drop-shadow(0 2px 9px rgba(20, 8, 2, .55));
}
.hero .hero-copy h1.tt-tan-host.is-tanning {
  background-image: var(--tt-pale), var(--tt-bronze);
  background-size: calc(var(--tt-w) * 3) 100%, calc(var(--tt-w) + 40px) 100%;
  background-repeat: no-repeat;
  background-position: calc(var(--tt-x) - var(--tt-w) * 1.12) 0, calc(var(--tt-x) - 20px) 0;
  animation: ttTanSweep var(--tt-sweep) var(--tt-ease) forwards;
}
.hero .hero-copy h1.tt-tan-host.is-tanned {
  background-image: var(--tt-bronze);
  background-size: calc(var(--tt-w) + 40px) 100%;
  background-position: calc(var(--tt-x) - 20px) 0;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 9px rgba(20, 8, 2, .55)) drop-shadow(0 0 16px rgba(255, 170, 90, .28));
}
@keyframes ttTanSweep {
  from { background-position: calc(var(--tt-x) - var(--tt-w) * 1.12) 0, calc(var(--tt-x) - 20px) 0; }
  to   { background-position: calc(var(--tt-x) + var(--tt-w) * .12) 0, calc(var(--tt-x) - 20px) 0; }
}

/* Decorative layer — sits exactly over the H1 box, sibling of the H1 */
.tt-tan-fx {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.tt-mist {
  position: absolute;
  top: -22%;
  bottom: -22%;
  left: calc(var(--tt-x, 0px) - var(--tt-w, 100%) * .27);
  width: calc(var(--tt-w, 100%) * .3);
  opacity: 0;
  transform: translateX(0);
  animation: ttMistPass var(--tt-sweep, 1800ms) var(--tt-ease) forwards;
}
.tt-mist::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 36% 50% at 50% 50%, rgba(255, 238, 214, .62), rgba(255, 206, 160, .32) 50%, rgba(255, 190, 140, 0) 100%);
  filter: blur(8px);
}
/* soft leading edge of spray, like the fan from the gun nozzle */
.tt-mist::after {
  content: "";
  position: absolute;
  top: 8%; bottom: 8%;
  left: 46%;
  width: 8%;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255,246,232,0), rgba(255,246,232,.75) 30%, rgba(255,246,232,.75) 70%, rgba(255,246,232,0));
  filter: blur(5px);
}
@keyframes ttMistPass {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(413%); opacity: 0; }
}
.tt-drop {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff8ee;
  box-shadow: 0 0 4px rgba(255, 214, 160, .9);
  opacity: 0;
  animation: ttDrop .42s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes ttDrop {
  0%, 100% { opacity: 0; transform: translate(0, 0) scale(.6); }
  50%      { opacity: .95; transform: translate(var(--dx, 4px), var(--dy, 3px)) scale(1); }
}

/* Sun glints after the tan develops */
.tt-glint {
  position: absolute;
  width: var(--s, 18px);
  height: var(--s, 18px);
  margin: calc(var(--s, 18px) / -2) 0 0 calc(var(--s, 18px) / -2);
  opacity: 0;
  transform: scale(0) rotate(0deg);
  animation: ttGlint 1.1s cubic-bezier(.3, .7, .4, 1) forwards;
  animation-delay: var(--d, 0s);
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px rgba(255, 180, 80, .95));
}
.tt-glint svg { display: block; width: 100%; height: 100%; fill: #fffdf6; }
.tt-glint.pink svg { fill: #ffe3ee; }
.tt-glint.pink { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px rgba(255, 78, 168, .9)); }
@keyframes ttGlint {
  0%   { opacity: 0; transform: scale(0) rotate(-30deg); }
  40%  { opacity: 1; transform: scale(1.1) rotate(10deg); }
  100% { opacity: 0; transform: scale(.2) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tt-tan-fx { display: none !important; }
  .hero .hero-copy h1.tt-tan-host.is-tanning { animation: none; background-image: var(--tt-bronze); background-size: 100% 100%; }
}