/* Fonts, palette, the balloon flight and its waving passengers.
   seara.css sets the flight start and end through .balloon-flight and --fly-*. */

@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500;6..96,700&family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600;7..72,700&display=swap");

:root {
  --ink: #221d18;
  --bark: #5b4534;
  --moss: #5f734f;
  --leaf: #8da36f;
  --cream: #fbf4e4;
  --paper: #f4e3c6;
  --linen: #fff9ec;
  --clay: #bb5f43;
  --rose: #d89078;
  --marigold: #e2aa43;
  --blue: #6c98a3;
  --line: rgba(34, 29, 24, 0.18);
  --font-display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --font-body: Literata, "Iowan Old Style", "Palatino Linotype", Palatino, Charter, serif;

  /* flight defaults; seara.css overrides them per breakpoint */
  --fly-x: 30vw;
  --fly-y: -60vh;
  --fly-scale: 0.42;
  --fly-duration: 16s;
  --fly-delay: 0.6s;

  color-scheme: light;
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
}

p,
h1,
h2 {
  margin: 0;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.02;
  padding-bottom: 0.1em; /* room for the ț descender */
}

.kicker {
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- balloon ---------- */

.balloon-flight {
  position: absolute;
  width: var(--balloon-width, 200px);
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(var(--fly-start-scale, 1));
  transform-origin: 50% 90%;
  pointer-events: none;
  z-index: 3;
}

.is-ready .balloon-flight {
  animation: fly var(--fly-duration) cubic-bezier(0.32, 0.08, 0.28, 1) var(--fly-delay) both;
}

.balloon {
  display: block;
  transform-origin: 50% 12%;
  animation: sway 6.5s ease-in-out infinite;
}

.balloon-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 18px 26px rgba(74, 53, 36, 0.22));
}

.arm {
  animation: wave 0.95s ease-in-out infinite alternate;
}

.arm-dad {
  transform-origin: 70px 226px;
  --wave-from: -16deg;
  --wave-to: 12deg;
}

.arm-mom {
  transform-origin: 127px 230px;
  --wave-from: -18deg;
  --wave-to: 4deg;
  animation-delay: -0.45s;
}

.arm-tudor {
  transform-origin: 107px 239px;
  --wave-from: -22deg;
  --wave-to: 14deg;
  animation-duration: 0.55s;
  animation-delay: -0.2s;
}

.tail {
  transform-origin: 145px 238px;
  animation: tail-flick 6s ease-in-out infinite;
}

@keyframes fly {
  from {
    transform: translate3d(0, 0, 0) scale(var(--fly-start-scale, 1));
  }

  to {
    transform: translate3d(var(--fly-x), var(--fly-y), 0) scale(var(--fly-scale));
  }
}

@keyframes sway {
  0%,
  100% {
    transform: rotate(-2.4deg) translateY(0);
  }

  50% {
    transform: rotate(2.4deg) translateY(-8px);
  }
}

@keyframes wave {
  from {
    transform: rotate(var(--wave-from));
  }

  to {
    transform: rotate(var(--wave-to));
  }
}

@keyframes tail-flick {
  0%,
  55%,
  82%,
  100% {
    transform: rotate(0);
  }

  60% {
    transform: rotate(16deg);
  }

  68% {
    transform: rotate(-10deg);
  }

  74% {
    transform: rotate(7deg);
  }
}

/* ---------- note reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
}

.is-ready .reveal {
  animation: reveal 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 4s) both;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- replay button ---------- */

.replay {
  position: fixed;
  right: 18px;
  bottom: 16px;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 249, 236, 0.86);
  color: var(--bark);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 500ms ease, background 200ms ease;
}

.is-ready .replay {
  opacity: 1;
  transition-delay: calc(var(--fly-duration) + var(--fly-delay));
}

.replay:hover {
  background: var(--linen);
}

.replay::before {
  content: "↻";
  font-size: 1rem;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .is-ready .balloon-flight {
    animation-duration: 1ms;
    animation-delay: 0s;
  }

  .balloon,
  .arm,
  .tail {
    animation: none;
  }

  .arm-dad {
    transform: rotate(-4deg);
  }

  .arm-mom {
    transform: rotate(-8deg);
  }

  .is-ready .reveal {
    animation-duration: 1ms;
    animation-delay: 0s;
  }

  .is-ready .replay {
    transition-delay: 0s;
  }
}