@font-face{font-family:Manrope;src:url('./assets/manrope.ttf') format('truetype');font-weight:200 800;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:#0a3d5a;color:#fff;font-family:Manrope,sans-serif}
button{font:inherit}

/* Stage */
.hero{position:relative;height:100svh;min-height:100svh;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 75% 10%,#237d98 0,transparent 60%),radial-gradient(ellipse at 15% 90%,#146983 0,#033b5b 85%)}
#ocean{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block;opacity:0}
.webgl #ocean{opacity:1}
/* Mobile browsers paint their bars in the theme colour; the water eases into that same tone at both edges so the join is invisible. */
@media (max-width:1024px) and (pointer:coarse){
  .hero::before,.hero::after{content:'';position:absolute;left:0;right:0;z-index:0;pointer-events:none}
  .hero::before{top:0;height:clamp(120px,22vh,220px);background:linear-gradient(#0a3d5a 0,#0a3d5a 8%,rgba(10,61,90,.55) 45%,rgba(10,61,90,0) 100%)}
  .hero::after{bottom:0;height:clamp(90px,16vh,160px);background:linear-gradient(rgba(10,61,90,0) 0,rgba(10,61,90,.5) 55%,#0a3d5a 100%)}
  .controls{z-index:3}
}
.shore-scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;visibility:hidden}
.webgl .shore-scene{visibility:visible}
/* Arrival: the page opens on the calm ocean tone, then the scene eases in and settles. */
.veil{display:none;position:absolute;inset:0;z-index:6;background:#0a3d5a;pointer-events:none;opacity:1;transition:opacity 1.8s cubic-bezier(.45,0,.15,1)}
.has-js .veil{display:block}
.has-js #ocean,.has-js .shore-scene{transform:scale(1.045);transform-origin:50% 55%;transition:transform 3s cubic-bezier(.2,.65,.2,1)}
.entered .veil{opacity:0}
.entered #ocean,.entered .shore-scene{transform:none}
.instant .veil{display:none}
.instant #ocean,.instant .shore-scene{transform:none;transition:none}

/* Identity: emblem, name and year. Without JavaScript everything is simply shown. */
.identity{--lift:0px;position:absolute;left:0;right:0;top:48%;transform:translateY(calc(-50% + var(--lift)));transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;pointer-events:none;padding:0 24px;z-index:2}
.mark{width:clamp(225px,42vmin,420px);height:clamp(225px,42vmin,420px)}
.mark img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(0,24,45,.1))}
h1{display:flex;align-items:center;justify-content:center;gap:14px;width:min(78vw,840px);max-width:calc(100vw - 48px);margin:38px 0 0;padding:6px 10px}
.wordmark{flex:1 1 0;min-width:0;height:auto;object-fit:contain}
.divider{flex:0 0 auto;font-size:32px;font-weight:200;line-height:1;opacity:.7}
.year{flex:0 0 18.7%;width:18.7%;height:auto;object-fit:contain}
.has-js .mark img,.has-js h1,.has-js .cta{opacity:0}

/* Call to action: a small capsule in the footer band that opens into a slim field, sends, and settles. */
.cta{--w:128px;--spring:cubic-bezier(.32,1.25,.52,1);position:relative;display:flex;align-items:center;justify-content:flex-start;height:34px;width:var(--w);margin:36px 0 0;padding:0;border:0;border-radius:999px;color:#fff;pointer-events:auto;overflow:hidden;will-change:width;
  background:linear-gradient(200deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.07) 48%,rgba(150,215,240,.12) 100%);
  backdrop-filter:blur(10px) saturate(1.25);-webkit-backdrop-filter:blur(10px) saturate(1.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset -1px 0 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,30,55,.25),inset 0 -8px 12px rgba(120,205,235,.10),-3px 5px 12px rgba(0,22,42,.32);
  transition:width .55s var(--spring),box-shadow .3s,transform .25s,opacity .3s}
/* Specular streak from the same light; it slides on hover and dims when pressed. */
.cta::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.26) 42%,rgba(255,255,255,.06) 52%,transparent 62%);background-size:220% 100%;background-position:80% 0;transition:background-position .7s cubic-bezier(.4,0,.2,1),opacity .3s}
.cta:has(.cta-open:hover)::before{background-position:0 0}
.cta:has(.cta-open:active){transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,30,55,.25),-1px 2px 6px rgba(0,22,42,.32)}
.cta:has(.cta-open:active)::before{opacity:.5}
.cta:has(.cta-open:focus-visible){box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset -1px 0 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,30,55,.25),-3px 5px 12px rgba(0,22,42,.32),0 0 0 1.5px rgba(255,255,255,.5)}
.cta[data-state=open],.cta[data-state=error]{--w:min(290px,calc(100vw - 64px))}
.cta[data-state=open]::before,.cta[data-state=error]::before,.cta[data-state=sending]::before{opacity:.35}
.cta[data-state=sending]{--w:34px}
.cta[data-state=sent],.cta[data-state=done]{--w:104px}
.cta[data-state=done]{opacity:.85}
.cta[data-state=error]{box-shadow:inset 0 0 0 1px rgba(240,85,91,.75),-3px 5px 12px rgba(0,22,42,.32);animation:cta-shake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes cta-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}
.cta>*{position:absolute;z-index:1;transition:opacity .22s,transform .4s var(--spring)}
.cta-open{display:flex;align-items:center;gap:4px;height:100%;width:100%;justify-content:center;border:0;background:none;color:rgba(255,255,255,.92);font:500 12.5px/1 Manrope,sans-serif;letter-spacing:.01em;cursor:pointer;padding:0 12px 0 14px;white-space:nowrap;opacity:1;min-height:0}
.cta-open:focus-visible{outline:none}
.cta-open svg{width:11px;height:11px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transform:translateY(.5px)}
.cta-send svg,.cta-done svg{stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cta-input{left:0;top:0;height:100%;width:100%;padding:0 42px 0 15px;border:0;background:none;color:#fff;font:400 14px/1 Manrope,sans-serif;opacity:0;pointer-events:none;caret-color:#fff}
.cta-input::placeholder{color:rgba(255,255,255,.42)}
.cta-input:focus{outline:none}
.cta-send{right:3px;top:3px;width:28px;height:28px;border-radius:50%;border:0;background:#fff;color:#06354f;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transform:translateX(8px) scale(.7);padding:0;min-height:0}
.cta-send svg{width:13px;height:13px;stroke-width:1.6}
.cta-send:hover,.cta-send:focus-visible{opacity:1;background:#dff1f7;outline:none}
.cta-wave{left:0;width:100%;display:flex;justify-content:center;gap:4px;opacity:0;pointer-events:none}
.cta-wave i{width:4px;height:4px;border-radius:50%;background:#fff;animation:cta-bob 1s ease-in-out infinite}
.cta-wave i:nth-child(2){animation-delay:.14s}.cta-wave i:nth-child(3){animation-delay:.28s}
@keyframes cta-bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}
.cta-done{left:0;width:100%;display:flex;justify-content:center;align-items:center;gap:6px;font:500 12.5px/1 Manrope,sans-serif;letter-spacing:.01em;color:rgba(255,255,255,.9);opacity:0;transform:translateY(5px);white-space:nowrap;pointer-events:none}
.cta-done svg{width:12px;height:12px;stroke-width:1.7}
.cta-tick{stroke-dasharray:22;stroke-dashoffset:22}
/* State choreography */
.cta[data-state=open] .cta-open,.cta[data-state=error] .cta-open,.cta[data-state=sending] .cta-open,.cta[data-state=sent] .cta-open,.cta[data-state=done] .cta-open{opacity:0;pointer-events:none}
.cta[data-state=open] .cta-input,.cta[data-state=error] .cta-input{opacity:1;pointer-events:auto;transition-delay:.1s}
.cta[data-state=open] .cta-send,.cta[data-state=error] .cta-send{opacity:1;pointer-events:auto;transform:none;transition-delay:.14s}
.cta[data-state=sending] .cta-wave{opacity:1;transition-delay:.22s}
.cta[data-state=sent] .cta-done,.cta[data-state=done] .cta-done{opacity:1;transform:none;transition-delay:.28s}
.cta[data-state=sent] .cta-tick,.cta[data-state=done] .cta-tick{stroke-dashoffset:0;transition:stroke-dashoffset .45s .4s cubic-bezier(.4,0,.2,1)}
.cta[data-state=done]{pointer-events:none}
@media(prefers-reduced-motion:reduce){.veil{transition-duration:.6s}.has-js #ocean,.has-js .shore-scene{transform:none;transition:none}.cta,.cta>*{transition-duration:.01s!important}.cta[data-state=error]{animation:none}.cta-wave i{animation:none}}

/* Controls */
.controls{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));right:clamp(24px,4vw,64px);display:flex;gap:25px}
button{display:flex;align-items:center;gap:9px;border:0;background:none;color:#fff;cursor:pointer;min-height:44px;padding:8px 0;font-size:13px;letter-spacing:.03em;opacity:.8}
button:hover,button:focus-visible{opacity:1}
button:focus-visible{outline:1px solid #fff;outline-offset:7px}
button svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
button:disabled{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* Modes */
.capture .controls,.capture .cta{display:none}
.ocean-only .identity{visibility:hidden}
.static .hero{background-image:url('./assets/ocean-still.jpg');background-size:cover;background-position:center}
.static #ocean{opacity:0}
.static .shore-scene{display:none}
.static .mark img,.static h1,.static .cta{opacity:1!important;transform:none!important}

@media(max-width:600px){
  .mark{width:min(65vw,330px);height:min(65vw,330px)}
  h1{width:88vw;gap:7px;margin-top:32px}
  .divider{font-size:19px}
  .cta{margin-top:30px}
  .cta-input{font-size:16px}
  .controls{right:24px;gap:24px}
}
@media(max-height:480px) and (min-width:601px){
  .mark{width:45vh;height:45vh}
  .identity{top:45%}
  h1{margin-top:20px}
  .controls{bottom:12px}
  .cta{margin-top:14px}
}