/* gul: a neon night pier, one seagull, one arcade panel. */
@font-face { font-family: "Comfortaa"; src: url("/fonts/comfortaa-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/nunito-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/nunito-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/nunito-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

/* The layout system. */
:root {
  --bg: #12062E; --ink: #F6F0FF; --accent: #3EF0FF;
  --pink: #FF3EA5; --cyan: #3EF0FF; --violet: #5B1FA8; --lav: #CDB8FF;
  --font-display: "Comfortaa", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --container: min(1200px, 100% - 2 * var(--s3));
  --reading: min(680px, 100% - 2 * var(--s3));
  --body: 18px; --label: 16px; --btn-h: 48px;
  --display: clamp(44px, 6vw, 88px);
  --out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --edge: max(16px, 2vw);
}
html { background: var(--bg); }
body { overflow-x: hidden; font-variant-numeric: tabular-nums; }
main { overflow-x: clip; }
img { user-select: none; -webkit-user-drag: none; }
a, button { -webkit-tap-highlight-color: transparent; }

/* ---------- stage and world ---------- */
.stage { position: relative; height: max(100svh, 640px); overflow: hidden; background: var(--bg); }
.view { position: absolute; inset: 0; overflow: hidden; }
.world { position: absolute; left: 0; top: 0; width: 108%; aspect-ratio: 2560 / 1441; transform: translate3d(var(--wx, 0px), 0, 0); }
.world .l { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky { height: 44% !important; mix-blend-mode: screen; pointer-events: none; }
.clouds { position: absolute; left: 0; width: 70%; mix-blend-mode: screen; opacity: .5; pointer-events: none; animation: drift 160s linear infinite; }
.clouds.c1 { top: 2%; }
.clouds.c2 { top: 14%; width: 58%; opacity: .35; animation-duration: 220s; animation-delay: -120s; }
@keyframes drift { from { transform: translateX(-75%); } to { transform: translateX(150%); } }
.moon-halo { position: absolute; left: 51.3%; top: 26.8%; width: 15%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 220, 240, .45) 0 22%, rgba(255, 160, 220, .18) 36%, transparent 68%); animation: halo 6s ease-in-out infinite; }
@keyframes halo { 0%, 100% { opacity: .6; scale: 1; } 50% { opacity: 1; scale: 1.08; } }
.blimp { position: absolute; top: 7%; left: 0; width: 6%; animation: blimp 120s linear infinite; animation-delay: -40s; pointer-events: none; }
@keyframes blimp { 0% { transform: translate(-120%, 0); } 50% { transform: translate(700%, -12%); } 100% { transform: translate(1500%, 0); } }
/* the rooftop sign is part of the picture; this darkened copy of the same pixels makes it flicker */
.sign-off { position: absolute; left: 86.6%; top: 3.6%; width: 10%; height: 17%; pointer-events: none; opacity: 0;
  background: url("/img/scene2.webp") 96.22% 4.34% / 1000% 588.2% no-repeat; filter: brightness(.32) saturate(.4); }
.is-pre .sign-off { opacity: 1; }
.sign-off.is-flicker { animation: neon 1.6s steps(1) both; }
@keyframes neon { 0% { opacity: 1; } 10% { opacity: 0; } 14% { opacity: 1; } 22% { opacity: 0; } 26% { opacity: .8; } 34% { opacity: 0; } 40% { opacity: .5; } 46%, 100% { opacity: 0; } }
.sign-off.is-buzz { animation: buzz .55s steps(1); }
@keyframes buzz { 0% { opacity: 0; } 20% { opacity: .85; } 35% { opacity: 0; } 60% { opacity: .5; } 70%, 100% { opacity: 0; } }
.water { top: 42.7% !important; height: 57.3% !important; pointer-events: none; }
.yacht { position: absolute; top: 39.2%; left: 0; width: 5.2%; pointer-events: none; animation: sail 150s linear infinite; animation-delay: -60s; }
@keyframes sail { 0% { transform: translateX(1300%); opacity: 0; } 4% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(700%); opacity: 0; } }
.pier, .fx { pointer-events: none; }

/* ---------- the gull ---------- */
.gull { position: absolute; left: 21%; top: 29.6%; width: 10.2%; aspect-ratio: 700 / 929; cursor: pointer; }
.gull-body { position: absolute; inset: 0; transform-origin: 55% 96%; animation: breathe 4.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.01, 1.02); } }
.gull .f { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .32s ease-out; filter: drop-shadow(0 0 10px rgba(255, 90, 200, .25)); }
.gull .f.is-on { opacity: 1; }
.gull .f.is-snap { transition-duration: .06s; }
.gull:hover .gull-body { animation: tilt .6s var(--spring); }
@keyframes tilt { 40% { transform: rotate(-3deg) scale(1.02, .98); } 100% { transform: none; } }
.gull.is-hop .gull-body { animation: hop .5s var(--spring); }
@keyframes hop { 0% { transform: scale(1.05, .94); } 45% { transform: translateY(-7%) scale(.97, 1.04); } 80% { transform: translateY(0) scale(1.03, .97); } 100% { transform: none; } }
.marks { position: absolute; left: 84%; top: -20%; width: 34%; opacity: 0; transform: scale(.4) rotate(-10deg); transform-origin: 0 100%; pointer-events: none; transition: opacity .12s ease-out, transform .45s var(--spring); }
.gull.is-scream .marks { opacity: 1; transform: none; }
.thought { position: absolute; left: 66%; bottom: 88%; width: 185%; aspect-ratio: 1550 / 725; margin: 0; pointer-events: none;
  background: url("/img/thought.webp") center / contain no-repeat; display: grid; place-items: center;
  opacity: 0; transform: translateY(14%) scale(.8); transform-origin: 0% 100%; transition: opacity .8s var(--out), transform 1.1s var(--out); }
.thought span { display: block; width: 74%; padding: 0 0 12% 8%; text-align: center; font: 700 clamp(16px, 1.15vw, 22px)/1.25 var(--font-display); color: #3A1F7A; }
.gull.is-dream .thought { opacity: 1; transform: none; }

.soft { position: absolute; left: 37%; top: 60.5%; width: 17%; aspect-ratio: 1325 / 422; min-height: var(--btn-h); padding: 0; border: 0; cursor: pointer; white-space: nowrap;
  background: url("/img/btn-soft.webp") center / 100% 100% no-repeat; color: #fff; font: 700 clamp(17px, 1.45vw, 28px)/1 var(--font-display);
  text-shadow: 0 2px 0 rgba(58, 18, 120, .55), 0 0 12px rgba(255, 255, 255, .35); transition: transform .6s var(--spring), filter .25s ease-out; animation: softglow 3.2s ease-in-out infinite; }
.soft span { position: relative; top: -4%; }
.soft:hover { transform: translateY(-4px) scale(1.04); transition-duration: .25s; }
.soft:active { transform: translateY(1px) scale(.95); transition-duration: .035s; }
.soft[aria-busy="true"] { filter: saturate(.7) brightness(.9); animation: none; }
@keyframes softglow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(200, 140, 255, .5)); } 50% { filter: drop-shadow(0 0 24px rgba(220, 150, 255, .95)); } }

.scan { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .35;
  background: repeating-linear-gradient(to bottom, rgba(10, 0, 30, .22) 0 1px, transparent 1px 3px); }

/* ---------- the arcade panel: name, contract, links ---------- */
.panel { position: absolute; right: var(--edge); bottom: max(3vh, 16px); z-index: 4; width: clamp(460px, 34vw, 660px);
  display: grid; gap: 12px; padding: 0 6px;
  border-style: solid; border-width: 34px 40px; border-image: url("/img/panel.webp") 90 100 fill / 34px 40px stretch; }
.panel-head { display: flex; align-items: baseline; gap: .5em; }
.panel-head h1 { margin: 0; font: 700 clamp(36px, 2.8vw, 52px)/1 var(--font-display); color: #fff; text-shadow: 0 0 .25em var(--pink), 0 0 .7em rgba(255, 62, 165, .7); }
.tick { margin: 0; font: 700 clamp(20px, 1.5vw, 28px)/1 var(--font-display); color: var(--cyan); text-shadow: 0 0 .4em rgba(62, 240, 255, .8); }
.lbl { margin: 4px 0 -4px; font: 700 16px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--lav); }
.ca-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
[data-ca] { flex: 1; min-width: 0; font: 700 16px/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: -.02em; color: #FFFFFF; text-shadow: 0 0 8px rgba(62, 240, 255, .45); }
[data-ca]:empty::before, [data-ca].is-empty { color: #E6D8FF; }
.copy { flex: none; min-height: 44px; min-width: 104px; padding: 0 1.3em .1em; border: 0; cursor: pointer; background: url("/img/btn-soft.webp") center / 100% 100% no-repeat;
  color: #fff; font: 700 16px/1 var(--font-display); text-shadow: 0 1px 0 rgba(58, 18, 120, .6); transition: transform .6s var(--spring), filter .25s; }
.copy:hover { transform: translateY(-2px); filter: brightness(1.12); transition-duration: .25s; }
.copy:active { transform: scale(.94); transition-duration: .035s; }
.pump { display: flex; align-items: center; justify-content: center; gap: .55em; height: 64px; text-decoration: none; color: #fff;
  background: url("/img/btn-pink.webp") center / 100% 100% no-repeat; font: 700 clamp(18px, 1.3vw, 23px)/1 var(--font-display); text-shadow: 0 2px 0 rgba(140, 10, 70, .5);
  transition: transform .6s var(--spring), filter .25s; animation: pumpglow 2.6s ease-in-out infinite; }
@keyframes pumpglow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 62, 165, .4)); } 50% { filter: drop-shadow(0 0 16px rgba(255, 62, 165, .9)); } }
.pump img { width: 1.35em; height: 1.35em; border-radius: 50%; }
.pump:hover { transform: translateY(-3px) scale(1.02); transition-duration: .25s; }
.pump:active { transform: scale(.96); transition-duration: .035s; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cyan { display: flex; align-items: center; justify-content: center; gap: .45em; height: 54px; padding: 0 1em; text-decoration: none; white-space: nowrap; color: #fff;
  background: url("/img/btn-cyan.webp") center / 100% 100% no-repeat; font: 700 16px/1 var(--font-display); text-shadow: 0 0 8px rgba(62, 240, 255, .6);
  transition: transform .6s var(--spring), filter .25s; }
.cyan img { width: 1.15em; height: 1.15em; }
.cyan:hover { transform: translateY(-3px); filter: brightness(1.2) drop-shadow(0 0 10px rgba(62, 240, 255, .7)); transition-duration: .25s; }
.cyan:active { transform: scale(.95); transition-duration: .035s; }
.panel .is-off, .panel .is-off:hover { opacity: .72; filter: saturate(.7); transform: none; animation: none; cursor: not-allowed; }

/* ---------- the glass plate on the pier ---------- */
.foot { position: absolute; left: var(--edge); bottom: max(3vh, 16px); z-index: 4; width: clamp(360px, 27vw, 500px);
  display: grid; gap: 4px; padding: 2px 8px; text-align: center;
  border-style: solid; border-width: 18px 30px; border-image: url("/img/plate2.webp") 60 90 fill / 18px 30px stretch; }
.foot::before, .foot::after { content: ""; position: absolute; top: 50%; width: 20px; height: 20px; translate: 0 -50%; background: url("/img/screw.webp") center / contain no-repeat; pointer-events: none; }
.foot::before { left: -22px; }
.foot::after { right: -22px; }
.foot p { margin: 0; }
.lore { font: 700 17px/1.3 var(--font-body); color: #FFFFFF; text-shadow: 0 0 8px rgba(205, 184, 255, .5); }
.risk { font: 400 16px/1.3 var(--font-body); color: #D9CCF5; }

/* ---------- opener: an old screen switching on ---------- */
.view { transition: transform .7s cubic-bezier(.2, .9, .2, 1), filter 1.2s ease-out, opacity .2s; transform-origin: 50% 50%; }
.is-pre .view { transform: scale(1, .004); filter: brightness(4) saturate(0); opacity: .9; }
.panel, .foot { transition: transform .9s var(--spring) .55s, opacity .6s ease-out .55s; }
.is-pre .panel { transform: translateX(40px); opacity: 0; }
.is-pre .foot { transform: translateY(30px); opacity: 0; }
.is-pre .soft { opacity: 0; transform: scale(.6); }
.world.is-shake { animation: shake .42s steps(2); }
@keyframes shake { 0% { translate: 0 0; } 20% { translate: -6px 3px; } 40% { translate: 5px -3px; } 60% { translate: -4px 2px; } 80% { translate: 3px 0; } 100% { translate: 0 0; } }

/* ---------- tablet ---------- */
@media (max-width: 1100px) and (min-width: 821px) {
  .panel { width: 420px; }
  .foot { width: 340px; }
}

/* ---------- phone: the view on top, the panel and the plate below on the water ---------- */
@media (max-width: 820px) {
  .stage { height: auto; background: #0B2C66 url("/img/scene2.webp") 24% 100% / 300vw auto no-repeat; }
  .view { position: relative; inset: auto; height: 152vw;
    -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); }
  .world { width: 300vw; }
  .thought { left: -2%; width: 240%; }
  .thought span { font-size: 16px; }
  .view > .soft { left: auto; right: 4vw; top: auto; bottom: 16vw; width: 46vw; z-index: 3; }
  .panel { position: relative; right: auto; bottom: auto; width: auto; margin: -6vw 8px 0; }
  .foot { position: relative; left: auto; bottom: auto; width: auto; margin: var(--s2) 8px var(--s5); }
  .pump { height: 60px; }
  .is-pre .panel { transform: translateY(30px); }
}
@media (max-width: 480px) {
  .pair { grid-template-columns: 1fr; }
  .panel { margin-inline: 6px; padding: 0; border-width: 30px 22px; border-image-width: 30px 22px; }
}
@media (max-width: 360px) {
  .view > .soft { width: 54vw; }
  .pump { font-size: 16px; gap: .35em; }
  .pump img { width: 1.2em; height: 1.2em; }
  .panel { margin-inline: 4px; border-width: 30px 18px; border-image-width: 30px 18px; }
  .ca-row { flex-direction: column; align-items: stretch; }
  .copy { align-self: center; }
  [data-ca] { text-align: center; }
}