/* ============================================================
   Page transitions + CTA glitch
   No library. The button's own ::before/::after are left alone —
   they draw the glare and the rim that masks it.
   ============================================================ */

/* ---- 1. Cross-document view transitions (Chrome/Edge, Safari 18.2+) ---- */
@view-transition { navigation: auto; }

::view-transition-old(root){ animation: ym-leave .26s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root){ animation: ym-enter .42s cubic-bezier(.16,.7,.24,1) both; }
@keyframes ym-leave{ to{ opacity:0; transform:translateY(-12px) scale(.995); } }
@keyframes ym-enter{ from{ opacity:0; transform:translateY(16px) scale(1.005); } }

/* The header holds still while the body changes underneath it. */
.nav{ view-transition-name: ym-nav; }
::view-transition-old(ym-nav),
::view-transition-new(ym-nav){ animation:none; }

/* ---- 2. The gold edge, only on the scripted fallback path ---- */
.ym-wipe{
  position:fixed; top:0; bottom:0; left:0; width:2px; z-index:9999; pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--accent,#D8B068),transparent);
  box-shadow:0 0 22px 4px rgba(216,176,104,.45);
  opacity:0; transform:translateX(-4vw);
}

/* ---- 3. Gold clipping on phones ----
   Both the gold word and the gold button paint a gradient and then clip it —
   to the glyphs, to the pill. Mobile browsers drop that clip once a filter or
   a composited layer is involved, and the uncut gradient shows as a rectangle.
   Desktop keeps the full effect; touch devices get the flat gold underneath. */
.btn.primary{ clip-path: inset(0 round 999px); }
.btn.primary::before{ will-change: auto; }   /* nothing here animates transform */
.btn.primary::after{ inset: 0; }

/* Phones: no page transition at all. Mobile browsers were running their own
   navigation animation on top of this one, which read as the page loading
   twice. Desktop keeps the transition. */
@media (hover: none) and (pointer: coarse){
  @view-transition { navigation: none; }
}

@media (hover: none) and (pointer: coarse){
  /* the moving glare bar: the thing that escapes the pill */
  .btn.primary::before{ display: none; }
  .btn.primary::after{ display: none; }

  /* "your": solid gold instead of gradient-through-glyphs */
  .hero h1 .shine{
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--accent-bright);
    filter: none;
  }
}

/* ---- 4. CTA glitch ---- */
.ym-label{ position:relative; display:inline-block; }

/* Two offset copies of the label, clipped to bands: a broken-signal split. */
.ym-label::before,
.ym-label::after{
  content:attr(data-text);
  position:absolute; left:0; top:0; width:100%;
  pointer-events:none; opacity:0;
}
.ym-label::before{ color:#00E5FF; }
.ym-label::after{ color:#FF0048; }

.is-glitching .ym-label::before{ animation: ym-split-a .34s steps(1,end) both; }
.is-glitching .ym-label::after { animation: ym-split-b .34s steps(1,end) both; }
.is-glitching .ym-label        { animation: ym-stutter .34s steps(1,end) both; }

@keyframes ym-split-a{
  0%  { opacity:.9; transform:translateX(-4px); clip-path:inset(0 0 68% 0); }
  28% { opacity:.9; transform:translateX(3px);  clip-path:inset(34% 0 42% 0); }
  58% { opacity:.9; transform:translateX(-2px); clip-path:inset(8% 0 70% 0); }
  85% { opacity:.6; transform:translateX(1px);  clip-path:inset(0 0 74% 0); }
  100%{ opacity:0;  transform:none; }
}
@keyframes ym-split-b{
  0%  { opacity:.9; transform:translateX(5px);  clip-path:inset(56% 0 0 0); }
  28% { opacity:.9; transform:translateX(-3px); clip-path:inset(48% 0 16% 0); }
  58% { opacity:.9; transform:translateX(2px);  clip-path:inset(66% 0 4% 0); }
  85% { opacity:.6; transform:translateX(-1px); clip-path:inset(52% 0 0 0); }
  100%{ opacity:0;  transform:none; }
}
@keyframes ym-stutter{
  0%  { transform:translateX(-3px) skewX(-6deg); }
  18% { transform:translateX(4px)  skewX(5deg); }
  40% { transform:translateX(-2px) skewX(-3deg); }
  62% { transform:translateX(2px)  skewX(2deg); }
  100%{ transform:none; }
}

/* Scanline sweep. Its own element: the button's pseudo-elements are spoken for. */
.ym-scan{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px);
  opacity:0; mix-blend-mode:overlay;
}
.is-glitching .ym-scan{ animation: ym-scan .34s linear both; }
@keyframes ym-scan{
  0%,100%{ opacity:0; }
  10%,70%{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation-duration:.01ms; }
  .is-glitching .ym-label,
  .is-glitching .ym-label::before,
  .is-glitching .ym-label::after,
  .is-glitching .ym-scan{ animation:none; opacity:0; }
  .is-glitching .ym-label{ opacity:1; }
}