/* The Home hero's slogan and bullets. Home only, so no other page pays for them, and site.css stays under its line limit.
   slogan.js builds the holes, puffs and drifting smoke. Without it, or without this file, the words simply show. */

/* ---------- The slogan rises by itself. CSS alone, so a blocked script can never leave it hidden, and only transform and opacity move, so nothing shifts.
   A browser that does not know "scripting" skips the block and shows the finished words. ---------- */

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hero__rule, h1 span { animation: hero-rise 620ms var(--ease) 150ms backwards; }
  .hero__rule { --rise: 30px; }
  h1 span:first-child { --rise: 46px; }
  h1 span:last-child { --rise: 28px; animation-delay: 270ms; } /* A beat behind the first line. Short, because the scrim's mask ends just below it. */
  /* Once only: slogan.js marks it done, so a change of setting can never run the entrance again. */
  .hero__words[data-risen] .hero__rule, .hero__words[data-risen] h1 span { animation: none; }
}
@keyframes hero-rise { from { opacity: 0; transform: translate3d(0, var(--rise), 0); } }

/* ---------- The ground under the words. Lighter than the other headings' scrim, so the smoke shows, and still real colour, so the contrast tests can read it.
   Its fading mask stays, which is why the drifting smoke sits in .hero__copy, behind this and not inside it. ---------- */

.hero__words { --scrim: rgba(0, 0, 0, 0.28); position: relative; z-index: 1; }
.hero__actions { position: relative; z-index: 1; }
h1 { position: relative; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8); }
h1 span { position: relative; width: fit-content; margin-inline: auto; } /* Only as wide as the words, so a hole's percentages land on the letters. */

/* The small line needs more contrast than the large one, so it has its own soft strip, faded on all four sides, with its text inside the full-strength part. */
.hero__who {
  width: fit-content;
  margin: 2px auto 0;
  padding: 4px 14px;
  background-color: rgba(0, 0, 0, 0.42);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent), linear-gradient(to bottom, transparent, #000 4px, #000 calc(100% - 4px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent), linear-gradient(to bottom, transparent, #000 4px, #000 calc(100% - 4px), transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ---------- Bullet holes, and the puff each one gives. Sized in em, so they scale with the line they hit. ---------- */

h1 span:first-child > i { font-size: 1.5em; } /* The first line's type is far smaller, and its holes should not be. */
.hole, .puff { position: absolute; pointer-events: none; }
.hole { width: 0.22em; height: 0.22em; margin: -0.11em 0 0 -0.11em; opacity: 0; transform: scale(0.2); background: url("hole.svg") center / contain no-repeat; }
.hole::after { content: ""; position: absolute; inset: -60%; background: radial-gradient(closest-side, #fff 0 18%, #ffd27a 32%, rgba(255, 150, 40, 0.7) 58%, transparent); opacity: 0; }
.hole.on { opacity: 1; transform: none; transition: transform 70ms ease-out, opacity 40ms; }
.hole.fresh::after { animation: hole-spark 150ms ease-out; } /* Only the shot just fired. */
@keyframes hole-spark { from { opacity: 1; transform: scale(0.4); } to { opacity: 0; transform: scale(1.3); } }
/* slogan.js plays each puff by the Web Animations API, from this resting state. Mid grey, because a pale puff vanishes on the white letters it lands on. */
.puff { width: 0.42em; height: 0.42em; margin: -0.21em 0 0 -0.21em; opacity: 0; background: radial-gradient(closest-side, rgba(128, 130, 132, 0.85), rgba(128, 130, 132, 0.4) 55%, transparent); }

/* ---------- The larger smoke that drifts with the scroll, behind the words and their scrim. Light, so the words stay readable: test_hero.py measures them on it at its strongest.
   Off on a phone held sideways, where the words have no scrim to sit on. ---------- */

.gunsmoke {
  --wide: min(86vw, 760px);
  position: absolute;
  z-index: 0;
  left: 50%;
  width: var(--wide);
  height: 150px;
  margin-left: calc(var(--wide) / -2);
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(205, 205, 205, 0.3), rgba(180, 180, 180, 0.1) 55%, transparent);
  will-change: transform, opacity;
}
.gunsmoke:nth-child(1) { top: -10px; }
.gunsmoke:nth-child(2) { top: 70px; height: 110px; }
.gunsmoke:nth-child(3) { top: 130px; height: 90px; }
@media (min-width: 560px) and (max-height: 500px) {
  .gunsmoke { display: none; }
}