/* Flowers — see js/flowers.js for the whole story.

   Two layering modes:
   - .flowers--overlay: fixed over the page, above content (idle egg).
   - .flowers--under: the layer itself takes NO z-index, so it does not
     form a stacking context. That lets its two children escape to the
     nearest one (.content): the cut-outs at z-index -1 paint behind the
     section's text and polaroids, while the petal canvas at 3 drifts
     over them. */

.flowers { pointer-events: none; }

.flowers--overlay { position: fixed; inset: 0; z-index: 85; }
.flowers--under { position: absolute; inset: 0; }
.flowers--under.flowers--fixed { position: fixed; }
/* --ground: the layer runs on past its host down to the bottom of the
   page (js/flowers.js sets its bottom), and clips there, so a bouquet
   ends exactly at the ground and never makes the page scroll further.
   overflow does not create a stacking context, so the cut-outs still
   escape to .content's and paint behind the footer's text. */
.flowers--ground { overflow: clip; }

.flowers__petals {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.flowers--under .flowers__petals { z-index: 3; }

/* ---------- the cut-outs ----------
   Each piece waits just off the corner it is anchored to, then rises in.
   The wrapper owns the entrance; the <img> owns the sway, so the two
   transforms never fight. */
.flowers__piece {
  position: absolute;
  bottom: -3%;
  display: block;
  opacity: 0;
}
.flowers--under .flowers__piece { z-index: -1; }
/* --front: the cut-outs stand in front of the content instead, the way
   Kage's branches cross over its image cards. pointer-events stays off,
   so anything they overlap is still clickable. Petals go one higher so
   they fall in front of the bouquets too. */
.flowers--under.flowers--front .flowers__piece { z-index: 4; }
.flowers--under.flowers--front .flowers__petals { z-index: 5; }
.flowers__piece--left  { left: -2%;  transform: translate3d(-11%, 6%, 0); }
.flowers__piece--right { right: -2%; transform: translate3d(11%, 6%, 0); }

.flowers__piece > img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.94) brightness(0.92);
}
.flowers__piece--left  > img { transform-origin: 0% 100%; }
.flowers__piece--right > img { transform-origin: 100% 100%; }

.flowers.is-blooming .flowers__piece {
  opacity: 1;
  transform: none;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.flowers.is-blooming .flowers__piece--right { transition-delay: 120ms; }

/* One slow breath. Kage's is under half a degree over 21s, which on
   these smaller pieces read as not moving at all; this is a notch more,
   enough to catch at a glance. */
@keyframes flowers-sway {
  from { transform: rotate(-1deg) translate3d(0, 3px, 0); }
  to   { transform: rotate(1deg)  translate3d(0, -10px, 0); }
}
.flowers.is-blooming .flowers__piece > img {
  animation: flowers-sway 12s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

/* Leaning toward the cursor (the `follow` option in js/flowers.js eases
   --lean on each piece, in degrees, positive = toward a pointer above,
   only on the side the pointer is on). It rides on
   the standalone `rotate` property, which composes with the sway's
   `transform` around the same corner instead of replacing it. A stem
   pivots on the corner it enters from, so lifting the tip is a
   counter-clockwise turn on the left and a clockwise one on the right. */
.flowers__piece--left  > img { rotate: calc(var(--lean, 0) * -1deg); }
.flowers__piece--right > img { rotate: calc(var(--lean, 0) * 1deg); }

/* The shake when a bouquet is clicked (js/flowers.js, shakeOnClick): a
   quick side-to-side jostle that settles, Stardew-tree style. It uses the
   standalone `translate` property on the wrapper, so it stacks on the
   entrance transform, the sway and the cursor lean without touching any
   of them. */
@keyframes flowers-rustle {
  0%   { translate: 0 0; }
  15%  { translate: -6px 2px; }
  30%  { translate: 5px -2px; }
  45%  { translate: -4px 1px; }
  60%  { translate: 3px 0; }
  80%  { translate: -1px 0; }
  100% { translate: 0 0; }
}
.flowers__piece.is-rustling { animation: flowers-rustle 0.55s ease-out; }

/* Leaving: sink, soften, fade. */
.flowers.is-retiring .flowers__piece {
  opacity: 0;
  transform: translate3d(0, 8vh, 0) scale(0.98);
  filter: blur(18px);
  transition: opacity 0.68s ease-out, transform 0.78s ease-out, filter 0.78s ease-out;
}

/* ---------- placements ---------- */

/* Idle: the bouquet takes its time, as befits someone who has been
   sitting still for minutes. */
.flowers--idle .flowers__piece { width: clamp(260px, 40vw, 680px); }
.flowers--idle.is-blooming:not(.is-retiring) .flowers__piece { transition-duration: 4s, 5.5s; }

/* About: frames the polaroids from both lower corners. #about is made
   the containing block in about.css. */
.flowers--about .flowers__piece--left  { width: clamp(300px, 42vw, 720px); }
.flowers--about .flowers__piece--right { width: clamp(260px, 34vw, 600px); }
/* Two depths: the right bouquet crosses in front of its polaroid, the
   left one stays behind. In front, the left one rises straight over the
   "wife to neithan" caption and its link; the right polaroid's caption
   sits clear of where its bouquet climbs. */
.flowers--about.flowers--front .flowers__piece--left { z-index: -1; }
/* The slender stem is mostly air, so it can run larger than the full
   bouquet it replaced and still only lay a thin line across the photo.
   Its base stands on the ground (the page's bottom edge, via the layer's
   `ground` option) and it is sized, not shifted, to reach: the tip has to
   climb through the footer and the bed to the seam between photo and
   caption, crossing only the caption strip's empty right side on the way
   and leaving the line of text, emoji included, clear. */
.flowers--about .flowers__piece--slender-right {
  width: clamp(300px, 48vw, 945px);
  right: -13.5%;
  bottom: -4.5%;
}
/* Below ~1700px there is no gutter beside the polaroids for the stem's
   heavy end to stand in, and a stem big enough to reach the photo from
   the ground would run straight through the caption. So here it is a
   corner bouquet instead, growing up through the footer to just under
   the polaroid's lower-right corner. */
@media (max-width: 1700px) {
  .flowers--about .flowers__piece--slender-right {
    width: clamp(240px, 38vw, 640px);
    right: -10%;
    bottom: -4.5%;
  }
}

/* A section that holds a bouquet (Flowers.lost): the containing block,
   clipped at the sides so the bouquet never widens the page, but not
   below, where its layer runs on down through the footer to the ground.
   Neither property makes a stacking context. #about does the same in
   about.css. */
.flowers-host { position: relative; overflow-x: clip; }
/* Tall enough, with the footer under it, to stand the 404 bouquet up.
   The missing-page 404 is only a heading and a line, and would otherwise
   clip the bouquet's top off. Tracks the bouquet's width below (the art
   is 3:2), less roughly the footer's height. */
.flowers-host--lost { min-height: calc(clamp(260px, 40vw, 680px) * 2 / 3 - 6rem); }

/* 404: one bouquet in the corner for whoever got lost. */
.flowers--lost .flowers__piece { width: clamp(260px, 40vw, 680px); }

@media (max-width: 768px) {
  /* The polaroids stack and take the full width, so one bouquet is
     plenty. The dock sits along the bottom here and paints over it. */
  .flowers--about .flowers__piece--right { display: none; }
  .flowers--about .flowers__piece--left,
  .flowers--idle .flowers__piece,
  .flowers--lost .flowers__piece { width: min(92vw, 440px); }
  .flowers-host--lost { min-height: calc(min(92vw, 440px) * 2 / 3 - 6rem); }
}

@media (prefers-reduced-motion: reduce) {
  /* No petals are created at all (js/flowers.js); the cut-outs simply
     fade in where they rest. */
  .flowers__piece,
  .flowers.is-retiring .flowers__piece {
    transform: none !important;
    filter: none !important;
    transition: opacity 1.2s ease !important;
  }
  .flowers__piece > img { animation: none !important; rotate: none !important; }
  .flowers__piece.is-rustling { animation: none !important; }
}

@media print {
  .flowers { display: none; }
}