/* Motion for the site. One language: pixel things move in steps (--ease-snap), UI things
   ease out (--ease-out). Only translate, rotate, scale, opacity and clip-path move.
   Every animation sits under prefers-reduced-motion: no-preference. Anything that starts
   hidden also needs html.js, which the head script drops if js/motion.js never runs. */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-snap:steps(6,jump-end);
  --dur-1:160ms; --dur-2:520ms; --dur-3:900ms;
}

/* static parts: these show with or without motion */

/* fixed nav: a solid bar sits behind it once the hero text reaches it (js/motion.js).
   Without JS the page keeps the nav in the flow, so it stays clear. */
nav::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--night);border-bottom:2px solid var(--line);opacity:0;pointer-events:none}
.is-scrolled nav::before{opacity:1}

/* chalk halfway line, with its centre spot, along the top of a section */
[data-line]{position:relative}
[data-line]::before{content:"";position:absolute;top:0;left:0;right:0;height:9px;pointer-events:none;opacity:.8;
  background:linear-gradient(var(--chalk),var(--chalk)) 50% 0/9px 9px no-repeat,linear-gradient(var(--chalk),var(--chalk)) 0 3px/100% 3px no-repeat}

@media screen and (prefers-reduced-motion:no-preference){
  /* page to page: a short crossfade, and the club badge carried across */
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
  ::view-transition-group(rcyc-mark){animation-duration:.42s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  nav .mark img,body>.wrap>.mark img{view-transition-name:rcyc-mark}

  /* hero on load, about 1.3s: the floodlights warm up, the title is wiped on in pixel steps,
     the badge is shown like a card, then the blocks under it rise in */
  .js .hero .art img{animation:settle 1.3s var(--ease-out) backwards}
  .js .hero .art::after{content:"";position:absolute;inset:0;background:var(--night);opacity:0;pointer-events:none;animation:floodlights var(--dur-3) var(--ease-out) backwards}
  .js h1 :is(.r,.y){animation:wipe 360ms var(--ease-snap) 260ms backwards}
  .js h1 .y{animation-delay:400ms}
  .js .lockup img{transform-origin:50% 90%;animation:show-card 680ms var(--ease-out) 180ms backwards}
  .js [data-enter]{--rise:12px;animation:rise var(--dur-2) var(--ease-out) backwards;animation-delay:calc(180ms + var(--i,0) * 80ms)}

  /* hero on scroll: the art drifts down and darkens as it leaves */
  @supports (animation-timeline:view()){
    .hero{view-timeline:--hero block;view-timeline-inset:0}
    .hero .art{animation:drift linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
  }

  /* scroll reveals: js/motion.js adds .is-in once, and --k staggers what enters together */
  .js [data-reveal]:not(.is-in),.js [data-reveal-group]:not(.is-in)>*,.js [data-deal]>:not(.is-in){opacity:0}
  .js [data-reveal].is-in{animation:rise var(--dur-2) var(--ease-out) backwards;animation-delay:calc(var(--k,0) * 70ms)}
  .js [data-reveal-group].is-in>*{animation:rise var(--dur-2) var(--ease-out) backwards;animation-delay:calc((var(--k,0) + var(--n,0)) * 70ms)}
  [data-reveal-group]>:nth-child(2){--n:1}
  [data-reveal-group]>:nth-child(3){--n:2}
  [data-reveal-group]>:nth-child(4){--n:3}
  [data-reveal-group]>:nth-child(5){--n:4}
  [data-reveal-group]>:nth-child(n+6){--n:5}

  /* the yellow card is raised like a referee's */
  .js .final .card[data-reveal].is-in{animation-name:raise;animation-duration:760ms}

  /* rule cards are dealt from a deck under the row (--dx, --dy, --dr come from js/motion.js) */
  .js [data-deal]>.is-in{animation:deal 640ms var(--ease-out) backwards;animation-delay:calc(var(--k,0) * 90ms)}
  @media (min-width:961px){
    .js [data-deal]>*{rotate:var(--fan-r,0deg);translate:0 var(--fan-y,0px);transition:translate var(--dur-1) var(--ease-out)}
    [data-deal]>:nth-child(1){--fan-r:-2deg;--fan-y:8px}
    [data-deal]>:nth-child(2){--fan-r:-.7deg;--fan-y:1px}
    [data-deal]>:nth-child(3){--fan-r:.7deg;--fan-y:1px}
    [data-deal]>:nth-child(4){--fan-r:2deg;--fan-y:8px}
  }
  @media (min-width:961px) and (hover:hover){
    .js [data-deal]>:hover{translate:0 calc(var(--fan-y,0px) - 10px)}
  }

  /* the chalk line is drawn out from the centre spot */
  .js [data-line]:not(.is-in)::before{clip-path:inset(0 50%)}
  .js [data-line].is-in::before{animation:chalk var(--dur-3) var(--ease-out) backwards}

  /* signed up: the thank-you box is shown like a card */
  .js .done{animation:pop 460ms var(--ease-out) backwards}

  /* buttons: the press lands at once, the lift and the release ease out */
  :root .btn{transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
  :root .btn:active{transition-duration:0s}

  /* text links: on hover a heavier underline is drawn in from the left */
  :is(p,li,figcaption) a:not(.btn),nav a:not(.btn):not(.mark),footer a:not(.btn):not(.mark){
    background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;
    transition:background-size var(--dur-2) var(--ease-out),text-decoration-color var(--dur-1)}
  @media (hover:hover){
    :is(p,li,figcaption) a:not(.btn):hover,nav a:not(.btn):not(.mark):hover,footer a:not(.btn):not(.mark):hover{background-size:100% 2px;text-decoration-color:transparent}
  }

  /* the nav bar fades in */
  nav::before{transition:opacity var(--dur-1) var(--ease-out)}
}

@keyframes settle{from{scale:1.06}}
@keyframes floodlights{0%{opacity:.9}24%{opacity:.45}30%{opacity:.6}100%{opacity:0}}
@keyframes wipe{from{clip-path:inset(-30% 105% -45% -5%)}to{clip-path:inset(-30% -5% -45% -5%)}}
@keyframes show-card{0%{opacity:0;translate:0 45%;rotate:-16deg}40%{opacity:1}70%{translate:0 -8%;rotate:3deg}}
@keyframes rise{from{opacity:0;translate:0 var(--rise,18px)}}
@keyframes drift{to{translate:0 24%;opacity:.35}}
@keyframes raise{0%{opacity:0;translate:0 72px;rotate:-7.8deg}25%{opacity:1}65%{translate:0 -6px;rotate:.6deg}}
@keyframes deal{0%{opacity:0;translate:var(--dx,0px) var(--dy,120px);rotate:var(--dr,-6deg)}20%{opacity:1}}
@keyframes chalk{from{clip-path:inset(0 50%)}to{clip-path:inset(0 0)}}
@keyframes pop{0%{opacity:0;translate:0 14px;rotate:-5deg;scale:.94}55%{opacity:1;rotate:.8deg;scale:1.02}}