/* The scratch card opens into a small, self-contained animated scene. */
.reunion-section .section-heading p { font-size: 13px; line-height: 1.8; }
.reunion-section .secret-card { max-width: 820px; height: 550px; border-radius: 8px; background: #f7efdf; }
.reunion-section .secret-veil { z-index: 5; }
.reunion-section .veil-label { padding: 24px; text-align: center; }
.reunion-section .veil-label > span { line-height: 1.3; }
.reunion-scene { --reunion-embrace-delay: 2.5s; --reunion-embrace-duration: 1.15s; --reunion-photo-hold: 1s; --reunion-photo-duration: .9s; --reunion-photo-delay: calc(var(--reunion-embrace-delay) + var(--reunion-embrace-duration) + var(--reunion-photo-hold)); position: relative; width: 100%; height: 100%; color: #655049; overflow: hidden; background: radial-gradient(ellipse at 50% 37%, #fff9ec 0%, #f5ebd9 58%, #ede0ce 100%); }
.reunion-scene:focus-visible { outline: 2px solid #a06d5c; outline-offset: -8px; }
.reunion-scene::before { content: ''; position: absolute; inset: 13px; border: 1px solid #aa805b26; border-radius: 3px; pointer-events: none; }
.reunion-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.reunion-destination { position: absolute; top: 27px; left: 15px; right: 15px; text-align: center; font-size: 8px; letter-spacing: 2.8px; color: #9b7e61; z-index: 2; }
.reunion-sky { --flight: clamp(69px, 26vw, 228px); --near: clamp(25px, 9vw, 74px); position: absolute; inset: 29px 0 126px; overflow: hidden; }
.reunion-halo { position: absolute; width: 72%; aspect-ratio: 1; max-width: 430px; left: 50%; top: 49%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #ffefd0aa, #f7ddb633 50%, transparent 70%); }
.reunion-paths { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; stroke: #bd9872; stroke-width: 1; stroke-dasharray: 2 10; opacity: .4; }
.reunion-sparkles { position: absolute; inset: 0; color: #c09a6c; }
.reunion-sparkles span { position: absolute; font-family: var(--serif); font-size: 20px; }
.reunion-sparkles span:nth-child(1) { left: 14%; top: 23%; font-size: 13px; }
.reunion-sparkles span:nth-child(2) { right: 15%; top: 13%; font-size: 29px; }
.reunion-sparkles span:nth-child(3) { right: 19%; bottom: 19%; font-size: 10px; }
.reunion-sparkles span:nth-child(4) { left: 20%; bottom: 17%; font-size: 24px; }
.reunion-sparkles span:nth-child(5) { left: 43%; top: 9%; font-size: 33px; }
.reunion-sparkles span:nth-child(6) { right: 34%; bottom: 10%; font-size: 25px; }
.reunion-sprite { position: absolute; left: 50%; top: 50%; width: clamp(136px, 26%, 208px); aspect-ratio: 1 / 2; pointer-events: none; }
.reunion-cutout { display: block; width: 100%; height: 100%; background-image: var(--reunion-sprite-image, url('assets/reunion-sprites.png')); background-repeat: no-repeat; background-size: 300% 100%; }
.reunion-him { transform: translate(calc(-50% - var(--flight)), -48%) rotate(-8deg); }
.reunion-him .reunion-cutout { background-position: 0% 50%; }
.reunion-her { transform: translate(calc(-50% + var(--flight)), -48%) rotate(8deg); }
.reunion-her .reunion-cutout { background-position: 50% 50%; }
.reunion-couple { width: 232px; opacity: 0; transform: translate(-50%, -49%) scale(.72); }
.reunion-couple .reunion-cutout { background-position: 100% 50%; }
.reunion-flash { position: absolute; width: 260px; aspect-ratio: 1; left: 50%; top: 48%; transform: translate(-50%, -50%) scale(.2); background: radial-gradient(circle, #fffaf1 10%, #ffefc3aa 33%, #f5d38c33 54%, transparent 70%); opacity: 0; pointer-events: none; }
.reunion-hearts { position: absolute; inset: 0; color: #b67569; pointer-events: none; }
.reunion-hearts span { position: absolute; left: 50%; top: 48%; font-family: var(--serif); font-size: 26px; line-height: 1; opacity: 0; }
.reunion-hearts span:nth-child(3n) { color: #b9965c; font-size: 16px; }
.reunion-real-photo { position: absolute; inset: 56px 22px 145px; z-index: 1; display: flex; align-items: center; justify-content: center; margin: 0; opacity: 0; transform: translateY(10px) rotate(-1.2deg) scale(.98); transform-origin: 50% 50%; pointer-events: none; }
.reunion-real-photo img { display: block; flex: none; box-sizing: content-box; width: auto; height: calc(100% - 36px); max-width: calc(100% - 20px); aspect-ratio: 3 / 4; object-fit: contain; border: 8px solid #fffaf1; border-bottom-width: 28px; border-radius: 2px; box-shadow: 0 12px 26px #6b4d351c, 0 2px 5px #6b4d3514; }
.reunion-real-photo figcaption { position: absolute; bottom: 8px; left: 0; right: 0; font-family: var(--serif); font-size: 11px; line-height: 13px; font-style: italic; text-align: center; color: #927762; }
.reunion-ending { position: absolute; bottom: 28px; left: 18px; right: 18px; z-index: 2; text-align: center; opacity: 0; transform: translateY(10px); }
.reunion-ending h3 { font-family: var(--serif); font-size: 32px; line-height: 1.14; letter-spacing: -.7px; }
.reunion-ending h3 em { color: #a97062; }
.reunion-ending p { margin-top: 13px; color: #9b7c65; font-size: 11px; letter-spacing: .4px; }
.reunion-controls { min-height: 103px; text-align: center; padding-top: 14px; }
.reunion-controls .reveal-fallback, .reunion-replay { display: flex; justify-content: center; align-items: center; gap: 11px; min-height: 44px; margin: 0 auto; font-size: 11px; color: #dfc7b0; }
.reunion-controls .icon { width: 18px; height: 18px; }
.reunion-replay { border-bottom: 1px solid #c4a08866; padding: 0 5px; transition: color .2s, border-color .2s; }
.reunion-replay:not([aria-disabled="true"]):hover { color: #fff2df; border-color: #e4c7a4; }
.reunion-replay[aria-disabled="true"] { opacity: .55; border-color: transparent; cursor: wait; }
.reunion-status { min-height: 24px; margin-top: 10px; color: #c6ac9a; font-family: var(--serif); font-size: 14px; font-style: italic; line-height: 1.5; }
.reunion-missing { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: #b78672; }
.reunion-missing .icon { width: 76px; height: 76px; stroke-width: .7; }
.reunion-scene.is-loading .reunion-sprite { opacity: 0; }
.reunion-scene.is-playing .reunion-him { animation: reunion-fly-him 3.2s cubic-bezier(.38, .02, .25, 1) both; }
.reunion-scene.is-playing .reunion-her { animation: reunion-fly-her 3.2s cubic-bezier(.38, .02, .25, 1) both; }
.reunion-scene.is-playing .reunion-couple { animation: reunion-embrace var(--reunion-embrace-duration) cubic-bezier(.2, .8, .2, 1) var(--reunion-embrace-delay) both; }
.reunion-scene.is-playing .reunion-flash { animation: reunion-glow 1.25s ease-out 2.25s both; }
.reunion-scene.is-playing .reunion-hearts span { animation: reunion-heart 2.1s ease-out calc(2.65s + var(--wait)) both; }
.reunion-scene.is-playing .reunion-ending { animation: reunion-words .85s ease-out 3.25s both; }
.reunion-scene.is-playing .reunion-paths { animation: reunion-path 3.6s ease-out both; }
.reunion-scene.is-playing .reunion-sparkles { animation: reunion-starlight 2.2s ease-in-out 2 alternate; }
.reunion-scene.is-playing.has-photo .reunion-sky { animation: reunion-sky-away var(--reunion-photo-duration) ease-in-out var(--reunion-photo-delay) both; }
.reunion-scene.is-playing.has-photo .reunion-real-photo { animation: reunion-photo-in var(--reunion-photo-duration) ease-in-out var(--reunion-photo-delay) both; }
.reunion-scene.is-complete .reunion-him, .reunion-scene.is-complete .reunion-her { opacity: 0; }
.reunion-scene.is-complete .reunion-couple { opacity: 1; transform: translate(-50%, -49%) scale(1); }
.reunion-scene.is-complete .reunion-ending { opacity: 1; transform: none; }
.reunion-scene.is-complete .reunion-paths { opacity: .18; }
.reunion-scene.is-complete.has-photo .reunion-sky { opacity: 0; }
.reunion-scene.is-complete.has-photo .reunion-real-photo { opacity: 1; transform: rotate(-1.2deg); }
.reunion-scene.has-asset-error .reunion-sprite { display: none; }
.reunion-scene.has-asset-error .reunion-missing { display: flex; }
@keyframes reunion-fly-him {
  0% { transform: translate(calc(-50% - var(--flight)), -48%) rotate(-8deg); opacity: 1; }
  30% { transform: translate(calc(-50% - var(--near)), -59%) rotate(4deg); opacity: 1; }
  77% { transform: translate(-76%, -48%) rotate(10deg) scale(.94); opacity: 1; }
  100% { transform: translate(-62%, -45%) rotate(6deg) scale(.78); opacity: 0; }
}
@keyframes reunion-fly-her {
  0% { transform: translate(calc(-50% + var(--flight)), -48%) rotate(8deg); opacity: 1; }
  30% { transform: translate(calc(-50% + var(--near)), -38%) rotate(-4deg); opacity: 1; }
  77% { transform: translate(-24%, -48%) rotate(-10deg) scale(.94); opacity: 1; }
  100% { transform: translate(-38%, -45%) rotate(-6deg) scale(.78); opacity: 0; }
}
@keyframes reunion-embrace {
  0% { opacity: 0; transform: translate(-50%, -47%) scale(.72); }
  40% { opacity: 1; transform: translate(-50%, -50%) scale(1.035); }
  100% { opacity: 1; transform: translate(-50%, -49%) scale(1); }
}
@keyframes reunion-glow {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  40% { opacity: .9; transform: translate(-50%, -50%) scale(1.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}
@keyframes reunion-heart {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  25% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--turn)) scale(1); }
}
@keyframes reunion-words { to { opacity: 1; transform: translateY(0); } }
@keyframes reunion-path { to { stroke-dashoffset: -85; opacity: .18; } }
@keyframes reunion-starlight { 50% { opacity: .35; } }
@keyframes reunion-sky-away { from { opacity: 1; } to { opacity: 0; } }
@keyframes reunion-photo-in {
  from { opacity: 0; transform: translateY(10px) rotate(-1.2deg) scale(.98); }
  to { opacity: 1; transform: translateY(0) rotate(-1.2deg) scale(1); }
}
@media (max-width: 600px) {
  .reunion-section .section-heading p { font-size: 12px; }
  .reunion-section .secret-card { height: 460px; margin-top: 30px; }
  .reunion-sky { top: 28px; bottom: 119px; }
  .reunion-destination { top: 25px; font-size: 7px; letter-spacing: 2px; }
  .reunion-couple { width: 180px; }
  .reunion-real-photo { top: 52px; bottom: 126px; }
  .reunion-real-photo figcaption { font-size: 10px; }
  .reunion-ending { bottom: 29px; left: 10px; right: 10px; }
  .reunion-ending h3 { font-size: 26px; letter-spacing: -.8px; }
  .reunion-ending p { font-size: 10px; margin-top: 12px; }
  .reunion-section .veil-label > span { max-width: 250px; font-size: 25px; }
  .reunion-section .veil-label small { font-size: 9px; letter-spacing: .4px; }
  .reunion-hearts { transform: scale(.8); transform-origin: 50% 48%; }
  .reunion-controls { min-height: 96px; }
  .reunion-status { font-size: 13px; padding-inline: 4px; }
}
@media (max-width: 360px) {
  .reunion-section .secret-card { height: 434px; }
  .reunion-couple { width: 166px; }
  .reunion-real-photo { top: 51px; bottom: 124px; }
  .reunion-real-photo figcaption { font-size: 9px; }
  .reunion-ending h3 { font-size: 24px; }
  .reunion-section .veil-label > span { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .reunion-scene * { animation: none !important; transition: none !important; }
  .reunion-scene.is-complete .reunion-couple, .reunion-scene.is-complete .reunion-ending { opacity: 1; }
  .reunion-flash, .reunion-hearts { display: none; }
}