/* ===== TurtleLuck logo options (?anim=a|b|c). Loads after tl-logo-anim.css. Default (no param) = clean cross-fade. ===== */
@property --lg-r{syntax:'<length>';inherits:true;initial-value:-24px}
@property --lg-w{syntax:'<length>';inherits:true;initial-value:-40px}
@property --lg-p{syntax:'<number>';inherits:true;initial-value:0}

/* ---------- first-load entrance (home only, all options) ---------- */
@keyframes lg-enter{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
html.lg-home header.site.gn .gn-logo{animation:lg-enter 600ms cubic-bezier(.28,.11,.32,1) 120ms backwards}
@media (prefers-reduced-motion:reduce){@keyframes lg-enter{from{opacity:0;transform:none}to{opacity:1;transform:none}}}

/* ---------- A: Shell reveal (450ms) ---------- */
html[data-lganim=a] header.site.gn{--lg-r:-24px;transition:--lg-r 450ms cubic-bezier(.28,.11,.32,1),background-color 450ms cubic-bezier(.28,.11,.32,1),backdrop-filter 450ms cubic-bezier(.28,.11,.32,1),box-shadow 450ms}
html[data-lganim=a] header.site.gn.is-small{--lg-r:240px}
html[data-lganim=a] header.site.gn .wrap{transition:height 450ms cubic-bezier(.28,.11,.32,1)}
/* origin = centre of the shell (~20px from the left edge, lower half of the 40px turtle) */
html[data-lganim=a] header.site.gn .gn-logo .lg-mark{opacity:1!important;transform:none!important;transition:none;
  -webkit-mask-image:radial-gradient(circle at 20px 60%,transparent var(--lg-r),#000 calc(var(--lg-r) + 18px));
          mask-image:radial-gradient(circle at 20px 60%,transparent var(--lg-r),#000 calc(var(--lg-r) + 18px))}
html[data-lganim=a] header.site.gn .gn-logo .lg-text{opacity:1;transform:translate3d(0,-50%,0);transition:none;
  -webkit-mask-image:radial-gradient(circle at 20px 50%,#000 calc(var(--lg-r) - 18px),transparent var(--lg-r));
          mask-image:radial-gradient(circle at 20px 50%,#000 calc(var(--lg-r) - 18px),transparent var(--lg-r))}

/* ---------- B: Ink write-on (500ms) ---------- */
html[data-lganim=b] header.site.gn{--lg-w:-40px;transition:--lg-w 500ms cubic-bezier(.45,.05,.25,1),background-color 500ms cubic-bezier(.28,.11,.32,1),backdrop-filter 500ms cubic-bezier(.28,.11,.32,1),box-shadow 500ms}
html[data-lganim=b] header.site.gn.is-small{--lg-w:200px}
html[data-lganim=b] header.site.gn .wrap{transition:height 500ms cubic-bezier(.28,.11,.32,1)}
html[data-lganim=b] header.site.gn .gn-logo .lg-mark{transform:none;filter:blur(0);
  transition:opacity 320ms cubic-bezier(.28,.11,.32,1),filter 320ms cubic-bezier(.28,.11,.32,1),transform 320ms cubic-bezier(.28,.11,.32,1)}
html[data-lganim=b] header.site.gn.is-small .gn-logo .lg-mark{opacity:0;filter:blur(4px);transform:scale(.985)}
html[data-lganim=b] header.site.gn .gn-logo .lg-text{opacity:1;transform:translate3d(0,-50%,0);transition:none;
  -webkit-mask-image:linear-gradient(90deg,#000 var(--lg-w),transparent calc(var(--lg-w) + 36px));
          mask-image:linear-gradient(90deg,#000 var(--lg-w),transparent calc(var(--lg-w) + 36px))}
/* "Luck." settles: arrives 2px late and eases in after Turtle */
html[data-lganim=b] header.site.gn .gn-logo .lg-tail{display:inline-block;transform:translate3d(3px,0,0);transition:transform 300ms cubic-bezier(.28,.11,.32,1)}
html[data-lganim=b] header.site.gn.is-small .gn-logo .lg-tail{transform:none;transition-delay:200ms}

/* ---------- C: Scroll-scrubbed morph (0-80px), one variable --lg-p ---------- */
@keyframes lg-scrub{from{--lg-p:0}to{--lg-p:1}}
@supports (animation-timeline:scroll()){
  html[data-lganim=c]:not(.lg-js-scrub) header.site.gn{animation:lg-scrub linear both;animation-timeline:scroll(root block);animation-range:0px 80px}
}
html[data-lganim=c] header.site.gn,html[data-lganim=c] header.site.gn *{transition:none!important}
html[data-lganim=c] header.site.gn,html[data-lganim=c] header.site.gn.is-small{
  background-color:rgba(255,255,255,calc(1 - .2*var(--lg-p)));
  -webkit-backdrop-filter:saturate(calc(100% + 80%*var(--lg-p))) blur(calc(20px*var(--lg-p)));
          backdrop-filter:saturate(calc(100% + 80%*var(--lg-p))) blur(calc(20px*var(--lg-p)));
  box-shadow:0 1px 0 rgba(0,0,0,calc(.08*var(--lg-p)))!important}
html[data-lganim=c] header.site.gn .wrap,html[data-lganim=c] header.site.gn.is-small .wrap{height:calc(64px - 12px*var(--lg-p))}
@media (max-width:600px){html[data-lganim=c] header.site.gn .wrap,html[data-lganim=c] header.site.gn.is-small .wrap{height:calc(88px - 32px*var(--lg-p))}}
/* turtle shrinks toward the T (left edge) while blurring out; text sharpens in */
html[data-lganim=c] header.site.gn .gn-logo .lg-mark,html[data-lganim=c] header.site.gn.is-small .gn-logo .lg-mark{
  transform-origin:0 55%;transform:scale(calc(1 - .45*var(--lg-p)));
  opacity:clamp(0,calc(1 - 2.2*var(--lg-p)),1);filter:blur(calc(6px*var(--lg-p)))}
html[data-lganim=c] header.site.gn .gn-logo .lg-text,html[data-lganim=c] header.site.gn.is-small .gn-logo .lg-text{
  transform:translate3d(0,-50%,0) scale(calc(1.06 - .06*var(--lg-p)));
  opacity:clamp(0,calc(2.2*var(--lg-p) - .85),1);filter:blur(calc(6px - 6px*var(--lg-p)))}

/* ---------- reduced motion: opacity only for every option ---------- */
@media (prefers-reduced-motion:reduce){
  html[data-lganim] header.site.gn .gn-logo .lg-mark,html[data-lganim] header.site.gn .gn-logo .lg-text,html[data-lganim] header.site.gn .gn-logo .lg-tail{
    -webkit-mask-image:none!important;mask-image:none!important;filter:none!important;transition:opacity 200ms linear!important}
  html[data-lganim] header.site.gn .gn-logo .lg-mark{transform:none!important}
  html[data-lganim] header.site.gn .gn-logo .lg-text{transform:translate3d(0,-50%,0)!important}
  html[data-lganim]:is([data-lganim=a],[data-lganim=b]) header.site.gn .gn-logo .lg-mark{opacity:1!important}
  html[data-lganim]:is([data-lganim=a],[data-lganim=b]) header.site.gn .gn-logo .lg-text{opacity:0!important}
  html[data-lganim]:is([data-lganim=a],[data-lganim=b]) header.site.gn.is-small .gn-logo .lg-mark{opacity:0!important}
  html[data-lganim]:is([data-lganim=a],[data-lganim=b]) header.site.gn.is-small .gn-logo .lg-text{opacity:1!important}
}

/* ---------- E: Squash and skew reveal ---------- */
html[data-lganim=e] header.site.gn .gn-logo .lg-mark{transform-origin:50% 100%;opacity:1;transform:none;
  transition:transform 250ms cubic-bezier(.16,1,.3,1),opacity 250ms cubic-bezier(.28,.11,.32,1)}
html[data-lganim=e] header.site.gn.is-small .gn-logo .lg-mark{opacity:0;transform:translate3d(0,8px,0) scaleY(0);
  transition:transform 250ms cubic-bezier(.4,0,1,1),opacity 150ms cubic-bezier(.4,0,1,1)}
html[data-lganim=e] header.site.gn .gn-logo .lg-text,html[data-lganim=e] header.site.gn.is-small .gn-logo .lg-text{opacity:1;transform:translate3d(0,-50%,0);transition:none}
html[data-lganim=e] header.site.gn .gn-logo .lg-ch{display:inline-block;transform-origin:0 100%;opacity:0;transform:scaleY(0) skewX(-30deg);
  transition:transform 160ms cubic-bezier(.4,0,1,1),opacity 120ms linear;transition-delay:calc((10 - var(--i))*8ms)} /* quick reverse, right to left */
html[data-lganim=e] header.site.gn.is-small .gn-logo .lg-ch{opacity:1;transform:none;
  transition:transform 380ms cubic-bezier(.16,1,.3,1),opacity 200ms cubic-bezier(.28,.11,.32,1);transition-delay:calc(120ms + var(--i)*25ms)}
@media (prefers-reduced-motion:reduce){
  html[data-lganim=e] header.site.gn .gn-logo .lg-mark,html[data-lganim=e] header.site.gn .gn-logo .lg-ch{transform:none!important;transition:opacity 200ms linear!important;transition-delay:0ms!important}
}

/* ---------- D: Masked slide (550ms, cubic-bezier(.76,0,.24,1)) ---------- */
html[data-lganim=d]{--lgd-ease:cubic-bezier(.76,0,.24,1);--lgd-dur:550ms}
html[data-lganim=d] header.site.gn .wrap{transition:height var(--lgd-dur) var(--lgd-ease)}
html[data-lganim=d] header.site.gn .gn-logo .lg-mark,html[data-lganim=d] header.site.gn.is-small .gn-logo .lg-mark{opacity:1;transform:none;transition:none;pointer-events:none}
/* turtle slides down out of its own clip box */
html[data-lganim=d] header.site.gn .lg-tclip{display:block;overflow:hidden;line-height:0}
html[data-lganim=d] header.site.gn .gn-logo .lg-turtle{transform:translate3d(0,0,0)!important;transition:transform 420ms cubic-bezier(.22,1,.36,1) 400ms!important}
html[data-lganim=d] header.site.gn.is-small .gn-logo .lg-turtle{transition:transform 260ms cubic-bezier(.55,0,.75,.2)!important}
html[data-lganim=d] header.site.gn.is-small .gn-logo .lg-turtle{transform:translate3d(0,105%,0)!important}
/* Luck. artwork hands over to Luck. text at the same left edge (quick, while the turtle is leaving) */
html[data-lganim=d] header.site.gn .gn-logo .lg-word{opacity:1!important;transition:opacity 200ms linear 440ms!important}
html[data-lganim=d] header.site.gn.is-small .gn-logo .lg-word{opacity:0!important;transition:opacity 90ms linear!important}
html[data-lganim=d] header.site.gn .gn-logo .lg-text{display:inline-flex!important;align-items:flex-end;opacity:0;transform:translate3d(0,-50%,0);
  transition:opacity 80ms linear 360ms}
html[data-lganim=d] header.site.gn.is-small .gn-logo .lg-text{opacity:1;transform:translate3d(0,-50%,0);transition:opacity 140ms linear 240ms}
html[data-lganim=d] header.site.gn .lg-tm,html[data-lganim=d] header.site.gn .lg-tail{display:inline-block;line-height:1.25;padding-bottom:1px}
/* the masked slide: window width 0 -> word width, word -100% -> 0 */
html[data-lganim=d] header.site.gn .lg-tm{display:inline-flex!important;justify-content:flex-end;overflow:hidden;width:0;padding-left:3px;margin-left:-3px;box-sizing:content-box;transition:width 380ms var(--lgd-ease)}
html[data-lganim=d] header.site.gn .lg-tm>.lg-t{display:inline-block;flex:none} /* right-anchored inside the window = the -100%→0 slide, kept in sync with width on one thread */
html[data-lganim=d] header.site.gn.is-small .lg-tm{width:var(--lg-tw,64px);transition-delay:260ms}
/* period pop once Turtle has landed */
@keyframes lgd-pop{0%,100%{transform:scale(1)}45%{transform:scale(1.12)}}
html[data-lganim=d] header.site.gn .lg-dot{display:inline-block;transform-origin:50% 85%}
html[data-lganim=d] header.site.gn.is-small .lg-dot{animation:lgd-pop 320ms cubic-bezier(.28,.11,.32,1) 680ms both}
@media (prefers-reduced-motion:reduce){
  html[data-lganim=d] header.site.gn .wrap{transition:none!important}
  html[data-lganim=d] header.site.gn .gn-logo .lg-turtle{transform:none!important;transition:opacity 200ms linear!important;opacity:1}
  html[data-lganim=d] header.site.gn.is-small .gn-logo .lg-turtle{opacity:0}
  html[data-lganim=d] header.site.gn .lg-tm{width:auto!important;transition:none!important}
  html[data-lganim=d] header.site.gn .lg-tm>.lg-t{transform:none!important;transition:none!important}
  html[data-lganim=d] header.site.gn .lg-dot{animation:none!important}
}

/* ---------- D2: Masked slide + jelly settle (?anim=d2 → data-lganim=d + .lg-jelly) ---------- */
/* spring-ish ease per keyframe segment; linear() where supported */
html.lg-jelly{--lgj-ease:cubic-bezier(.33,0,.25,1)}
@supports (animation-timing-function:linear(0,1)){html.lg-jelly{--lgj-ease:linear(0,.25 12%,.6 28%,.86 45%,.97 62%,1)}}
/* word lands: squash & stretch from the left baseline, 3px overshoot */
@keyframes lgj-word{
  0%  {transform:translate3d(0,-50%,0) scale(1,1)}
  22% {transform:translate3d(3px,-50%,0) scale(1.08,.92)}
  48% {transform:translate3d(-1px,-50%,0) scale(.96,1.05)}
  74% {transform:translate3d(.5px,-50%,0) scale(1.02,.98)}
  100%{transform:translate3d(0,-50%,0) scale(1,1)}}
html.lg-jelly[data-lganim=d] header.site.gn .gn-logo .lg-text{transform-origin:0 85%}
html.lg-jelly[data-lganim=d] header.site.gn.is-small .gn-logo .lg-text{animation:lgj-word 600ms var(--lgj-ease) 600ms both!important}
/* release the mask once Turtle has landed so stretched letters are never cut */
@keyframes lgj-release{to{overflow:visible}}
html.lg-jelly[data-lganim=d] header.site.gn.is-small .lg-tm{animation:lgj-release 1ms linear 620ms both}
/* period: tiny jelly squish instead of the pop */
@keyframes lgj-dot{0%,100%{transform:none}30%{transform:scale(1.18,.84)}60%{transform:scale(.92,1.08)}82%{transform:scale(1.03,.97)}}
html.lg-jelly[data-lganim=d] header.site.gn.is-small .lg-dot{transform-origin:50% 90%;animation:lgj-dot 420ms var(--lgj-ease) 700ms both}
/* turtle lands on scroll up: gentler squash from its feet */
@keyframes lgj-turtle{0%,100%{transform:none}30%{transform:scale(1.05,.95)}62%{transform:scale(.98,1.03)}}
html.lg-jelly[data-lganim=d] header.site.gn .lg-tclip{transform-origin:50% 100%}
html.lg-jelly[data-lganim=d] header.site.gn.lg-land .lg-tclip{animation:lgj-turtle 480ms var(--lgj-ease) 760ms both}
html.lg-jelly header.site.gn.lg-noanim *{animation:none!important}
@media (prefers-reduced-motion:reduce){html.lg-jelly header.site.gn *{animation:none!important}}

/* ---------- D3: D2 + jelly on the big turtle + "Luck." group, both ways (?anim=d3 → d + .lg-jelly.lg-jelly3) ---------- */
@keyframes lgj3-out{0%{transform:none;opacity:1}45%{transform:scale(1.07,.9);opacity:1}100%{transform:scale(1.1,.82);opacity:0}}
@keyframes lgj3-in{
  0%  {transform:scale(.9,1.08)}
  28% {transform:scale(1.08,.92)}
  52% {transform:scale(.96,1.05)}
  76% {transform:scale(1.02,.98)}
  100%{transform:none}}
html.lg-jelly3[data-lganim=d] header.site.gn .gn-logo .lg-mark{transform-origin:0 100%}
/* way down: the group squashes into the floor as the turtle drops and Luck. hands over */
html.lg-jelly3[data-lganim=d] header.site.gn.is-small .gn-logo .lg-mark{animation:lgj3-out 220ms cubic-bezier(.5,0,.75,0) both}
html.lg-jelly3[data-lganim=d] header.site.gn.is-small .gn-logo .lg-word{transition:opacity 200ms linear!important}
/* way back: turtle and Luck. come back together, then pop + wobble + settle as one rubbery block */
html.lg-jelly3[data-lganim=d] header.site.gn .gn-logo .lg-turtle{transition:transform 340ms cubic-bezier(.22,1,.36,1) 300ms!important}
html.lg-jelly3[data-lganim=d] header.site.gn .gn-logo .lg-word{transition:opacity 160ms linear 320ms!important}
html.lg-jelly3[data-lganim=d] header.site.gn.lg-land .lg-tclip{animation:none}
html.lg-jelly3[data-lganim=d] header.site.gn.lg-land:not(.is-small) .gn-logo .lg-mark{animation:lgj3-in 640ms var(--lgj-ease) 420ms both}
@media (prefers-reduced-motion:reduce){html.lg-jelly3 header.site.gn .gn-logo .lg-mark{animation:none!important;transform:none!important}}

/* ---------- E2: E + per-letter jelly settle + jelly mark on the way back (?anim=e2 → e + .lg-jelly-e) ---------- */
@keyframes lgje-in{
  0%  {opacity:0;transform:scaleY(0) skewX(-30deg)}
  38% {opacity:1;transform:scale(.94,1.12) skewX(3deg)}
  60% {transform:scale(1.05,.94) skewX(-1deg)}
  80% {transform:scale(.99,1.02)}
  100%{opacity:1;transform:none}}
html.lg-jelly-e[data-lganim=e] header.site.gn.is-small .gn-logo .lg-ch{animation:lgje-in 600ms cubic-bezier(.33,0,.25,1) calc(120ms + var(--i)*28ms) both}
html.lg-jelly-e[data-lganim=e] header.site.gn.lg-land:not(.is-small) .gn-logo .lg-mark{animation:lgj3-in 620ms cubic-bezier(.33,0,.25,1) 60ms both;transform-origin:0 100%}
html.lg-jelly-e header.site.gn.lg-noanim *{animation:none!important}
@media (prefers-reduced-motion:reduce){html.lg-jelly-e header.site.gn *{animation:none!important}}
/* D3 way back: hand Luck. text → artwork without overlap */
html.lg-jelly3[data-lganim=d] header.site.gn:not(.is-small) .gn-logo .lg-text{transition:opacity 70ms linear 290ms}
html.lg-jelly3[data-lganim=d] header.site.gn .gn-logo .lg-word{transition:opacity 140ms linear 360ms!important}

/* ---------- D4: strictly sequenced jelly (?anim=d4 → d + .lg-jelly.lg-d4) ----------
   Down: turtle out (0-180) → Luck. out (130-310) → "Turtle" slides out (300-600) → word jelly (560-1040).
   Up:   "Turtle" tucks + text out (0-280) → Luck. jellies in (280-800) → turtle pops in last (460-1000). */
@keyframes lgd4-out{0%{opacity:1;transform:none}45%{opacity:1;transform:scale(1.08,.86)}100%{opacity:0;transform:scale(1.12,.2)}}
@keyframes lgd4-in{
  0%  {opacity:0;transform:scale(.7,1.15)}
  22% {opacity:1;transform:scale(1.1,.9)}
  48% {transform:scale(.95,1.06)}
  74% {transform:scale(1.02,.98)}
  100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  html.lg-d4[data-lganim=d] header.site.gn .gn-logo .lg-turtle,
  html.lg-d4[data-lganim=d] header.site.gn.is-small .gn-logo .lg-turtle{transform:none!important;transition:none!important}
  html.lg-d4[data-lganim=d] header.site.gn .gn-logo .lg-word,
  html.lg-d4[data-lganim=d] header.site.gn.is-small .gn-logo .lg-word{opacity:1!important;transition:none!important}
  html.lg-d4[data-lganim=d] header.site.gn .lg-tclip,html.lg-d4[data-lganim=d] header.site.gn .lg-wclip{display:block;transform-origin:50% 100%}
  html.lg-d4[data-lganim=d] header.site.gn .lg-tclip{overflow:visible}
  html.lg-d4[data-lganim=d] header.site.gn .lg-wclip{transform-origin:0 100%}
  /* down */
  html.lg-d4[data-lganim=d] header.site.gn.is-small .lg-tclip{animation:lgd4-out 180ms cubic-bezier(.5,0,.75,0) 0ms both}
  html.lg-d4[data-lganim=d] header.site.gn.is-small .lg-wclip{animation:lgd4-out 180ms cubic-bezier(.5,0,.75,0) 130ms both}
  html.lg-d4[data-lganim=d] header.site.gn.is-small .gn-logo .lg-text{transition:opacity 90ms linear 300ms}
  html.lg-d4[data-lganim=d] header.site.gn.is-small .lg-tm{transition:width 300ms var(--lgd-ease) 300ms;animation:lgj-release 1ms linear 610ms both}
  html.lg-d4[data-lganim=d] header.site.gn.is-small .gn-logo .lg-text{animation:lgj-word 480ms var(--lgj-ease) 560ms both!important}
  html.lg-d4[data-lganim=d] header.site.gn.is-small .lg-dot{animation:lgj-dot 360ms var(--lgj-ease) 620ms both}
  /* up */
  html.lg-d4[data-lganim=d] header.site.gn:not(.is-small) .lg-tm{transition:width 240ms var(--lgd-ease) 0ms}
  html.lg-d4[data-lganim=d] header.site.gn:not(.is-small) .gn-logo .lg-text{transition:opacity 60ms linear 220ms}
  html.lg-d4[data-lganim=d] header.site.gn.lg-land:not(.is-small) .lg-wclip{animation:lgd4-in 520ms var(--lgj-ease) 280ms both}
  html.lg-d4[data-lganim=d] header.site.gn.lg-land:not(.is-small) .lg-tclip{animation:lgd4-in 540ms var(--lgj-ease) 460ms both}
}

/* ---------- D5: D3 with more wobble (?anim=d5 → d + .lg-jelly.lg-jelly3.lg-d5) ---------- */
@keyframes lgj5-word{
  0%  {transform:translate3d(0,-50%,0) scale(1,1)}
  16% {transform:translate3d(4px,-50%,0) scale(1.10,.90)}
  32% {transform:translate3d(-2px,-50%,0) scale(.93,1.07)}
  48% {transform:translate3d(1.5px,-50%,0) scale(1.05,.95)}
  64% {transform:translate3d(-.8px,-50%,0) scale(.98,1.03)}
  80% {transform:translate3d(.3px,-50%,0) scale(1.01,.99)}
  100%{transform:translate3d(0,-50%,0) scale(1,1)}}
@keyframes lgj5-dot{0%,100%{transform:none}18%{transform:scale(1.22,.8)}36%{transform:scale(.9,1.12)}54%{transform:scale(1.06,.94)}72%{transform:scale(.98,1.03)}88%{transform:scale(1.01,.99)}}
@keyframes lgj5-in{
  0%  {transform:scale(.88,1.1)}
  18% {transform:scale(1.10,.90)}
  34% {transform:scale(.93,1.07)}
  50% {transform:scale(1.05,.95)}
  66% {transform:scale(.98,1.03)}
  82% {transform:scale(1.01,.99)}
  100%{transform:none}}
@keyframes lgj5-out{0%{transform:none;opacity:1}30%{transform:scale(.95,1.06);opacity:1}60%{transform:scale(1.1,.88);opacity:1}100%{transform:scale(1.14,.8);opacity:0}}
html.lg-d5[data-lganim=d] header.site.gn.is-small .gn-logo .lg-text{animation:lgj5-word 820ms var(--lgj-ease) 600ms both!important}
html.lg-d5[data-lganim=d] header.site.gn.is-small .lg-dot{animation:lgj5-dot 600ms var(--lgj-ease) 700ms both}
html.lg-d5[data-lganim=d] header.site.gn.is-small .gn-logo .lg-mark{animation:lgj5-out 240ms cubic-bezier(.5,0,.75,0) both}
html.lg-d5[data-lganim=d] header.site.gn.lg-land:not(.is-small) .gn-logo .lg-mark{animation:lgj5-in 860ms var(--lgj-ease) 420ms both}