/* ==========================================================
   Message in a Bottle: styles
   ========================================================== */

@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/fredoka-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: 'Patrick Hand';
  src: url('../fonts/patrick-hand-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #1b2a4a;          /* the dark navy used for outlines (bottles, buttons) */
  --paper: #fff7e2;        /* parchment */
  --font-ui: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --font-hand: 'Patrick Hand', 'Comic Sans MS', cursive;
  --soft-shadow: 0 8px 24px rgba(8, 36, 84, .28);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;            /* the page never scrolls: the camera moves instead */
  background: #0b56b4;
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- The scene ---------- */

.viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .6s ease;
}
.is-ready .viewport { opacity: 1; }

.sea-canvas,
.sea-life {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Shown instead of the moving sea on the rare devices that can't draw WebGL. */
.sea-fallback {
  position: absolute;
  top: 0;
  left: 0;
  background: url('../img/sea.webp') center / 100% 100% no-repeat;
}

.sky-clouds,
.near-clouds {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.sky-clouds { top: 0; overflow: hidden; }
.near-clouds { inset: 0; overflow: hidden; }

.cloud {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  will-change: transform;
  user-select: none;
}
.cloud--near { opacity: .95; }

/* Wave paths and decorations never catch clicks, so taps go through to the bottles. */
.sea-life * { pointer-events: none; }
.sea-life .bottle,
.sea-life .bottle .hit { pointer-events: all; }

.bottle { cursor: pointer; outline: none; }
.bottle .hit { fill: transparent; }
.bottle .ring {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
}
.bottle .focus {
  fill: none;
  stroke: #fff6b0;
  stroke-width: 3;
  stroke-dasharray: 7 6;
  opacity: 0;
}
.bottle:focus-visible .focus { opacity: 1; }
.bottle:hover .art,
.bottle:focus-visible .art { filter: drop-shadow(0 0 7px rgba(255, 250, 210, .95)); }

.splash-ring { fill: none; stroke: #fff; stroke-linecap: round; }
.splash-drop { fill: #fff; }

/* ---------- The title ---------- */

.title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 16px;
  text-align: center;
  transform-origin: top center;
  pointer-events: none;
  will-change: transform;
}
.title h1 {
  margin: 0;
  line-height: 0;
  animation: rise-in 1s cubic-bezier(.2, .9, .3, 1) both .2s;
}
.title h1 img {
  display: block;
  width: clamp(270px, 62vw, 720px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 4px 14px rgba(8, 40, 100, .35));
}
.title p {
  display: inline-block;
  margin: .8em 0 0;
  padding: .35em 1em;
  font-size: clamp(1rem, 2.8vw, 1.3rem);
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 1px 3px rgba(8, 40, 100, .4);
  animation: rise-in 1s cubic-bezier(.2, .9, .3, 1) both .55s;
}

/* ---------- Buttons, hint and toast ---------- */

/* The button is Zoe's parchment banner with the words written on it. */
.write-btn {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(250px, 72vw, 360px);
  aspect-ratio: 900 / 216;
  padding: .45em 0 0;
  font: 600 clamp(1.15rem, 4.6vw, 1.45rem) var(--font-hand);
  letter-spacing: .02em;
  color: #5b3716;
  background: url('../img/button.webp') center / 100% 100% no-repeat;
  border: 0;
  filter: drop-shadow(0 6px 10px rgba(8, 36, 84, .35));
  cursor: pointer;
  white-space: nowrap;
  transform: translate(-50%, 160%);
  opacity: 0;
  transition: transform .7s cubic-bezier(.2, 1.3, .4, 1), opacity .4s, filter .2s;
}
.intro-done .write-btn { transform: translate(-50%, 0); opacity: 1; }
.intro-done .write-btn:hover { transform: translate(-50%, -3px); filter: drop-shadow(0 10px 14px rgba(8, 36, 84, .4)); }
.intro-done .write-btn:active { transform: translate(-50%, 1px); }
.write-btn:focus-visible { outline: 3px dashed #fff; outline-offset: 2px; }
.write-btn.wiggle { animation: wiggle .5s ease; }

.hint {
  position: fixed;
  left: 50%;
  top: 55%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity .5s, transform .5s;
}
.hint span {
  display: block;
  padding: .55em 1.1em;
  font-size: clamp(1rem, 3vw, 1.15rem);
  font-weight: 500;
  white-space: nowrap;
  background: rgba(255, 255, 255, .92);
  border-radius: 999px;
  box-shadow: var(--soft-shadow);
  animation: bob 2.2s ease-in-out infinite;
}
.hint.is-visible { opacity: 1; transform: translate(-50%, 0); }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(110px + env(safe-area-inset-bottom));
  z-index: 40;
  max-width: calc(100vw - 32px);
  padding: .65em 1.2em;
  font-weight: 500;
  text-align: center;
  background: rgba(255, 255, 255, .95);
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .35s, transform .35s;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Animations ---------- */

@keyframes stamp { 0% { transform: scale(1); } 40% { transform: scale(.8); } 75% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wiggle {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -4deg; }
  75% { rotate: 4deg; }
}

/* People who switched on "reduce motion" on their device get a calmer page. */
@media (prefers-reduced-motion: reduce) {
  .hint span { animation: none; }
  .title h1, .title p { animation-duration: .01s; }
}

/* ---------- The scroll (writing and reading) ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* While a scroll is open, the button steps aside. */
.intro-done.is-busy .write-btn { transform: translate(-50%, 160%); opacity: 0; pointer-events: none; }

.bottle--mine .art { filter: drop-shadow(0 0 5px rgba(255, 214, 120, .95)); }

.overlay {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  width: 100%;
  height: 100%;
}
.overlay[hidden] { display: none; }

.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 30, 70, .38);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .5s ease;
}
.overlay.is-open .overlay-backdrop { opacity: 1; }

.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Every animated piece is placed by its middle point, then moved with transform. */
.bottle-build,
.bottle-build img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.bottle-build { opacity: 0; }
.bottle-build img { display: block; height: auto; user-select: none; }
.build-glass { width: 100%; }

.scroll {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-hand);
  color: #4a2c12;
}
.scroll[hidden] { display: none; }

.scroll-paper,
.scroll-roll {
  position: absolute;
  left: 0;
  width: 100%;
  background-image: url('../img/scroll-open.webp');
  background-repeat: no-repeat;
  pointer-events: none;
}
.scroll-paper { top: 0; height: 100%; background-size: 100% 100%; }
.scroll-roll { background-size: 100% var(--scroll-h); filter: drop-shadow(0 4px 6px rgba(60, 35, 10, .25)); }
.scroll-roll--top { top: 0; height: 14.5%; background-position: top; }
.scroll-roll--bottom { bottom: 0; height: 16.7%; background-position: bottom; }

.scroll-content {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 16.5%;
  bottom: 18.5%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s .35s;
}
.scroll.is-open .scroll-content { opacity: 1; visibility: visible; transition: opacity .35s ease; }

.scroll[data-mode="write"] .scroll-read,
.scroll[data-mode="read"] .scroll-write { display: none; }

.scroll-write,
.scroll-read {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.scroll-heading {
  margin: 0 0 .3em;
  font-size: 1.2em;
  font-weight: 400;
  text-align: center;
  color: #6b4220;
}

.scroll textarea {
  flex: 1;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 .15em;
  font: inherit;
  line-height: 1.5;
  color: inherit;
  border: 0;
  outline: none;
  resize: none;
  background: repeating-linear-gradient(transparent 0, transparent calc(1.5em - 1px), rgba(120, 80, 40, .22) calc(1.5em - 1px), rgba(120, 80, 40, .22) 1.5em);
  background-attachment: local;
}
.scroll textarea::placeholder { color: rgba(90, 60, 30, .5); }
.scroll textarea:focus-visible { box-shadow: 0 2px 0 rgba(120, 80, 40, .35); }

/* Under the writing: the letter count (or a note) on its own line, then the button in the middle. */
.scroll-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2em;
  margin-top: .4em;
}
.char-count {
  align-self: stretch;
  font-size: .8em;
  line-height: 1.3;
  opacity: .75;
}
.char-count.is-warning { color: #a3361f; opacity: 1; }

/* The scroll's buttons are just words, written in the same ink as the message. */
.seal-btn {
  padding: .1em .3em;
  font: inherit;
  font-size: 1.2em;
  color: #7a2418;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(122, 36, 24, .35);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), text-decoration-color .2s;
}
.seal-btn:hover { transform: rotate(-2deg) scale(1.05); text-decoration-color: rgba(122, 36, 24, .8); }
.seal-btn:active { transform: scale(.95); }
.seal-btn.is-stamping { animation: stamp .35s ease; }
.seal-btn:focus-visible { outline: 2px dashed #7a2418; outline-offset: 4px; border-radius: 8px; }

.message-text {
  margin: auto 0 .5em;
  font-size: 1.2em;
  line-height: 1.45;
  text-align: center;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.message-sign { margin: 0 0 .4em; font-size: .9em; text-align: right; opacity: .7; }
.message-sign:empty { display: none; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.message-status { margin: 0; font-size: .85em; text-align: center; color: #1f5f86; }
/* The message sits in the middle of the paper, the button at the bottom. */
.scroll-read .scroll-footer { margin-top: auto; }
.message-status:empty { display: none; }

.overlay-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  font: 600 18px var(--font-ui);
  color: var(--ink);
  background: rgba(255, 255, 255, .85);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--soft-shadow);
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s;
}
.overlay.is-open .overlay-close { opacity: 1; }
.overlay-close:focus-visible { outline: 3px dashed #fff; outline-offset: 3px; }