/* ===========================================================
   First Mother's Day · firstmothersday.ohanagee.com
   Palette: baby blue + tropical greens, ohana / Hawaiian.
   =========================================================== */

:root {
  --sky:        #CFE3F2;
  --baby:       #A9CDE6;
  --ocean:      #6FA9CC;
  --deep:       #4A7FA0;
  --monstera:   #2F5B3E;
  --palm:       #4A7C59;
  --sage:       #9DBFA5;
  --lime:       #B8D8A2;
  --cream:      #FBFAF5;
  --warm:       #FFFEFA;
  --paper:      #FDFAF1;
  --coral:      #F0A6A6;
  --ink:        #2A3B47;
  --ink-soft:   #4F6677;

  --shadow-sm: 0 2px 6px rgba(47,91,62,.10);
  --shadow-md: 0 8px 28px rgba(47,91,62,.14);
  --shadow-lg: 0 20px 60px rgba(47,91,62,.18);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --hand:  "Caveat", "Bradley Hand", cursive;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--sky) 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 30%, rgba(184,216,162,.35) 0%, transparent 55%),
    radial-gradient(800px 600px at 0% 70%, rgba(169,205,230,.4) 0%, transparent 55%),
    linear-gradient(180deg, var(--warm) 0%, var(--cream) 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

/* ============================ utility ============================ */

.script  { font-family: var(--serif); font-style: italic; font-weight: 500; }
.hand    { font-family: var(--hand); font-weight: 400; }
.tiny    { font-size: 12px; color: var(--ink-soft); letter-spacing: .04em; }
.kicker  { font-family: var(--hand); font-size: 24px; color: var(--deep); margin: 0 0 4px; letter-spacing: .02em; }

/* ============================ background art ============================ */

.leaf-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.plant {
  position: absolute;
  filter: drop-shadow(0 22px 34px rgba(47,91,62,.12));
  opacity: .2;
}
.plant-monstera { opacity: .18; }
.plant-taro { opacity: .22; }
.plant-1 { top: -78px; left: -118px; width: 350px; transform: rotate(-28deg); }
.plant-2 { top: 34vh; right: -130px; width: 360px; transform: rotate(23deg); }
.plant-3 { bottom: -70px; left: 24vw; width: 280px; transform: rotate(166deg); }

@media (min-width: 800px) {
  .plant-1 { width: 530px; left: -165px; }
  .plant-2 { width: 610px; right: -215px; }
  .plant-3 { width: 430px; }
}

/* drifting petals (DOM-injected by script.js) */
.petals { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.petal {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 60% 40% 60% 40%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--baby) 70%, var(--ocean));
  opacity: .55;
  animation: drift linear infinite;
}
@keyframes drift {
  0%   { transform: translate3d(0,-10vh,0) rotate(0); }
  100% { transform: translate3d(20vw,110vh,0) rotate(540deg); }
}

/* canvas-confetti target */
#confetti-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 100;
}

/* heart click bursts (created by JS) */
.heart-pop {
  position: fixed; pointer-events: none; z-index: 90;
  font-size: 22px; line-height: 1;
  animation: heart-rise 1.2s ease-out forwards;
}
@keyframes heart-rise {
  0%   { transform: translate(-50%,-50%) scale(.6); opacity: 0; }
  20%  { transform: translate(-50%,-60%) scale(1);   opacity: 1; }
  100% { transform: translate(-50%,-160%) scale(.9); opacity: 0; }
}

/* ============================ hero ============================ */

.hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: clamp(48px, 9vw, 110px) 24px clamp(40px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.hero-inner { max-width: 720px; margin: 0 auto; }

.hero-title {
  font-size: clamp(64px, 13vw, 140px);
  line-height: .95;
  letter-spacing: 0;
  color: var(--deep);
  margin: 0 0 6px;
  text-shadow: 0 4px 22px rgba(111,169,204,.18);
}

.tagline {
  font-family: var(--hand);
  font-size: clamp(34px, 7vw, 56px);
  color: var(--palm);
  background: transparent; border: none; cursor: pointer;
  padding: 4px 14px;
  margin: 0 0 28px;
  display: inline-block;
  position: relative;
  transition: transform .25s ease;
}
.tagline:hover { transform: rotate(-2deg) scale(1.04); }
.tagline::before, .tagline::after {
  content: "🌿"; font-size: 22px; opacity: .65;
  position: relative; top: -8px;
}
.tagline::before { margin-right: 10px; }
.tagline::after  { margin-left: 10px; }
.tagline.shaking { animation: shake .5s ease; }
@keyframes shake { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-6deg) scale(1.08)} 75%{transform:rotate(6deg) scale(1.08)} }

.hero-sub {
  font-family: var(--hand);
  font-size: 26px;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.counter {
  display: inline-flex; align-items: baseline;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(255,254,250,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(111,169,204,.25);
  margin: 4px 0 36px;
  font-variant-numeric: tabular-nums;
}
.counter .unit { display: inline-flex; align-items: baseline; gap: 4px; }
.counter strong {
  font-size: 28px; font-weight: 600;
  color: var(--deep);
  font-feature-settings: "tnum";
}
.counter em {
  font-style: normal; font-family: var(--hand);
  font-size: 16px; color: var(--ink-soft);
}
.counter .dot { color: var(--baby); font-weight: 400; }
#c-secs.tick { animation: tick .35s ease; }
@keyframes tick { 0%{transform:scale(1)} 50%{transform:scale(1.18); color:var(--coral)} 100%{transform:scale(1)} }

.hero-photo {
  margin: 0 auto;
  width: min(360px, 78vw);
  position: relative;
  transform: rotate(-1.5deg);
}
.hero-photo::before,
.hero-photo::after {
  content: "";
  position: absolute;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 10px 14px rgba(47,91,62,.12));
}
.hero-photo::before {
  width: 116px;
  height: 146px;
  left: -46px;
  bottom: 4px;
  transform: rotate(-20deg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M61 8C91 12 111 35 108 64c-4 35-31 53-47 75-17-21-45-39-49-75C9 35 30 12 61 8Z' fill='%236F9F77'/%3E%3Cpath d='M61 25v111M61 55C45 45 31 34 19 19M61 55C78 45 91 34 103 19M61 82C43 78 28 70 13 58M61 82c18-4 33-12 48-24M61 108c-15 1-27 5-39 12M61 108c15 1 27 5 39 12' stroke='%23F5F6EA' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}
.hero-photo::after {
  width: 130px;
  height: 140px;
  right: -56px;
  top: 18px;
  transform: rotate(24deg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M72 8c31 13 55 42 58 75 3 28-17 52-47 59-30 8-64-6-77-34C-8 78 8 43 39 18 50 11 62 7 72 8Z' fill='%232F5B3E'/%3E%3Cpath d='M71 23v113M70 47C55 43 39 35 24 18M70 65C50 65 31 59 12 46M70 84C51 90 31 91 10 84M70 103C52 116 35 124 16 125M72 49C88 43 103 35 118 17M72 67c20 0 39-7 57-20M72 86c20 5 39 5 61-1M72 105c18 13 35 21 54 22' stroke='%23E6F1DD' stroke-width='3.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M20 52c15 10 26 14 40 14M16 99c17 2 30 1 45-4M105 52c-15 9-26 13-40 14M122 99c-18 2-31 1-46-4' stroke='%23FBFAF5' stroke-width='11' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E");
}
.hero-photo img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: 50% / 45%;
  border: 8px solid var(--warm);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(47,91,62,.08);
  background: linear-gradient(135deg, var(--baby), var(--sage));
}
.hero-photo figcaption {
  position: absolute;
  bottom: -22px; right: 14px;
  transform: rotate(-4deg);
  font-size: 22px; color: var(--ink-soft);
}

.scroll-cue {
  margin-top: 24px;
  font-size: 28px;
  color: var(--ocean);
  animation: bounce 2s ease infinite;
}
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

/* ============================ sections ============================ */

main { position: relative; z-index: 2; }

.section {
  padding: clamp(60px, 9vw, 110px) 24px;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

.section-title {
  font-size: clamp(40px, 7vw, 72px);
  color: var(--deep);
  margin: 0 0 6px;
  line-height: 1.05;
}
.section-sub {
  font-size: 22px;
  color: var(--ink-soft);
  margin: 0 0 36px;
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================ paper / letters ============================ */

.paper {
  background: var(--paper);
  border-radius: var(--r-md);
  padding: clamp(28px, 5vw, 56px) clamp(24px, 5vw, 56px);
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
  box-shadow: var(--shadow-md);
  position: relative;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(111,169,204,.06) 30px 31px);
}
.paper::before, .paper::after {
  content: ""; position: absolute;
  width: 80px; height: 22px;
  background: linear-gradient(180deg, rgba(169,205,230,.5), rgba(169,205,230,.25));
  top: -10px;
  border-radius: 4px;
  transform: rotate(-3deg);
  box-shadow: 0 2px 6px rgba(47,91,62,.08);
}
.paper::before { left: 8%; }
.paper::after  { right: 8%; transform: rotate(2deg); }

.paper h2.section-title { text-align: center; margin-bottom: 30px; }

.letter-body { font-size: 19px; line-height: 1.7; }
.letter-body p { margin: 0 0 16px; }
.letter-body p.is-typing::after { content: "▍"; color: var(--ocean); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.letter-sig {
  margin-top: 24px;
  text-align: right;
  font-family: var(--hand);
  font-size: 22px;
  color: var(--ink-soft);
}
.letter-sig .big { font-size: 38px; color: var(--deep); display: block; }

/* ============================ timeline ============================ */

.timeline-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .timeline-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.timeline-item {
  background: var(--warm);
  border-radius: var(--r-md);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform .35s ease, box-shadow .35s ease;
}
.timeline-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.timeline-item .photo,
.timeline-item video.is-video {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--sky), var(--sage));
  display: block;
}
.timeline-item .photo:not([src]) { display: block; }
.timeline-item video.is-video {
  background: #000;
  outline: 1px solid rgba(111,169,204,.25);
}
.timeline-item .month {
  font-family: var(--hand); font-size: 22px;
  color: var(--palm); margin: 12px 0 4px;
}
.timeline-item .cap {
  font-style: italic; color: var(--ink-soft); font-size: 17px;
  margin: 0;
}

/* ============================ scrapbook ============================ */

.scrapbook {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  perspective: 1200px;
}
@media (min-width: 720px)  { .scrapbook { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .scrapbook { grid-template-columns: repeat(4, 1fr); } }

.polaroid {
  background: var(--warm);
  padding: 12px 12px 36px;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.4,1.4,.5,1), box-shadow .35s ease;
  position: relative;
}
.polaroid:nth-child(3n)   { transform: rotate(-2.5deg); }
.polaroid:nth-child(3n+1) { transform: rotate(1.5deg); }
.polaroid:nth-child(3n+2) { transform: rotate(-1deg); }
.polaroid:hover { transform: rotate(0) translateY(-6px) scale(1.03); box-shadow: var(--shadow-lg); }
.polaroid.flipped { transform: rotateY(180deg); }
.polaroid .face, .polaroid .back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.polaroid .face img,
.polaroid .face video {
  width: 100%; aspect-ratio: 1;
  object-fit: cover;
  background: linear-gradient(135deg, var(--baby), var(--sage));
  border-radius: 2px;
  display: block;
}
.polaroid .face video { background: #000; }
/* Video polaroids don't flip (native video controls take the click). Add a play hint. */
.polaroid-video { cursor: default; }
.polaroid-video:hover { transform: rotate(0) translateY(-3px); }
.polaroid-video::after {
  content: "▶";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,254,250,.92);
  color: var(--ocean);
  font-size: 20px;
  display: grid; place-items: center;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
  transition: opacity .25s ease;
  opacity: .85;
}
.polaroid-video:has(video:not([paused])) ::after,
.polaroid-video.playing::after { opacity: 0; }
.polaroid .face .cap {
  position: absolute;
  bottom: 8px; left: 0; right: 0;
  font-family: var(--hand);
  font-size: 18px;
  color: var(--ink-soft);
  text-align: center;
}
.polaroid .back {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  background: var(--paper);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  font-family: var(--hand);
  font-size: 22px;
  color: var(--deep);
  text-align: center;
}

/* ============================ music ============================ */

.music-section { text-align: center; }
.music-player {
  max-width: 560px; margin: 0 auto;
  border-radius: var(--r-md);
  background: var(--warm);
  padding: 22px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.music-player iframe { width: 100%; height: 175px; border: 0; border-radius: var(--r-sm); }
.music-player .mp3 {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
}
.mp3-play {
  width: 60px; height: 60px;
  border-radius: 50%; border: 0;
  background: var(--ocean); color: var(--warm);
  font-size: 26px; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  transition: transform .15s ease, background .2s ease;
}
.mp3-play:hover { background: var(--deep); transform: scale(1.06); }
.mp3-meta { text-align: left; flex: 1; }
.mp3-meta .title { font-style: italic; font-size: 22px; color: var(--deep); }
.mp3-meta .artist { font-family: var(--hand); color: var(--ink-soft); font-size: 18px; }
.mp3-bar { height: 4px; background: var(--sky); border-radius: 4px; flex: 1; overflow: hidden; }
.mp3-bar .fill { height: 100%; width: 0%; background: var(--ocean); transition: width .25s linear; }

.music-empty {
  font-family: var(--hand); font-size: 22px; color: var(--ink-soft);
  padding: 14px 22px;
}

/* ============================ reasons ============================ */

.reasons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  perspective: 1200px;
}
@media (min-width: 700px)  { .reasons-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .reasons-grid { grid-template-columns: repeat(4, 1fr); } }

.reason-card {
  height: 150px;
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4,1.4,.5,1);
}
.reason-card .face, .reason-card .back {
  position: absolute; inset: 0;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  padding: 18px;
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: var(--shadow-sm);
}
.reason-card .face {
  background: linear-gradient(135deg, var(--sky), var(--baby));
  color: var(--deep);
  font-family: var(--hand);
  font-size: 28px;
}
.reason-card .back {
  background: linear-gradient(135deg, var(--sage), var(--lime));
  color: var(--monstera);
  transform: rotateY(180deg);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
}
.reason-card.flipped { transform: rotateY(180deg); }

/* ============================ memory jar ============================ */

.jar-section .jar-stage {
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  position: relative;
}
.jar-btn {
  background: transparent; border: none; cursor: pointer;
  padding: 0; position: relative;
  filter: drop-shadow(0 14px 18px rgba(47,91,62,.18));
  transition: transform .2s ease;
}
.jar-btn:hover { transform: translateY(-4px) rotate(-1deg); }
.jar-btn:active { transform: scale(.97); }
.jar-svg { width: 180px; height: auto; display: block; }
.jar-cue {
  position: absolute;
  bottom: -28px; left: 0; right: 0;
  font-size: 22px;
  color: var(--ocean);
}
.jar-btn.shaking .jar-svg { animation: jarShake .5s ease; }
@keyframes jarShake { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-5deg)} 60%{transform:rotate(4deg)} }

.jar-note {
  background: var(--paper);
  padding: 22px 26px;
  border-radius: 8px;
  max-width: 420px;
  box-shadow: var(--shadow-md);
  font-family: var(--hand);
  font-size: 26px; line-height: 1.35;
  color: var(--deep);
  text-align: center;
  transform: rotate(-1.5deg);
  animation: noteIn .55s cubic-bezier(.3,1.4,.5,1);
  position: relative;
}
.jar-note::before {
  content: ""; position: absolute; top: -10px; left: 50%;
  width: 60px; height: 16px; background: rgba(169,205,230,.55);
  transform: translateX(-50%) rotate(-2deg);
  border-radius: 3px;
}
@keyframes noteIn {
  0%   { opacity: 0; transform: rotate(-30deg) translateY(-40px) scale(.6); }
  60%  { opacity: 1; transform: rotate(2deg) translateY(6px) scale(1.05); }
  100% { opacity: 1; transform: rotate(-1.5deg) translateY(0) scale(1); }
}

/* ============================ balloons ============================ */

.balloons-section { overflow: hidden; }
.balloon-stage {
  position: relative;
  height: 360px;
  width: 100%;
  margin-top: 8px;
}
.balloon {
  position: absolute;
  bottom: -100px;
  width: 60px; height: 76px;
  border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--baby) 65%, var(--ocean));
  box-shadow: inset -6px -10px 16px rgba(74,127,160,.35), 0 6px 12px rgba(47,91,62,.15);
  cursor: pointer;
  animation: floatUp linear forwards;
  transition: transform .2s ease;
}
.balloon::after {
  content: ""; position: absolute; bottom: -2px; left: 50%;
  width: 8px; height: 8px;
  background: var(--ocean);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
}
.balloon::before {
  content: ""; position: absolute;
  top: 100%; left: 50%;
  width: 1px; height: 60px;
  background: rgba(74,127,160,.6);
}
.balloon:nth-child(2n)   { background: radial-gradient(circle at 35% 30%, #fff, var(--sage) 65%, var(--palm)); }
.balloon:nth-child(3n)   { background: radial-gradient(circle at 35% 30%, #fff, var(--lime) 65%, var(--palm)); }
.balloon:nth-child(4n)   { background: radial-gradient(circle at 35% 30%, #fff, #FFE2C7 65%, var(--coral)); }
.balloon.popping { animation: pop .35s ease forwards; }
@keyframes floatUp {
  0%   { transform: translate(0, 0) rotate(-3deg); }
  100% { transform: translate(var(--drift, 20px), -540px) rotate(3deg); }
}
@keyframes pop {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(1.4); opacity: .8; }
  100% { transform: scale(.2); opacity: 0; }
}
.balloon-msg {
  position: absolute;
  pointer-events: none;
  font-family: var(--hand); font-size: 26px;
  color: var(--deep);
  background: var(--warm);
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  animation: msgFade 1.6s ease forwards;
  white-space: nowrap;
}
@keyframes msgFade {
  0%   { opacity: 0; transform: translateY(0) scale(.7); }
  20%  { opacity: 1; transform: translateY(-10px) scale(1); }
  80%  { opacity: 1; transform: translateY(-30px) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(1); }
}

/* ============================ envelope letter ============================ */

.letter-tyler-section .envelope {
  display: inline-block;
  background: transparent; border: 0; cursor: pointer;
  padding: 0;
  filter: drop-shadow(var(--shadow-md));
  transition: transform .2s ease;
}
.letter-tyler-section .envelope:hover { transform: translateY(-4px); }

.env-body {
  position: relative;
  width: clamp(240px, 60vw, 360px);
  height: clamp(160px, 38vw, 240px);
  background: linear-gradient(180deg, var(--cream) 0%, #F2EBDC 100%);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(47,91,62,.08);
  overflow: hidden;
}
.env-back {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 20px, rgba(111,169,204,.08) 20px 40px);
}
.env-flap {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(180deg, var(--paper) 0%, #F0E8D6 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform .8s cubic-bezier(.6,.1,.2,1);
  box-shadow: inset 0 -4px 8px rgba(47,91,62,.06);
}
.envelope.opened .env-flap { transform: rotateX(180deg); }
.env-seal {
  position: absolute;
  top: calc(60% - 22px); left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F4B6B6, var(--coral));
  color: var(--warm);
  font-family: var(--serif); font-style: italic; font-size: 26px;
  display: grid; place-items: center;
  box-shadow: 0 3px 8px rgba(168,91,91,.4), inset 0 0 0 1px rgba(255,255,255,.25);
  z-index: 2;
  transition: opacity .3s ease;
}
.envelope.opened .env-seal { opacity: 0; }

.envelope-letter { margin-top: 28px; }
.envelope-letter .paper-letter { animation: letterIn .9s cubic-bezier(.3,1.2,.4,1); }
@keyframes letterIn {
  0%   { opacity: 0; transform: translateY(-30px) scaleY(.4); transform-origin: top center; }
  100% { opacity: 1; transform: none; }
}

/* ============================ footer ============================ */

footer {
  text-align: center;
  padding: 40px 24px 60px;
  color: var(--ink-soft);
}
footer .hand { font-size: 26px; color: var(--palm); margin-bottom: 6px; }

/* ============================ reduced motion ============================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .petal, .balloon, .scroll-cue { display: none; }
}