@font-face {
  font-family: "Invite Display";
  src: local("Baskerville"), local("Baskerville Old Face"), local("Palatino Linotype"), local("Georgia");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #160c0d;
  --wine: #4b1019;
  --gold: #d9b36b;
  --ivory: #fff5e5;
  --muted: #e4d5c1;
  font-family: "Aptos", "Segoe UI", sans-serif;
  background: var(--ink);
  color: var(--ivory);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
html { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: transparent transparent; scroll-behavior: auto; }
body { overflow-x: hidden; overflow-y: scroll; background: var(--ink); scrollbar-width: thin; scrollbar-color: transparent transparent; }
body[data-state="open"] { scrollbar-color: var(--gold) #1a0d10; }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: #1a0d10; }
::-webkit-scrollbar-thumb { border: 2px solid #1a0d10; border-radius: 99px; background: transparent; }
html:has(body[data-state="closed"])::-webkit-scrollbar-thumb,
html:has(body[data-state="opening"])::-webkit-scrollbar-thumb { background: transparent; }
html:has(body[data-state="open"]) { scrollbar-color: var(--gold) #1a0d10; }
body[data-state="open"]::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #f0d28d, #9d692d); }
body[data-state="closed"] .celebration-section,
body[data-state="opening"] .celebration-section { display: none; }
button { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }

.scene {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  overflow: clip;
  background: #160c0d;
}

.stage, .stage-light, .scene-shade { position: absolute; inset: 0; pointer-events: none; }
.stage {
  z-index: -3;
  background: url("assets/mandapam-background.webp") center 47% / cover no-repeat;
  filter: saturate(.91) brightness(.7);
  opacity: .25;
  transform: scale(.76);
  transform-origin: 50% 42%;
  will-change: transform, opacity, filter;
  transition: opacity 1.4s ease, filter 1.8s ease;
}
.stage-light {
  z-index: -2;
  background: radial-gradient(ellipse at 50% 43%, rgba(238, 184, 99, .17), transparent 48%);
  opacity: .7;
  transition: opacity 1.4s ease;
}
.scene-shade {
  z-index: -1;
  background: linear-gradient(180deg, rgba(18, 8, 10, .25), transparent 42%, rgba(14, 7, 9, .52)),
    radial-gradient(ellipse at center, transparent 28%, rgba(13, 6, 8, .5) 100%);
  transition: opacity 1.2s ease;
}

.floral-edge {
  position: absolute;
  z-index: 2;
  top: 4vh;
  bottom: 0;
  width: clamp(100px, 18vw, 245px);
  background: url("assets/floral-hanging-accent.webp") 38% center / auto 76vh no-repeat;
  filter: drop-shadow(0 10px 24px rgba(22, 7, 9, .5));
  opacity: 0;
  pointer-events: none;
  transition: opacity 1200ms ease 400ms;
}
.floral-edge--left { left: -1.2rem; }
.floral-edge--right { right: -1.2rem; transform: scaleX(-1); }

/* A single source image is split into two full-height cloth panels. No strips,
   replacement image, or tied-curtain overlay is used during the reveal. */
.curtain { position: absolute; z-index: 8; inset: 0; pointer-events: none; perspective: 1400px; }
.curtain-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.1%;
  background-image: url("assets/curtain-closed.webp");
  background-repeat: no-repeat;
  background-size: 200% 100%;
  will-change: transform, opacity;
  transition: transform 1750ms cubic-bezier(.7, 0, .16, 1);
}
.curtain-panel::after {
  position: absolute;
  content: "";
  inset: 0;
  pointer-events: none;
}
.curtain-panel--left {
  left: 0;
  background-position: left center;
  transform-origin: left center;
}
.curtain-panel--left::after { background: linear-gradient(90deg, transparent 84%, rgba(12, 4, 6, .48)); }
.curtain-panel--right {
  right: 0;
  background-position: right center;
  transform-origin: right center;
}
.curtain-panel--right::after { background: linear-gradient(270deg, transparent 84%, rgba(12, 4, 6, .48)); }

.welcome {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(92vw, 740px);
  margin-top: -1.5vh;
  text-align: center;
  animation: welcome-arrive 1100ms cubic-bezier(.2,.75,.2,1) both;
  transition: opacity 500ms ease, transform 850ms cubic-bezier(.22,1,.36,1);
}
.welcome-tamil {
  margin: 0 0 1.25rem;
  color: #edc876;
  font-family: "Noto Serif Tamil", "Nirmala UI", "Latha", serif;
  font-size: clamp(.85rem, 1.2vw, 1rem);
  letter-spacing: .13em;
  animation: text-rise 900ms 120ms both;
}
.welcome-eyebrow {
  margin: 0;
  color: rgba(255, 243, 220, .76);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .32em;
  animation: text-rise 850ms 230ms both;
}
.welcome h1 {
  margin: 1.3rem 0 .9rem;
  color: var(--ivory);
  font-family: "Invite Display", "Palatino Linotype", Georgia, serif;
  font-size: clamp(3.6rem, 8vw, 7.25rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: 1.07;
  text-shadow: 0 6px 42px rgba(0,0,0,.45);
  animation: title-arrive 1350ms 180ms cubic-bezier(.2,.75,.2,1) both;
}
.welcome-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .52rem;
  margin: .35rem 0 1.1rem;
  color: #efcf8a;
  font-family: "Noto Serif Tamil", "Nirmala UI", "Latha", serif;
  font-size: clamp(.86rem, 1.2vw, 1rem);
  letter-spacing: .17em;
  animation: text-rise 900ms 430ms both;
}
.welcome-heart { display: block; width: 15px; height: 14px; object-fit: contain; filter: drop-shadow(0 1px 5px rgba(227,181,98,.4)); }
.open-action { display: inline-block; margin: .05rem 0 0; }
.open-button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: .05rem 0 0;
  padding: .9rem 1.65rem;
  min-width: 210px;
  border: 1px solid rgba(231,191,114,.66);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(73,28,26,.9), rgba(31,13,16,.94));
  box-shadow: inset 0 0 0 3px rgba(231,191,114,.09), inset 0 1px 0 rgba(255,244,215,.2), 0 10px 32px rgba(0,0,0,.34);
  cursor: pointer;
  animation: text-rise 950ms 580ms both;
  transition: transform 350ms cubic-bezier(.2,.8,.2,1), border-color 300ms ease, box-shadow 350ms ease, opacity 350ms ease;
}
.open-label {
  display: flex;
  align-items: center;
  color: #f1d69d;
  font: 500 .69rem/1.2 "Invite Display", Georgia, serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.open-bloom { position: absolute; z-index: 2; top: -1.45rem; right: -1.65rem; display: block; width: 60px; aspect-ratio: 1; pointer-events: none; transform: rotate(9deg); transform-origin: 55% 70%; animation: bloom-lilt 5.8s ease-in-out infinite; }
.open-bloom img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(22,8,10,.44)); }
.open-button:hover { transform: translateY(-2px); border-color: #f0d49b; box-shadow: inset 0 0 0 3px rgba(231,191,114,.14), inset 0 1px 0 rgba(255,244,215,.24), 0 15px 38px rgba(0,0,0,.42); }
.open-button:focus-visible { outline: 1px solid #f1d69d; outline-offset: 6px; }
.wedding-card {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  width: min(88vw, 760px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.91);
}
.name-wreath {
  position: relative;
  width: min(54vw, 650px);
  aspect-ratio: 1.5;
  margin: -.1rem 0 -.35rem;
  display: grid;
  place-items: center;
}
.maalai {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 22px 25px rgba(20, 7, 6, .55)) drop-shadow(0 5px 8px rgba(10, 4, 4, .45));
}
.name-lockup {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 54%;
  margin-top: -4%;
  text-shadow: 0 2px 15px rgba(25, 9, 7, .78);
}
.names {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: #fff5e6;
  font-family: "Segoe Script", "Brush Script MT", cursive;
  font-size: clamp(1.75rem, 2.55vw, 2.8rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: 1.04;
  white-space: nowrap;
}
.name-ampersand {
  margin: .03em 0 .07em;
  color: #edc36f;
  font-family: "Invite Display", Georgia, serif;
  font-size: .36em;
  font-style: normal;
  letter-spacing: 0;
}
.scroll-note { position: absolute; z-index: 4; bottom: 1.6rem; left: 50%; display: flex; align-items: center; gap: .6rem; margin: 0; color: rgba(255,242,217,.7); font-size: .52rem; letter-spacing: .24em; opacity: 0; text-decoration: none; transform: translateX(-50%); }
.scroll-note span { width: 5px; height: 5px; border-radius: 50%; background: #e5bd71; box-shadow: 0 0 12px rgba(229,189,113,.7); }

.celebration-section {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  padding: 17rem 1.5rem 6rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(150, 61, 53, .3), transparent 52%),
    radial-gradient(ellipse at 50% 100%, rgba(115, 48, 32, .18), transparent 45%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.012) 0 1px, transparent 1px 5px),
    linear-gradient(155deg, #241014, #130c10 58%, #1e1012);
}
.entrance-frame { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.entrance-toran { position: absolute; top: -.6rem; left: 50%; width: min(94vw, 920px); transform: translateX(-50%); filter: drop-shadow(0 8px 22px rgba(20,7,9,.4)); }
.entrance-toran img { display: block; width: 100%; height: auto; }
.entrance-frame .floral-edge {
  top: 10rem;
  bottom: 0;
  width: clamp(95px, 18vw, 230px);
  background-size: auto 74vh;
  opacity: .34;
  transition: none;
}
.celebration-content {
  position: relative;
  z-index: 1;
  width: min(100%, 760px);
  text-align: center;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(.2,.75,.2,1);
}
.celebration-content.is-visible { opacity: 1; transform: translateY(0); }
.section-eyebrow { display: flex; justify-content: center; align-items: center; gap: .8rem; margin: 0 0 1.5rem; color: #e8c27a; font-size: .59rem; font-weight: 600; letter-spacing: .22em; }
.section-eyebrow span { font-family: "Noto Serif Tamil", "Nirmala UI", "Latha", serif; font-size: .9rem; letter-spacing: .04em; }
.section-eyebrow i { display: block; width: 20px; height: 1px; background: rgba(232,194,122,.56); }
.celebration-content h2 { margin: 0; color: #fff2df; font-family: "Invite Display", "Palatino Linotype", Georgia, serif; font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.08; }
.celebration-content h2 em { color: #e5c27f; font-weight: 400; }
.section-intro { max-width: 37ch; margin: 1rem auto 2rem; color: rgba(255,243,222,.72); font-family: "Invite Display", Georgia, serif; font-size: 1.1rem; line-height: 1.55; }
.date-mark { display: flex; justify-content: center; align-items: center; gap: 1.1rem; margin: 1.2rem 0 1.8rem; color: #fff3df; }
.date-day { font-family: "Invite Display", Georgia, serif; font-size: clamp(5.6rem, 12vw, 8rem); font-weight: 400; letter-spacing: -.08em; line-height: .85; }
.date-month { color: #e7c47e; font-size: .72rem; line-height: 1.65; letter-spacing: .19em; text-align: left; }
.date-month i { padding: 0 .18rem; font-style: normal; }
.event-details { display: flex; justify-content: center; align-items: stretch; width: min(100%, 580px); margin: 0 auto; padding: 1.35rem 0; border-top: 1px solid rgba(222,187,119,.32); border-bottom: 1px solid rgba(222,187,119,.32); }
.event-detail { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; gap: .38rem; padding: .4rem 1rem; }
.event-label { color: #dcb86e; font-size: .55rem; font-weight: 600; letter-spacing: .22em; }
.event-detail strong { color: #fff2df; font-family: "Invite Display", Georgia, serif; font-size: clamp(1.1rem, 2.6vw, 1.45rem); font-weight: 400; }
.event-location { color: rgba(255,243,222,.62); font-size: .7rem; letter-spacing: .08em; }
.event-separator { align-self: stretch; width: 1px; background: linear-gradient(transparent, rgba(222,187,119,.44), transparent); }
.family-line { margin: 2rem 0 0; color: rgba(255,243,222,.78); font-family: "Invite Display", Georgia, serif; font-size: 1.05rem; line-height: 1.5; }
.return-link { display: inline-flex; align-items: center; gap: .65rem; margin-top: 2.2rem; color: rgba(232,194,122,.75); font-size: .53rem; font-weight: 600; letter-spacing: .2em; text-decoration: none; transition: color 200ms ease; }
.return-link:hover { color: #fff0ce; }
.return-link span { color: #edc876; font-size: .9rem; }

.floating-lights { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.floating-lights i { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #f4d79a; box-shadow: 0 0 12px 2px rgba(242,193,104,.45); opacity: 0; }
.floating-lights i:nth-child(1) { --x: 18%; --y: 68%; }
.floating-lights i:nth-child(2) { --x: 26%; --y: 40%; animation-delay: .4s; }
.floating-lights i:nth-child(3) { --x: 75%; --y: 57%; animation-delay: 1.1s; }
.floating-lights i:nth-child(4) { --x: 84%; --y: 35%; animation-delay: .8s; }
.floating-lights i:nth-child(5) { --x: 35%; --y: 78%; animation-delay: 1.7s; }
.floating-lights i:nth-child(6) { --x: 67%; --y: 28%; animation-delay: .2s; }
.floating-lights i:nth-child(7) { --x: 12%; --y: 52%; animation-delay: 1.4s; }
.floating-lights i:nth-child(8) { --x: 89%; --y: 70%; animation-delay: .6s; }

.petal-shower { position: absolute; z-index: 6; inset: 0; overflow: hidden; pointer-events: none; }
.flower-sprinkle {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--size);
  height: var(--size);
  opacity: 0;
  transform-origin: 50% 35%;
  animation: flower-fall var(--duration) cubic-bezier(.32,.12,.66,.96) var(--delay) both;
  will-change: transform, opacity;
}
.flower-sprinkle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: flower-tumble var(--tumble-duration, 3.8s) ease-in-out var(--tumble-delay, 0s) infinite alternate;
  filter: drop-shadow(0 2px 2px rgba(37,12,8,.2));
  user-select: none;
}
@keyframes flower-fall {
  0% { opacity: 0; transform: translate3d(0,0,0) rotate(0deg); }
  7% { opacity: .42; transform: translate3d(var(--drift-a),7vh,0) rotate(var(--spin-a)); }
  16% { opacity: var(--opacity); transform: translate3d(var(--drift-b),25vh,0) rotate(var(--spin-b)); }
  42% { transform: translate3d(var(--drift-c),52vh,0) rotate(var(--spin-c)); }
  69% { transform: translate3d(var(--drift-d),84vh,0) rotate(var(--spin)); opacity: var(--opacity); }
  100% { opacity: 0; transform: translate3d(var(--drift-d),116vh,0) rotate(var(--spin)); }
}
@keyframes flower-tumble {
  0% { transform: rotateY(-18deg) rotateZ(-9deg) scale(.94); }
  38% { transform: rotateY(27deg) rotateZ(8deg) scale(1.02); }
  72% { transform: rotateY(-8deg) rotateZ(15deg) scale(.98); }
  100% { transform: rotateY(21deg) rotateZ(-12deg) scale(1); }
}

.invitation[data-state="opening"] .curtain-panel--left,
.invitation[data-state="open"] .curtain-panel--left { transform: translateX(-108%) rotateY(-8deg) scaleX(1.035); }
.invitation[data-state="opening"] .curtain-panel--right,
.invitation[data-state="open"] .curtain-panel--right { transform: translateX(108%) rotateY(8deg) scaleX(1.035); }
.invitation[data-state="opening"] .stage,
.invitation[data-state="open"] .stage { opacity: 1; filter: saturate(1) brightness(.88); animation: cinematic-dolly 4200ms cubic-bezier(.35,.05,.16,1) both; }
.invitation[data-state="opening"] .stage-light,
.invitation[data-state="open"] .stage-light { opacity: 1; }
.invitation[data-state="opening"] .scene-shade,
.invitation[data-state="open"] .scene-shade { opacity: .78; }
.invitation[data-state="opening"] .welcome,
.invitation[data-state="open"] .welcome { opacity: 0; transform: translateY(-1.4rem) scale(.97); pointer-events: none; }
.invitation[data-state="opening"] .welcome,
.invitation[data-state="open"] .welcome { animation: none; }
.invitation[data-state="opening"] .wedding-card,
.invitation[data-state="open"] .wedding-card { animation: card-arrive 1450ms 1750ms cubic-bezier(.18,.76,.22,1) both; }
.invitation[data-state="opening"] .maalai,
.invitation[data-state="open"] .maalai { animation: wreath-arrive 1350ms 2200ms cubic-bezier(.18,.76,.22,1) both; }
.invitation[data-state="opening"] .name-lockup,
.invitation[data-state="open"] .name-lockup { animation: names-arrive 950ms 2600ms cubic-bezier(.18,.76,.22,1) both; }
.invitation[data-state="opening"] .floating-lights i,
.invitation[data-state="open"] .floating-lights i { animation: firefly 5.5s ease-in-out infinite; }
.invitation[data-state="opening"] .scroll-note,
.invitation[data-state="open"] .scroll-note { animation: note-arrive 900ms 3500ms both; }

@keyframes welcome-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes text-rise { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
@keyframes title-arrive { from { opacity: 0; filter: blur(8px); transform: translateY(20px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes cinematic-dolly {
  0% { filter: saturate(.78) brightness(.58) blur(.8px); transform: scale(.76) translate3d(0,-1.4%,0); }
  100% { filter: saturate(1) brightness(.86) blur(0); transform: scale(1.92) translate3d(0,2.2%,0); }
}
@keyframes card-arrive { from { opacity: 0; transform: translate(-50%, -42%) scale(.87); filter: blur(5px); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); } }
@keyframes wreath-arrive { from { opacity: 0; transform: scale(.82) rotate(-2deg); filter: blur(4px); } to { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); } }
@keyframes names-arrive { from { opacity: 0; transform: translateY(13px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes details-arrive { from { opacity: 0; transform: translateY(17px); } to { opacity: 1; transform: translateY(0); } }
@keyframes firefly { 0%,100% { opacity: .12; transform: translate3d(0,0,0) scale(.7); } 45% { opacity: .7; } 55% { transform: translate3d(5px,-14px,0) scale(1.15); } }
@keyframes note-arrive { from { opacity: 0; transform: translate(-50%,6px); } to { opacity: .7; transform: translate(-50%,0); } }
@keyframes bloom-lilt { 0%,100% { transform: rotate(9deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-2px); } }

@media (max-width: 700px) {
  .scene { min-height: 100svh; }
  .stage { background-position: 50% 48%; }
  .welcome { width: 94vw; margin-top: -1vh; }
  .welcome-tamil { margin-bottom: 1.5rem; }
  .welcome h1 { font-size: clamp(3.2rem, 13.5vw, 5.5rem); }
  .open-button { min-width: 196px; padding: .85rem 1.45rem; }
  .open-label { font-size: .66rem; letter-spacing: .16em; }
  .open-bloom { width: 52px; right: -1.4rem; top: -1.2rem; }
  .wedding-card { width: 96vw; transform: translate(-50%, -50%) scale(.91); }
  .name-wreath { width: min(86vw, 600px); margin-bottom: 0; }
  .name-lockup { width: 50%; }
  .names { font-size: clamp(1.45rem, 5.5vw, 2.15rem); }
  .celebration-section { min-height: 100svh; padding: 8.5rem 1.25rem 5rem; }
  .entrance-toran { top: -.25rem; width: min(96vw, 560px); }
  .entrance-frame .floral-edge { top: 6rem; width: 92px; background-size: auto 64vh; opacity: .31; }
  .celebration-content { max-width: 520px; }
  .celebration-content h2 { font-size: clamp(2.4rem, 8vw, 3.8rem); }
  .section-intro { max-width: 31ch; font-size: 1rem; }
  .event-details { max-width: 460px; }
  .event-detail { padding-inline: .6rem; }
  .event-detail strong { font-size: 1.15rem; }
  .scroll-note { bottom: .8rem; }
  .curtain-panel { transition-duration: 1550ms; }
}

@media (max-width: 390px) {
  .welcome h1 { font-size: 3.05rem; }
  .wedding-card { width: 100vw; }
  .name-wreath { width: min(86vw, 410px); }
  .names { font-size: clamp(1.4rem, 5.5vw, 1.9rem); }
  .section-eyebrow { gap: .5rem; font-size: .5rem; }
  .date-mark { margin-block: 1rem 1.45rem; }
  .date-day { font-size: 5.2rem; }
  .date-month { font-size: .65rem; }
  .event-details { flex-direction: column; gap: .6rem; padding: 1rem 0; }
  .event-detail { padding: .35rem .5rem; }
  .event-separator { align-self: center; width: 54px; height: 1px; background: linear-gradient(90deg, transparent, rgba(222,187,119,.44), transparent); }
  .event-detail strong { font-size: 1.22rem; }
  .family-line { margin-top: 1.5rem; }
}

@media (max-height: 720px) and (min-width: 701px) {
  .scene { min-height: 100svh; }
  .wedding-card { transform: translate(-50%, -50%) scale(.8); }
  .invitation[data-state="opening"] .wedding-card,
  .invitation[data-state="open"] .wedding-card { animation: card-arrive-short 1250ms 1700ms cubic-bezier(.18,.76,.22,1) both; }
  @keyframes card-arrive-short { from { opacity: 0; transform: translate(-50%, -42%) scale(.72); filter: blur(5px); } to { opacity: 1; transform: translate(-50%, -50%) scale(.8); filter: blur(0); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}