/* Load after styles.css and breeze.css. Existing .letter-paws positioning stays intact. */
.letter-paws {
  display: block;
  aspect-ratio: 2 / 1;
  height: auto;
  line-height: 0;
}

.letter-paws > .letter-paw {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  animation: none;
}

/* Each image shows only its own half of the same pair. The clear center gap stays clear. */
.letter-paw--left {
  clip-path: inset(0 50% 0 0);
  transform-origin: 30% 0;
}

.letter-paw--right {
  clip-path: inset(0 0 0 50%);
  transform-origin: 70% 0;
}

html.enhanced body[data-state="open"] .letter-paw--left {
  animation: vivi-left-toe-tap 18s ease-in-out 2s infinite;
}

html.enhanced body[data-state="open"] .letter-paw--right {
  animation: vivi-right-toe-tap 22s ease-in-out 6s infinite;
}

@keyframes vivi-left-toe-tap {
  0%, 7%, 20%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  11% { transform: translate3d(-1px, -2px, 0) rotate(-1.6deg); }
  15% { transform: translate3d(1px, 1px, 0) rotate(.7deg); }
}

@keyframes vivi-right-toe-tap {
  0%, 5%, 17%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  9% { transform: translate3d(1px, -2px, 0) rotate(1.7deg); }
  13% { transform: translate3d(-1px, 1px, 0) rotate(-.6deg); }
}

/* Retire the old, unrelated recurring oak overlay when its markup is removed. */
.page-leaf-flight {
  display: none !important;
}

/* The marked path IS one of the existing printed leaves. It leaves no duplicate
   behind, and its original SVG coordinates provide the exact starting point. */
.sprig-left--living {
  overflow: visible;
  pointer-events: none;
  --leaf-departure-scale: 1.8;
  --leaf-departure-distance: calc(140vw + 100px);
}

.sprig-leaf--departing {
  transform-box: fill-box;
  transform-origin: 12% 95%;
  pointer-events: none;
  animation: none;
}

/* The same detailed leaf artwork belongs to the print and to its flight. */
.sprig--detailed {
  width: 94px;
  height: 238px;
  opacity: 1;
  mix-blend-mode: normal;
  overflow: visible;
  pointer-events: none;
}
.sprig--detailed .botanical-leaf > image { opacity: .96; }
.sprig--detailed .sprig-leaf--departing > image { opacity: 1; }
.sprig-left--living.sprig--detailed { --leaf-departure-scale: 1.8; }
.baby-booties {
  display: block;
  width: 116px;
  height: auto;
  margin: 0 auto 20px;
  pointer-events: none;
}

/* Root opts in ONLY after a real envelope activation completes. It must not set
   this flag for initial return visits, skip, reduced motion, or deep links. */
html.enhanced body[data-state="open"][data-leaf-departure="true"] .sprig-leaf--departing {
  animation: vivi-printed-leaf-departure 4.8s cubic-bezier(.24,.42,.48,1) .7s 1 both;
}

html.enhanced body[data-state="open"][data-leaf-departure="true"] .sprig-left--living {
  z-index: 3;
}

/* The SVG deliberately lets its leaf leave the print; clip only horizontal
   document overflow so the departed path cannot create a sideways scrollbar. */
html:has(body[data-leaf-departure="true"]),
body[data-leaf-departure="true"] {
  overflow-x: clip;
}

/* One peel, soft flutter, and departure: 0.7–5.5s after opening, never a loop.
   The departing leaf grows to about 64px on desktop and 58px on a phone. */
@keyframes vivi-printed-leaf-departure {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(1);
  }
  6% {
    opacity: 1;
    transform: translate(5px, -5px) rotate(8deg) scale(1.06);
  }
  18% {
    opacity: 1;
    transform: translate(calc(var(--leaf-departure-distance) * .09), -35px) rotate(-18deg) scale(calc(var(--leaf-departure-scale) * .92));
  }
  35% {
    opacity: 1;
    transform: translate(calc(var(--leaf-departure-distance) * .27), -105px) rotate(42deg) scale(var(--leaf-departure-scale));
  }
  55% {
    opacity: 1;
    transform: translate(calc(var(--leaf-departure-distance) * .5), -67px) rotate(128deg) scale(var(--leaf-departure-scale));
  }
  76% {
    opacity: 1;
    transform: translate(calc(var(--leaf-departure-distance) * .76), -150px) rotate(220deg) scale(var(--leaf-departure-scale));
  }
  92% {
    opacity: .75;
    transform: translate(calc(var(--leaf-departure-distance) * .95), -138px) rotate(300deg) scale(var(--leaf-departure-scale));
  }
  100% {
    opacity: 0;
    transform: translate(var(--leaf-departure-distance), -180px) rotate(335deg) scale(var(--leaf-departure-scale));
  }
}

html[data-motion="paused"] .letter-paw,
html[data-hidden="true"] .letter-paw,
html[data-motion="paused"] .sprig-leaf--departing,
html[data-hidden="true"] .sprig-leaf--departing {
  animation-play-state: paused !important;
}

@media (min-width: 601px) and (max-width: 800px) {
  .sprig-left--living { --leaf-departure-scale: 2.3; }
}

@media (max-width: 600px) {
  .sprig-left--living {
    --leaf-departure-scale: 3.2;
    --leaf-departure-distance: calc(270vw + 100px);
  }
  .sprig--detailed { width: 60px; height: 166px; }
  .sprig-left--living.sprig--detailed {
    left: -14px;
    --leaf-departure-scale: 2.25;
    --leaf-departure-distance: calc(190vw + 100px);
  }
  .sprig-right--detailed { right: -14px; }
  .baby-booties { width: 104px; margin-bottom: 17px; }
}

@media (max-width: 374px) {
  .sprig--detailed { width: 56px; }
  .sprig-left--living.sprig--detailed { left: -12px; }
  .sprig-right--detailed { right: -12px; }
}

@media (prefers-reduced-motion: reduce) {
  .letter-paws > .letter-paw,
  .sprig-leaf--departing { animation: none !important; }
}