/* Final v5 scene layer. Loaded last so the sky and message motion stay stable. */

:root {
  --sky-top: #bfe8f4;
  --sky-bottom: #fff0c9;
  --star-opacity: 0;
  --moon-left: -6%;
  --moon-top: 78%;
  --moon-opacity: 0;
  --moon-shadow-shift: 0%;
  --flower-droop: 0deg;
  --flower-drop: 0px;
}

body {
  background:
    linear-gradient(
      180deg,
      var(--sky-top) 0,
      var(--sky-bottom) 42%,
      rgb(251 246 236 / 96%) 55%
    ),
    var(--cream);
  transition: background 2.5s linear;
}

.pastoral-background {
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 4%),
    transparent 45%
  );
}

.night-stars {
  position: absolute;
  inset: 0 0 42%;
  background-image:
    radial-gradient(circle, rgb(255 250 220 / 90%) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgb(221 236 255 / 78%) 0 1.3px, transparent 1.7px),
    radial-gradient(circle, rgb(255 255 255 / 74%) 0 0.8px, transparent 1.2px);
  background-position:
    4px 8px,
    38px 52px,
    71px 19px;
  background-size:
    83px 73px,
    127px 101px,
    61px 89px;
  opacity: var(--star-opacity);
  transition: opacity 2.5s linear;
}

.family-message-rail {
  display: block;
  height: 198px;
  padding: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgb(169 88 86 / 16%);
  border-radius: 22px 22px 12px 22px;
  background: rgb(255 253 247 / 67%);
  overscroll-behavior-y: contain;
  scroll-behavior: auto;
  scroll-snap-type: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.family-message-rail::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.family-message-track,
.family-message-set {
  display: block;
}

.family-message-set {
  padding-bottom: 9px;
}

.family-message-card {
  min-width: 0;
  margin: 0 0 9px;
  padding: 13px 14px 12px;
  scroll-snap-align: none;
}

.family-message-card:last-child {
  margin-bottom: 0;
}

.family-message-card blockquote {
  display: block;
  min-height: 0;
  margin: 8px 0 10px;
  overflow: visible;
  -webkit-line-clamp: initial;
}

.scene-controls {
  grid-template-columns: auto minmax(78px, auto);
  max-width: 250px;
}

.scene-controls select {
  width: 100%;
}

.scene-controls time,
.scene-controls #sky-summary {
  grid-column: 1 / -1;
}

.scene-controls #sky-summary {
  max-width: 250px;
  color: var(--sage-deep);
  line-height: 1.45;
  text-align: right;
}

.balloon-cloud {
  top: auto;
  right: auto;
  bottom: -230px;
  left: var(--balloon-left);
  width: 158px;
  height: 205px;
  opacity: 0;
  animation: balloon-rise var(--rise-duration) linear var(--rise-delay) infinite;
  will-change: transform, opacity;
}

.balloon-cloud-west {
  --balloon-left: 3%;
  --rise-duration: 52s;
  --rise-delay: -31s;
  --side-drift: 34px;
}

.balloon-cloud-center {
  --balloon-left: 43%;
  --rise-duration: 47s;
  --rise-delay: -4s;
  --side-drift: -28px;
}

.balloon-cloud-east {
  --balloon-left: 79%;
  --rise-duration: 44s;
  --rise-delay: -17s;
  --side-drift: 22px;
}

.balloon-cloud i {
  animation: balloon-body-pop var(--rise-duration) linear var(--rise-delay)
    infinite;
}

.balloon-burst {
  position: absolute;
  top: 62px;
  left: 79px;
  width: 1px;
  height: 1px;
}

.balloon-burst b {
  position: absolute;
  width: 9px;
  height: 5px;
  border-radius: 70% 30% 70% 30%;
  background: var(--fragment-color, #f5cbd5);
  opacity: 0;
  animation: balloon-fragment var(--rise-duration) ease-out var(--rise-delay)
    infinite;
  transform: translate(0, 0) rotate(var(--fragment-rotation, 0deg));
}

.balloon-burst b:nth-child(1) {
  --fragment-x: 76px;
  --fragment-y: -8px;
  --fragment-rotation: 20deg;
  --fragment-color: #f5cbd5;
}

.balloon-burst b:nth-child(2) {
  --fragment-x: 55px;
  --fragment-y: -53px;
  --fragment-rotation: 58deg;
  --fragment-color: #f7e4a9;
}

.balloon-burst b:nth-child(3) {
  --fragment-x: 10px;
  --fragment-y: -72px;
  --fragment-rotation: 96deg;
  --fragment-color: #cfe8d6;
}

.balloon-burst b:nth-child(4) {
  --fragment-x: -38px;
  --fragment-y: -57px;
  --fragment-rotation: 132deg;
  --fragment-color: #ded2ed;
}

.balloon-burst b:nth-child(5) {
  --fragment-x: -70px;
  --fragment-y: -19px;
  --fragment-rotation: 170deg;
  --fragment-color: #f5cbd5;
}

.balloon-burst b:nth-child(6) {
  --fragment-x: -63px;
  --fragment-y: 34px;
  --fragment-rotation: 206deg;
  --fragment-color: #f7e4a9;
}

.balloon-burst b:nth-child(7) {
  --fragment-x: -22px;
  --fragment-y: 67px;
  --fragment-rotation: 244deg;
  --fragment-color: #cfe8d6;
}

.balloon-burst b:nth-child(8) {
  --fragment-x: 29px;
  --fragment-y: 63px;
  --fragment-rotation: 282deg;
  --fragment-color: #ded2ed;
}

.balloon-burst b:nth-child(9) {
  --fragment-x: 68px;
  --fragment-y: 35px;
  --fragment-rotation: 320deg;
  --fragment-color: #f5cbd5;
}

.balloon-burst b:nth-child(10) {
  --fragment-x: 38px;
  --fragment-y: -23px;
  --fragment-rotation: 346deg;
  --fragment-color: #f7e4a9;
}

@keyframes balloon-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.8);
  }

  7% {
    opacity: 0.58;
  }

  86% {
    opacity: 0.6;
    transform: translate3d(
        var(--side-drift),
        calc(-90vh - 110px),
        0
      )
      scale(1);
  }

  96% {
    opacity: 0.62;
    transform: translate3d(
        calc(var(--side-drift) * 1.12),
        calc(-90vh - 110px),
        0
      )
      scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(
        calc(var(--side-drift) * 1.15),
        calc(-90vh - 110px),
        0
      )
      scale(0.76);
  }
}

@keyframes balloon-body-pop {
  0%,
  86% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }

  89% {
    opacity: 0;
    filter: blur(2px);
    transform: scale(1.26);
  }

  100% {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes balloon-fragment {
  0%,
  86% {
    opacity: 0;
    transform: translate(0, 0) rotate(var(--fragment-rotation));
  }

  88% {
    opacity: 0.92;
  }

  96% {
    opacity: 0;
    transform: translate(var(--fragment-x), var(--fragment-y))
      rotate(calc(var(--fragment-rotation) + 150deg)) scale(0.65);
  }

  100% {
    opacity: 0;
  }
}

.cartoon-sun {
  z-index: 0;
  isolation: isolate;
  overflow: visible;
  opacity: var(--sun-opacity);
  transition:
    top 1s linear,
    left 1s linear,
    opacity 1.4s linear;
}

.cartoon-sun::before {
  z-index: -1;
  inset: -27px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from -1.25deg,
    rgb(255 190 72 / 78%) 0deg 2.5deg,
    transparent 2.5deg 20deg
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent 0 57%,
    #000 59% 92%,
    transparent 94%
  );
  mask: radial-gradient(
    circle,
    transparent 0 57%,
    #000 59% 92%,
    transparent 94%
  );
}

.sun-eye,
.sun-smile {
  z-index: 2;
}

.cartoon-moon {
  position: absolute;
  z-index: 0;
  top: var(--moon-top);
  left: var(--moon-left);
  width: clamp(50px, 8vw, 76px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 5px solid rgb(255 249 210 / 34%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, #fffef0 0 7%, transparent 7.8%),
    linear-gradient(145deg, #fffbdc, #e9dfa9);
  box-shadow:
    0 0 0 11px rgb(240 238 190 / 10%),
    0 0 30px rgb(255 246 186 / 34%);
  opacity: var(--moon-opacity);
  transform: translate(-50%, -50%);
  transition:
    top 1s linear,
    left 1s linear,
    opacity 1.5s linear;
}

.moon-shadow {
  position: absolute;
  z-index: 3;
  inset: -2px;
  border-radius: 50%;
  background: rgb(25 36 67 / 91%);
  transform: translateX(var(--moon-shadow-shift));
  transition: transform 2s linear;
}

.moon-crater {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  background: rgb(169 154 112 / 18%);
  box-shadow: inset 1px 1px 3px rgb(112 99 74 / 14%);
}

.moon-crater-one {
  top: 22%;
  left: 25%;
  width: 14%;
  height: 14%;
}

.moon-crater-two {
  right: 20%;
  bottom: 28%;
  width: 21%;
  height: 21%;
}

.moon-crater-three {
  bottom: 15%;
  left: 31%;
  width: 9%;
  height: 9%;
}

.garden-hero h1 {
  text-shadow:
    0 1px 0 rgb(255 253 247 / 95%),
    0 0 12px rgb(255 253 247 / 92%),
    0 0 30px rgb(255 253 247 / 78%);
}

.sunflower-field {
  opacity: 0.79;
}

.sunflower {
  width: 76px;
  border-radius: 0;
  background: none;
  transform: translateX(-50%) skewX(var(--stem-lean));
  transform-origin: 50% 100%;
  transition: transform 4s ease-in-out;
}

.sunflower::after {
  display: none;
}

.sunflower b {
  top: -39px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 7px 8px rgb(103 83 39 / 18%));
  transform: translateX(calc(-50% + var(--flower-shift)))
    translateY(var(--flower-drop))
    rotate(calc(var(--flower-turn) + var(--flower-droop)));
  transform-origin: 50% 78%;
  transition: transform 5s ease-in-out;
}

body[data-daylight="night"] .garden-header,
body[data-daylight="deep-twilight"] .garden-header {
  border-bottom-color: rgb(255 255 255 / 18%);
}

body[data-daylight="night"] .garden-brand,
body[data-daylight="night"] .garden-header nav a,
body[data-daylight="night"] .garden-header nav button,
body[data-daylight="deep-twilight"] .garden-brand,
body[data-daylight="deep-twilight"] .garden-header nav a,
body[data-daylight="deep-twilight"] .garden-header nav button {
  color: rgb(255 253 247 / 90%);
}

body[data-daylight="night"] .family-messages-heading h2,
body[data-daylight="deep-twilight"] .family-messages-heading h2,
body[data-daylight="night"] .family-messages-heading .eyebrow,
body[data-daylight="deep-twilight"] .family-messages-heading .eyebrow,
body[data-daylight="night"] .scene-controls,
body[data-daylight="deep-twilight"] .scene-controls,
body[data-daylight="night"] .scene-controls #sky-summary,
body[data-daylight="deep-twilight"] .scene-controls #sky-summary {
  color: rgb(255 253 247 / 92%);
  text-shadow: 0 2px 14px rgb(13 24 46 / 38%);
}

@media (max-width: 540px) {
  .family-message-rail {
    height: 190px;
    padding: 6px;
  }

  .family-message-card {
    padding: 11px 10px;
  }

  .scene-controls {
    max-width: 150px;
    grid-template-columns: auto minmax(72px, auto);
  }

  .scene-controls #sky-summary {
    max-width: 150px;
    font-size: 8px;
  }

  .sunflower-field {
    right: -18%;
    left: -18%;
    opacity: 0.73;
  }
}

/* v7: continuous celestial motion, single-stem sunflowers, and falling baskets. */

body {
  transition: none;
}

.cartoon-sun,
.cartoon-moon {
  top: 0;
  left: 0;
  transition: none;
  will-change: transform, opacity;
}

.cartoon-sun {
  transform: translate3d(var(--sun-x), var(--sun-y), 0)
    translate(-50%, -50%);
}

.cartoon-moon {
  transform: translate3d(var(--moon-x), var(--moon-y), 0)
    translate(-50%, -50%);
}

.moon-shadow {
  transition: none;
}

.balloon-cloud {
  opacity: 0;
  animation-name: balloon-rise-v7;
  will-change: transform, opacity;
}

.balloon-cloud i {
  animation-name: balloon-body-pop-v7;
}

.balloon-cloud i::before {
  transform-origin: top center;
}

.balloon-cloud i:nth-child(1)::before {
  height: 85px;
  transform: rotate(-31deg);
}

.balloon-cloud i:nth-child(2)::before {
  height: 103px;
  transform: rotate(1deg);
}

.balloon-cloud i:nth-child(3)::before {
  height: 74px;
  transform: rotate(37deg);
}

.balloon-cloud i:nth-child(4)::before {
  height: 23px;
  transform: rotate(4deg);
}

.balloon-basket {
  animation: balloon-basket-fall var(--rise-duration) linear var(--rise-delay)
    infinite;
  will-change: transform, opacity;
}

.balloon-basket::before,
.balloon-basket::after {
  display: none;
}

.balloon-burst b {
  animation-name: balloon-fragment-v7;
}

@keyframes balloon-rise-v7 {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.8);
  }

  7% {
    opacity: 0.62;
  }

  84%,
  99% {
    opacity: 0.62;
    transform: translate3d(
        var(--side-drift),
        calc(-90vh - 110px),
        0
      )
      scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(
        var(--side-drift),
        calc(-90vh - 110px),
        0
      )
      scale(1);
  }
}

@keyframes balloon-body-pop-v7 {
  0%,
  85% {
    opacity: 1;
    filter: none;
    transform: scale(1);
  }

  87% {
    opacity: 0.9;
    filter: blur(0);
    transform: scale(1.2);
  }

  89%,
  100% {
    opacity: 0;
    filter: blur(2px);
    transform: scale(0.18);
  }
}

@keyframes balloon-fragment-v7 {
  0%,
  86% {
    opacity: 0;
    transform: translate(0, 0) rotate(var(--fragment-rotation));
  }

  88% {
    opacity: 0.96;
  }

  97%,
  100% {
    opacity: 0;
    transform: translate(var(--fragment-x), var(--fragment-y))
      rotate(calc(var(--fragment-rotation) + 180deg)) scale(0.48);
  }
}

@keyframes balloon-basket-fall {
  0%,
  86% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  91% {
    opacity: 0.92;
    transform: translate3d(7px, 28px, 0) rotate(7deg);
  }

  100% {
    opacity: 0;
    transform: translate3d(32px, 155px, 0) rotate(34deg) scale(0.78);
  }
}

.sunflower {
  width: 84px;
  border-radius: 0;
  background: none;
  transform: translateX(-50%);
  transition: none;
}

.sunflower::after,
.sunflower > span::before,
.sunflower > span::after {
  display: none;
}

.sunflower > .sunflower-stem {
  bottom: 0;
  left: 50%;
  width: 8px;
  height: 100%;
  border-radius: 80% 80% 15% 15%;
  background: linear-gradient(90deg, #487b4f, #82b76e 52%, #4d7d4d);
  box-shadow: 0 8px 16px rgb(66 103 66 / 10%);
  animation: sunflower-single-stem-sway var(--sway-duration, 8s)
    ease-in-out var(--sway-delay, 0s) infinite alternate;
  transform-origin: 50% 100%;
  will-change: transform;
}

.sunflower-leaf {
  position: absolute;
  display: block;
  width: 31px;
  height: 17px;
  background: linear-gradient(145deg, #a3cf83, #61965f 72%);
  box-shadow: 0 4px 6px rgb(68 104 65 / 10%);
}

.sunflower-leaf.leaf-one {
  top: 37%;
  right: 2px;
  border-radius: 100% 0 100% 0;
  transform: rotate(25deg);
  transform-origin: right bottom;
}

.sunflower-leaf.leaf-two {
  top: 56%;
  left: 2px;
  border-radius: 0 100% 0 100%;
  transform: rotate(-27deg);
  transform-origin: left bottom;
}

.sunflower-leaf.leaf-three {
  top: 73%;
  right: 2px;
  width: 25px;
  height: 14px;
  border-radius: 100% 0 100% 0;
  transform: rotate(20deg);
  transform-origin: right bottom;
}

.sunflower .sunflower-head {
  top: -43px;
  left: 50%;
  width: 88px;
  height: 88px;
  overflow: visible;
  border-radius: 50%;
  background: none;
  filter: drop-shadow(0 7px 8px rgb(103 83 39 / 20%));
  transform: translateX(-50%) rotate(var(--head-turn));
  transform-origin: 50% 50%;
  transition: none;
}

.sunflower .sunflower-head::before {
  display: none;
}

.sunflower-petal {
  position: absolute;
  z-index: 1;
  top: -5px;
  left: calc(50% - 7px);
  display: block;
  width: 14px;
  height: 34px;
  border: 1px solid rgb(224 157 35 / 54%);
  border-radius: 55% 55% 46% 46%;
  background: linear-gradient(180deg, #ffe071, #f2b836);
  box-shadow: inset 0 -5px 8px rgb(196 125 22 / 10%);
  transform: rotate(var(--petal-angle));
  transform-origin: 50% 49px;
}

.sunflower-petal:nth-child(3n + 1) {
  background: linear-gradient(180deg, #ffdf67, #efb12d);
}

.sunflower-petal:nth-child(3n + 2) {
  width: 13px;
  background: linear-gradient(180deg, #ffe989, #f6c548);
}

.sunflower .sunflower-head::after {
  z-index: 2;
  inset: 25px;
  border: 3px solid #9b662f;
  background:
    radial-gradient(circle at 30% 32%, #e4aa48 0 2px, transparent 2.4px),
    radial-gradient(circle at 68% 36%, #ca8737 0 2px, transparent 2.4px),
    radial-gradient(circle at 47% 67%, #e0a13d 0 2px, transparent 2.4px),
    #754a2d;
}

@keyframes sunflower-single-stem-sway {
  from {
    transform: translateX(-50%)
      rotate(calc(var(--stem-bend) - 1deg))
      skewX(calc(var(--stem-curve) - 0.6deg));
  }

  to {
    transform: translateX(-50%)
      rotate(calc(var(--stem-bend) + 1deg))
      skewX(calc(var(--stem-curve) + 0.6deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .balloon-basket {
    animation: none;
  }

  .sunflower > .sunflower-stem {
    animation: none;
    transform: translateX(-50%) rotate(var(--stem-bend))
      skewX(var(--stem-curve));
  }
}

@media (prefers-reduced-motion: reduce) {
  .balloon-cloud,
  .balloon-cloud i,
  .balloon-burst b,
  .sunflower > span,
  .cartoon-sun::before {
    animation: none;
  }

  .balloon-cloud {
    display: none;
  }

  .cartoon-sun,
  .cartoon-moon,
  .sunflower,
  .sunflower b {
    transition: none;
  }
}

/* v6: connected flowers, international sky, local OFL font, and scroll intent. */

@font-face {
  font-family: "Noto Sans SC Local";
  src: url("/garden/assets/fonts/NotoSansSC-VF.ttf?v=1")
    format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@property --sky-top {
  syntax: "<color>";
  inherits: true;
  initial-value: #bfe8f4;
}

@property --sky-bottom {
  syntax: "<color>";
  inherits: true;
  initial-value: #fff0c9;
}

body,
body * {
  font-family: "Noto Sans SC Local", sans-serif !important;
}

body {
  --sky-foreground: #382f2d;
  --sky-secondary: #526c57;
  font-synthesis: none;
  transition:
    --sky-top 4s linear,
    --sky-bottom 4s linear;
}

.garden-header,
.garden-brand,
.garden-header nav a,
.garden-header nav button,
.family-messages-heading h2,
.family-messages-heading .eyebrow,
.scene-controls,
.scene-controls #sky-summary {
  color: var(--sky-foreground);
  transition:
    color 2.4s linear,
    border-color 2.4s linear,
    text-shadow 2.4s linear;
}

.family-messages-heading .eyebrow,
.scene-controls #sky-summary {
  color: var(--sky-secondary);
}

body[data-sky-contrast="light"] .garden-header,
body[data-sky-contrast="light"] .family-messages-heading h2,
body[data-sky-contrast="light"] .family-messages-heading .eyebrow,
body[data-sky-contrast="light"] .scene-controls,
body[data-sky-contrast="light"] .scene-controls #sky-summary {
  text-shadow: 0 2px 14px rgb(8 18 38 / 42%);
}

.scene-controls {
  display: grid;
  width: min(100%, 330px);
  max-width: 330px;
  grid-template-columns: minmax(92px, 0.78fr) minmax(138px, 1.22fr);
  grid-template-rows: auto auto auto auto;
  gap: 4px 8px;
}

.scene-controls label[for="sky-location"] {
  grid-area: 1 / 1;
  justify-self: start;
}

.scene-controls #sky-location {
  grid-area: 2 / 1;
}

.scene-controls label[for="pastoral-speed"] {
  grid-area: 1 / 2;
  justify-self: start;
}

.scene-controls #pastoral-speed {
  grid-area: 2 / 2;
}

.scene-controls time {
  grid-area: 3 / 1 / 4 / 3;
}

.scene-controls #sky-summary {
  grid-area: 4 / 1 / 5 / 3;
  max-width: 330px;
}

.scene-controls select {
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
}

.balloon-cloud i::before {
  height: 112px;
}

.balloon-cloud i:nth-child(1)::before {
  transform: rotate(-18deg);
}

.balloon-cloud i:nth-child(2)::before {
  transform: rotate(-5deg);
}

.balloon-cloud i:nth-child(3)::before {
  transform: rotate(19deg);
}

.balloon-cloud i:nth-child(4)::before {
  height: 76px;
  transform: rotate(1deg);
}

.balloon-basket {
  position: absolute;
  z-index: 3;
  top: 171px;
  left: 64px;
  width: 34px;
  height: 25px;
  border: 2px solid rgb(116 76 45 / 42%);
  border-radius: 4px 4px 9px 9px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 5px,
      rgb(122 77 43 / 18%) 5px 7px
    ),
    linear-gradient(145deg, #d8a56b, #a66f43);
  box-shadow:
    inset 0 4px rgb(255 226 178 / 24%),
    0 5px 9px rgb(74 48 34 / 14%);
  animation: balloon-body-pop var(--rise-duration) linear var(--rise-delay)
    infinite;
  transform-origin: 50% 0;
}

.balloon-basket::before,
.balloon-basket::after {
  position: absolute;
  bottom: 20px;
  width: 1px;
  height: 42px;
  background: rgb(103 79 58 / 46%);
  content: "";
  transform-origin: bottom;
}

.balloon-basket::before {
  left: 4px;
  transform: rotate(-16deg);
}

.balloon-basket::after {
  right: 4px;
  transform: rotate(16deg);
}

.balloon-basket b {
  position: absolute;
  top: 4px;
  right: 3px;
  left: 3px;
  height: 2px;
  border-radius: 999px;
  background: rgb(255 229 190 / 46%);
  box-shadow:
    0 6px rgb(255 229 190 / 30%),
    0 12px rgb(255 229 190 / 22%);
}

.sunflower {
  width: 8px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, #4e7f52, #7eb06a 52%, #527d4f);
  transform: translateX(-50%) skewX(var(--stem-lean));
}

.sunflower > span {
  bottom: 27%;
  height: 73%;
  animation: sunflower-connected-sway var(--sway-duration, 8s) ease-in-out
    var(--sway-delay, 0s) infinite alternate;
  transform-origin: 50% 100%;
}

.sunflower b {
  top: -39px;
  left: 50%;
  transform: translateX(-50%) rotate(var(--head-nod));
  transform-origin: 50% 50%;
  transition: transform 5s ease-in-out;
}

.sunflower b::before {
  inset: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23ffd65c' stroke='%23e6ac31' stroke-width='1'%3E%3Cellipse cx='50' cy='16' rx='7.5' ry='18'/%3E%3Cellipse cx='50' cy='16' rx='7.5' ry='18' transform='rotate(30 50 50)' fill='%23f6c443'/%3E%3Cellipse cx='50' cy='16' rx='7.5' ry='18' transform='rotate(60 50 50)'/%3E%3Cellipse cx='50' cy='16' rx='7.5' ry='18' transform='rotate(90 50 50)' fill='%23f6c443'/%3E%3Cellipse cx='50' cy='16' rx='7.5' ry='18' transform='rotate(120 50 50)'/%3E%3Cellipse cx='50' cy='16' rx='7.5' ry='18' transform='rotate(150 50 50)' fill='%23f6c443'/%3E%3Cellipse cx='50' cy='16' rx='7.5' ry='18' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='16' rx='7.5' ry='18' transform='rotate(210 50 50)' fill='%23f6c443'/%3E%3Cellipse cx='50' cy='16' rx='7.5' ry='18' transform='rotate(240 50 50)'/%3E%3Cellipse cx='50' cy='16' rx='7.5' ry='18' transform='rotate(270 50 50)' fill='%23f6c443'/%3E%3Cellipse cx='50' cy='16' rx='7.5' ry='18' transform='rotate(300 50 50)'/%3E%3Cellipse cx='50' cy='16' rx='7.5' ry='18' transform='rotate(330 50 50)' fill='%23f6c443'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@keyframes sunflower-connected-sway {
  from {
    transform: rotate(calc(var(--stem-bend) - 1.35deg));
  }

  to {
    transform: rotate(calc(var(--stem-bend) + 1.35deg));
  }
}

.family-message-board,
.family-message-board > *,
.family-message-card,
.family-message-card *,
.chapter,
.chapter-body,
.month-message-summary,
.month-message-list,
.photo-rail-shell,
.photo-card,
.photo-comments,
.photo-comments-content,
.scene-controls {
  min-width: 0;
}

.family-message-card blockquote,
.family-message-context,
.month-message-item,
.month-message-item p,
.photo-card figcaption,
.chapter-note,
.scene-controls #sky-summary,
.comment-item p {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.family-message-card footer,
.month-message-item > div,
.comments-heading {
  flex-wrap: wrap;
}

.family-message-form input,
.family-message-form textarea,
.comment-form input,
.scene-controls select {
  width: 100%;
  max-width: 100%;
}

.family-message-rail,
.month-message-list,
.photo-comments .comment-list,
.photo-rail {
  overscroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.family-message-rail::-webkit-scrollbar,
.month-message-list::-webkit-scrollbar,
.photo-comments .comment-list::-webkit-scrollbar,
.photo-rail::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.photo-rail {
  touch-action: pan-x pan-y;
}

@media (max-width: 540px) {
  .family-messages-heading {
    gap: 10px;
  }

  .scene-controls {
    width: min(56vw, 206px);
    max-width: 206px;
    grid-template-columns: minmax(72px, 0.76fr) minmax(112px, 1.24fr);
    gap: 3px 5px;
  }

  .scene-controls label {
    font-size: 8px;
  }

  .scene-controls select {
    min-height: 29px;
    padding-right: 19px;
    padding-left: 7px;
    font-size: 8px;
  }

  .scene-controls #sky-summary {
    max-width: 206px;
    font-size: 7.5px;
  }
}

/* v8 final-order corrections: keep the continuous-motion layer last. */

body {
  transition: none;
}

.cartoon-sun,
.cartoon-moon {
  top: 0;
  left: 0;
  transition: none;
  will-change: transform, opacity;
}

.cartoon-sun {
  transform: translate3d(var(--sun-x), var(--sun-y), 0)
    translate(-50%, -50%);
}

.cartoon-moon {
  transform: translate3d(var(--moon-x), var(--moon-y), 0)
    translate(-50%, -50%);
}

.moon-shadow {
  transition: none;
}

.balloon-cloud {
  animation-name: balloon-rise-v7;
  will-change: transform, opacity;
}

.balloon-cloud i {
  animation-name: balloon-body-pop-v7;
}

.balloon-cloud i::before {
  transform-origin: top center;
}

.balloon-cloud i:nth-child(1)::before {
  height: 85px;
  transform: rotate(-31deg);
}

.balloon-cloud i:nth-child(2)::before {
  height: 103px;
  transform: rotate(1deg);
}

.balloon-cloud i:nth-child(3)::before {
  height: 74px;
  transform: rotate(37deg);
}

.balloon-cloud i:nth-child(4)::before {
  height: 23px;
  transform: rotate(4deg);
}

.balloon-basket {
  animation: balloon-basket-fall var(--rise-duration) linear var(--rise-delay)
    infinite;
}

.balloon-basket::before,
.balloon-basket::after {
  display: none;
}

.balloon-burst b {
  animation-name: balloon-fragment-v7;
}

.sunflower {
  width: 84px;
  border-radius: 0;
  background: none;
  transform: translateX(-50%);
  transition: none;
}

.sunflower::after,
.sunflower > span::before,
.sunflower > span::after {
  display: none;
}

.sunflower > .sunflower-stem {
  bottom: 0;
  left: 50%;
  width: 8px;
  height: 100%;
  border-radius: 80% 80% 15% 15%;
  background: linear-gradient(90deg, #487b4f, #82b76e 52%, #4d7d4d);
  animation: sunflower-single-stem-sway var(--sway-duration, 8s)
    ease-in-out var(--sway-delay, 0s) infinite alternate;
  transform-origin: 50% 100%;
  will-change: transform;
}

.sunflower .sunflower-head {
  top: -43px;
  left: 50%;
  width: 88px;
  height: 88px;
  overflow: visible;
  border-radius: 50%;
  background: none;
  transform: translateX(-50%) rotate(var(--head-turn));
  transform-origin: 50% 50%;
  transition: none;
}

.sunflower .sunflower-head::before {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .sunflower > .sunflower-stem {
    animation: none;
    transform: translateX(-50%) rotate(var(--stem-bend))
      skewX(var(--stem-curve));
  }
}