*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body)}

.soft{position:relative;min-height:100vh;overflow:hidden;display:grid;place-items:center;background:var(--color-bg);padding:var(--space-12) var(--gutter);text-align:center}
.soft__label{position:absolute;left:var(--space-6);top:var(--space-4);z-index:3;font:600 18px/1 system-ui,sans-serif;color:var(--color-white);opacity:.8}
.soft__dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.soft__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:var(--space-6)}
.soft__word{display:block;height:clamp(9rem,26vh,15rem);width:auto;max-width:90vw;overflow:visible;transform:rotate(-1.2deg)}
.soft__word--wide{height:clamp(7rem,20vh,12rem)}
.soft__ink{fill:none;stroke:var(--color-white);stroke-width:21;stroke-linecap:round;stroke-linejoin:round}
.soft__shadow{fill:none;stroke:var(--color-cream-100);stroke-width:21;stroke-linecap:round;stroke-linejoin:round}
.soft__title{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);font-weight:400}
.soft__title .soft__lead,.soft__title .soft__sub{display:block}
.soft__lead{margin:var(--space-4) 0 0;font-family:"Neucha",var(--font-body);font-weight:400;font-size:clamp(2.25rem,3.75vw,3.375rem);line-height:1.2;letter-spacing:.01em}
.soft__sub{margin:0;font-family:"Neucha",var(--font-body);font-size:clamp(1.875rem,2.8vw,2.5rem);line-height:1.2}
.soft__note{margin:0;font-family:var(--font-body);font-size:clamp(1.25rem,1.6vw,1.5rem);opacity:.9}

.button{display:inline-flex;align-items:center;border:0;border-radius:var(--radius-full);padding:var(--space-4) var(--space-12);background:var(--color-white);color:var(--color-peach-400);font-family:"Neucha",var(--font-body);font-weight:400;font-size:clamp(1.5rem,2vw,1.875rem);line-height:1;text-decoration:none;cursor:pointer;box-shadow:-5px 5px 0 var(--color-cream-100);transition:transform .2s var(--ease-soft)}
.button:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}
.button:active{transform:scale(.97);transition-duration:.08s}
@media (hover:hover){.button:hover{transform:translate(2px,-2px)}}

.soft__glyph{opacity:0}
.soft--play .soft__glyph{animation:glyph-in .45s var(--ease-soft) var(--d) forwards}
.soft__glyph--done,.soft--play .soft__glyph--done{opacity:1;animation:none}
@keyframes glyph-in{0%{opacity:0;transform:scale(1.08) rotate(-5deg)}60%{opacity:.85}100%{opacity:1;transform:none}}
.soft__glyph--write,.soft--play .soft__glyph--write{opacity:1;animation:none}
.soft__glyph--write .soft__ink,.soft__glyph--write .soft__shadow{stroke-dasharray:1 2;stroke-dashoffset:1;opacity:0}
.soft--play .soft__glyph--write .soft__ink{animation:glyph-write .5s cubic-bezier(.45,.05,.4,1) var(--d) forwards}
.soft--play .soft__glyph--write .soft__shadow{animation:glyph-write .5s cubic-bezier(.45,.05,.4,1) calc(var(--d) + .12s) forwards}
@keyframes glyph-write{0%{stroke-dashoffset:1;opacity:0}2%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
.reveal{opacity:0}
.soft--play .reveal{animation:reveal-fade .5s ease-out var(--d,0s) forwards}
@keyframes reveal-fade{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .soft__glyph,.reveal{opacity:1}
  .soft__glyph--write .soft__ink,.soft__glyph--write .soft__shadow{opacity:1;stroke-dashoffset:0;animation:none!important}
  .soft--play .soft__glyph,.soft--play .reveal{animation:none}
}

.logo{display:flex;align-items:center;gap:clamp(.5rem,1.5vw,1.5rem)}
.logo__boat{display:block;height:clamp(8rem,22vh,13rem);width:auto;overflow:visible}
.logo__boat .soft__word{height:auto}
.logo__ink{fill:var(--color-white)}
.logo__shadow{fill:var(--color-cream-100)}
.logo__mast{fill:none;stroke-width:7;stroke-linecap:round}
.logo__mast.logo__ink{stroke:var(--color-white);fill:none}
.logo__mast.logo__shadow{stroke:var(--color-cream-100);fill:none}
.logo__rock{transform-box:view-box;transform-origin:84px 153px}
.logo__sail{transform-box:view-box;transform-origin:82px 120px;opacity:0}
.logo__hull{opacity:0}
.logo__mast{stroke-dasharray:1 2;stroke-dashoffset:1;opacity:0}
.soft--play .logo__hull{animation:logo-hull .7s cubic-bezier(.22,.8,.3,1) forwards}
.soft--play .logo__mast{animation:glyph-write .8s cubic-bezier(.22,.8,.3,1) .22s forwards}
.soft--play .logo__sail{animation:logo-sail 1.05s cubic-bezier(.22,.8,.3,1) var(--sd) forwards}
.soft--play .logo__rock{animation:logo-rock 3.9s ease-in-out forwards}
@keyframes logo-hull{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
@keyframes logo-sail{0%{opacity:0;transform:scaleX(.03) skewY(10deg)}100%{opacity:1;transform:none}}
@keyframes logo-rock{0%{transform:rotate(-3deg) translateY(2px)}22%{transform:rotate(3deg) translateY(-2px)}49%{transform:rotate(-2deg)}74%{transform:rotate(1deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){
  .logo__hull,.logo__sail,.logo__mast{opacity:1;stroke-dashoffset:0;animation:none!important}
  .logo__rock{animation:none!important}
}