/* =============================================================================================
   YOINK · yoinkworthy.com
   A 1950s print poster that moves like a UPA cartoon: flat shapes, no outlines, a muted retro
   palette on grainy mustard paper, and limited animation (pose-to-pose, on twos, boiling lines).

   Motion rules: only transform and opacity animate (clip-path for the iris). Everything that moves
   lives inside @media (prefers-reduced-motion: no-preference); reduced motion gets instant swaps and
   light fades. The page is complete without JS; site.js only adds the character acting, scroll
   reveals, stepped parallax, form feedback and the iris fallback.
   ============================================================================================= */

/* ---------------------------------------------------------------- fonts (local, OFL) */
@font-face {
  font-family: "Anton";
  src: url("fonts/Anton-Regular.woff2") format("woff2"), url("fonts/Anton-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo Black";
  src: url("fonts/ArchivoBlack-Regular.woff2") format("woff2"), url("fonts/ArchivoBlack-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- tokens */
:root {
  --mustard: #ECBC54;
  --mustard-deep: #E3A63E;
  --mustard-shadow: #B89342;
  --ochre: #C98A2E;
  --brick: #C03A28;
  --brick-dark: #8F2C1E;
  --cream: #FCEBD0;
  --paper: #FFF7E8;
  --ink: #2A1E14;
  --ink-soft: #5A4634;
  --grey: #8A8178;

  --font-display: "Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --font-label: "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --f: 83ms;            /* one drawing "on twos" at 24 fps: the base beat of every character move */
  --f1: 42ms;           /* "on ones", for the quickest snaps */
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  --grain: url("img/grain.webp");
  color-scheme: light;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--mustard);
  background-image: var(--grain), url("img/mottle.webp");
  background-size: 256px 256px, 960px 960px;
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
strong { font-weight: 700; }
a { color: inherit; }
main { display: block; outline: none; }
::selection { background: var(--brick); color: var(--cream); }

:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; border-radius: 6px; }

.page { position: relative; display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; overflow-x: clip; }
.page > main { flex: 1 0 auto; }
.wrap { position: relative; z-index: 1; width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -120px; z-index: 100;
  padding: .7em 1.2em; border-radius: 999px;
  background: var(--ink); color: var(--cream); font: 400 .95rem/1 var(--font-label); text-decoration: none;
}
.skip:focus { top: 12px; outline-color: var(--cream); }

/* ---------------------------------------------------------------- type */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: .98;
}
.h-xl { font-size: clamp(2.75rem, 1.6rem + 5.6vw, 5.4rem); }
.h-lg { font-size: clamp(2.2rem, 1.45rem + 3.6vw, 3.9rem); }
.h-md { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.35rem); }
.lede { font-size: clamp(1.125rem, 1.02rem + .5vw, 1.32rem); line-height: 1.55; max-width: 38em; }
.fine { font-size: .92rem; color: var(--ink-soft); margin: 14px 0 0; }

.kicker {
  display: inline-block;
  margin: 0 0 18px;
  padding: .5em .95em .45em;
  border-radius: 7px;
  background: var(--ink);
  color: var(--mustard);
  font: 400 .8rem/1 var(--font-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  rotate: -2.5deg;
}
.kicker--brick { background: var(--brick); color: var(--cream); }
.kicker--cream { background: var(--cream); color: var(--brick-dark); }

.text-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--brick-dark);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.text-link:hover { text-decoration-thickness: 4px; color: var(--brick-dark); }

/* The "snap" link: a flat bar that yoinks across underneath in one snap. */
.snap { position: relative; display: inline-block; text-decoration: none; }
.snap::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 4px; border-radius: 4px;
  background: var(--brick); transform: scaleX(0); transform-origin: left center;
}
.snap:hover::after, .snap:focus-visible::after, .snap[aria-current="page"]::after { transform: scaleX(1); }

/* ---------------------------------------------------------------- header */
.site-header { position: relative; z-index: 20; padding: 14px 0 6px; }
.site-header__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border-radius: 999px; }
.brand .yk { width: 54px; }
.brand__word { display: block; width: 112px; }
.nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
.nav__link { padding: .4em .1em; font: 400 .95rem/1.2 var(--font-label); color: var(--ink); letter-spacing: .01em; }
@media (min-width: 640px) {
  .site-header { padding-top: 20px; }
  .site-header__bar { justify-content: space-between; }
  .brand .yk { width: 62px; }
  .brand__word { width: 128px; }
  .nav__link { font-size: 1rem; }
}

/* ---------------------------------------------------------------- footer */
.site-footer {
  position: relative;
  margin-top: clamp(64px, 10vw, 120px);
  padding: clamp(48px, 7vw, 80px) 0 28px;
  background: var(--ink) var(--grain) 0 0 / 256px 256px;
  color: var(--cream);
  overflow: hidden;
}
.site-footer :focus-visible { outline-color: var(--mustard); }
.footer__grid { display: grid; gap: 36px; }
@media (min-width: 820px) { .footer__grid { grid-template-columns: 1.3fr 1fr 1.2fr; gap: 48px; } }
.footer__word { display: block; width: 168px; margin-bottom: 14px; }
.footer__tag { font: 400 1.6rem/1 var(--font-display); text-transform: uppercase; color: var(--mustard); margin-bottom: 12px; }
.footer__small { font-size: .95rem; max-width: 30em; color: #E9D5B5; }
.footer__h { font: 400 .8rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--mustard); margin-bottom: 16px; }
.footer__nav ul { list-style: none; display: grid; gap: 10px; }
.footer__nav a, .footer__mail a { color: var(--cream); font-weight: 700; }
.site-footer .snap::after { background: var(--mustard); }
.footer__mail { margin-top: 18px; font-size: .98rem; }
.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  margin-top: 40px; padding-top: 20px;
  border-top: 2px solid rgba(252, 235, 208, .14);
  font-size: .88rem; color: #E9D5B5;
}
.footer__legal p { margin: 0; }

/* ---------------------------------------------------------------- buttons
   A flat brick pill sitting on a flat darker "edge". The face and the edge are two pseudo-elements, so
   hover and press only ever move transforms: the element lifts while ::before counter-moves to keep
   the edge pinned to the page (the shadow "snaps out"); on press the face slams onto the edge. */
.btn, .pill {
  --face: var(--brick); --edge: var(--brick-dark); --on: var(--cream);
  --ex: 5px; --ey: 6px;
  position: relative; isolation: isolate;
  display: inline-grid; place-items: center;
  min-height: 52px; padding: .85em 1.55em .8em;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--on);
  font: 400 1.02rem/1.15 var(--font-label); letter-spacing: .02em; text-align: center; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn::before, .btn::after, .pill::before, .pill::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
}
.btn::before, .pill::before { z-index: -2; background: var(--edge); transform: translate(var(--ex), var(--ey)); }
.btn::after, .pill::after { z-index: -1; background: var(--face) var(--grain) 0 0 / 256px 256px; }
.btn--cream { --face: var(--cream); --edge: var(--ink); --on: var(--brick-dark); }
.btn--big { min-height: 60px; padding: 1em 1.9em .95em; font-size: 1.12rem; }
.btn:hover, .btn:focus-visible, .pill:hover, .pill:focus-visible { transform: translate(-2px, -4px); }
.btn:hover::before, .btn:focus-visible::before, .pill:hover::before, .pill:focus-visible::before {
  transform: translate(calc(var(--ex) + 2px), calc(var(--ey) + 4px));
}
.btn:active, .pill:active { transform: translate(var(--ex), var(--ey)) scale(1.02, .96); }
.btn:active::before, .pill:active::before { transform: translate(0, 0); }
.btn:focus-visible, .pill:focus-visible { outline: 3px dashed var(--ink); outline-offset: 6px; border-radius: 999px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px 18px; align-items: center; }

/* busy state: both labels share one grid cell, so swapping them never changes the button's size */
.btn__label, .btn__busy { grid-area: 1 / 1; }
.btn__busy { opacity: 0; }
.btn.is-busy { cursor: progress; }
.btn.is-busy .btn__label { opacity: 0; }
.btn.is-busy .btn__busy { opacity: 1; }
.dots span { display: inline-block; }

/* channel pills */
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 14px; }
.pill { --face: var(--cream); --edge: var(--ink); --on: var(--ink); --ex: 3px; --ey: 4px; min-height: 44px; padding: .65em 1.1em .6em; font-size: .9rem; }
.pills--dark .pill { --face: var(--mustard); --edge: var(--brick-dark); --on: var(--ink); }
.site-footer .pill:focus-visible { outline-color: var(--mustard); }

/* ---------------------------------------------------------------- paper cards
   Same trick as buttons: ::after is the cream paper face (with grain), ::before the flat offset shadow. */
.card {
  --sx: 8px; --sy: 9px; --shade: var(--mustard-shadow); --sheet: var(--cream);
  position: relative; isolation: isolate;
  padding: clamp(22px, 4vw, 34px);
  border-radius: 22px;
  rotate: var(--tilt, 0deg);
}
.card::before, .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card::before { z-index: -2; background: var(--shade); transform: translate(var(--sx), var(--sy)); }
.card::after { z-index: -1; background: var(--sheet) var(--grain) 0 0 / 256px 256px; }
.tilt-l { --tilt: -1.4deg; }
.tilt-r { --tilt: 1.1deg; }
.tilt-s { --tilt: -.5deg; }
.card--lift:hover, .card--lift:focus-within { transform: translate(-3px, -6px); }
.card--lift:hover::before, .card--lift:focus-within::before { transform: translate(calc(var(--sx) + 3px), calc(var(--sy) + 6px)); }

/* ---------------------------------------------------------------- Yoink (the medallion) */
.yk { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; line-height: 0; }
.yk__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.yk::after {   /* the print grain sits on the paper, not on the cel: it stays put while Yoink moves */
  content: ""; position: absolute; left: 4%; top: 4%; width: 92%; height: 92%; border-radius: 50%;
  background: var(--grain) 0 0 / 180px 180px; pointer-events: none;
}
.yk__body { transform-origin: 600px 1100px; }
.yk__lines { transform-origin: 500px 560px; opacity: 0; }
.yk__puff { transform-origin: 130px 580px; opacity: 0; }
.yk__lid { opacity: 0; }
.yk.is-blink .yk__eye { opacity: 0; }
.yk.is-blink .yk__lid { opacity: 1; }
.yk.is-winking .yk__eye--r { opacity: 0; }
.yk.is-winking .yk__lid--r { opacity: 1; }
[data-yoink="full"] { cursor: pointer; }
.brand [data-yoink="full"] { cursor: inherit; }

/* ---------------------------------------------------------------- boiling decorations */
.decos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.deco { position: absolute; display: block; width: 120px; height: auto; aspect-ratio: 1 / 1; max-width: none; overflow: visible; pointer-events: none; fill: currentColor; }
.deco .pose + .pose, .boil .pose + .pose { opacity: 0; }
.deco--sun { color: var(--brick-dark); }
.deco--star { color: var(--ochre); }
.deco--disc { color: var(--mustard-deep); }
.deco--chevron { color: var(--brick-dark); }
.deco--boomerang { color: var(--brick); }
.deco--twinkle { color: var(--cream); }
.deco--spatter { color: var(--brick-dark); }

/* ---------------------------------------------------------------- home: hero */
.hero { position: relative; padding: clamp(18px, 4vw, 48px) 0 clamp(48px, 6vw, 80px); }
.hero__grid { display: grid; gap: 22px; justify-items: center; text-align: center; }
.hero__medal { position: relative; width: min(66vw, 290px); margin-top: 10px; }
.hero__burst { left: -22%; top: -22%; width: 144%; color: var(--ochre); }
.hero__burst--small { left: -18%; top: -18%; width: 136%; }
.hero__h1 { display: grid; justify-items: center; gap: 14px; margin: 0; }
.hero__wordwrap { position: relative; display: inline-block; width: min(84vw, 470px); }
.hero__word { display: block; width: 100%; }
.tag-now {
  position: absolute; right: -2%; top: -8%;
  padding: .32em .6em .28em; border-radius: 4px;
  background: var(--brick); color: var(--cream);
  font: 400 clamp(.85rem, .7rem + .6vw, 1.15rem)/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  rotate: -5deg;
}
.hero__tagline {
  display: block;
  font: 400 clamp(2.15rem, 1.2rem + 4.6vw, 4.1rem)/.98 var(--font-display);
  text-transform: uppercase; letter-spacing: .01em;
  text-shadow: 3px 3px 0 var(--cream);
}
.hero__lede { margin: 6px auto 4px; }
.hero__copy .btn-row { justify-content: center; }
.hero__channels { margin-top: 26px; display: grid; gap: 10px; justify-items: center; }
.hero__channels-label { margin: 0; font: 400 .8rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; }
.hero__channels .pills { justify-content: center; }
.hero .btn-row .btn { width: 100%; }
@media (min-width: 520px) { .hero .btn-row .btn { width: auto; } }
@media (min-width: 880px) {
  .hero__grid { grid-template-columns: minmax(300px, 5fr) 7fr; align-items: center; gap: 64px; text-align: left; justify-items: start; }
  .hero__medal { width: 100%; max-width: 420px; justify-self: center; }
  .hero__h1 { justify-items: start; }
  .hero__lede { margin-left: 0; }
  .hero__copy .btn-row, .hero__channels .pills { justify-content: flex-start; }
  .hero__channels { justify-items: start; }
}

/* hero decorations (mobile first: tucked behind Yoink and into the corners, never over text) */
.hd--sun1 { left: -64px; top: 112px; width: 150px; }
.hd--star1 { right: -84px; top: 56px; width: 190px; }
.hd--disc1 { left: -110px; bottom: 4%; width: 200px; }
.hd--sun2 { right: -54px; bottom: -40px; width: 130px; }
.hd--chev { left: 4%; bottom: -10px; width: 64px; rotate: -12deg; }
.hd--spat1 { right: 10%; top: 330px; width: 84px; }
.hd--tw1 { left: 9%; top: 96px; width: 30px; }
.hd--disc2 { display: none; }
@media (min-width: 880px) {
  .hd--sun1 { left: -50px; top: auto; bottom: -24px; width: 230px; }
  .hd--star1 { right: -150px; top: 80px; width: 340px; }
  .hd--disc1 { left: -150px; bottom: auto; top: 110px; width: 260px; }
  .hd--sun2 { right: -70px; bottom: -36px; width: 200px; }
  .hd--chev { left: 36%; bottom: 12%; width: 92px; }
  .hd--spat1 { right: 2%; top: 16%; width: 120px; }
  .hd--tw1 { left: 40%; top: 14%; width: 44px; }
  .hd--disc2 { display: block; right: -190px; top: 46%; width: 260px; }
}

/* ---------------------------------------------------------------- home: sections */
.section { position: relative; padding: clamp(56px, 8vw, 104px) 0; }
.section__head { margin-bottom: clamp(30px, 5vw, 52px); max-width: 760px; }

.steps { list-style: none; display: grid; gap: 34px; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 30px; } }
.step { height: 100%; padding-top: 44px; }
.step__num {
  position: absolute; left: 22px; top: -26px;
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: var(--brick); color: var(--cream);
  font: 400 2rem/1 var(--font-display);
  rotate: -8deg;
}
.step__title { font: 400 1.3rem/1.2 var(--font-label); margin-bottom: 10px; }
.step p { margin: 0; }
.hw--sun { right: -64px; top: -34px; width: 124px; }
@media (min-width: 760px) { .hw--sun { right: -70px; top: 40%; width: 170px; } }
.hw--spat { left: -28px; bottom: -36px; width: 110px; }

.streamers { padding-top: clamp(30px, 5vw, 60px); }
.poster { --tilt: -.6deg; --sheet: var(--cream); padding: clamp(26px, 5vw, 56px); }
.poster__head { max-width: 760px; margin-bottom: clamp(26px, 4vw, 40px); }
.poster__head .lede { margin-top: 16px; }
.promises { list-style: none; display: grid; gap: 26px 40px; }
@media (min-width: 720px) { .promises { grid-template-columns: 1fr 1fr; } }
.promise { position: relative; padding-left: 58px; }
.promise__mark { left: 0; top: -4px; width: 42px; color: var(--brick); }
.promise__title { font: 400 1.25rem/1.2 var(--font-label); margin-bottom: 6px; }
.promise p { margin: 0; }
.poster__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: clamp(30px, 4vw, 44px); }
.poster__aside { margin: 0; }
.st--star { left: -90px; top: -40px; width: 220px; }
.st--chev { right: 4%; bottom: -10px; width: 80px; rotate: 10deg; }
.st--disc { right: -110px; top: 18%; width: 240px; }

.band {
  position: relative;
  margin-top: clamp(48px, 7vw, 88px);
  padding: clamp(70px, 9vw, 120px) 0;
  background: var(--brick) var(--grain) 0 0 / 256px 256px;
  color: var(--cream);
  clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
}
.band :focus-visible { outline-color: var(--cream); }
.band .btn:focus-visible { outline-color: var(--cream); }
.band__inner { display: grid; gap: 28px; align-items: center; }
.band .lede { color: var(--cream); }
@media (min-width: 860px) { .band__inner { grid-template-columns: 1fr auto; gap: 56px; } }
.bd--tw1 { right: 26%; top: 15%; width: 40px; }
.bd--tw2 { right: 8%; bottom: 16%; width: 28px; }
.bd--sun { right: -50px; top: -10px; width: 180px; color: #E06A4F; }

/* ---------------------------------------------------------------- inner pages */
.page-hero { position: relative; padding: clamp(22px, 5vw, 60px) 0 clamp(26px, 4vw, 44px); }
.page-hero--tight { padding-bottom: clamp(20px, 3vw, 32px); }
.page-hero__inner { display: grid; gap: 24px; align-items: center; }
.page-hero__text { max-width: 760px; }
.page-hero__text .lede { margin-top: 18px; }
.page-hero__yk { position: relative; width: 210px; justify-self: center; display: none; }
@media (min-width: 760px) {
  .page-hero__inner { grid-template-columns: 1fr auto; gap: 48px; }
  .page-hero__yk { display: block; width: clamp(200px, 22vw, 260px); }
}
.ph--star { right: -100px; top: 0; width: 230px; }
.ph--sun { right: -50px; top: 16px; width: 140px; }
.ph--spat { left: -34px; bottom: -46px; width: 90px; }
.ph--boom { right: 32%; bottom: -6%; width: 80px; rotate: -16deg; }
.ph--chev { right: 12%; bottom: 0; width: 70px; rotate: 8deg; }
.ph--tw { right: 22%; top: 30%; width: 36px; }
@media (max-width: 759px) { .ph--spat, .ph--boom, .ph--tw { display: none; } .ph--sun { right: -70px; top: -10px; width: 120px; } .ph--star { right: -120px; top: -30px; width: 200px; } }

.split { display: grid; gap: 40px; align-items: start; padding-bottom: 10px; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 52px; } }
.split__aside { display: grid; gap: 30px; }
.form-card { padding: clamp(24px, 4.5vw, 44px); }
.note-card { --sheet: var(--paper); padding: clamp(20px, 3.5vw, 28px); }
.note-card__title { font: 400 1.12rem/1.25 var(--font-label); margin-bottom: 10px; }
.note-card p:last-child { margin-bottom: 0; }

.ticks { list-style: none; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before {
  content: ""; position: absolute; left: 3px; top: .55em; width: 10px; height: 10px;
  background: var(--brick); rotate: 45deg; border-radius: 2px;
}
.mini-steps { list-style: none; counter-reset: mini; display: grid; gap: 14px; margin: 20px 0 22px; }
.mini-steps li { counter-increment: mini; position: relative; padding-left: 50px; }
.mini-steps li::before {
  content: counter(mini); position: absolute; left: 0; top: -2px;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--brick); color: var(--cream); font: 400 1.2rem/1 var(--font-display);
}

/* consent: who you are */
.page-hero__inner--who { grid-template-columns: auto 1fr; gap: 18px 26px; }
@media (max-width: 559px) { .page-hero__inner--who { grid-template-columns: 1fr; } }
.who__ring {
  position: relative; display: grid; place-items: center;
  width: clamp(92px, 16vw, 128px); aspect-ratio: 1; border-radius: 50%;
  background: var(--brick);
}
.who__ring::before {  /* flat offset shadow disc */
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--mustard-shadow);
  transform: translate(6px, 7px); z-index: -1;
}
.who { position: relative; isolation: isolate; }
.who__initial, .who__img {
  grid-area: 1 / 1; width: 84%; height: 84%; border-radius: 50%;
}
.who__initial { display: grid; place-items: center; background: var(--cream); color: var(--brick); font: 400 2.6rem/1 var(--font-display); }
.who__img { object-fit: cover; background: var(--cream); }
.who__title { font-size: clamp(2.3rem, 1.2rem + 5vw, 4.8rem); }
.who__login { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- forms */
.field { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.field__label { display: block; padding: 0; margin-bottom: 8px; font: 400 1.02rem/1.3 var(--font-label); color: var(--ink); }
.field__opt { font: 700 .9rem/1 var(--font-body); color: var(--ink-soft); }
.field__hint { margin: -2px 0 12px; font-size: .94rem; color: var(--ink-soft); }
.input {
  display: block; width: 100%;
  padding: 14px 16px; margin: 0;
  border: 0; border-radius: 14px;
  background: var(--paper);
  box-shadow: 4px 5px 0 var(--ink);
  color: var(--ink);
  font: 400 1.0625rem/1.4 var(--font-body);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: #8C7A66; opacity: 1; }
.input--area { min-height: 112px; resize: vertical; }
.input:hover { box-shadow: 5px 6px 0 var(--ink); }
.input:focus { outline: 3px solid var(--brick); outline-offset: 4px; transform: translate(-2px, -3px); box-shadow: 7px 9px 0 var(--ink); }
.has-error .input { background: #FFF0E8; box-shadow: 4px 5px 0 var(--brick); }
.has-error .input:focus { box-shadow: 7px 9px 0 var(--brick); }
.field__error {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 12px 0 0; color: var(--brick-dark); font-weight: 700; font-size: .96rem; line-height: 1.4;
}
.err-icon { flex: none; width: 22px; height: 22px; color: var(--brick); fill: currentColor; margin-top: -1px; overflow: visible; }

/* consent checkbox: a flat square that gets stamped */
.check { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; cursor: pointer; }
.check input {
  -webkit-appearance: none; appearance: none;
  display: grid; place-content: center;
  width: 32px; height: 32px; margin: 1px 0 0;
  border-radius: 9px; background: var(--paper); box-shadow: 3px 4px 0 var(--ink);
  cursor: pointer;
}
.check input::before {
  content: ""; width: 16px; height: 9px;
  border-left: 4px solid var(--cream); border-bottom: 4px solid var(--cream);
  transform: translateY(-2px) rotate(-45deg) scale(0);
}
.check input:checked { background: var(--brick); box-shadow: 3px 4px 0 var(--brick-dark); }
.check input:checked::before { transform: translateY(-2px) rotate(-45deg) scale(1); }
.check input:focus-visible { outline: 3px dashed var(--ink); outline-offset: 5px; }
.check__text { font: 400 1.05rem/1.45 var(--font-label); }
.field--check.has-error .check input { box-shadow: 3px 4px 0 var(--brick); background: #FFF0E8; }

/* monetize: two big flat choices */
.choices { display: grid; gap: 14px; }
@media (min-width: 560px) { .choices { grid-template-columns: 1fr 1fr; } }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.choice__face {
  display: flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 14px 18px; border-radius: 16px;
  background: var(--paper); box-shadow: 4px 5px 0 var(--ink);
  font: 400 1rem/1.25 var(--font-label);
}
.choice__dot { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #EAD2A8; }
.choice__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cream); transform: scale(0); }
.choice:hover .choice__face { transform: translate(-1px, -2px); box-shadow: 5px 7px 0 var(--ink); }
.choice input:checked + .choice__face { background: var(--brick); color: var(--cream); box-shadow: 4px 5px 0 var(--brick-dark); }
.choice input:checked + .choice__face .choice__dot { background: var(--brick-dark); }
.choice input:checked + .choice__face .choice__dot::after { transform: scale(1); }
.choice input:focus-visible + .choice__face { outline: 3px dashed var(--ink); outline-offset: 5px; }
.field--choices.has-error .choice__face { box-shadow: 4px 5px 0 var(--brick); }

/* the form-level alert */
.form-alert {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 0 0 28px; padding: 18px 20px; border-radius: 16px;
  background: var(--brick) var(--grain) 0 0 / 256px 256px; color: var(--cream);
}
.form-alert:focus-visible { outline-color: var(--ink); }
.form-alert .err-icon { width: 30px; height: 30px; color: var(--cream); }
.form-alert .err-icon rect, .form-alert .err-icon circle { fill: var(--brick); }
.form-alert__title { margin: 0 0 6px; font: 400 1.05rem/1.3 var(--font-label); }
.form-alert__list { list-style: none; display: grid; gap: 4px; }
.form-alert__list a { color: var(--cream); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.form-alert__list a:focus-visible { outline-color: var(--cream); }

.form-actions { margin-top: 30px; }
.form-card .fine a { color: var(--ink); }

/* honeypot: off-screen, never display:none (bots skip hidden fields) */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- success scene */
.done { position: relative; padding: clamp(28px, 6vw, 72px) 0 clamp(24px, 4vw, 40px); }
.done__grid { display: grid; gap: 36px; justify-items: center; text-align: center; }
.done__text .btn-row { justify-content: center; }
.done__text .lede { margin-inline: auto; }
@media (min-width: 880px) {
  .done__grid { grid-template-columns: 5fr 6fr; align-items: center; justify-items: start; text-align: left; gap: 64px; }
  .done__text .btn-row { justify-content: flex-start; }
  .done__text .lede { margin-inline: 0; }
}
.scene { position: relative; width: min(66vw, 330px); aspect-ratio: 1 / 1; margin: 18px auto 10px; }
.scene__burst { left: -24%; top: -24%; width: 148%; color: var(--ochre); }
.scene__sun { right: -30%; top: -26%; width: 60%; }
.scene__yk { position: absolute; inset: 0; }
.scene__prop { position: absolute; left: 46%; top: 57%; width: 47%; transform-origin: 8% 30%; rotate: -12deg; }
.scene__thing { display: block; width: 100%; height: auto; }
.scene__lines { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; overflow: visible; }
.scene__tw { color: var(--cream); }
.scene__tw--1 { left: -6%; top: 6%; width: 13%; }
.scene__tw--2 { right: -4%; top: 34%; width: 9%; }
.scene__tw--3 { left: 8%; bottom: -4%; width: 10%; }
.dn--sun1 { left: -50px; top: 30px; width: 170px; }
.dn--spat { right: 6%; top: 8%; width: 100px; }
.dn--chev { right: 10%; bottom: 0; width: 70px; rotate: 14deg; }
.dn--boom { right: 12%; bottom: 2%; width: 80px; rotate: -10deg; }

/* ---------------------------------------------------------------- error page */
.oops { position: relative; padding: clamp(28px, 6vw, 72px) 0 clamp(24px, 4vw, 40px); }
.oops__grid { display: grid; gap: 30px; justify-items: center; text-align: center; }
.oops__grid .btn-row { justify-content: center; }
.oops__grid .lede { margin-inline: auto; }
@media (min-width: 880px) {
  .oops__grid { grid-template-columns: 5fr 6fr; align-items: center; justify-items: start; text-align: left; gap: 64px; }
  .oops__grid .btn-row { justify-content: flex-start; }
  .oops__grid .lede { margin-inline: 0; }
}
.oops__art { position: relative; width: min(66vw, 320px); aspect-ratio: 1 / 1; margin: 20px auto 0; }
.oops__burst { left: -20%; top: -20%; width: 140%; color: var(--ochre); }
.oops__yk { position: absolute; inset: 9%; }
.oops__code {
  position: absolute; right: -6%; top: -8%; z-index: 2; margin: 0;
  padding: .12em .32em .08em; border-radius: 10px;
  background: var(--brick); color: var(--cream);
  font: 400 clamp(2.4rem, 1.8rem + 3vw, 3.6rem)/1 var(--font-display);
  rotate: 8deg;
}

/* ---------------------------------------------------------------- privacy prose */
.prose-wrap .prose { max-width: 900px; }
.prose { --tilt: -.3deg; padding: clamp(26px, 5vw, 52px); }
.prose h2 { font: 400 clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem)/1 var(--font-display); text-transform: uppercase; margin: 34px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { list-style: none; display: grid; gap: 12px; margin-bottom: 1em; }
.prose li { position: relative; padding-left: 24px; }
.prose li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 9px; height: 9px; background: var(--brick); rotate: 45deg; border-radius: 2px; }
.prose p { max-width: 62ch; }

/* ---------------------------------------------------------------- shared deco spots */
.ft--sun { right: -60px; top: -60px; width: 220px; color: #4A3423; }
.ft--tw { left: max(250px, calc(var(--gutter) + 210px)); top: 64px; width: 30px; color: var(--mustard); }

/* ---------------------------------------------------------------- iris fallback + click pop (built by site.js) */
.iris { position: fixed; inset: 0; z-index: 1000; background: var(--brick); pointer-events: none; }
.click-pop { position: fixed; z-index: 900; width: 58px; height: 58px; margin: -29px 0 0 -29px; color: var(--brick-dark); fill: currentColor; pointer-events: none; overflow: visible; }

/* =============================================================================================
   MOTION
   ============================================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* ---- boil: three re-traced cels swapped on a stepped loop (2 frames each) */
  .deco .pose, .boil .pose { animation: boil calc(var(--f) * 6) steps(1, end) infinite; }
  .deco .pose:nth-child(2), .boil .pose:nth-child(2) { animation-delay: calc(var(--f) * -4); }
  .deco .pose:nth-child(3), .boil .pose:nth-child(3) { animation-delay: calc(var(--f) * -2); }
  .deco--disc .pose, .deco--spatter .pose { animation-duration: calc(var(--f) * 9); }
  .deco--disc .pose:nth-child(2), .deco--spatter .pose:nth-child(2) { animation-delay: calc(var(--f) * -6); }
  .deco--disc .pose:nth-child(3), .deco--spatter .pose:nth-child(3) { animation-delay: calc(var(--f) * -3); }

  /* ---- entrances: cels popping onto the animation stand, staggered */
  .cel { animation: cel-pop calc(var(--f) * 5) steps(1, end) both; animation-delay: calc(var(--f) * var(--d, 0) + 60ms); }
  .cel--d1 { --d: 1; } .cel--d2 { --d: 2; } .cel--d3 { --d: 3; } .cel--d4 { --d: 4; }
  .cel--d5 { --d: 5; } .cel--d6 { --d: 6; } .cel--d7 { --d: 7; } .cel--d8 { --d: 8; }

  /* ---- scroll reveals: flat paper layers sliding in (site.js marks below-the-fold layers) */
  .is-pending { opacity: 0; }
  .is-revealed { animation: layer-in calc(var(--f) * 4) steps(1, end) both; }
  [data-reveal="stagger"].is-revealed { animation: none; }
  .is-revealed [data-reveal-stagger] > *, .is-revealed[data-reveal-stagger] > * {
    animation: cel-pop calc(var(--f) * 5) steps(1, end) both;
    animation-delay: calc(var(--f) * (2 + var(--i, 0) * 2));
  }

  /* ---- the hero starburst turns like a title card, one click at a time */
  .hero__burst, .scene__burst, .oops__burst { animation: spin 36s steps(144) infinite; }
  .tag-now { animation: tag-boil calc(var(--f) * 6) steps(1, end) infinite; }

  /* ---- buttons and pills: anticipation squash, spring up as the edge snaps out, clean hold */
  .btn:hover, .btn:focus-visible, .pill:hover, .pill:focus-visible { animation: lift 240ms cubic-bezier(.25, .9, .3, 1) both; }
  .btn:hover::before, .btn:focus-visible::before, .pill:hover::before, .pill:focus-visible::before {
    animation: lift-edge 240ms cubic-bezier(.25, .9, .3, 1) both;
  }
  .btn:active, .pill:active { animation: stamp 90ms cubic-bezier(.5, 0, .6, 1) both; }
  .btn:active::before, .pill:active::before { animation: stamp-edge 90ms cubic-bezier(.5, 0, .6, 1) both; }
  .btn.is-busy .dots span { animation: dot calc(var(--f) * 6) steps(1, end) infinite; }
  .btn.is-busy .dots span:nth-child(2) { animation-delay: calc(var(--f) * 2); }
  .btn.is-busy .dots span:nth-child(3) { animation-delay: calc(var(--f) * 4); }

  /* ---- cards: anticipation, spring, wobble-tilt, hold (on twos) */
  .card--lift:hover, .card--lift:focus-within { animation: wobble calc(var(--f) * 5) steps(1, end) both; }
  .card--lift:hover::before, .card--lift:focus-within::before { animation: wobble-edge calc(var(--f) * 5) steps(1, end) both; }

  /* ---- links: the bar yoinks across in one snap */
  .snap:hover::after, .snap:focus-visible::after { animation: snap calc(var(--f1) * 3) steps(1, end) both; }

  /* ---- form feedback */
  .input { transition: transform 140ms cubic-bezier(.3, 1.7, .5, 1); }
  .choice__face { transition: transform 120ms cubic-bezier(.3, 1.7, .5, 1); }
  .has-error { animation: shake calc(var(--f1) * 8) steps(1, end) 1 both; animation-delay: 240ms; }
  .form-alert { animation: cel-pop calc(var(--f) * 5) steps(1, end) both; }
  .check input:checked::before { animation: tick calc(var(--f) * 3) steps(1, end) both; }
  .check input:checked, .choice input:checked + .choice__face { animation: stamp-in calc(var(--f) * 3) steps(1, end) both; }
  .choice input:checked + .choice__face .choice__dot::after { animation: tick-dot calc(var(--f) * 3) steps(1, end) both; }

  /* ---- Yoink's yoink: anticipation, smear, gone in a puff, pops back up with a wink */
  .yk.is-yoinking .yk__body { animation: yk-zip calc(var(--f) * 10) steps(1, end) both; }
  .yk.is-yoinking .yk__lines { animation: yk-lines calc(var(--f) * 10) steps(1, end) both; }
  .yk.is-yoinking .yk__puff { animation: yk-puff calc(var(--f) * 10) steps(1, end) both; }
  .yk.is-yoinking .yk__eye--r { animation: wink-eye calc(var(--f) * 16) steps(1, end) both; }
  .yk.is-yoinking .yk__lid--r { animation: wink-lid calc(var(--f) * 16) steps(1, end) both; }

  /* ---- the error page: Yoink searches left and right */
  .yk--search .yk__gaze { animation: search calc(var(--f) * 36) steps(1, end) infinite; }

  /* ---- success scene: burst, Yoink, the catch (envelope or clip zips in), sparkles, a wink */
  .scene__burst { animation: burst-pop calc(var(--f) * 6) steps(1, end) both, spin 36s steps(144) calc(var(--f) * 6) infinite; }
  .scene__sun { animation: cel-pop calc(var(--f) * 5) steps(1, end) calc(var(--f) * 3) both; }
  .scene__yk { animation: cel-pop calc(var(--f) * 5) steps(1, end) var(--f) both, catch calc(var(--f) * 4) steps(1, end) calc(var(--f) * 9); }
  .scene__prop { animation: prop-zip calc(var(--f) * 12) steps(1, end) both; }
  .scene__lines { animation: prop-lines calc(var(--f) * 12) steps(1, end) both; }
  .scene__tw { animation: cel-pop calc(var(--f) * 5) steps(1, end) both; }
  .scene__tw--1 { animation-delay: calc(var(--f) * 10); }
  .scene__tw--2 { animation-delay: calc(var(--f) * 12); }
  .scene__tw--3 { animation-delay: calc(var(--f) * 14); }
  .scene:not(.scene--calm) .yk__eye--r { animation: wink-eye calc(var(--f) * 22) steps(1, end) both; }
  .scene:not(.scene--calm) .yk__lid--r { animation: wink-lid calc(var(--f) * 22) steps(1, end) both; }

  /* ---- page to page: a brick-red iris closes to a point, then opens on the next page (430 ms) */
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { background: #C03A28; }
  ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
  ::view-transition-old(root) { animation: iris-close 200ms cubic-bezier(.55, 0, .85, .45) both; }
  ::view-transition-new(root) { animation: iris-open 230ms cubic-bezier(.15, .65, .35, 1) 200ms both; }
}

/* ---- reduced motion: no boil, no iris, no parallax, no pops. Instant swaps and light fades only. */
@media (prefers-reduced-motion: reduce) {
  .cel, .is-revealed, .form-alert { animation: fade 180ms ease-out both; }
  .is-pending { opacity: 1; }
  .yk__gaze { transform: none !important; }
}

/* =============================================================================================
   KEYFRAMES  (steps(1, end) holds each pose until the next keyframe: pose-to-pose, on twos)
   ============================================================================================= */
@keyframes boil { 0% { opacity: 1; } 33.333% { opacity: 0; } 100% { opacity: 0; } }

@keyframes cel-pop {
  0%   { opacity: 0; transform: translateY(26px) scale(.72, 1.22); }
  20%  { opacity: 1; transform: translateY(-12px) scale(.92, 1.12); }
  40%  { opacity: 1; transform: translateY(5px) scale(1.1, .9); }
  60%  { opacity: 1; transform: translateY(-3px) scale(.98, 1.03); }
  80%  { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; }
}
@keyframes layer-in {
  0%   { opacity: 0; transform: translateY(80px) rotate(1.6deg); }
  25%  { opacity: 1; transform: translateY(26px) rotate(.6deg); }
  50%  { opacity: 1; transform: translateY(-9px) rotate(-.4deg); }
  75%  { opacity: 1; transform: translateY(3px) rotate(0deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes tag-boil { 0% { transform: none; } 33.333% { transform: rotate(-1.4deg) translateY(-1px); } 66.666% { transform: rotate(.8deg); } 100% { transform: none; } }

@keyframes lift {
  0%   { transform: translate(0, 0) scale(1, 1); }
  30%  { transform: translate(0, 2px) scale(1.05, .9); }
  65%  { transform: translate(-2px, -7px) scale(.97, 1.05); }
  100% { transform: translate(-2px, -4px) scale(1, 1); }
}
@keyframes lift-edge {
  0%   { transform: translate(var(--ex), var(--ey)); }
  30%  { transform: translate(var(--ex), calc(var(--ey) - 2px)); }
  65%  { transform: translate(calc(var(--ex) + 2px), calc(var(--ey) + 7px)); }
  100% { transform: translate(calc(var(--ex) + 2px), calc(var(--ey) + 4px)); }
}
@keyframes stamp { from { transform: translate(-2px, -4px); } to { transform: translate(var(--ex), var(--ey)) scale(1.03, .95); } }
@keyframes stamp-edge { from { transform: translate(calc(var(--ex) + 2px), calc(var(--ey) + 4px)); } to { transform: translate(0, 0); } }
@keyframes dot { 0% { opacity: 0; } 33.333% { opacity: 1; } 100% { opacity: 1; } }

@keyframes wobble {
  0%   { transform: translate(0, 3px) scale(1.012, .985); }
  20%  { transform: translate(-3px, -9px) rotate(-1.3deg); }
  40%  { transform: translate(-3px, -6px) rotate(.9deg); }
  60%  { transform: translate(-3px, -6px) rotate(-.3deg); }
  80%  { transform: translate(-3px, -6px); }
  100% { transform: translate(-3px, -6px); }
}
@keyframes wobble-edge {
  0%   { transform: translate(var(--sx), calc(var(--sy) - 3px)); }
  20%  { transform: translate(calc(var(--sx) + 3px), calc(var(--sy) + 9px)); }
  40%  { transform: translate(calc(var(--sx) + 3px), calc(var(--sy) + 6px)); }
  100% { transform: translate(calc(var(--sx) + 3px), calc(var(--sy) + 6px)); }
}
@keyframes snap {
  0%   { transform: translateX(-12%) scaleX(.3) skewX(-35deg); }
  33%  { transform: translateX(3%) scaleX(1.12) skewX(-14deg); }
  66%  { transform: scaleX(.97); }
  100% { transform: scaleX(1); }
}
@keyframes shake {
  0%   { transform: translateX(0); }
  12%  { transform: translateX(-9px); }
  25%  { transform: translateX(8px); }
  37%  { transform: translateX(-6px); }
  50%  { transform: translateX(5px); }
  62%  { transform: translateX(-3px); }
  75%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
@keyframes tick { 0% { transform: translateY(-2px) rotate(-45deg) scale(1.5); } 33% { transform: translateY(-2px) rotate(-45deg) scale(.85); } 66%, 100% { transform: translateY(-2px) rotate(-45deg) scale(1); } }
@keyframes tick-dot { 0% { transform: scale(1.6); } 33% { transform: scale(.8); } 66%, 100% { transform: scale(1); } }
@keyframes stamp-in { 0% { transform: scale(1.08, .9); } 33% { transform: scale(.97, 1.04); } 66%, 100% { transform: none; } }

@keyframes yk-zip {
  0%   { transform: translate(28px, 14px) scale(1.04, .94); }
  10%  { transform: translate(62px, 24px) scale(1.07, .9) rotate(3deg); }
  20%  { transform: translate(-430px, -12px) scale(1.95, .64) skewX(26deg); }
  30%  { transform: translate(-1600px, 0); }
  60%  { transform: translate(0, 300px) scale(.84, 1.24); }
  70%  { transform: translate(0, -48px) scale(1.1, .9); }
  80%  { transform: translate(0, 12px) scale(.97, 1.03); }
  90%  { transform: none; }
  100% { transform: none; }
}
@keyframes yk-lines {
  0%   { opacity: 0; transform: none; }
  20%  { opacity: 1; transform: none; }
  30%  { opacity: 1; transform: scaleX(.74); }
  40%  { opacity: 1; transform: scaleX(.46); }
  50%  { opacity: 1; transform: scaleX(.2); }
  60%  { opacity: 0; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes yk-puff {
  0%   { opacity: 0; transform: scale(.5); }
  30%  { opacity: 1; transform: scale(.62); }
  40%  { opacity: 1; transform: scale(1); }
  50%  { opacity: 1; transform: scale(1.16); }
  60%  { opacity: 0; transform: scale(1.2); }
  100% { opacity: 0; }
}
@keyframes wink-eye { 0% { opacity: 1; } 45% { opacity: 0; } 92% { opacity: 1; } 100% { opacity: 1; } }
@keyframes wink-lid { 0% { opacity: 0; } 45% { opacity: 1; } 92% { opacity: 0; } 100% { opacity: 0; } }
@keyframes search {
  0%   { transform: none; }
  16%  { transform: translate(-16px, 2px); }
  33%  { transform: translate(-16px, 2px); }
  44%  { transform: none; }
  50%  { transform: translate(16px, 2px); }
  72%  { transform: translate(16px, -6px); }
  83%  { transform: none; }
  100% { transform: none; }
}

@keyframes burst-pop {
  0%   { opacity: 0; transform: scale(.2) rotate(-30deg); }
  17%  { opacity: 1; transform: scale(.7) rotate(-12deg); }
  33%  { opacity: 1; transform: scale(1.22) rotate(6deg); }
  50%  { opacity: 1; transform: scale(.93) rotate(-2deg); }
  67%  { opacity: 1; transform: scale(1.04); }
  83%  { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; }
}
@keyframes catch {
  0%   { transform: translate(8px, 6px) scale(1.06, .93); }
  25%  { transform: translate(-4px, -6px) scale(.97, 1.04); }
  50%  { transform: translate(2px, 1px); }
  100% { transform: none; }
}
@keyframes prop-zip {
  0%      { opacity: 0; transform: translateX(220%); }
  58.333% { opacity: 1; transform: translateX(150%) scale(1.5, .7) skewX(-24deg); }
  66.666% { opacity: 1; transform: translateX(26%) scale(1.3, .82) skewX(-14deg); }
  75%     { opacity: 1; transform: translate(-8%, 2%) rotate(-7deg) scale(.94, 1.08); }
  83.333% { opacity: 1; transform: translate(3%, -1%) rotate(3deg); }
  91.666% { opacity: 1; transform: none; }
  100%    { opacity: 1; transform: none; }
}
@keyframes prop-lines {
  0%      { opacity: 0; transform: none; }
  58.333% { opacity: 1; transform: translateX(40%); }
  66.666% { opacity: 1; transform: translateX(10%) scaleX(.9); }
  75%     { opacity: 1; transform: translateX(14%) scaleX(.5); }
  83.333% { opacity: 0; }
  100%    { opacity: 0; }
}

@keyframes iris-close { from { clip-path: circle(75% at 50% 50%); } to { clip-path: circle(0 at 50% 50%); } }
@keyframes iris-open { from { clip-path: circle(0 at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }

/* ---------------------------------------------------------------- print */
@media print {
  body { background: #fff; }
  .decos, .deco, .site-header nav, .iris, .click-pop, .scene__lines { display: none !important; }
  .is-pending { opacity: 1 !important; }
  .card::before { display: none; }
}