/* ============================================================
   MOBILE GROUP 2022 - Design System
   Dark editorial-tech. Ink / Acid Lime / Ember.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* surfaces */
  --ink:        #08090C;
  --ink-2:      #0D0F14;
  --ink-3:      #13161D;
  --ink-4:      #1B1F28;
  --paper:      #F4F1EA;
  --mist:       #9AA1B0;
  --mist-dim:   #6A7182;

  /* accents */
  --lime:       #CDFF4F;
  --lime-deep:  #A5D62B;
  --ember:      #FF6A3D;
  --azure:      #62E1FF;

  /* lines */
  --line:       rgba(244,241,234,.10);
  --line-2:     rgba(244,241,234,.18);
  --line-lime:  rgba(205,255,79,.34);

  /* type */
  --f-display: "Bricolage Grotesque", Georgia, serif;
  --f-body:    "Instrument Sans", "Segoe UI", Helvetica, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  /* rhythm */
  --pad:        clamp(20px, 5vw, 64px);
  --maxw:       1280px;
  --r-sm:       10px;
  --r-md:       18px;
  --r-lg:       28px;
  --r-xl:       40px;

  /* motion */
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-back:  cubic-bezier(.34,1.56,.64,1);

  /* z-scale */
  --z-grain: 9000;
  --z-cursor: 9500;
  --z-menu: 850;
  /* header sits ABOVE the drawer so the close (X) button and logo stay
     reachable while the menu is open */
  --z-nav: 870;
  --z-cookie: 880;
  --z-progress: 900;

  color-scheme: dark;
}

/* ---------- 2. MOTION IS ALWAYS ON ----------
   The client's OS has system animations switched off, which makes
   browsers report `prefers-reduced-motion: reduce`. Browsers do NOT
   stop CSS animations on their own — only a stylesheet can. So this
   file deliberately contains NO `prefers-reduced-motion` rules at all,
   and every animation runs everywhere.

   Do not add a `@media (prefers-reduced-motion: reduce)` block here.
   In particular, never "re-enable" motion with `animation-duration:
   revert` — `revert` resolves to the initial value 0s and silently
   kills every animation on the site. */

/* ---------- 3. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:104px;
}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,p,figure,blockquote{ margin:0; }
::selection{ background:var(--lime); color:#0A0B0D; }

:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
  border-radius:4px;
}

::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--ink-4); border-radius:20px; border:3px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:var(--lime-deep); }

/* ---------- 4. TYPOGRAPHY ---------- */
.display,h1,h2,h3{
  font-family:var(--f-display);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.035em;
  font-variation-settings:"wdth" 100,"opsz" 40;
}
h1,.h1{ font-size:clamp(2.55rem, 6.4vw, 4.7rem); }
h2,.h2{ font-size:clamp(2rem, 4.4vw, 3.4rem); }
h3,.h3{ font-size:clamp(1.35rem, 2.3vw, 1.95rem); line-height:1.06; }
.h4{ font-family:var(--f-display); font-weight:600; font-size:1.16rem; line-height:1.2; letter-spacing:-.02em; }

.eyebrow{
  font-family:var(--f-mono);
  font-size:.71rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--lime);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:linear-gradient(90deg,transparent,var(--lime));
  flex:none;
}
.eyebrow--ember{ color:var(--ember); }
.eyebrow--ember::before{ background:linear-gradient(90deg,transparent,var(--ember)); }

.lead{ font-size:clamp(1.06rem,1.55vw,1.28rem); color:var(--mist); max-width:62ch; }
.muted{ color:var(--mist); }
.dim{ color:var(--mist-dim); }
.mono{ font-family:var(--f-mono); }
.ital{ font-style:italic; font-family:var(--f-display); font-weight:400; }
.nowrap{ white-space:nowrap; }

.grad-text{
  background:linear-gradient(96deg,var(--lime) 0%,#EAFFA8 42%,var(--ember) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.outline-text{
  color:transparent;
  -webkit-text-stroke:1.4px rgba(244,241,234,.42);
}

/* ---------- 5. LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:2; }
.section{ position:relative; padding-block:clamp(72px,10vw,148px); }
.section--tight{ padding-block:clamp(52px,7vw,96px); }
.sec-head{ display:flex; flex-direction:column; gap:20px; max-width:820px; margin-bottom:clamp(38px,5vw,68px); }
.sec-head--row{ max-width:none; flex-direction:row; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.grid{ display:grid; gap:clamp(16px,2vw,26px); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- 6. ATMOSPHERE ---------- */
/* Viewport-sized only. Animating background-position (rather than
   transforming an oversized layer) keeps the composited surface small. */
.grain{
  position:fixed; inset:0;
  z-index:var(--z-grain);
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 5.4s steps(6) infinite;
}
@keyframes grainShift{
  0%  { background-position:0 0 }
  16% { background-position:-28px -18px }
  33% { background-position:21px -34px }
  50% { background-position:-19px 27px }
  66% { background-position:31px 22px }
  83% { background-position:-34px -13px }
  100%{ background-position:0 0 }
}

.aurora{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
  /* fade the glow out before the section boundary, otherwise overflow:hidden
     leaves a visible horizontal seam where the blobs are cut off */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.45) 84%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.45) 84%,transparent 100%);
}
.blob{
  position:absolute; border-radius:50%;
  filter:blur(100px);
  opacity:.26;
  will-change:transform;
}
.blob--lime{ width:46vw; height:46vw; background:radial-gradient(circle,#CDFF4F 0%,rgba(205,255,79,0) 68%); animation:drift1 22s var(--ease) infinite; }
.blob--ember{ width:38vw; height:38vw; background:radial-gradient(circle,#FF6A3D 0%,rgba(255,106,61,0) 68%); animation:drift2 27s var(--ease) infinite; }
.blob--azure{ width:32vw; height:32vw; background:radial-gradient(circle,#62E1FF 0%,rgba(98,225,255,0) 68%); animation:drift3 31s var(--ease) infinite; opacity:.20; }
@keyframes drift1{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 33%{transform:translate3d(9vw,6vh,0) scale(1.16)} 66%{transform:translate3d(-5vw,10vh,0) scale(.9)} }
@keyframes drift2{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 40%{transform:translate3d(-11vw,8vh,0) scale(1.2)} 75%{transform:translate3d(6vw,-6vh,0) scale(.86)} }
@keyframes drift3{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(8vw,-9vh,0) scale(1.25)} }

.dotgrid{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgba(244,241,234,.16) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 5%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 5%, transparent 72%);
  animation:dotPan 24s linear infinite;
}
@keyframes dotPan{ to{ background-position:34px 34px; } }

.hairlines{ position:absolute; inset:0; pointer-events:none; z-index:0; display:grid; grid-template-columns:repeat(6,1fr); }
.hairlines span{ border-left:1px solid rgba(244,241,234,.045); }
.hairlines span:first-child{ border-left-color:transparent; }

/* ---------- 7. CUSTOM CURSOR ---------- */
.cur, .cur-ring{
  position:fixed; top:0; left:0; z-index:var(--z-cursor);
  pointer-events:none; border-radius:50%;
  opacity:0; transition:opacity .3s;
}
.cur{ width:7px; height:7px; background:var(--lime); }
.cur-ring{
  width:34px; height:34px; border:1px solid rgba(205,255,79,.75);
  transition:width .28s var(--ease-out), height .28s var(--ease-out), opacity .3s, border-color .3s, background .3s;
}
body.has-cursor .cur, body.has-cursor .cur-ring{ opacity:1; }
body.cur-hot .cur-ring{ width:62px; height:62px; background:rgba(205,255,79,.14); border-color:var(--lime); }
body.cur-hot .cur{ opacity:.25; }
@media (pointer:coarse),(max-width:900px){ .cur,.cur-ring{ display:none !important; } }

/* ---------- 8. SCROLL PROGRESS ---------- */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--lime),var(--ember));
  z-index:var(--z-progress);
  box-shadow:0 0 14px rgba(205,255,79,.55);
}

/* ---------- 9. HEADER ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  padding:14px var(--pad);
  transition:padding .4s var(--ease), background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding:9px var(--pad);
  background:rgba(8,9,12,.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--line);
}
.nav__inner{ max-width:var(--maxw); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }

.logo{ display:inline-flex; align-items:center; gap:11px; flex:none; }
.logo__mark{ width:42px; height:42px; flex:none; overflow:visible; }
.logo__type{ display:flex; flex-direction:column; line-height:1; }
.logo__name{ font-family:var(--f-display); font-weight:800; font-size:1.03rem; letter-spacing:-.035em; }
.logo__sub{ font-family:var(--f-mono); font-size:.55rem; letter-spacing:.3em; color:var(--mist-dim); text-transform:uppercase; margin-top:4px; }
.logo:hover .lg-spark{ animation:sparkPop .7s var(--ease-back); }
.logo:hover .lg-bolt{ animation:boltDraw 1s var(--ease-out); }
@keyframes sparkPop{ 0%{transform:scale(1)} 45%{transform:scale(1.8)} 100%{transform:scale(1)} }
@keyframes boltDraw{ from{stroke-dashoffset:120} to{stroke-dashoffset:0} }

.menu{ display:flex; align-items:center; gap:4px; }
.menu > li{ position:relative; }
.menu a{
  position:relative; display:block; padding:9px 14px; border-radius:999px;
  font-size:.9rem; color:var(--mist); font-weight:500;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.menu > li > a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px;
  background:var(--lime); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .35s var(--ease-out);
}
.menu a:hover{ color:var(--paper); }
.menu > li > a:hover::after{ transform:scaleX(1); }
.menu a.is-active{ color:var(--paper); background:rgba(244,241,234,.06); }
.menu > li > a.is-active::after{ transform:scaleX(1); }

/* Invisible bridge so the pointer can cross the gap between the nav
   item and the panel without the panel closing underneath it. */
.has-sub::after{
  content:""; position:absolute; top:100%; left:-8px;
  width:316px; height:22px; display:none;
}
.has-sub:hover::after, .has-sub:focus-within::after{ display:block; }

.sub{
  position:absolute; top:calc(100% + 12px); left:0; min-width:300px;
  background:rgba(13,15,20,.95);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:8px; display:grid; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.98);
  /* 260ms grace period before it hides, so a slightly wobbly cursor
     path between item and panel does not dismiss it */
  transition:opacity .3s var(--ease) .26s, transform .3s var(--ease-out) .26s, visibility .3s .26s;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.85);
}
.has-sub:hover .sub, .has-sub:focus-within .sub, .sub:hover, .sub.is-pinned{
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
  transition-delay:0s;
}
.sub a{
  display:flex; flex-direction:column; gap:3px; padding:11px 13px; border-radius:12px;
  color:var(--paper); font-size:.9rem; font-weight:600;
}
.sub a span{ font-family:var(--f-mono); font-size:.66rem; color:var(--mist-dim); letter-spacing:.06em; font-weight:400; }
.sub a:hover{ background:rgba(205,255,79,.09); }
.sub a:hover span{ color:var(--lime); }

.nav__cta{ display:flex; align-items:center; gap:10px; }
.burger{
  display:none; width:44px; height:44px; border-radius:12px;
  border:1px solid var(--line); background:transparent; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger i{ display:block; width:18px; height:1.6px; background:var(--paper); border-radius:2px; transition:transform .34s var(--ease-back), opacity .2s; }
.burger.is-open i:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.burger.is-open i:nth-child(2){ opacity:0; }
.burger.is-open i:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:var(--z-menu);
  background:rgba(8,9,12,.985);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  padding:96px var(--pad) 40px;
  display:flex; flex-direction:column; gap:2px;
  clip-path:circle(0% at calc(100% - 40px) 38px);
  transition:clip-path .62s var(--ease-out);
  overflow-y:auto;
  visibility:hidden;
}
.drawer.is-open{ clip-path:circle(155% at calc(100% - 40px) 38px); visibility:visible; }
.drawer a{
  font-family:var(--f-display); font-weight:700; font-size:clamp(1.6rem,6.4vw,2.3rem);
  letter-spacing:-.035em; padding:11px 0; border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  opacity:0; transform:translateY(22px);
}
.drawer.is-open a{ animation:drawerIn .55s var(--ease-out) forwards; }
.drawer a em{ font-family:var(--f-mono); font-style:normal; font-size:.6rem; color:var(--lime); letter-spacing:.2em; }
@keyframes drawerIn{ to{ opacity:1; transform:none; } }
.drawer__foot{ margin-top:auto; padding-top:26px; display:grid; gap:10px; font-family:var(--f-mono); font-size:.82rem; color:var(--mist); }
.drawer__foot a{ font-family:var(--f-mono); font-size:.82rem; font-weight:400; border:0; padding:0; opacity:1; transform:none; animation:none; color:var(--lime); display:inline; }

/* ---------- 10. BUTTONS ---------- */
.btn{
  --btn-bg:var(--lime); --btn-fg:#0A0B0D;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; min-height:48px; border-radius:999px; border:1px solid transparent;
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:600; font-size:.94rem; letter-spacing:-.01em;
  cursor:pointer; overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:transform .3s var(--ease-back), box-shadow .35s var(--ease), color .3s, border-color .3s;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5), transparent 62%);
  opacity:0; transition:opacity .35s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(205,255,79,.6); }
.btn:hover::before{ opacity:1; }
.btn:active{ transform:translateY(0) scale(.98); }
.btn svg{ transition:transform .35s var(--ease-out); flex:none; }
.btn:hover svg{ transform:translateX(4px); }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--paper); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--lime); color:var(--lime); box-shadow:0 14px 34px -18px rgba(205,255,79,.5); }
.btn--ghost::before{ background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(205,255,79,.16), transparent 62%); }
.btn--ember{ --btn-bg:var(--ember); --btn-fg:#12060A; }
.btn--ember:hover{ box-shadow:0 14px 34px -12px rgba(255,106,61,.6); }
.btn--sm{ padding:10px 18px; min-height:42px; font-size:.85rem; }
.btn--lg{ padding:17px 34px; min-height:56px; font-size:1rem; }
.btn--block{ width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:.93rem; color:var(--lime);
  border-bottom:1px solid rgba(205,255,79,.28); padding-bottom:3px;
  transition:gap .3s var(--ease-out), border-color .3s;
}
.link-arrow:hover{ gap:14px; border-bottom-color:var(--lime); }

/* ---------- 11. MICRO DECOR ---------- */
.deco{ position:absolute; pointer-events:none; z-index:1; }
.deco svg{ overflow:visible; }
.spin      { animation:spin 18s linear infinite; transform-origin:50% 50%; transform-box:fill-box; }
.spin-rev  { animation:spin 26s linear infinite reverse; transform-origin:50% 50%; transform-box:fill-box; }
.spin-slow { animation:spin 46s linear infinite; transform-origin:50% 50%; transform-box:fill-box; }
.pulse     { animation:pulse 3.1s var(--ease) infinite; transform-origin:50% 50%; transform-box:fill-box; }
.bob       { animation:bob 6.2s var(--ease) infinite; }
.bob-2     { animation:bob 8.4s var(--ease) infinite 1.1s; }
.sway      { animation:sway 9s var(--ease) infinite; transform-box:fill-box; transform-origin:50% 50%; }
.twinkle   { animation:twinkle 2.6s var(--ease) infinite; transform-box:fill-box; transform-origin:50% 50%; }
.twinkle-2 { animation:twinkle 3.4s var(--ease) infinite .8s; transform-box:fill-box; transform-origin:50% 50%; }
.dash-run  { stroke-dasharray:6 8; animation:dashRun 2.4s linear infinite; }
.dash-run-l{ stroke-dasharray:3 11; animation:dashRun 5s linear infinite reverse; }
.trace     { stroke-dasharray:40 260; animation:trace 3.6s var(--ease) infinite; }
.blink     { animation:blink 1.15s steps(2) infinite; }
.grow-bar  { transform-origin:50% 100%; transform-box:fill-box; animation:growBar 2.8s var(--ease) infinite alternate; }

@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.16); opacity:1 } }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
@keyframes sway{ 0%,100%{ transform:translateX(0) rotate(0) } 50%{ transform:translateX(12px) rotate(8deg) } }
@keyframes twinkle{ 0%,100%{ opacity:.18; transform:scale(.65) } 50%{ opacity:1; transform:scale(1.25) } }
@keyframes dashRun{ to{ stroke-dashoffset:-28; } }
@keyframes trace{ 0%{ stroke-dashoffset:300 } 100%{ stroke-dashoffset:-300 } }
@keyframes blink{ 50%{ opacity:0 } }
@keyframes growBar{ from{ transform:scaleY(.28) } to{ transform:scaleY(1) } }

.chip-float{
  position:absolute; z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:999px;
  background:rgba(19,22,29,.8); border:1px solid var(--line-2);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--paper); white-space:nowrap;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.9);
  animation:bob 7s var(--ease) infinite;
}
.chip-float b{ color:var(--lime); font-weight:600; }
.chip-float .dot{ width:6px; height:6px; border-radius:50%; background:var(--lime); animation:pulse 2s var(--ease) infinite; flex:none; }
.chip-float--ember .dot{ background:var(--ember); }
.chip-float--ember b{ color:var(--ember); }

/* ---------- 12. REVEAL ---------- */
[data-rv]{ opacity:0; transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); will-change:transform,opacity; }
[data-rv="up"]{ transform:translateY(38px); }
[data-rv="down"]{ transform:translateY(-28px); }
[data-rv="left"]{ transform:translateX(-42px); }
[data-rv="right"]{ transform:translateX(42px); }
[data-rv="scale"]{ transform:scale(.93); }
[data-rv="blur"]{ filter:blur(14px); transform:translateY(24px); }
[data-rv].is-in{ opacity:1; transform:none; filter:none; }

.stagger > *{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.stagger.is-in > *{ opacity:1; transform:none; }
.stagger.is-in > *:nth-child(1){ transition-delay:.04s }
.stagger.is-in > *:nth-child(2){ transition-delay:.11s }
.stagger.is-in > *:nth-child(3){ transition-delay:.18s }
.stagger.is-in > *:nth-child(4){ transition-delay:.25s }
.stagger.is-in > *:nth-child(5){ transition-delay:.32s }
.stagger.is-in > *:nth-child(6){ transition-delay:.39s }
.stagger.is-in > *:nth-child(7){ transition-delay:.46s }
.stagger.is-in > *:nth-child(8){ transition-delay:.53s }
.stagger.is-in > *:nth-child(9){ transition-delay:.60s }
.stagger.is-in > *:nth-child(10){ transition-delay:.67s }

.split{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.09em; }
.split > span{
  display:inline-block; transform:translateY(112%) rotate(4deg); opacity:0;
  animation:wordUp .95s var(--ease-out) forwards;
}
@keyframes wordUp{ to{ transform:none; opacity:1; } }