/* LetYouWow — a tactile paper reveal.
   Original CSS materials. The recipient timeline owns geometry while opening;
   this layer owns the paper, wax, light, hold feedback and quiet idle movement.
   Load after theme.css and recipient-polish.css. */
.lyw-recipient[data-opening="envelope"] {
  --lr-hold-progress: 0;
  --ex-paper: var(--wow-paper, #fffdf9);
  --ex-paper-body: var(--wow-soft, #f0b7d0);
  --ex-paper-light: color-mix(in srgb, var(--wow-soft, #f0b7d0) 43%, white);
  --ex-paper-mid: color-mix(in srgb, var(--wow-soft, #f0b7d0) 85%, var(--wow-accent, #ad4d79));
  --ex-paper-shade: color-mix(in srgb, var(--wow-soft, #f0b7d0) 75%, var(--wow-accent-dark, #89315b));
  --ex-crease: color-mix(in srgb, var(--wow-accent-dark, #89315b) 37%, transparent);
  --ex-shadow: color-mix(in srgb, var(--wow-accent-dark, #89315b) 28%, transparent);
  --ex-wax: var(--wow-accent, #ad4d79);
  --ex-wax-dark: var(--wow-accent-dark, #89315b);
  --ex-warm: #ffe5b1;
  --ex-ring: color-mix(in srgb, var(--wow-paper, #fffdf9) 62%, #e6c388);
}
.lyw-recipient[data-opening="envelope"][data-theme="night"] {
  --ex-paper-light: #646572;
  --ex-paper-body: #4b4c59;
  --ex-paper-mid: #3a3b48;
  --ex-paper-shade: #252630;
  --ex-crease: #11111890;
  --ex-shadow: #00000066;
  --ex-wax: #5a5866;
  --ex-wax-dark: #272631;
}
.lyw-recipient[data-opening="envelope"]:is([data-scene="opener"],[data-scene="opening"]) .lr-stage {
  overflow: hidden;
}
.lyw-recipient[data-opening="envelope"] .lr-opener {
  position: relative;
  isolation: isolate;
  gap: 24px;
  padding-block: 28px 38px;
}
.lyw-recipient[data-opening="envelope"]:not(.is-compact) .lr-opening-art {
  width: min(344px, calc(100cqw - 62px));
  height: auto;
  aspect-ratio: 1.42;
  margin: 10px 0 20px;
  perspective: 1100px;
  perspective-origin: 50% 36%;
}
.lyw-recipient[data-opening="envelope"] .lr-opening-art::before {
  inset: 50% -10% -19%;
  border: 0;
  background: radial-gradient(ellipse, var(--ex-shadow) 0%, transparent 67%);
  filter: blur(9px);
  opacity: .58;
  transform: scale(.8, .5);
  animation: ex-shadow-breathe 5.8s ease-in-out infinite;
}
.lyw-recipient[data-opening="envelope"] .lr-opening-art::after {
  display: none;
}
.lyw-recipient[data-opening="envelope"]:is([data-scene="opener"],[data-scene="opening"]) .lr-float-heart {
  opacity: .045;
  animation: none;
}
/* A folded object, not an icon. Every face gets its own highlight and grain. */
.lyw-recipient[data-opening="envelope"] .lr-envelope {
  inset: 20% 0 auto;
  height: 75%;
  overflow: visible;
  border-radius: 9px;
  outline-offset: 14px;
  filter: none;
  transform-origin: 50% 64%;
  transform: translate3d(0,0,0) rotate(-4deg);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: filter .25s ease;
}
.lyw-recipient[data-opening="envelope"][data-scene="opener"]:not(.is-holding):not(.is-hold-cancelling):not(.is-hold-complete) .lr-envelope:not(.is-rive-ready) {
  animation: ex-envelope-float 5.8s cubic-bezier(.45,0,.25,1) infinite;
}
.lyw-recipient[data-opening="envelope"] .lr-envelope-back {
  border-radius: 9px;
  border: 1px solid var(--ex-crease);
  background: linear-gradient(155deg, var(--ex-paper-shade), var(--ex-paper-mid) 70%);
  box-shadow: 0 3px 0 -1px var(--ex-paper-shade), 0 5px 0 -2px var(--ex-crease), 0 20px 28px -12px var(--ex-shadow), inset 0 1px 0 #ffffff88;
}
.lyw-recipient[data-opening="envelope"] .lr-envelope-back::before {
  content: "";
  position: absolute;
  inset: 7px 8px;
  border: 1px solid #ffffff25;
  border-radius: 4px;
  pointer-events: none;
}
.lyw-recipient[data-opening="envelope"] .lr-envelope-front {
  border-radius: 8px;
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(147deg, transparent 49.3%, var(--ex-crease) 49.7%, #ffffff82 50.05%, transparent 50.45%),
    linear-gradient(33deg, var(--ex-paper-mid) 49.45%, var(--ex-crease) 49.85%, #ffffff80 50.1%, var(--ex-paper-light) 50.5%);
  box-shadow: inset 0 -1px 0 var(--ex-crease), inset 1px 0 0 #ffffff6b, inset -1px 0 0 #ffffff3d;
}
.lyw-recipient[data-opening="envelope"] .lr-envelope-front::after,
.lyw-recipient[data-opening="envelope"] .lr-envelope-flap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .21;
  background: repeating-linear-gradient(18deg, #ffffff5c 0 .65px, transparent .65px 3px), repeating-linear-gradient(101deg, #0000000c 0 .5px, transparent .5px 4px);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.lyw-recipient[data-opening="envelope"] .lr-envelope-flap {
  border-radius: 8px 8px 0 0;
  background: linear-gradient(171deg, var(--ex-paper-light) 0%, var(--ex-paper-body) 56%, var(--ex-paper-mid) 100%);
  box-shadow: inset 0 1px 0 #ffffffc2;
  backface-visibility: hidden;
  will-change: transform;
}
.lyw-recipient[data-opening="envelope"] .lr-envelope-flap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(149deg, transparent 49.2%, #ffffff75 50%, transparent 50.8%), linear-gradient(31deg, transparent 49.2%, var(--ex-crease) 50%, transparent 50.8%);
  opacity: .42;
  pointer-events: none;
}
.lyw-recipient[data-opening="envelope"] .lr-envelope-note {
  inset: 7% 6% 5%;
  border-radius: 5px;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--wow-line, #e5c6d7) 55%, white);
  color: var(--wow-accent, #ad4d79);
  background: linear-gradient(105deg, color-mix(in srgb, var(--ex-paper) 96%, #e8dcc7), var(--ex-paper) 28%, #ffffff 64%, var(--ex-paper));
  box-shadow: 0 -4px 12px #47313e13, 0 1px 1px #fff, inset 0 0 0 5px var(--ex-paper);
}
.lyw-recipient[data-opening="envelope"] .lr-envelope-note::after {
  position: absolute;
  inset: 7px;
  content: "";
  border: 1px solid color-mix(in srgb, var(--wow-accent, #ad4d79) 13%, transparent);
  border-radius: 2px;
  pointer-events: none;
}
.lyw-recipient[data-opening="envelope"] .lr-note-words {
  max-width: 88%;
  color: var(--wow-accent-dark, #89315b);
  font-size: clamp(20px, 6cqw, 28px);
  line-height: 1.16;
  text-wrap: balance;
}
.lyw-recipient[data-opening="envelope"] .lr-note-rule {
  width: 38px;
  background: color-mix(in srgb, var(--wow-accent, #ad4d79) 28%, transparent);
}
/* Warm light originates inside the paper; the larger aura never blocks touch. */
.lyw-recipient[data-opening="envelope"] .lr-envelope-glow {
  position: absolute;
  z-index: -1;
  inset: -34% -19% -48%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #fff3cecf 0%, color-mix(in srgb, var(--wow-soft, #f0b7d0) 60%, #ffe7b5) 32%, transparent 69%);
  opacity: calc(.12 + var(--lr-hold-progress) * .7);
  transform: scale(calc(.8 + var(--lr-hold-progress) * .34));
  filter: blur(18px);
  pointer-events: none;
}
.lyw-recipient[data-opening="envelope"] .lr-envelope-inner-light {
  position: absolute;
  z-index: 2;
  inset: -30% -5% 7%;
  border-radius: 45%;
  background: radial-gradient(ellipse at 50% 65%, #fffef2 0, #fff2bc8c 31%, transparent 67%);
  opacity: calc(var(--lr-hold-progress) * .68);
  mix-blend-mode: screen;
  filter: blur(14px);
  pointer-events: none;
}
/* Wax is drawn on independent faces so the two halves can leave naturally. */
.lyw-recipient[data-opening="envelope"] .lr-envelope-seal {
  width: 54px;
  height: 54px;
  top: 42%;
  border: 0;
  border-radius: 48% 45% 49% 46%;
  background: none;
  box-shadow: none;
  color: #fff4de;
  transform: translateX(-50%);
  overflow: visible;
}
.lyw-recipient[data-opening="envelope"] .lr-envelope-seal::before,
.lyw-recipient[data-opening="envelope"] .lr-envelope-seal::after { display: none; }
.lyw-recipient[data-opening="envelope"] :is(.lr-seal-face,.lr-seal-shard) {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 48% 45% 49% 46%;
  border: 1px solid color-mix(in srgb, var(--ex-wax-dark) 65%, var(--ex-paper));
  background: radial-gradient(ellipse at 32% 15%, color-mix(in srgb, var(--ex-wax) 70%, white), transparent 53%), linear-gradient(145deg,var(--ex-wax),var(--ex-wax-dark));
  box-shadow: 0 4px 3px -1px #3f243930, 0 7px 12px -5px #3b1f3d70, inset 0 1px 1px #ffffff80, inset 0 0 0 3px #ffffff13, inset 0 -2px 4px #29112445;
}
.lyw-recipient[data-opening="envelope"] :is(.lr-seal-face,.lr-seal-shard)::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #ffffff29;
  border-radius: 50%;
  box-shadow: 0 1px 0 #38102638, inset 0 1px 0 #38102630;
}
.lyw-recipient[data-opening="envelope"] .lr-seal-face::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: linear-gradient(138deg, #fff5 0%, transparent 42%);
  opacity: .5;
}
.lyw-recipient[data-opening="envelope"] .lr-seal-shard { opacity: 0; pointer-events: none; }
.lyw-recipient[data-opening="envelope"] .lr-seal-shard.is-left { clip-path: polygon(0 0, 53% 0, 47% 27%, 55% 52%, 46% 70%, 52% 100%, 0 100%); }
.lyw-recipient[data-opening="envelope"] .lr-seal-shard.is-right { clip-path: polygon(53% 0, 100% 0, 100% 100%, 52% 100%, 46% 70%, 55% 52%, 47% 27%); }
.lyw-recipient[data-opening="envelope"] .lr-seal-heart {
  width: 23px;
  height: 23px;
  color: #ffe8cf;
  filter: drop-shadow(0 1px 0 #ffffff3b) drop-shadow(0 -1px 0 #39153059);
  opacity: .92;
}
.lyw-recipient[data-opening="envelope"] .lr-hold-ring {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  display: block;
  overflow: visible;
  transform: rotate(-90deg);
  pointer-events: none;
  opacity: calc(.34 + var(--lr-hold-progress) * .66);
  transition: opacity .25s ease;
}
.lyw-recipient[data-opening="envelope"] .lr-hold-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lyw-recipient[data-opening="envelope"] .lr-hold-ring-track {
  stroke: color-mix(in srgb, var(--wow-accent, #ad4d79) 24%, transparent);
  stroke-width: 1;
  fill: none;
}
.lyw-recipient[data-opening="envelope"] .lr-hold-ring-progress {
  fill: none;
  stroke: var(--ex-ring);
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--lr-hold-progress) * 100);
  filter: drop-shadow(0 0 3px #fff5b9cc);
}
.lyw-recipient[data-opening="envelope"].is-holding .lr-envelope,
.lyw-recipient[data-opening="envelope"].is-hold-cancelling .lr-envelope {
  animation: none;
  transform: translateY(calc(var(--lr-hold-progress) * -6px)) rotate(calc(-4deg + var(--lr-hold-progress) * 4deg)) scale(calc(1 + var(--lr-hold-progress) * .025));
}
.lyw-recipient[data-opening="envelope"].is-hold-complete:not(.is-opening) .lr-envelope { animation: none; transform: translateY(-6px) rotate(0) scale(1.025); }
.lyw-recipient[data-opening="envelope"].is-holding .lr-opening-art::before {
  animation: none;
  opacity: calc(.58 - var(--lr-hold-progress) * .25);
}
.lyw-recipient[data-opening="envelope"].is-holding .lr-seal-face {
  box-shadow: 0 4px 3px -1px #3f243930, 0 0 calc(10px + var(--lr-hold-progress) * 20px) color-mix(in srgb,var(--wow-soft, #f0b7d0) 64%,transparent), inset 0 1px 1px #ffffff80, inset 0 0 0 3px #ffffff18;
}
/* The hold label is the single clear instruction. A fine bottom line charges. */
.lyw-recipient[data-opening="envelope"] .lr-open-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  width: fit-content;
  max-width: calc(100% - 16px);
  min-height: 50px;
  padding: 12px 22px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--wow-accent, #ad4d79) 23%,transparent);
  border-radius: 999px;
  background: color-mix(in srgb,var(--wow-paper, #fffdf9) 88%,transparent);
  color: var(--wow-accent-dark, #89315b);
  box-shadow: 0 6px 18px -10px var(--ex-shadow), inset 0 1px 0 #ffffffba;
  font-size: 13px;
  font-weight: 550;
  letter-spacing: .01em;
  line-height: 1.35;
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
  transition: border-color .25s, box-shadow .25s;
}
.lyw-recipient[data-opening="envelope"] .lr-open-hint::before { display: none; }
.lyw-recipient[data-opening="envelope"] .lr-open-hint::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 18px;
  right: 18px;
  width: auto;
  height: 2px;
  margin: 0;
  border-radius: 3px;
  background: var(--wow-accent, #ad4d79);
  opacity: .65;
  transform: scaleX(var(--lr-hold-progress));
  transform-origin: left center;
}
.lyw-recipient[dir="rtl"][data-opening="envelope"] .lr-open-hint::after { transform-origin: right center; }
.lyw-recipient[data-opening="envelope"] .lr-open-hint:hover { background: var(--ex-paper); box-shadow: 0 7px 22px -9px var(--ex-shadow); }
.lyw-recipient[data-opening="envelope"] .lr-open-arrow { font-size: 17px; opacity: .65; }
.lyw-recipient[data-opening="envelope"].is-holding .lr-open-hint { border-color: var(--wow-accent, #ad4d79); box-shadow: 0 4px 20px -8px var(--ex-shadow); }
.lyw-recipient[data-opening="envelope"][data-theme="night"] .lr-open-hint { color: #f5eee3; background: #272932; border-color: #777381; }
/* CSS fallback follows the same beginning, release and paper emergence as GSAP. */
.lyw-recipient[data-opening="envelope"].is-opening:not(.has-gsap) .lr-envelope { animation: ex-envelope-release 1.95s cubic-bezier(.22,.7,.22,1) both; }
.lyw-recipient[data-opening="envelope"].is-opening:not(.has-gsap) .lr-envelope-flap { animation: ex-flap-release .7s .21s cubic-bezier(.4,0,.16,1) both; }
.lyw-recipient[data-opening="envelope"].is-opening:not(.has-gsap) .lr-envelope-note { animation: ex-paper-emerge 1.4s .46s cubic-bezier(.22,.7,.22,1) both; }
.lyw-recipient[data-opening="envelope"].is-opening:not(.has-gsap) .lr-envelope-seal { animation: ex-wax-release .5s ease both; }
.lyw-recipient[data-opening="envelope"].is-opening:not(.has-gsap) .lr-envelope-inner-light { animation: ex-inner-bloom 1.65s ease both; }
.lyw-recipient[data-opening="envelope"].is-opening:not(.has-gsap) .lr-envelope-glow { animation: ex-aura-bloom 1.9s ease both; }
.lyw-recipient[data-opening="envelope"].is-opening .lr-hold-ring { opacity: 0; transition: opacity .12s; }
.lyw-recipient[data-opening="envelope"] .lr-letter {
  border-radius: 8px;
  background: linear-gradient(105deg, color-mix(in srgb,var(--ex-paper) 97%,#e8dcc7),var(--ex-paper) 32%,#fff 72%,var(--ex-paper));
  box-shadow: 0 18px 38px -23px var(--ex-shadow), 0 2px 3px #3a23350a;
}
.lyw-recipient[data-opening="envelope"] .lr-letter::before { border-radius: 3px; border-color: color-mix(in srgb,var(--wow-accent,#ad4d79) 14%,transparent); }
/* A compact, explicit sound control replaces the unrelated animation pause. */
.lyw-recipient > .lr-sound-toggle {
  position: absolute;
  z-index: 20;
  inset-block-start: 12px;
  inset-inline-end: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 38px;
  min-height: 38px;
  max-width: 142px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb,var(--wow-accent, #ad4d79) 17%,transparent);
  border-radius: 999px;
  background: color-mix(in srgb,var(--wow-paper, #fffdf9) 90%,transparent);
  color: var(--wow-accent-dark, #89315b);
  box-shadow: 0 2px 6px #34233606;
  font-size: 11px;
  line-height: 1.3;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lyw-recipient > .lr-sound-toggle svg { width: 16px; height: 16px; flex: none; }
.lyw-recipient > .lr-sound-toggle.is-muted .lr-sound-waves { display: none; }
.lyw-recipient > .lr-sound-toggle:not(.is-muted) .lr-sound-off { display: none; }
.lyw-recipient > .lr-sound-toggle[aria-pressed="true"] { border-color: color-mix(in srgb,var(--wow-accent, #ad4d79) 40%,transparent); }
.lyw-recipient:not(.is-compact):has(> .lr-sound-toggle) .lr-header { min-height: 62px; padding-inline-end: 165px; }
.lyw-recipient.is-compact:not(.has-sound-control) > .lr-sound-toggle { display: none; }
.lyw-recipient.is-compact.has-sound-control > .lr-sound-toggle { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 8px; gap: 0; inset-block-start: 6px; inset-inline-end: 7px; }
.lyw-recipient.is-compact.has-sound-control > .lr-sound-toggle .lr-sound-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.lyw-recipient[data-theme="night"] > .lr-sound-toggle { color: #ede8f2; background: #292934eb; border-color: #666271; }
.lyw-recipient[data-theme="night"] .lr-intro,
.lyw-recipient[data-theme="night"] .lr-intro :is(.lr-eyebrow,.lr-kicker) { color: #c6bcca; }
.lyw-recipient[data-theme="night"] .lr-intro .lr-name { color: #f1eaf3; }
/* The hero has room for the gesture; the editor keeps an honest smaller stage. */
#hero-preview .lyw-recipient[data-opening="envelope"] .lr-opener { padding: 10px 8px 14px; gap: 18px; }
#hero-preview .lyw-recipient[data-opening="envelope"] .lr-opening-art { width: min(310px, calc(100cqw - 40px)); height: auto; aspect-ratio: 1.42; margin: 0 0 5px; }
#hero-preview .lyw-recipient[data-opening="envelope"] .lr-envelope-seal { width: 49px; height: 49px; }
#hero-preview .lyw-recipient[data-opening="envelope"] .lr-seal-heart { width: 22px; height: 22px; }
#hero-preview .lyw-recipient[data-opening="envelope"] .lr-open-hint { min-height: 43px; font-size: 12px; padding: 10px 17px; }
#hero-preview .lyw-recipient[data-opening="envelope"] .lr-note-words { font-size: 25px; }
#live-preview .lyw-recipient[data-opening="envelope"] .lr-opener { padding: 12px 12px 17px; gap: 12px; }
#live-preview .lyw-recipient[data-opening="envelope"] .lr-opening-art { width: min(245px, calc(100cqw - 56px), 74cqh); height: auto; aspect-ratio: 1.42; margin: 0; }
#live-preview .lyw-recipient[data-opening="envelope"] .lr-envelope-seal { width: 42px; height: 42px; }
#live-preview .lyw-recipient[data-opening="envelope"] .lr-seal-heart { width: 18px; height: 18px; }
#live-preview .lyw-recipient[data-opening="envelope"] .lr-open-hint { min-height: 38px; padding: 8px 14px; font-size: 11px; }
#live-preview .lyw-recipient[data-opening="envelope"] .lr-note-words { font-size: 20px; }
#live-preview .lyw-recipient[data-opening="envelope"] .lr-intro { display: none; }
@media (max-width:740px) {
  .landing .hero-visual #hero-preview:has(.lyw-recipient[data-opening="envelope"]:is([data-scene="opener"],[data-scene="opening"])) { height: 300px; }
  #hero-preview .lyw-recipient[data-opening="envelope"] .lr-opening-art { width: min(300px, calc(100cqw - 34px)); }
}
/* Leave the primary action in view on shorter phones without shrinking the wax
   seal or the touch target. An opened letter keeps its natural content height. */
@media (max-width:740px) and (max-height:760px) {
  .landing .hero-visual #hero-preview:has(.lyw-recipient[data-opening="envelope"]:is([data-scene="opener"],[data-scene="opening"])) { height: clamp(250px, calc(100svh - 455px), 260px); }
  #hero-preview .lyw-recipient[data-opening="envelope"] .lr-opener { gap: 8px; padding: 4px 8px 6px; }
  #hero-preview .lyw-recipient[data-opening="envelope"] .lr-opening-art { width: min(260px, calc(100cqw - 34px)); }
}
/* A few small paper ribbons accompany the heart silhouettes. The existing
   particle count, trajectories and animation-end cleanup remain unchanged. */
.lyw-recipient .lr-burst-heart.lr-confetti-piece {
  width: 8px;
  height: 13px;
  border-radius: 1px 2px 1px 2px;
  -webkit-mask: none;
  mask: none;
  background: linear-gradient(135deg, var(--wow-soft, #f0b7d0), var(--wow-accent, #ad4d79));
  box-shadow: inset 1px 1px 0 #ffffff80, 0 1px 2px #38242f20;
  filter: none;
  transform-style: preserve-3d;
  animation-name: ex-paper-confetti;
  animation-timing-function: cubic-bezier(.15,.6,.28,1);
}
.lyw-recipient .lr-burst-heart.lr-confetti-piece[data-confetti-tone="gold"] { background: linear-gradient(135deg, #ffe7ac, #c79e5d); }
.lyw-recipient .lr-burst-heart.lr-confetti-piece[data-confetti-tone="light"] { background: linear-gradient(135deg, #fffef6, color-mix(in srgb, var(--wow-soft, #f0b7d0) 65%, white)); }
.lyw-recipient.is-compact .lr-burst-heart.lr-confetti-piece { width: 6px; height: 10px; }
@keyframes ex-paper-confetti {
  0% { opacity: 0; transform: translate(-50%,0) rotate(0) rotateX(0) scale(.3); }
  12% { opacity: .95; }
  62% { opacity: 1; transform: translate(calc(var(--burst-x) * .84), var(--burst-y)) rotate(var(--burst-rotate)) rotateX(calc(var(--confetti-turn, 720deg) * .6)) scale(1); }
  100% { opacity: 0; transform: translate(var(--burst-x), calc(var(--burst-y) + 68px)) rotate(calc(var(--burst-rotate) + 65deg)) rotateX(var(--confetti-turn, 720deg)) scale(.85); }
}
@container (max-width:340px) {
  .lyw-recipient[data-opening="envelope"]:not(.is-compact) .lr-opening-art { width: calc(100cqw - 52px); }
  .lyw-recipient[data-opening="envelope"]:not(.is-compact) .lr-envelope-seal { width: 49px; height: 49px; }
  .lyw-recipient[data-opening="envelope"] .lr-open-hint { font-size: 12px; padding-inline: 18px; }
  .lyw-recipient > .lr-sound-toggle { inset-inline-end: 10px; padding-inline: 9px; font-size: 10px; }
}
@container (max-height:500px) {
  .lyw-recipient[data-opening="envelope"]:not(.is-compact) .lr-opener { gap: 15px; padding-block: 14px 22px; }
  .lyw-recipient[data-opening="envelope"]:not(.is-compact) .lr-opening-art { width: min(290px, calc(100cqw - 62px), 65cqh); margin-block: 0 8px; }
  .lyw-recipient[data-opening="envelope"] .lr-name { font-size: 27px; }
}
@keyframes ex-envelope-float {
  0%,100% { transform: translate3d(0,2px,0) rotate(-4deg); }
  48% { transform: translate3d(0,-7px,0) rotate(-2.5deg); }
}
@keyframes ex-shadow-breathe {
  0%,100% { opacity: .58; transform: scale(.82,.52); }
  48% { opacity: .35; transform: scale(.91,.52); }
}
@keyframes ex-envelope-release {
  0% { transform: translateY(-6px) rotate(0); opacity: 1; }
  42% { transform: translateY(8%) rotate(0) scale(1.05); opacity: 1; }
  84% { transform: translateY(12%) rotate(0) scale(1.12); opacity: 1; }
  100% { transform: translateY(16%) rotate(0) scale(1.12); opacity: 0; }
}
@keyframes ex-flap-release {
  0% { transform: rotateX(0); z-index: 5; }
  49% { z-index: 5; }
  50%,100% { z-index: 1; transform: rotateX(-180deg); }
}
@keyframes ex-wax-release {
  0% { transform: translateX(-50%) scale(1); opacity: 1; }
  42% { transform: translate(-50%,-5px) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%,1px) scale(1.23); opacity: 0; }
}
@keyframes ex-paper-emerge {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  55% { transform: translateY(-87%) scale(1); opacity: 1; }
  88% { transform: translateY(-79%) scale(1.95); opacity: 1; }
  100% { transform: translateY(-74%) scale(2.15); opacity: 0; }
}
@keyframes ex-inner-bloom {
  0% { opacity: .55; transform: scale(.8); }
  40% { opacity: .95; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes ex-aura-bloom {
  0% { opacity: .75; transform: scale(1.1); }
  45% { opacity: .75; transform: scale(1.65); }
  100% { opacity: 0; transform: scale(1.85); }
}
/* Reduced-motion keeps the gesture and feedback without moving the viewport. */
@media (prefers-reduced-motion:reduce) {
  .lyw-recipient[data-opening="envelope"] .lr-envelope,
  .lyw-recipient[data-opening="envelope"] .lr-opening-art::before { animation: none !important; transform: none; }
  .lyw-recipient[data-opening="envelope"] :is(.lr-envelope-glow,.lr-envelope-inner-light) { filter: none; }
  .lyw-recipient[data-opening="envelope"] .lr-open-hint { transition: none; }
}
.lyw-recipient.is-reduced[data-opening="envelope"] .lr-envelope,
.lyw-recipient.is-reduced[data-opening="envelope"] .lr-opening-art::before { animation: none !important; }
