/* ============================================================
   SkinSignal / the landing's finishing pass
   Loaded by index.html alone, last. js/landing-polish.js marks which
   hero sections are on screen.

   ADDITIVE. Every section keeps its own design; this file only does
   what has to be said once for the whole page. The shared values
   (entrance, hover, ambient light) are tokens in css/style.css that the
   sections themselves read.

     THE SEAMS    the hairline between sections fades out at both ends,
                  so one section hands over to the next instead of being
                  ruled off from it
     FOCUS        one ring, the site's blue, for anything focusable that
                  does not draw its own
     THE HERO     five moments, and only five, get one emphasis each: a
     MOMENTS      slow band of light that crosses them once every 13 to
                  15 seconds and takes about a second and a half to pass.
                  Nothing shimmers at rest, nothing sparkles, and no other
                  element on the page gets any.
                    the hero's crystal figure (Diamond Hands, when it is
                      the one on stage; the showcase turns through four)
                    the featured legendary calling card
                    the Immortal emblem
                    the Lifetime pricing card
                    WashedWally's calling card, the worked example
                  On the two emblems the light is cut to the emblem's own
                  shape (a mask of the same picture), so it catches the
                  crystal and never the air around it.

   Only while its section is on screen (.is-onscreen), and never under
   reduced motion: there the page holds still.
   ============================================================ */

/* ---------- The seams ---------- */
.mi,
.cc,
.rk,
.fp,
.af,
.px,
.dc {
  border-top-color: transparent;
  border-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.05) 22%,
    rgba(255, 255, 255, 0.05) 78%,
    rgba(255, 255, 255, 0) 100%) 1;
}

/* ---------- Focus: one ring, where a control has none of its own ---------- */
:where(a[href], button, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid rgba(118, 166, 255, 0.85);
  outline-offset: 3px;
}

/* ---------- The hero moments ---------- */
@media (prefers-reduced-motion: no-preference) {
  .lhero__figure .lhero__emblem:first-child::after,
  .cc-card--featured::after,
  .rk__immortal::after,
  .tier--lifetime::after,
  .af-reward__card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(105deg,
      rgba(255, 246, 228, 0) 42%,
      rgba(255, 246, 228, 0.2) 50%,
      rgba(255, 246, 228, 0) 58%) no-repeat;
    background-size: 300% 100%;
    background-position: 150% 0;
    mix-blend-mode: screen;
    opacity: 0;
  }

  /* The emblems: the light takes the emblem's shape, and a touch more of
     it, because a crystal catches more than a card does. */
  .lhero__figure .lhero__emblem:first-child::after,
  .rk__immortal::after {
    background-image: linear-gradient(105deg,
      rgba(255, 248, 232, 0) 43%,
      rgba(255, 248, 232, 0.3) 50%,
      rgba(255, 248, 232, 0) 57%);
  }
  .lhero__figure .lhero__emblem:first-child::after {
    -webkit-mask: url("../assets/landing/prestige-hero.webp") center / contain no-repeat;
            mask: url("../assets/landing/prestige-hero.webp") center / contain no-repeat;
  }
  .rk__immortal::after {
    -webkit-mask: url("../assets/prestige-emblems/hero/emblem-immortal.webp") center / contain no-repeat;
            mask: url("../assets/prestige-emblems/hero/emblem-immortal.webp") center / contain no-repeat;
  }

  /* Each on its own period and first delay, so no two ever pass in step.
     The hero's figure starts over each time Diamond Hands returns to the
     stage, a beat after it settles. */
  .lhero.is-onscreen .lhero__emblem:first-child.is-on::after { animation: ssSheen 14s ease-in-out 1.6s infinite; }
  .cc.is-onscreen .cc-card--featured::after { animation: ssSheen 13s ease-in-out 2.4s infinite; }
  .rk.is-onscreen .rk__immortal::after { animation: ssSheen 15s ease-in-out 2s infinite; }
  .px.is-onscreen .tier--lifetime::after { animation: ssSheen 14s ease-in-out 2.8s infinite; }
  .af.is-onscreen .af-reward__card::after { animation: ssSheen 13.5s ease-in-out 3.2s infinite; }
}

/* The band crosses left to right in the first ~11% of the period, then
   the surface rests for the rest of it. */
@keyframes ssSheen {
  0%        { background-position: 150% 0; opacity: 0; }
  1.5%      { opacity: 1; }
  10%       { opacity: 1; }
  11.5%     { background-position: -50% 0; opacity: 0; }
  100%      { background-position: -50% 0; opacity: 0; }
}