/* Plumb Lucky hero, from the shipped site (showroom/demos/plumb-lucky/index.html). Its hand-drawn idle loops are
   retimed to divide the 5.25 s cycle (blink 2.625 / 5.25 s, plunge 2.625 s, flag 1.05 s, clouds 5.25 s, wheel an eighth of a turn per cycle). */
:root {
  --lime: #A8F58E; --ink: #0A0A0A; --cream: #FFF1E6;
  --display: 'Hammer', 'Dela Gothic One', sans-serif; --accent: 'Cooper Nouveau', serif; --body: 'Relative', sans-serif;
  --gutter: clamp(16px, 2vw, 28px); --navh: clamp(58px, 4.9vw, 76px);
  --big: clamp(52px, 13.6vw, 250px);
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; background: var(--lime); color: var(--ink); font: 400 16px/1.45 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .9; letter-spacing: 0; margin: 0; text-align: center; }
.display .l { display: block; }
.accent { font-family: var(--accent); font-weight: 400; margin: 0; line-height: 1.05; }

.nav { position: relative; z-index: 20; background: var(--lime); height: var(--navh); padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 2.5px solid var(--ink); font-size: clamp(17px, 1.74vw, 25px); line-height: 1; }
.nav-side { display: flex; align-items: center; gap: clamp(28px, 4.2vw, 72px); }
.nav-side.r { justify-content: flex-end; }
.nav-side a:not(.pill) { padding: 6px 0; text-decoration: none; }
.logo { display: block; text-decoration: none; }
.logo img { height: calc(var(--navh) - 12px); width: auto; }
.pill { display: inline-flex; align-items: center; background: var(--ink); color: var(--lime); border-radius: 10px; padding: .45em .8em .5em; font: 400 1em/1 var(--body); text-decoration: none; white-space: nowrap; }
.pill .short { display: none; }

/* hand-animated idles: held frames (steps), never eased */
.lyr { position: absolute; }
.lyr > img { display: block; width: 100%; height: 100%; }
.L-plunger-lids { opacity: 0; animation: blink 2.625s steps(1, end) infinite; animation-delay: -1.3s; }
.L-plunger { transform-origin: 50% 100%; animation: plunge 2.625s steps(1, end) infinite; animation-delay: -.6s; }
.L-drop-lids { opacity: 0; animation: blink 5.25s steps(1, end) infinite; }
.L-flag { transform-origin: 8% 60%; animation: wave 1.05s steps(1, end) infinite; }
.sky-art { isolation: isolate; }
.L-ferris { z-index: -1; animation: spin 5.25s linear infinite; }
@keyframes spin { to { transform: rotate(45deg); } }      /* eight spokes: an eighth of a turn per cycle */
@keyframes blink { 0%, 90% { opacity: 0; } 92% { opacity: 1; } 97% { opacity: 0; } }
@keyframes plunge { 0%, 48% { transform: none; } 54% { transform: scale(1.02, .9); } 60% { transform: scale(1.05, .8); } 66% { transform: scale(.98, 1.06); } 72% { transform: scale(1, .97); } 78% { transform: none; } }
@keyframes wave { 0% { transform: skewY(-4deg); } 20% { transform: skewY(-20deg) scaleX(.72); } 40% { transform: skewY(4deg) scaleX(1.08); } 60% { transform: skewY(18deg) scaleX(.78); } 80% { transform: skewY(-6deg) scaleX(1.04); } }
@keyframes drift { 0% { transform: translateX(0); } 25% { transform: translateX(5px); } 50% { transform: translateX(10px); } 75% { transform: translateX(5px); } }

.hero { position: relative; text-align: center; padding-top: clamp(28px, 4.4vw, 80px); overflow-x: clip; }
.wordmark { position: relative; display: inline-block; z-index: 1; }
.wordmark .welcome { font-size: clamp(26px, 3.5vw, 58px); line-height: 1; position: relative; z-index: 2; margin-bottom: -.3em; }
.wordmark h1 { font-size: var(--big); line-height: .74; letter-spacing: -.04em; --rise-bleed: .22em; }
.sky-clouds { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.cloud { position: absolute; left: var(--x); top: var(--t); width: var(--w); animation: drift 5.25s steps(1, end) infinite; animation-delay: var(--dl); }
.skyline { position: relative; z-index: 0; width: 100%; margin-top: -11.5vw; transform-origin: 50% 100%; --stage-zoom: .82; --stage-zoom-dur: 1s; }
.art { position: relative; }
.art .base { display: block; width: 100%; height: auto; }

.home { padding: clamp(40px, 4.5vw, 80px) var(--gutter) 60px; text-align: center; }
.home .display { font-size: var(--big); letter-spacing: -.035em; line-height: .76; }
.home .display .l { white-space: nowrap; }
.home p { max-width: 26em; margin: clamp(28px, 3vw, 48px) auto 0; font-size: clamp(18px, 2.2vw, 32px); line-height: 1.38; text-wrap: pretty; }

@media (max-width: 720px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-side.l, .nav-side .wide, .pill .num { display: none; }
  .pill .short { display: inline; }
  .c-x { display: none; }
  .sky-clouds { z-index: 0; }
  .cloud { width: calc(var(--w) * .8); }
  .logo img { height: 40px; }
  .home p { max-width: 520px; }
  .hero { padding-top: clamp(22px, 4vh, 40px); }
  .wordmark h1 { font-size: clamp(64px, min(23vw, 13vh), 130px); }
  .skyline { overflow: hidden; margin-top: -9vw; }
  .sky-art { width: 175%; margin-left: -38%; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }