/* Paperana — Coming Soon
   Palette from the Paperana visual identity (Visual/Paperana_Visual_Identity_Direction). */

:root {
  --forest: #12311F;
  --forest-2: #1d4a2f;
  --forest-3: #2f5f3d;
  --ivory: #F7EAD8;
  --paper: #FFF8EC;
  --sage: #90A267;
  --sage-soft: #c4cf9f;
  --sage-deep: #6f8550;
  --parchment: #D2CCAE;
  --gold: #E9A23B;
  --ink-soft: #3c5a45;

  --font-fun: "Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-hand: "Caveat", "Segoe Print", cursive;

  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --px: 0;
  --py: 0;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background-color: var(--ivory);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .19 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 70% 55% at 50% 38%, #fdf4e6 0%, rgba(253, 244, 230, 0) 70%);
  color: var(--forest);
  font-family: var(--font-fun);
  font-weight: 500;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; }

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

/* ---------- Scene ---------- */

.scene {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}

/* parallax wrapper: JS sets --px / --py in the range -1..1 */
.px {
  transform: translate3d(calc(var(--px) * var(--depth, 0) * 1px), calc(var(--py) * var(--depth, 0) * 1px), 0);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.blob { position: absolute; fill: var(--sage-soft); opacity: .55; animation: breathe 9s ease-in-out infinite; }
.blob .blob-inner { fill: var(--sage); opacity: .45; }
.blob-tl { top: 0; left: 0; width: clamp(200px, 30vw, 440px); transform-origin: top left; }
.blob-tr { top: 0; right: 0; width: clamp(180px, 26vw, 400px); transform-origin: top right; animation-delay: -4s; }

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06) rotate(-1deg); }
}

.cloud-wrap { position: absolute; }
.cloud {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  fill: #fffaf1;
  stroke: var(--forest);
  stroke-width: 2.6;
  stroke-linejoin: round;
  overflow: visible;
  animation: drift 14s ease-in-out infinite alternate;
}
.cloud-l { left: 2.5%; top: 31%; width: clamp(78px, 9vw, 140px); }
.cloud-r { right: 2%; top: 17%; width: clamp(80px, 10vw, 150px); }
.cloud-r .cloud { animation-duration: 18s; animation-delay: -6s; }
.cloud-m { left: 33%; top: 25%; width: clamp(50px, 5vw, 80px); opacity: .7; }
.cloud-m .cloud { animation-duration: 11s; animation-direction: alternate-reverse; }

@keyframes drift {
  from { transform: translateX(-18px); }
  to { transform: translateX(22px); }
}

.twinkle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  animation: twinkle 3.4s ease-in-out infinite;
  animation-delay: var(--d);
}
.twinkle svg { width: 100%; height: 100%; display: block; fill: var(--gold); }
.twinkle.sparkle svg { fill: #f0b54f; }

@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(.55) rotate(25deg); opacity: .55; }
}

.dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .7;
}

/* ---------- Rocket ---------- */

.rocket-wrap {
  position: absolute;
  z-index: 1;
  left: 5%;
  top: 6%;
  width: clamp(130px, 18vw, 270px);
  aspect-ratio: 280 / 220;
}

.trail {
  position: absolute;
  overflow: visible;
  fill: none;
  stroke: var(--forest);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 7 11;
  opacity: .75;
  pointer-events: none;
  animation: dash 1.6s linear infinite;
}
.rocket-trail { inset: 0; width: 100%; height: 100%; }

@keyframes dash { to { stroke-dashoffset: -36; } }

.rocket {
  position: absolute;
  top: 0;
  right: 0;
  width: 34%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: rotate(45deg);
  -webkit-tap-highlight-color: transparent;
}
.rocket svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: hover-rocket 2.6s ease-in-out infinite;
}
.rocket-flame { transform-box: fill-box; transform-origin: 50% 0; animation: flicker .18s ease-in-out infinite alternate; }

@keyframes hover-rocket {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes flicker {
  from { transform: scaleY(.78) scaleX(.95); }
  to { transform: scaleY(1.15) scaleX(1.04); }
}

.rocket:focus-visible { outline: 3px dashed var(--sage-deep); outline-offset: 6px; border-radius: 12px; }

.rocket.is-launching { animation: launch 2.8s cubic-bezier(.55, 0, .45, 1) forwards; }
.rocket.is-launching .rocket-flame { animation-duration: .08s; }
.rocket-wrap:has(.is-launching) .rocket-trail { opacity: 0; transition: opacity .3s; }

@keyframes launch {
  0% { transform: rotate(45deg) translate(0, 0); }
  12% { transform: rotate(45deg) translate(0, 14px); }
  42% { transform: rotate(45deg) translate(0, -140vmax); opacity: 1; }
  43% { transform: rotate(45deg) translate(0, 80vmax); opacity: 0; }
  55% { transform: rotate(45deg) translate(0, 80vmax); opacity: 1; }
  100% { transform: rotate(45deg) translate(0, 0); opacity: 1; }
}

/* ---------- Balloon ---------- */

.balloon-wrap {
  position: absolute;
  z-index: 1;
  right: 9%;
  top: 4%;
  width: clamp(64px, 8vw, 120px);
}
.balloon-trail {
  top: 92%;
  left: 40%;
  width: 120%;
  height: auto;
  aspect-ratio: 120 / 160;
}
.balloon {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  animation: float-balloon 7s ease-in-out infinite;
  transform-origin: 50% 85%;
  -webkit-tap-highlight-color: transparent;
}
.balloon svg { display: block; width: 100%; height: auto; overflow: visible; }
.balloon:focus-visible { outline: 3px dashed var(--sage-deep); outline-offset: 6px; border-radius: 12px; }
.balloon.is-nudged svg { animation: wobble .9s var(--bounce); }

@keyframes float-balloon {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-18px) rotate(3deg); }
}
@keyframes wobble {
  0% { transform: rotate(0); }
  25% { transform: rotate(-14deg) translateY(-12px); }
  55% { transform: rotate(10deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0); }
}

/* ---------- Brand ---------- */

.brand {
  position: relative;
  z-index: 2;
  align-self: center;
  margin-top: clamp(14px, 3vh, 30px);
  padding: 9px 22px 10px;
  border-radius: 999px;
  background: var(--forest);
  box-shadow: 0 6px 0 rgba(18, 49, 31, .14), 0 14px 28px -12px rgba(18, 49, 31, .45);
  animation: drop-in .9s var(--bounce) both;
}
.brand img { display: block; height: clamp(26px, 3.4vh, 34px); width: auto; }

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-40px) scale(.9); }
  to { opacity: 1; transform: none; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(6px, 1.6vh, 18px) 16px 0;
  text-align: center;
}

.title-wrap { position: relative; }

.title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: clamp(3.2rem, min(10vw, 10.5vh), 7.4rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.01em;
  color: var(--forest);
}
.title .line { display: block; white-space: nowrap; }
.title .ch {
  display: inline-block;
  transform: rotate(var(--r));
  text-shadow: .045em .055em 0 rgba(144, 162, 103, .45);
  animation:
    letter-drop .9s var(--bounce) backwards,
    letter-bob 3.4s ease-in-out infinite;
  animation-delay: calc(.25s + var(--i) * 70ms), calc(1.5s + var(--i) * 140ms);
}
.title .bang { color: var(--sage-deep); margin-left: .02em; }

@keyframes letter-drop {
  from { opacity: 0; transform: translateY(-1.2em) rotate(calc(var(--r) * -3)) scale(.6); }
  to { opacity: 1; transform: rotate(var(--r)); }
}
@keyframes letter-bob {
  0%, 100% { transform: translateY(0) rotate(var(--r)); }
  50% { transform: translateY(-.07em) rotate(calc(var(--r) * -1)); }
}

.burst {
  position: absolute;
  width: clamp(30px, 4vw, 56px);
  fill: none;
  stroke: var(--forest);
  stroke-width: 4;
  stroke-linecap: round;
  animation: burst 2.2s ease-in-out infinite;
}
.burst-l { left: -8%; top: 2%; transform-origin: right center; }
.burst-r { right: -10%; bottom: 8%; stroke: var(--gold); transform-origin: left center; animation-delay: -1.1s; }

@keyframes burst {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.75); opacity: .5; }
}

/* ribbon */
.ribbon {
  position: relative;
  width: min(580px, 92vw, 60vh);
  margin-top: clamp(6px, 1.4vh, 16px);
  aspect-ratio: 600 / 100;
  animation: unfurl 1s cubic-bezier(.2, .8, .2, 1) .7s both;
}
.ribbon svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ribbon-band { fill: var(--sage-deep); }
.ribbon-tail { fill: #566b3d; }
.ribbon-fold { fill: #3c4d2b; }
.ribbon p {
  position: absolute;
  inset: 0 0 12% 0;
  margin: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.6vw, 2.35rem);
  line-height: 1;
  color: var(--paper);
  text-shadow: 0 2px 0 rgba(18, 49, 31, .18);
}

@keyframes unfurl {
  from { clip-path: inset(0 50% 0 50%); transform: scale(.85) rotate(-2deg); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}

.lede {
  max-width: 36ch;
  margin: clamp(8px, 1.8vh, 18px) 0 0;
  font-size: clamp(1.02rem, 1.7vw, 1.3rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--forest);
  animation: rise .8s ease-out 1.1s both;
  text-wrap: balance;
}
.lede { position: relative; z-index: 4; }
.lede .nw { white-space: nowrap; }
.lede .item { position: relative; display: inline-block; }
.lede .item::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: .02em;
  height: .34em;
  border-radius: 99px;
  background: var(--sage);
  opacity: .45;
  z-index: -1;
  transform: scaleX(0) rotate(-1.5deg);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}
.lede .item.is-active::after { transform: scaleX(1) rotate(-1.5deg); }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Mini-book shelf (fills the gap on tall/narrow screens) ---------- */

.shelf { display: none; }
.mini {
  position: relative;
  display: block;
  width: clamp(50px, 14vw, 84px);
  transform: rotate(var(--t));
  animation:
    mini-in .7s var(--bounce) backwards,
    mini-bob 3.8s ease-in-out infinite;
  animation-delay: calc(1.5s + var(--i) * 120ms), calc(var(--i) * -.7s);
}
.mini svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transition: transform .55s var(--bounce);
}
.mini::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 4%;
  bottom: -9px;
  height: 7px;
  border-radius: 50%;
  background: rgba(18, 49, 31, .16);
  transition: transform .55s var(--bounce), opacity .55s;
}
.mini.is-active svg { transform: translateY(-14px) rotate(calc(var(--t) * -1.4)) scale(1.08); }
.mini.is-active::after { transform: scaleX(.7); opacity: .6; }

@keyframes mini-in {
  from { opacity: 0; scale: .5; }
  to { opacity: 1; scale: 1; }
}
@keyframes mini-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@media (max-width: 720px), (orientation: portrait) and (min-height: 900px), (min-width: 721px) and (min-height: 1200px) {
  .shelf {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(12px, 4.5vw, 26px);
    margin-top: auto;
    padding: 26px 0 18px;
  }
}

/* ---------- Book + form ---------- */

.book-stage {
  position: relative;
  width: min(104vw, 1440px, 100vh);
  margin-top: auto;
  padding-top: clamp(4px, 1vh, 14px);
  aspect-ratio: 1000 / 340;
  animation: rise 1s ease-out .4s both;
}

.book {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.book .cover { fill: var(--forest); }
.book .pg {
  fill: var(--paper);
  stroke: var(--forest);
  stroke-width: 2.2;
  stroke-linejoin: round;
}
.book .pg-1 { fill: #f6ead6; }
.book .pg-2 { fill: #efe1c8; }
.book .pg-3 { fill: #e8d8bb; }
.book .pg-4 { fill: #dfcda9; }
.book .pg-main { stroke-width: 2.6; }
.book .spine { stroke: var(--forest); stroke-width: 2.4; opacity: .55; }
.book .spine-shade { fill: url(#spineShade); }
.book .ruled path { fill: none; stroke: var(--sage); stroke-width: 2; opacity: .45; }

.book .doodles { fill: none; stroke: var(--forest); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.book .doodles .tick { stroke: var(--sage-deep); stroke-width: 3; }
.book .flower ellipse { animation: color-in 6s ease-in-out infinite; }
.book .flower ellipse:nth-child(2) { animation-delay: .3s; }
.book .flower ellipse:nth-child(3) { animation-delay: .6s; }
.book .flower ellipse:nth-child(4) { animation-delay: .9s; }
.book .flower ellipse:nth-child(5) { animation-delay: 1.2s; }
.book .flower .flower-heart { fill: var(--gold); }
.book .doodle-star { fill: #f6cd72; animation: twinkle 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

@keyframes color-in {
  0%, 20% { fill: rgba(144, 162, 103, 0); }
  45%, 80% { fill: rgba(144, 162, 103, .55); }
  100% { fill: rgba(144, 162, 103, 0); }
}

.book .pg-flutter {
  transform-box: view-box;
  transform-origin: 500px 300px;
  animation: flutter 4.5s ease-in-out infinite;
}
.book .side-r .pg-flutter { animation-delay: -2.2s; animation-duration: 5.2s; }

@keyframes flutter {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(1.6deg) translateY(-3px); }
  60% { transform: rotate(-.6deg); }
}

.book .pg-flip {
  transform-box: view-box;
  transform-origin: 500px 300px;
  opacity: 0;
  animation: page-flip 8s ease-in-out 2.5s infinite;
}

@keyframes page-flip {
  0% { transform: scaleX(1); opacity: 0; fill: var(--paper); }
  6% { transform: scaleX(.97) translateY(-4px); opacity: 1; }
  22% { transform: scaleX(.2) translateY(-22px) skewY(-3deg); fill: #f1e4cc; }
  24% { transform: scaleX(-.2) translateY(-22px) skewY(3deg); fill: #f1e4cc; }
  36% { transform: scaleX(-1); opacity: 1; fill: var(--paper); }
  42%, 100% { transform: scaleX(-1); opacity: 0; }
}

.floaters { position: absolute; inset: 0; pointer-events: none; }
.floater {
  position: absolute;
  width: var(--size, 32px);
  height: var(--size, 32px);
  animation: float-up var(--dur, 4.5s) cubic-bezier(.25, .6, .3, 1) forwards;
}
.floater svg { width: 100%; height: 100%; display: block; overflow: visible; }

@keyframes float-up {
  0% { opacity: 0; transform: translate(0, 20px) scale(.3) rotate(0deg); }
  15% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -220px)) scale(1) rotate(var(--rot, 30deg)); }
}

.notify {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 47%;
  translate: -50% -50%;
  width: min(480px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 18px;
  border: 2px solid var(--forest);
  border-radius: 999px;
  background: #fffcf6;
  box-shadow: 0 5px 0 rgba(18, 49, 31, .16), 0 18px 34px -16px rgba(18, 49, 31, .5);
  transition: box-shadow .25s, transform .25s;
  animation: pop-in .8s var(--bounce) 1.4s both;
}
.notify:focus-within { box-shadow: 0 0 0 5px rgba(144, 162, 103, .35), 0 5px 0 rgba(18, 49, 31, .16), 0 18px 34px -16px rgba(18, 49, 31, .5); }
.notify.is-ready { animation: none; }
.notify.is-ready.is-shake { animation: shake .45s ease-in-out; }

.notify-icon {
  flex: none;
  width: 22px; height: 22px;
  fill: none;
  stroke: var(--forest);
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.notify:focus-within .notify-icon { animation: envelope 1s ease-in-out; }

.notify input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--forest);
}
.notify input::placeholder { color: #5d7262; opacity: 1; }
.notify .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.notify-btn {
  flex: none;
  height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--forest);
  color: var(--paper);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .2s var(--bounce), background .2s;
}
.notify-btn:hover { background: var(--forest-2); transform: translateY(-2px) rotate(-1.5deg); }
.notify-btn:active { transform: translateY(1px) scale(.97); }
.notify-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.notify-btn[disabled] { cursor: progress; }
.notify.is-loading .btn-label { animation: pulse-text .9s ease-in-out infinite; }
.notify.is-done { border-color: var(--sage-deep); }
.notify.is-done .notify-btn { background: var(--sage-deep); }

.notify-msg {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(47% + 38px);
  translate: -50% 0;
  width: min(480px, calc(100vw - 32px));
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-soft);
  animation: rise .6s ease-out 1.9s both;
}
.notify-msg.is-error { color: #a4442d; }
.notify-msg.is-success { color: #566b3d; }

@keyframes pop-in {
  from { opacity: 0; transform: scale(.7); }
  to { opacity: 1; transform: none; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
@keyframes envelope {
  0%, 100% { transform: none; }
  30% { transform: rotate(-12deg) scale(1.15); }
  60% { transform: rotate(8deg); }
}
@keyframes pulse-text { 50% { opacity: .45; } }

.confetti {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  width: 10px;
  height: 14px;
  border-radius: 2px;
}

/* ---------- Ground / footer ---------- */

.ground {
  position: relative;
  z-index: 1;
  margin-top: -2px;
  background: var(--forest);
  color: var(--ivory);
}
.ground-wave {
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: clamp(36px, 6vw, 90px);
  fill: var(--forest);
}

.ground-inner {
  position: relative;
  z-index: 2;
  padding: clamp(10px, 1.6vh, 20px) 16px clamp(12px, 1.8vh, 20px);
  text-align: center;
}

.connect {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 12px;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: .02em;
}
.connect::before, .connect::after {
  content: "";
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--sage));
}
.connect::after { transform: scaleX(-1); }

.socials {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2.5vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.socials li { animation: pop-in .6s var(--bounce) both; animation-delay: calc(1.8s + var(--i) * 110ms); }
.socials a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ivory);
  color: var(--forest);
  transition: transform .3s var(--bounce), background .25s, color .25s;
}
.socials a:hover, .socials a:focus-visible {
  background: var(--sage);
  color: var(--paper);
  transform: translateY(-5px) rotate(-8deg) scale(1.08);
}
.socials a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.socials svg { width: 22px; height: 22px; fill: currentColor; }
.socials svg.stroke { fill: none; stroke: currentColor; stroke-width: 2; }
.socials svg.stroke .fill { fill: currentColor; stroke: none; }

.copy {
  margin: 10px 0 0;
  font-size: .82rem;
  font-weight: 400;
  opacity: .62;
}

.leaves {
  position: absolute;
  z-index: 3;
  bottom: 0;
  width: clamp(150px, 26vw, 420px);
  height: auto;
  aspect-ratio: 320 / 300;
  overflow: visible;
  pointer-events: none;
}
.leaves-l { left: -3%; }
.leaves-r { right: -3%; transform: scaleX(-1); }

/* leaf colors live as attributes in the #leaf-* defs: <use> clones don't match descendant selectors */
.leaves .stem { fill: none; stroke: #6f8550; stroke-linecap: round; }
.leaves .p-back .stem { stroke: #2a5536; }
.leaves .bud { fill: var(--gold); }
.leaves .bud-hi { fill: #f6cd72; }

.leaves .plant {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sway var(--dur, 6s) ease-in-out infinite;
  animation-delay: calc(var(--d) * -1);
}
.leaves-r .plant { animation-direction: reverse; }

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

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .hide-sm { display: none; }
  .rocket-wrap { left: -10px; top: 50px; width: 96px; }
  .rocket-trail { display: none; }
  .balloon-wrap { right: 3%; top: 64px; width: 42px; }
  .balloon-trail { display: none; }
  .cloud-l { top: 37%; left: -4%; }
  .cloud-r { top: 29%; right: -5%; }
  .blob-tl { width: 190px; }
  .blob-tr { width: 170px; }

  .brand { margin-top: 18px; }
  .hero { padding-top: 24px; }
  .title { font-size: clamp(3.3rem, 17vw, 5rem); }
  .burst-l { left: -14%; }
  .burst-r { right: -14%; }

  .book-stage {
    width: 170vw;
    margin-top: auto;
  }
  .notify { top: 44%; padding-left: 14px; }
  .notify-btn { padding: 0 16px; }
  .notify-msg { top: calc(44% + 36px); font-size: 1.15rem; }
  .leaves { width: 118px; }
  .book .checklist { display: none; }
  .ground-inner { padding-bottom: 22px; }
  .copy { max-width: 26ch; margin-inline: auto; }
}

@media (max-width: 380px) {
  .notify input[type="email"] { font-size: .95rem; }
  .notify-btn { padding: 0 13px; font-size: .95rem; }
  .notify-icon { display: none; }
}

@media (max-height: 640px) and (min-width: 721px) {
  .title { font-size: clamp(2.8rem, 11vh, 5rem); }
  .book-stage { width: min(900px, 100vw); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
  .book .pg-flip { display: none; }
  .px { transform: none !important; }
}