* { box-sizing: border-box; }
html { color-scheme: light; background: #f7f4e9; }
body { margin: 0; color: #355c55; font-family: ui-rounded, "Avenir Next", Avenir, "Trebuchet MS", sans-serif; }
main { min-height: 100svh; display: grid; place-items: center; position: relative; isolation: isolate; overflow: hidden; padding: 2rem 1rem 7rem; }
.scene { width: min(100%, 660px, calc((100svh - 12rem) * 1.23)); text-align: center; z-index: 1; }
.ocean { width: 100%; height: auto; display: block; overflow: visible; }
h1 { margin: -1rem 0 0; font-size: clamp(2.5rem, 5vw, 3.3rem); font-weight: 650; letter-spacing: -.065em; line-height: 1.2; }
h1 span { color: #a46272; }
.tide { position: absolute; bottom: 0; left: 0; width: 100%; height: clamp(65px, 13vh, 140px); z-index: 0; }
.clam { animation: bob 6s ease-in-out infinite; transform-origin: 400px 420px; }
.bubble { animation: drift 7s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1deg); } }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 480px) { main { padding: 1.5rem .25rem 6rem; } h1 { margin-top: .2rem; } }
@media (max-height: 620px) and (min-width: 600px) { .scene { width: min(70vh, 480px); } main { padding: 1rem 1rem 4rem; } h1 { font-size: 2rem; } }
@media (prefers-reduced-motion: reduce) { .clam, .bubble { animation: none; } }