/* Tactile stationery: texture and deckled edges stay separate from live text. */
@font-face {
  font-family: 'Cormorant Infant';
  src: url('assets/fonts/CormorantInfant-SemiboldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  --ivory: #f3e5ce;
  --ink: #402c2a;
  --burgundy: #71333f;
  --paper-grain: url('assets/vivi/parchment-texture.webp');
  --stationery-serif: 'Cormorant Infant', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
}

/* Center video crops consistently with the responsive final-frame alignment. */
.arrival video, .arrival picture img { object-position: 50% 50%; }
.arrival:has(video:not([hidden]))::after { background: none; }
.arrival.is-delivered { z-index: 4; pointer-events: none; }
.arrival.is-opening { opacity: 0; transition: opacity 850ms ease; }
body[data-video-envelope="true"] .scene-paws,
body[data-video-envelope="true"] #open-envelope > .envelope-art { visibility: hidden; }
#open-envelope { aspect-ratio: 1200 / 681; padding: 0; }
.envelope-art { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
body[data-video-envelope="true"] .envelope-content { position: fixed; inset: 0; margin: 0; }
body[data-video-envelope="true"] .envelope-introduction {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(100% - var(--delivered-top) + 27px);
  animation: delivery-words 300ms ease 160ms both;
}
body[data-video-envelope="true"] #open-instruction { margin-bottom: 0; }
body[data-video-envelope="true"] #open-envelope {
  position: absolute;
  left: var(--delivered-left);
  top: var(--delivered-top);
  width: var(--delivered-width);
  height: var(--delivered-height);
  margin: 0;
  transform: none;
  filter: none;
}
body[data-video-envelope="true"] .envelope-signature {
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(var(--delivered-top) + var(--delivered-height) + 20px);
  margin: 0;
  animation: delivery-words 300ms ease 160ms both;
}
@keyframes delivery-words { from { opacity: 0; } to { opacity: 1; } }
@media (max-height: 500px) {
  body[data-video-envelope="true"] .envelope-introduction .eyebrow,
  body[data-video-envelope="true"] .envelope-introduction h2,
  body[data-video-envelope="true"] .envelope-signature { display: none; }
  body[data-video-envelope="true"] .envelope-introduction {
    bottom: calc(100% - var(--delivered-top) + 16px);
  }
}
#open-envelope[data-quiet-focus]:focus-visible { outline: none; }
.arrival:has(video:not([hidden])) .arrival-note { animation: arrival-copy-away .8s 2.8s both; }
@keyframes arrival-copy-away { to { opacity: 0; transform: translateY(-5px); } }

.woodland { filter: saturate(.87) brightness(.94); }
.letter-world { z-index: 6; filter: drop-shadow(0 18px 24px #170d1669) drop-shadow(1px 2px 1px #170d164f); }
body[data-state="opening"] .envelope-scene { animation: scene-away 300ms ease both; }
body[data-state="opening"] .envelope-introduction { opacity: 0; transition: opacity 220ms ease; }
body[data-state="opening"] .letter-world { animation: paper-settle 700ms cubic-bezier(.22,.61,.36,1) both; }
@keyframes paper-settle {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.paper {
  isolation: isolate;
  background: transparent;
  border: 0;
  box-shadow: none;
  clip-path: none;
  border-radius: 0;
}
.paper::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: #f4e5cb;
  background-image:
    linear-gradient(90deg, #ae83551c, transparent 5%, #fff6e018 48%, transparent 94%, #9f774926),
    var(--paper-grain);
  background-size: 100% 100%, 570px 570px;
  background-blend-mode: multiply, normal;
  filter: url('#paper-deckle');
  box-shadow: inset 0 0 15px #bb976826, inset 0 0 1px 1px #fff7df9c;
}
.paper::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 12px;
  border: 1px solid #98714c33;
  outline: 1px solid #fff8e650;
  outline-offset: 2px;
  pointer-events: none;
}
.paper-inner { padding-top: 64px; padding-bottom: 39px; }
.hero { position: relative; }
.hero .eyebrow { letter-spacing: .25em; color: #684b3c; font-size: 10px; }
.little-heart { color: #ad694f; text-shadow: 0 1px 0 #fff2d1ad; }
.title-wrap { margin-top: 12px; }
.falling, .with-baby, .vivi, .detail-section h2, .paper-footer em {
  font-family: var(--stationery-serif);
  font-weight: 600;
  font-style: italic;
  font-kerning: normal;
  font-feature-settings: 'liga' 1, 'kern' 1;
  text-shadow: 0 1px 0 #fff3d6c9, 0 -.4px .2px #4b201429;
}
.falling { font-size: clamp(40px, 5.4vw, 68px); letter-spacing: -.045em; color: #582c32; line-height: 1.06; }
.with-baby { font-size: clamp(32px, 4vw, 46px); letter-spacing: -.025em; color: #77503e; margin-top: 3px; }
.vivi { color: #a25943; font-size: clamp(95px, 12.5vw, 153px); line-height: 1.06; letter-spacing: -.04em; margin: 2px 0 13px; }
.sprig { opacity: .74; mix-blend-mode: multiply; height: 226px; }
.event-when { color: #49332c; font-size: 20px; }
.event-when time { text-shadow: 0 1px 0 #fff4dd85; }
.event-when time span { font-size: 23px; }
.timezone { color: #735c4d; letter-spacing: .055em; }
.hero-location { color: #49332c; }
.primary-actions { gap: 12px; }
.button { border-radius: 3px; font-size: 17px; min-height: 49px; letter-spacing: .025em; }
.button-primary {
  background-color: #71333f;
  background-image: linear-gradient(180deg, #ffffff07, #2b0e1617);
  border: 1px solid #682c36;
  outline: 1px solid #763d4147;
  outline-offset: 2px;
  box-shadow: inset 0 0 0 2px #ffffff10, inset 0 1px 0 #ffffff24, 0 2px 3px #6b452b2b;
  text-shadow: 0 1px 1px #33191d6b;
}
.button-primary:hover { background-color: #602a36; }
.button-outline {
  background: #fff0d121;
  border-color: #56604c;
  box-shadow: inset 0 0 0 2px #fff7dc3d, 0 1px 0 #fff5d8aa;
  color: #32473e;
}
.button-outline:hover { background: #d8d5b759; }
.button:focus-visible { outline: 3px solid #71333f; outline-offset: 5px; }
.welcome { color: #715a4a; }
.heart-divider { color: #a66e51; margin-top: 42px; margin-bottom: 35px; }
.heart-divider::before, .heart-divider::after { background: linear-gradient(90deg, transparent, #9d795879); }
.heart-divider::after { transform: scaleX(-1); }
.detail-section .eyebrow { color: #81644d; letter-spacing: .22em; }
.detail-section h2 { font-size: 42px; line-height: 1.12; color: #663b34; margin-bottom: 18px; }
.detail-section p { color: #665040; }
.coming-soon { color: #5b3a32 !important; }
.cloth-note { color: #5b503d !important; }
.paper-footer em { font-size: 23px; line-height: 1.2; }

.envelope-back, .envelope-pocket, .envelope-flap { border-radius: 2px; }
.envelope-peek { background-image: var(--paper-grain); background-size: 400px; }
.envelope-pocket::after, .envelope-flap::after {
  opacity: .52;
  background-image: var(--paper-grain);
  background-size: 400px;
  mix-blend-mode: multiply;
}
.envelope-pocket::after {
  clip-path: polygon(0 0, 50% 51%, 100% 0, 100% 100%, 0 100%);
}
.envelope-flap { background: linear-gradient(180deg, #f3e0c1, #e3c59c); }
.wax-seal {
  background: radial-gradient(ellipse at 31% 24%, #d6967c 0, #b66e5b 40%, #98513f 100%);
  color: #804333;
  border-color: #c78569;
  box-shadow: 0 4px 6px #48241f70, inset 0 0 0 1px #efa98a9c, inset 1px 2px 3px #f4baa24a, 0 0 0 1px #e4a783;
  text-shadow: 0 1px 1px #efb49d;
}
.letter-envelope { border-color: #e8d0ad; }
.quiet-control { border-color: #e7ceac42; background: #2b1b23d9; }

@media (max-width: 600px) {
  .paper-inner { padding: 47px 27px 30px; }
  .paper::before { background-size: 100% 100%, 400px 400px; }
  .paper::after { inset: 9px; border-color: #98714c2b; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .2em; }
  .title-wrap { margin: 14px -13px 0; }
  .falling { font-size: clamp(32px, 9.5vw, 52px); letter-spacing: -.045em; }
  .with-baby { font-size: clamp(28px, 8vw, 42px); margin-top: 7px; }
  .vivi { font-size: clamp(90px, 28vw, 146px); margin-top: 4px; margin-bottom: 13px; }
  .sprig { height: 166px; width: 42px; top: 7px; opacity: .65; }
  .sprig-left { left: -6px; }
  .sprig-right { right: -6px; }
  .event-when { font-size: 16px; }
  .event-when time span { font-size: 21px; }
  .primary-actions { max-width: 286px; }
  .button { font-size: 16px; }
  .detail-section h2 { font-size: 35px; }
  .heart-divider { margin-top: 36px; margin-bottom: 30px; }
  .detail-section .eyebrow { font-size: 8px; }
  .paper-footer em { font-size: 22px; }
}