:root{color-scheme:dark;--forest:#0b211a;--cream:#f6e9bf;--gold:#d8bc78}
*{box-sizing:border-box}
html{min-height:100%;background:var(--forest)}
body{margin:0;background:radial-gradient(ellipse at 50% 42%,#1c342323 0%,transparent 60%),var(--forest);color:var(--cream);font:16px/1.6 Arial,Helvetica,sans-serif}
main{min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:32px 22px 24px;text-align:center;overflow:hidden}
.brand{width:min(72vw,330px);margin:0 0 10px;line-height:0;flex-shrink:0}
.brand-art{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 3px 4px #0004)}
.brand-version{transform-box:view-box;transform-origin:82% 87%;animation:version-shake 2.4s ease-in-out infinite}
.logo-mud-impact,.logo-mud-drop,.logo-mud-drip{opacity:0;transform-box:view-box;transform-origin:0 0;animation-duration:2.4s;animation-iteration-count:infinite;animation-timing-function:ease-out}
.logo-mud-impact{animation-name:logo-mud-splat}
.logo-mud-drop{animation-name:logo-mud-fling}
.logo-mud-drip{animation-name:logo-mud-drip}
@keyframes logo-mud-splat{
  0%,40%,83%,100%{opacity:0;transform:scale(.12)}
  43%{opacity:1;transform:scale(.45)}
  48%{opacity:.97;transform:scale(1.2,.92)}
  54%{opacity:.92;transform:scale(1,1)}
  70%{opacity:.8;transform:scale(1.02,1.07)}
  81%{opacity:0;transform:scale(1.04,1.13)}
}
@keyframes logo-mud-fling{
  0%,40%,78%,100%{opacity:0;transform:translate(0,0) scale(.2) rotate(0deg)}
  44%{opacity:1;transform:translate(0,0) scale(.45) rotate(0deg)}
  55%{opacity:1;transform:translate(var(--mud-x),var(--mud-y)) scale(1) rotate(var(--mud-turn))}
  71%{opacity:0;transform:translate(var(--mud-end-x),var(--mud-end-y)) scale(.72) rotate(var(--mud-turn))}
}
@keyframes logo-mud-drip{
  0%,53%,86%,100%{opacity:0;transform:scaleY(.1)}
  57%{opacity:1;transform:scaleY(.45)}
  70%{opacity:.85;transform:translateY(14px) scaleY(1.1)}
  84%{opacity:0;transform:translateY(65px) scaleY(1.3)}
}
@keyframes version-shake{
  0%,40%,73%,100%{transform:translate(0,0) rotate(0deg)}
  44%{transform:translate(-18px,4px) rotate(-3deg)}
  48%{transform:translate(18px,-8px) rotate(3deg)}
  52%{transform:translate(-15px,4px) rotate(-2.5deg)}
  56%{transform:translate(12px,-4px) rotate(2deg)}
  61%{transform:translate(-8px,2px) rotate(-1.2deg)}
  66%{transform:translate(4px,0) rotate(.6deg)}
}
.scene{width:min(100%,780px);position:relative;margin-top:auto}
.worksite{position:relative;isolation:isolate;display:flow-root}
.mud-trail{position:absolute;z-index:-1;pointer-events:none;left:50%;bottom:-34px;transform:translateX(-50%);width:100%;height:100%;object-fit:fill;opacity:.95}
.turtle{display:block;position:relative;width:clamp(240px,44vh,390px);max-width:100%;height:auto;margin:0 auto -18px;object-fit:contain;filter:drop-shadow(0 14px 18px #0004)}
.construction-sign{position:relative;isolation:isolate;padding:27px 20px 28px;border:1px solid #a58a55;border-radius:12px;background:linear-gradient(100deg,#4b3422 0%,#61472f 45%,#493425 100%);box-shadow:inset 0 0 0 5px #21180f30,inset 0 0 0 6px #b4976330,0 12px 24px #0003}
.construction-sign:before{content:"";position:absolute;inset:6px;z-index:-1;opacity:.3;background:repeating-linear-gradient(0deg,transparent 0px,transparent 8px,#2d20171a 9px,transparent 10px);border-radius:7px}
.eyebrow{margin:0 0 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:#d9c595}
h1{font:400 clamp(30px,5vw,57px)/1.15 Georgia,'Times New Roman',serif;letter-spacing:-1px;margin:0;color:#fff0c5}
.lamp{position:absolute;top:-16px;width:32px;height:32px;border:5px solid #66512e;border-radius:50%;background:#f8cc72;box-shadow:0 0 0 2px #302d21,0 0 20px #f8b84348,inset 0 0 5px #fff0ad}
.lamp-left{left:25px;background:#d9983d;box-shadow:0 0 0 2px #302d21,0 0 13px #f8b84324}
.lamp-right{right:25px}
.coming{display:flex;align-items:center;justify-content:center;gap:14px;margin:20px 0 5px;color:var(--gold)}
.coming span{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:2px}
.coming strong{font:400 48px/1.2 Georgia,'Times New Roman',serif}
abbr{text-decoration:none}
.turtle{aspect-ratio:1}
.turtle-still{display:block;width:100%;height:100%;object-fit:contain}
.hammer-frames{display:none;position:absolute;inset:0;background:url('assets/turtle-hammering-sheet.png') no-repeat 0 0;background-size:400% 200%;animation:turtle-hammering 1.8s steps(1,end) infinite}
.animation-ready .hammer-frames{display:block}
.animation-ready .turtle-still{visibility:hidden}
@keyframes turtle-hammering{
  0%,100%{background-position:0 0}
  14%{background-position:33.333333% 0}
  27%{background-position:66.666667% 0}
  40%{background-position:33.333333% 0}
  47%{background-position:100% 0}
  54%{background-position:0 100%}
  62%{background-position:33.333333% 100%}
  72%{background-position:66.666667% 100%}
  84%{background-position:100% 100%}
}
.motion-paused .hammer-frames,.motion-paused .lamp,.motion-paused .brand-version,.motion-paused .logo-mud-impact,.motion-paused .logo-mud-drop,.motion-paused .logo-mud-drip{animation-play-state:paused}
.motion-toggle{margin:-10px 0 14px;padding:7px 12px;background:transparent;border:1px solid #75836a66;border-radius:5px;color:#c7cbb9;font:12px Arial,Helvetica,sans-serif;cursor:pointer}
.motion-toggle:hover{background:#ffffff0a;color:#f6e9bf}
.motion-toggle:focus-visible{outline:2px solid #d8bc78;outline-offset:3px}
.motion-toggle[hidden]{display:none}
.crew-check{width:100%;max-width:500px;margin:4px auto 14px}
.crew-button{min-height:48px;max-width:100%;padding:13px 23px;border:1px solid #d5ad70;border-radius:8px;background:#68492d;color:#fff1d6;font:700 16px/1.4 Arial,Helvetica,sans-serif;box-shadow:inset 0 0 0 3px #33271955;cursor:pointer;touch-action:manipulation}
.crew-button:hover{background:#805b37}
.crew-button:active{background:#53391f}
.crew-button:focus-visible{outline:3px solid #ffda83;outline-offset:4px}
.crew-update{max-width:460px;margin:16px auto 0;padding:0 10px;color:#f3cf8e;font-size:16px;line-height:1.65;text-wrap:pretty}
.crew-update[hidden]{display:none}
.lamp{animation:construction-beacon 2s ease-in-out infinite}
.lamp-left{animation-delay:-1s}
@keyframes construction-beacon{
  0%,40%,100%{background:#ffda83;box-shadow:0 0 0 2px #302d21,0 0 20px #ffc65bad,0 0 40px #ffb73255,inset 0 0 7px #fff4c5}
  50%,90%{background:#91602b;box-shadow:0 0 0 2px #302d21,0 0 4px #f8b84312,inset 0 0 5px #49351e}
}
@media(prefers-reduced-motion:reduce){.lamp,.brand-version{animation:none}}
@media(prefers-reduced-motion:reduce){.logo-mud-impact,.logo-mud-drop,.logo-mud-drip{animation:none;opacity:0}}
.tagline{font-size:17px;line-height:1.65;margin:7px 0 11px;color:#e2ddcb}
.note{font-size:13px;line-height:1.7;margin:0 0 25px;color:#a9b5a6}
footer{font-size:11px;letter-spacing:1px;color:#92a293;margin-top:auto;padding-top:14px}
footer span{padding:0 6px}
@media(min-height:950px) and (min-width:651px){.turtle{width:450px}.brand{margin-bottom:34px}.note{margin-bottom:35px}}
@media(max-width:650px){main{padding:25px 18px 20px}.brand{font-size:11px;letter-spacing:3px;margin-bottom:22px}.turtle{width:min(90%,330px);margin-bottom:-14px}.construction-sign{padding:27px 12px 25px}.eyebrow{font-size:9px;letter-spacing:1.8px;margin-bottom:12px}h1{font-size:clamp(27px,7.3vw,42px);letter-spacing:-.6px}.lamp{width:27px;height:27px;top:-13px;border-width:4px}.lamp-left{left:19px}.lamp-right{right:19px}.coming{margin-top:21px;gap:12px}.coming span{font-size:13px;letter-spacing:1.7px}.coming strong{font-size:42px}.tagline{font-size:16px}.note{font-size:12px;margin-bottom:24px}}
@media(max-height:700px) and (min-width:651px){main{padding-top:20px}.brand{margin-bottom:8px}.turtle{width:250px}.construction-sign{padding:21px 20px}.coming{margin-top:14px}.note{margin-bottom:8px}}
@media(max-width:650px){.mud-trail{width:145%;height:84%;bottom:-23px;left:48%}}