/* beeddy.com. One stylesheet for every page. The server's CSP forbids inline styles, so all
   styling lives here. Design source: the "Beeddy Website" canvas (home, brand v2). */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@property --shine-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  --paper: #F7F5F0;
  --ink: #1C1B18;
  --stone: #4F4B44;
  --muted: #6E6A62;
  --line: #E5E1D8;
  --honey: #E0A11B;
  --honey-text: #A66A00;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --text: "Figtree", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 48px);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: #000; }
img, svg { display: block; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }

.page { position: relative; overflow: clip; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #FBFAF7;
}
.skip:focus { top: 12px; color: #FBFAF7; }
:focus-visible { outline: 2px solid var(--honey-text); outline-offset: 3px; border-radius: 6px; }

/* Shared pieces */
.glass {
  background: rgba(255, 255, 255, .42);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 30px 80px -34px rgba(70, 45, 10, .38);
}
.accent { font-style: italic; font-weight: 500; color: var(--honey-text); }
.wordmark { font-family: var(--display); font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--honey); }
.pulse { animation: pulse 2.4s ease-in-out infinite; }
.spin { animation: spin 60s linear infinite; }

/* Ambient colour behind the glass */
.ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(30px); animation: drift 16s ease-in-out infinite alternate; }
.blob-honey { top: 560px; left: -140px; width: 560px; height: 560px; background: radial-gradient(closest-side, rgba(224, 161, 27, .42), rgba(224, 161, 27, 0)); }
.blob-aqua { top: 1880px; right: -180px; width: 640px; height: 640px; background: radial-gradient(closest-side, rgba(110, 185, 200, .32), rgba(110, 185, 200, 0)); animation-duration: 21s; }
.blob-green { top: 2620px; left: 8%; width: 560px; height: 560px; background: radial-gradient(closest-side, rgba(150, 190, 110, .3), rgba(150, 190, 110, 0)); animation-duration: 18s; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; max-width: 1120px; margin: 0 auto -84px; padding: 14px var(--gutter) 0; }
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 4px 24px; flex-wrap: wrap; padding: 6px 8px 6px 14px; border-radius: 22px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.brand-icon { width: 42px; height: 42px; filter: drop-shadow(0 6px 8px rgba(120, 80, 10, .22)); transition: transform .7s var(--ease-out); }
.brand:hover .brand-icon { transform: rotate(-10deg) scale(1.1); }
.brand .wordmark { font-size: 26px; }
.nav { display: flex; align-items: center; gap: 2px 6px; flex-wrap: wrap; font-size: 15px; }
.nav a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 14px; color: var(--stone); transition: background-color .25s, color .25s; }
.nav a:hover { color: var(--ink); background: rgba(255, 255, 255, .55); }
.nav a.nav-cta { padding: 0 16px; background: var(--ink); color: #FBFAF7; }
.nav a.nav-cta:hover { background: #000; color: #fff; }

/* Hero */
.hero { position: relative; z-index: 1; min-height: 860px; overflow: hidden; }
.stage { position: absolute; left: 50%; top: 0; width: 1440px; height: 860px; margin-left: -720px; pointer-events: none; }
.stage-front { z-index: 4; }
.hero-glow { position: absolute; left: 140px; top: 520px; width: 620px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(224, 161, 27, .5), rgba(224, 161, 27, 0)); filter: blur(20px); }
.eddy { position: absolute; left: 510px; top: -70px; width: 1000px; height: 1000px; border-radius: 50%; overflow: hidden; -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); }
.eddy-layer { position: absolute; inset: 0; }
.eddy-layer img { width: 100%; height: 100%; object-fit: cover; animation: spin 60s linear infinite; }
.eddy-mid { -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 62%); mask-image: radial-gradient(closest-side, #000 30%, transparent 62%); }
.eddy-mid img { animation-duration: 24s; }
.eddy-core { -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 34%); mask-image: radial-gradient(closest-side, #000 10%, transparent 34%); }
.eddy-core img { animation-duration: 9s; }
.eddy-light { position: absolute; left: 400px; top: 400px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); animation: pulse 3.6s ease-in-out infinite; }
.flow { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 28s linear infinite; -webkit-mask-image: radial-gradient(closest-side, transparent 7%, #000 22%, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, transparent 7%, #000 22%, #000 70%, transparent 100%); }
.flow-a { animation: flow-a 3.2s linear infinite; }
.flow-b { animation: flow-b 2.2s linear infinite; }

.orbits { position: absolute; left: 510px; top: -70px; width: 1000px; height: 1000px; }
.orbit { position: absolute; border-radius: 50%; border: 1px dashed rgba(28, 27, 24, .16); animation: spin 46s linear infinite; }
.orbit-outer { inset: 12%; }
.orbit-inner { inset: 28%; border-color: rgba(28, 27, 24, .14); animation-duration: 24s; }
.slot { position: absolute; }
.slot-top { left: 50%; top: 0; width: 96px; height: 96px; margin: -48px 0 0 -48px; }
.slot-bottom { left: 50%; top: 100%; width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.slot-side { left: 100%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.chip { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.orbit-outer .chip { animation: spin 46s linear infinite reverse; }
.chip img { border-radius: 13px; }
.chip .dot { width: 10px; height: 10px; }

.hero-content { position: relative; z-index: 3; padding-top: 190px; padding-bottom: 120px; }
.panel { position: relative; max-width: 640px; padding: clamp(28px, 4vw, 48px); border-radius: 32px; animation: pop 1.2s var(--ease-out) both; }
.panel::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--shine-angle), transparent 0deg, transparent 220deg, rgba(224, 161, 27, .95) 285deg, #fff 312deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: shine 5s linear infinite;
}
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 28px; padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .62); font-size: 13px; font-weight: 500; }
.hero-title { font-family: var(--display); font-weight: 560; font-size: clamp(42px, 4.8vw, 66px); line-height: 1.04; letter-spacing: -.02em; }
.hero-title .accent { font-weight: 480; }
.word { display: inline-block; animation: rise 1.1s var(--ease-out) both; }
.word:nth-of-type(1) { animation-delay: .15s; }
.word:nth-of-type(2) { animation-delay: .23s; }
.word:nth-of-type(3) { animation-delay: .31s; }
.word:nth-of-type(4) { animation-delay: .39s; }
.word:nth-of-type(5) { animation-delay: .55s; }
.word:nth-of-type(6) { animation-delay: .63s; }
.word:nth-of-type(7) { animation-delay: .71s; }
.word:nth-of-type(8) { animation-delay: .79s; }
.title-dot { display: inline-block; width: .15em; height: .15em; margin-left: .06em; border-radius: 50%; background: var(--honey); }
.hero-lede { margin-top: 24px; max-width: 30em; font-size: clamp(17px, 1.4vw, 19px); color: var(--stone); text-wrap: pretty; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; font-weight: 500; transition: transform .3s ease, box-shadow .3s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(28, 27, 24, .5); }
.btn-dark, .btn-dark:hover { background: var(--ink); color: #FBFAF7; }
.btn-light { padding: 0 22px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .8); }
.hero-fade { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(180deg, rgba(247, 245, 240, 0), var(--paper)); pointer-events: none; }

/* Bees and flight paths (inline SVG) */
.flight { overflow: visible; }
.trail { fill: none; stroke: var(--ink); stroke-linecap: round; }
.bee-shadow { filter: drop-shadow(0 20px 14px rgba(60, 40, 10, .22)); }
.bee-shadow-sm { filter: drop-shadow(0 12px 8px rgba(30, 60, 60, .25)); }
.buzz { animation: buzz .14s linear infinite; }
.flap, .flap-ghost { transform-box: fill-box; transform-origin: 50% 50%; animation: flap .07s ease-in-out infinite alternate; }
.flap-ghost { animation-direction: alternate-reverse; }
.still { display: none; }

/* What we make */
.work { position: relative; z-index: 1; padding: clamp(110px, 12vw, 170px) 0; }
.work-bg { position: absolute; inset: 0; overflow: hidden; }
.work-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: drift-zoom 26s ease-in-out infinite alternate; }
.work-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--paper) 0%, rgba(247, 245, 240, 0) 22%, rgba(247, 245, 240, 0) 78%, var(--paper) 100%); }
.work .wrap { position: relative; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 40px; }
.section-title { font-family: var(--display); font-size: clamp(38px, 4.6vw, 62px); font-weight: 560; line-height: 1; letter-spacing: -.02em; }
.section-title .accent { font-weight: 480; }
.section-head p { max-width: 24em; font-size: 17px; color: var(--stone); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 22px; min-height: 330px; padding: 30px; border-radius: 28px; }
a.card { transition: transform .6s var(--ease-out), box-shadow .6s; }
a.card:hover { transform: translateY(-10px) scale(1.015); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 50px 90px -30px rgba(70, 45, 10, .45); }
a.card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); transform: translateX(-130%); transition: transform 1s var(--ease-out); }
a.card:hover::after { transform: translateX(130%); }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-icon { border-radius: 18px; box-shadow: 0 16px 30px -12px rgba(70, 45, 10, .45); animation: float 5s ease-in-out infinite; }
.card-icon.later { animation-delay: -2.5s; box-shadow: 0 16px 30px -12px rgba(30, 40, 20, .5); }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .65); font-size: 13px; font-weight: 500; }
.ring { flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--honey-text); }
.card-body { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.card-name { font-family: var(--display); font-size: 38px; font-weight: 600; line-height: 1.05; letter-spacing: -.01em; }
.card-line { font-size: 17px; color: var(--stone); }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid rgba(28, 27, 24, .12); font-size: 14px; color: var(--stone); }
.domain { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); }
.arrow { transition: transform .3s ease; }
a.card:hover .arrow { transform: translate(3px, -3px); }
a.card:hover .domain span { text-decoration: underline; text-underline-offset: 4px; }
.card-next { border: 1.5px dashed rgba(28, 27, 24, .22); background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.card-next .card-name { color: var(--muted); }
.card-next .card-foot { border-top: 1px dashed rgba(28, 27, 24, .18); }
.next-icon { width: 76px; height: 76px; border-radius: 18px; border: 1.5px dashed rgba(28, 27, 24, .28); display: flex; align-items: center; justify-content: center; }
.next-icon .dot { width: 12px; height: 12px; }

/* Why beeddy */
.about { position: relative; z-index: 1; padding-top: clamp(110px, 12vw, 160px); }
.about-label { text-align: center; font-size: 15px; font-weight: 500; color: var(--stone); }
.waggle { width: min(600px, 100%); height: auto; margin: 16px auto 0; overflow: visible; }
.merge { display: flex; justify-content: center; margin-top: 4px; font-family: var(--display); font-size: clamp(64px, 12vw, 168px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.m-bee { display: inline-block; animation: m-bee 8s cubic-bezier(.7, 0, .2, 1) infinite; }
.m-eddy { position: relative; display: inline-block; animation: m-eddy 8s cubic-bezier(.7, 0, .2, 1) infinite; }
.m-gap { position: absolute; right: 100%; top: 0; }
.m-dupe { opacity: 0; animation: m-dupe 8s linear infinite; }
.m-plus { position: absolute; left: calc(50% - .75em); top: 52%; opacity: 0; transform: translate(-50%, -50%); color: #8A857C; animation: m-plus 8s ease infinite; }
.m-plus span { font-size: .42em; }
.m-e { animation: m-glow 8s ease infinite; }
.about-lede { max-width: 34em; margin: 8px auto 0; text-align: center; font-size: 17px; color: var(--stone); text-wrap: balance; }

.photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; margin-top: clamp(56px, 7vw, 88px); }
.photo { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: #E9E2D2; }
.photo-art { position: absolute; inset: 0; transition: transform 1.2s var(--ease-out); }
.photo:hover .photo-art { transform: scale(1.08); }
.photo-art img, .swirl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-honey img { object-position: 50% 30%; }
.photo-stream { background: #DCE6E2; }
.photo-stream img { object-position: 50% 100%; }
.photo-pool { background: #EDE3CC; }
.swirl { position: absolute; inset: 0; }
.swirl img { animation: spin 11s linear infinite; }
.swirl-stream { -webkit-mask-image: radial-gradient(ellipse 30% 24% at 50% 56%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 30% 24% at 50% 56%, #000 40%, transparent 100%); }
.swirl-stream img { transform-origin: 50% 56%; }
.swirl-pool { -webkit-mask-image: radial-gradient(ellipse 40% 32% at 49% 44%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 40% 32% at 49% 44%, #000 45%, transparent 100%); }
.swirl-pool img { transform-origin: 49% 44%; animation-duration: 18s; }
.swirl-pool-core { -webkit-mask-image: radial-gradient(ellipse 18% 14% at 49% 44%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 18% 14% at 49% 44%, #000 35%, transparent 100%); }
.swirl-pool-core img { transform-origin: 49% 44%; animation-duration: 7s; }
.swirl-lines { position: absolute; height: auto; -webkit-mask-image: radial-gradient(closest-side, transparent 8%, #000 25%, #000 64%, transparent 100%); mask-image: radial-gradient(closest-side, transparent 8%, #000 25%, #000 64%, transparent 100%); animation: spin 15s linear infinite; }
.swirl-lines-stream { left: 20%; top: 32%; width: 60%; }
.swirl-lines-pool { left: 11%; top: 13.6%; width: 76%; animation-duration: 16s; }
.photo-bee { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.caption { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border-radius: 20px; background: rgba(255, 255, 255, .68); transition: transform .6s var(--ease-out); }
.photo:hover .caption { transform: translateY(-6px); }
.caption dt { font-family: var(--display); font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.caption .ipa { font-size: 13px; color: var(--stone); }
.caption .def { margin-top: 6px; min-height: 4.5em; font-size: 15px; line-height: 1.5; color: #2A2824; }

.principles { display: flex; justify-content: center; align-items: center; gap: 12px 36px; flex-wrap: wrap; max-width: 860px; margin: clamp(56px, 7vw, 88px) auto 0; padding: 20px 28px; border-radius: 24px; font-size: 17px; font-weight: 500; }
.principles li { display: inline-flex; align-items: center; gap: 10px; }
.principles li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--honey); }

/* Footer */
.site-footer { position: relative; z-index: 1; padding: clamp(120px, 13vw, 180px) 0 40px; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-top: 40px; border-top: 1px solid var(--line); }
.footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 320px; }
.lockup { display: flex; align-items: center; gap: 9px; }
.lockup .wordmark { font-size: 22px; }
.footer-brand p { font-size: 15px; color: var(--muted); }
.footer-cols { display: flex; gap: 32px clamp(40px, 7vw, 96px); flex-wrap: wrap; font-size: 15px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h2 { font-size: 15px; font-weight: 400; color: var(--muted); }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-col .soon { color: var(--muted); }
.footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 64px; font-size: 13px; color: var(--muted); }
.mark-bee { transform-box: fill-box; transform-origin: center; animation: bob 2.6s ease-in-out infinite; }

/* Text pages (privacy, 404) */
.doc { position: relative; z-index: 1; padding-top: 170px; }
.doc-card { max-width: 760px; margin: 0 auto; padding: clamp(28px, 5vw, 56px); border-radius: 32px; }
.doc-title { font-family: var(--display); font-size: clamp(40px, 5vw, 60px); font-weight: 560; line-height: 1.05; letter-spacing: -.02em; }
.doc-title .accent { font-weight: 480; }
.doc-meta { margin-top: 12px; font-size: 14px; color: var(--muted); }
.doc-lede { margin-top: 24px; font-size: 19px; color: var(--stone); }
.doc h2 { margin-top: 40px; font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.doc p, .doc li { margin-top: 12px; font-size: 17px; color: #2A2824; }
.doc li { display: flex; gap: 12px; }
.doc li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .65em; border-radius: 50%; background: var(--honey); }
.doc a { text-decoration: underline; text-decoration-color: rgba(166, 106, 0, .5); text-underline-offset: 4px; }
.doc a:hover { text-decoration-color: var(--ink); }
.lost { text-align: center; }
.lost .doc-lede { margin-left: auto; margin-right: auto; max-width: 26em; }
.lost .actions { justify-content: center; }
.lost .waggle { margin-top: 0; margin-bottom: 8px; }

/* Scroll-in, where the browser supports scroll-driven animations */
@supports (animation-timeline: view()) {
  .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shine { to { --shine-angle: 360deg; } }
@keyframes rise { from { opacity: 0; transform: translateY(.55em) rotate(3deg); filter: blur(14px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(40px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes buzz { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(.8px, -.9px); } 50% { transform: translate(-.6px, .7px); } 75% { transform: translate(.7px, .6px); } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.28); } }
@keyframes flow-a { to { stroke-dashoffset: -200; } }
@keyframes flow-b { to { stroke-dashoffset: -120; } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: .4; } }
@keyframes drift-zoom { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(70px, -50px) scale(1.15); } }
@keyframes bob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -3px); } }
@keyframes reveal { from { opacity: 0; transform: translateY(70px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes m-bee { 0%, 18% { transform: translateX(-.75em); } 42%, 80% { transform: translateX(0); } 100% { transform: translateX(-.75em); } }
@keyframes m-eddy { 0%, 18% { transform: translateX(.75em); } 42%, 80% { transform: translateX(0); } 100% { transform: translateX(.75em); } }
@keyframes m-dupe { 0%, 40% { opacity: 1; } 43%, 82% { opacity: 0; } 86%, 100% { opacity: 1; } }
@keyframes m-plus { 0%, 16% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); } 30%, 84% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(90deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); } }
@keyframes m-glow { 0%, 40% { text-shadow: 0 0 0 rgba(224, 161, 27, 0); } 52% { text-shadow: 0 0 .35em rgba(224, 161, 27, .75); } 76%, 100% { text-shadow: 0 0 0 rgba(224, 161, 27, 0); } }

/* Phones: the swirl sits under the panel, smaller */
@media (max-width: 760px) {
  .site-header { margin-bottom: -76px; padding-top: 10px; }
  .nav-bar { padding: 4px 6px 4px 10px; }
  .brand-icon { width: 36px; height: 36px; }
  .brand .wordmark { font-size: 22px; }
  .hero { min-height: 0; }
  .hero-content { padding-top: 120px; padding-bottom: 330px; }
  .stage { top: auto; bottom: -330px; margin-left: -1010px; transform: scale(.6); transform-origin: 1010px 430px; }
  .hero-fade { height: 70px; }
  .work { padding-top: 90px; }
}
@media (max-width: 520px) {
  .nav .nav-wide { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .page *, .page *::before, .page *::after { animation: none !important; transition: none !important; }
  .moving, .m-plus, .m-dupe { display: none; }
  .still { display: inline; }
}