/* Click effects for in-page jumps (menu, buttons). One file for goodwordsites.com and every client site.
   <html data-fx="..."> picks the effect; effects.js runs it. Colours come from --fx-* (templates map them to the
   style's accent and band); the :where() defaults are GoodWord's greens. Nothing plays unless someone clicks, and
   reduced motion gets the plain jump. --fx-speed scales every duration (1 = normal). */
:where(html){--fx-a:#2fbf71;--fx-b:#145a43;--fx-hi:#d4ffe6;--fx-bg:#05130e;--fx-flash:#dcffeb;--fx-ink:#eafff3;--fx-speed:1}
html[data-fx="smooth"]{scroll-behavior:smooth}

@media (prefers-reduced-motion:no-preference){
  [data-fx-keep]{view-transition-name:fx-keep}

  /* Zoom Through: fly through the old view while the new one settles in from behind */
  html[data-fx="zoom"]::view-transition{background:var(--fx-bg)}
  html[data-fx="zoom"]::view-transition-old(root){animation:fx-zoom-out calc(var(--fx-speed)*.4s) cubic-bezier(.5,0,.75,0) both}
  html[data-fx="zoom"]::view-transition-new(root){animation:fx-zoom-in calc(var(--fx-speed)*.5s) calc(var(--fx-speed)*.12s) cubic-bezier(.2,.8,.2,1) both}
  @keyframes fx-zoom-out{to{opacity:0;scale:1.18;filter:blur(8px)}}
  @keyframes fx-zoom-in{from{opacity:0;scale:.9;filter:blur(8px)}}

  /* Flash Frame: the old view blows out to a bright frame, then the new view fades up from it */
  html[data-fx="flash"]::view-transition{background:var(--fx-flash)}
  html[data-fx="flash"]::view-transition-old(root){animation:fx-flash-out calc(var(--fx-speed)*.32s) ease-in both}
  html[data-fx="flash"]::view-transition-new(root){animation:fx-flash-in calc(var(--fx-speed)*.45s) calc(var(--fx-speed)*.22s) ease-out both}
  @keyframes fx-flash-out{40%{opacity:1;filter:brightness(1.8) saturate(.4)}to{opacity:0;filter:brightness(2.4) saturate(0)}}
  @keyframes fx-flash-in{from{opacity:0;filter:brightness(2) saturate(0)}}

  /* Swoosh: a glowing band travels left to right and the new view wipes in behind it.
     Flash + Swoosh: the same, out of a pale flash. */
  html[data-fx="swoosh"]::view-transition{animation:fx-band calc(var(--fx-speed)*.6s) cubic-bezier(.7,0,.2,1) both;
    background:linear-gradient(110deg,var(--fx-bg) 38%,var(--fx-a) 46%,var(--fx-hi) 50%,var(--fx-a) 54%,var(--fx-bg) 62%) 0 0/320% 100%}
  html[data-fx="flash-swoosh"]::view-transition{animation:fx-band calc(var(--fx-speed)*.6s) cubic-bezier(.7,0,.2,1) both;
    background:linear-gradient(110deg,var(--fx-flash) 38%,var(--fx-hi) 46%,var(--fx-a) 50%,var(--fx-hi) 54%,var(--fx-flash) 62%) 0 0/320% 100%}
  @keyframes fx-band{from{background-position:100% 0}to{background-position:0 0}}
  html[data-fx="swoosh"]::view-transition-new(root),html[data-fx="flash-swoosh"]::view-transition-new(root){
    animation:fx-wipe calc(var(--fx-speed)*.6s) cubic-bezier(.7,0,.2,1) both}
  @keyframes fx-wipe{from{clip-path:polygon(-80% 0,-20% 0,-40% 100%,-80% 100%)}to{clip-path:polygon(-80% 0,120% 0,100% 100%,-80% 100%)}}
  html[data-fx="swoosh"]::view-transition-old(root){animation:fx-slide-out calc(var(--fx-speed)*.3s) ease-in both}
  @keyframes fx-slide-out{to{opacity:0;translate:6% 0}}
  html[data-fx="flash-swoosh"]::view-transition-old(root){animation:fx-flash-out calc(var(--fx-speed)*.25s) ease-in both}

  /* Iris From Click: the new view opens as a circle from where you clicked */
  html[data-fx="iris"]::view-transition{background:var(--fx-bg)}
  html[data-fx="iris"]::view-transition-old(root){animation:fx-dim calc(var(--fx-speed)*.825s) ease both}
  @keyframes fx-dim{to{filter:brightness(.4)}}
  html[data-fx="iris"]::view-transition-new(root){animation:fx-iris calc(var(--fx-speed)*.825s) cubic-bezier(.6,0,.2,1) both}
  @keyframes fx-iris{from{clip-path:circle(0 at var(--fx-x,50%) var(--fx-y,0))}to{clip-path:circle(150vmax at var(--fx-x,50%) var(--fx-y,0))}}

  /* Blinds & Label and Curtain + Label: a real overlay (effects.js adds it) so it can carry the section's name.
     Each 400vh panel moves at an even pace and covers the screen for the middle of its trip; the page jumps then. */
  .fx-cover{position:fixed;inset:0;z-index:2147483000;pointer-events:none;display:none;place-items:center;--d:calc(var(--fx-speed)*1.2s)}
  .fx-cover.go{display:grid}
  .fx-cover i{position:absolute;top:-150vh;bottom:-150vh;left:0;right:0;
    background:radial-gradient(60rem 40rem at 50% 40%,color-mix(in srgb,var(--fx-hi) 35%,transparent),transparent 60%),linear-gradient(var(--fx-a),var(--fx-b))}
  .fx-cover p{position:relative;z-index:1;display:flex;align-items:center;gap:1rem;margin:0 1rem;text-align:center;color:var(--fx-ink);
    font:800 clamp(2.5rem,8vw,5.5rem)/1 var(--display,system-ui);animation:fx-label var(--d) ease both}
  .fx-cover img{width:clamp(3rem,8vw,5rem);height:auto}
  @keyframes fx-label{0%,28%{opacity:0;translate:0 3rem}40%,60%{opacity:1;translate:0 0}72%,100%{opacity:0;translate:0 -3rem}}
  @keyframes fx-rise{from{translate:0 250vh}to{translate:0 -250vh}}
  .fx-cover.curtain i{border-radius:50% / 14vh;box-shadow:0 0 80px color-mix(in srgb,var(--fx-a) 50%,transparent)}
  .fx-cover.curtain i~i{display:none}
  .fx-cover.curtain.go i{animation:fx-rise var(--d) cubic-bezier(.35,.15,.65,.85) both}
  .fx-cover.blinds i{width:calc(100% / 6 + 1px);left:calc(var(--n) * 100% / 6);right:auto;border-radius:999px / 7vh}
  .fx-cover.blinds.go i{animation:fx-rise var(--d) cubic-bezier(.35,.15,.65,.85) calc(var(--n) * var(--fx-speed) * .035s) both}
  .fx-cover.blinds p{animation-delay:calc(var(--fx-speed) * .09s)}
}