/* Soft paper, hand-drawn lines and quick, interruptible interactions. */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}
.hero-copy, .hero-art { animation: none; }
.animated-preview { position: relative; }
.animated-preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease-out);
}
.animated-preview[data-playing="true"] video { opacity: 1; }
.hero-art .animated-preview {
  transform: rotate(-5deg);
  mix-blend-mode: multiply;
  filter: drop-shadow(0 12px 8px #95805c0b);
}
.hero-art .animated-preview .envelope-image { transform: none; filter: none; mix-blend-mode: normal; }
.wide-preview .animated-preview { width: 100%; margin-top: -26px; mix-blend-mode: multiply; }
.wide-preview .animated-preview img { margin-top: 0; mix-blend-mode: normal; }
.wide-preview .animated-preview video { object-position: center; }
.motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border: 0;
  padding: 7px 0;
  background: transparent;
  color: var(--muted);
  font: 600 11px/1.5 var(--body);
  cursor: pointer;
}
.motion-toggle svg { width: 15px; height: 15px; flex: none; }
.motion-toggle .motion-play { display: none; }
.motion-toggle[aria-pressed="true"] .motion-play { display: block; }
.motion-toggle[aria-pressed="true"] .motion-pause { display: none; }
.motion-toggle:disabled { opacity: .75; cursor: default; }
.hero-art figcaption { display: flex; align-items: center; justify-content: center; gap: 10px; }
.hero-art .motion-toggle {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 8px;
  border: 1px solid #d8d6c9;
  border-radius: 50%;
  background: var(--paper);
  flex: none;
}
.inside-preview > .motion-toggle { display: flex; margin: 0 auto; }
.footer-social > .motion-toggle { margin-top: 3px; }

.motion-ready[data-motion="running"] .hero-copy > * {
  animation: paper-arrive 650ms var(--ease-out) both;
}
.motion-ready[data-motion="running"] .hero-copy > :nth-child(2) { animation-delay: 60ms; }
.motion-ready[data-motion="running"] .hero-copy > :nth-child(3) { animation-delay: 120ms; }
.motion-ready[data-motion="running"] .hero-copy > :nth-child(4) { animation-delay: 180ms; }
.motion-ready[data-motion="running"] .hero-copy > :nth-child(5) { animation-delay: 240ms; }
.motion-ready[data-motion="running"] .hero-art figure {
  animation: envelope-settle 900ms var(--ease-out) 140ms both;
}
.motion-ready[data-motion="running"] .mail-stamp {
  animation: stamp-settle 480ms var(--ease-out) 480ms both;
}
.motion-ready[data-motion="running"] .age-tag {
  animation: paper-arrive 600ms var(--ease-out) 540ms both;
}
.motion-ready[data-motion="running"] .hero-note {
  animation: paper-arrive 650ms var(--ease-out) 620ms both;
}
.motion-ready[data-motion="running"] .highlight-word path,
.motion-ready[data-motion="running"] .hero-note path {
  stroke-dasharray: 1;
  animation: pencil-line 750ms var(--ease-out) 480ms backwards;
}
.motion-ready[data-motion="running"] .hero-note path { animation-delay: 850ms; }
.motion-ready[data-motion="running"] .hero-spark {
  animation: doodle-sway 7s var(--ease-in-out) 1s infinite;
  transform-origin: center;
}

[data-reveal] {
  transition: opacity 650ms var(--ease-out), translate 650ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="pending"] { opacity: 0; translate: 0 22px; }
[data-reveal="visible"] { opacity: 1; translate: 0 0; }
.motion-ready[data-motion="running"] [data-reveal="visible"] .rainbow path {
  stroke-dasharray: 1;
  animation: pencil-line 900ms var(--ease-out) 180ms backwards;
}
.motion-ready[data-motion="running"] [data-reveal="visible"] .rainbow path:nth-child(2) { animation-delay: 280ms; }
.motion-ready[data-motion="running"] [data-reveal="visible"] .rainbow path:nth-child(3) { animation-delay: 380ms; }
.motion-ready[data-motion="running"] .edition-display[data-reveal="visible"] .earth-detail .line-icon {
  transform-origin: 50% 90%;
  animation: sprout-hello 1800ms var(--ease-in-out) 500ms both;
}
.motion-ready[data-motion="running"] .edition-display[data-reveal="visible"] .round-sticker {
  animation: sticker-settle 650ms var(--ease-out) 220ms both;
}

.button { transition: background 180ms var(--ease-out), transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
.button > span, .text-link > span, .quiet-link > span { transition: transform 180ms var(--ease-out); }
.mini-paper, .sticker-art, .pencil-prop { transition: transform 280ms var(--ease-out); }
.mobile-nav { transform-origin: top; }
.menu-toggle span { transition: transform 200ms var(--ease-out); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.faq-answer { display: flow-root; }
.faq-list summary > span { transition: transform 180ms var(--ease-out); }
.faq-list details[data-open="false"] summary > span { transform: none; }
.region-option { transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .text-link:hover > span { transform: translate(3px, -3px); }
  .hero-secondary:hover > span { transform: translateY(3px); }
  .content-card:hover .sticker-art { transform: translateY(-5px) rotate(5deg); }
  .content-card:hover .pencil-prop { transform: rotate(7deg) translateY(-3px); }
  .motion-toggle:hover { color: var(--green); }
  .hero-art .motion-toggle:hover { background: var(--sage); }
}
@media (hover: none), (pointer: coarse) {
  .button:hover { transform: none; box-shadow: none; }
  .button:hover > span { transform: none; }
  .content-card:hover .mini-paper { transform: rotate(-8deg); }
}
.button:active:not(:disabled) { transform: translateY(0) scale(.98); transition-duration: 100ms; }

@keyframes paper-arrive {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes envelope-settle {
  from { opacity: 0; translate: 0 24px; rotate: 2deg; }
  to { opacity: 1; translate: 0 0; rotate: 0deg; }
}
@keyframes stamp-settle {
  from { opacity: 0; translate: 0 -12px; scale: 1.06; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes pencil-line { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes doodle-sway {
  0%, 100% { rotate: -6deg; translate: 0 0; }
  50% { rotate: 6deg; translate: 0 -5px; }
}
@keyframes sprout-hello {
  0%, 100% { rotate: 0deg; }
  30% { rotate: -7deg; }
  70% { rotate: 4deg; }
}
@keyframes sticker-settle {
  from { opacity: 0; translate: 5px -10px; rotate: 8deg; }
  to { opacity: 1; translate: 0 0; rotate: 0deg; }
}

html[data-input="keyboard"] :is(.menu-toggle span, .faq-list summary > span) { transition: none; }
html[data-motion="paused"] { scroll-behavior: auto; }
html[data-motion="paused"] *, html[data-motion="paused"] *::before, html[data-motion="paused"] *::after {
  animation: none !important;
  transition: none !important;
}
html[data-motion="paused"] [data-reveal] { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; translate: none; }
  .animated-preview video { display: none; }
  .button:active:not(:disabled), .button:hover, .button:hover > span { transform: none; }
  .content-card:hover .mini-paper { transform: rotate(-8deg); }
  .content-card:hover .sticker-art { transform: rotate(12deg); }
  .text-link:hover > span, .hero-secondary:hover > span { transform: none; }
}
@media (max-width: 600px) {
  .wide-preview .animated-preview { margin-top: 0; }
  .hero-art .preview-label { display: none; }
  .hero-art figcaption { gap: 8px; }
  .hero-art .motion-toggle { width: 32px; height: 32px; min-height: 32px; }
}