/* Motion layer (motion.js). Without it, none of these classes are ever set. */

/* Set before first paint by motion-boot.js; lifted once the intro has its starting positions. */
.motion-pending .edition-rail > *,
.motion-pending .intro-copy > *,
.motion-pending .connect-card,
.motion-pending .red-sun { visibility: hidden; }

/* GSAP drives these transforms; a CSS transition on top would make every frame lag behind. */
.motion-on .anime-card { transition: none; }
.motion-on .match-profile-card.motion-busy { transition: none; }
.motion-on .nav-icon { transition: color .2s; }

.motion-on .primary,
.motion-on .action,
.motion-on .account-actions button { transition: transform .12s ease, background-color .2s, color .2s; }
.motion-on .primary:active,
.motion-on .action:active,
.motion-on .account-actions button:active { transform: scale(.96); }

/* Sign-in tabs: one red ink line slides between them. */
.account-mode-ink { position: absolute; left: 0; bottom: -1px; width: 50%; height: 2px; background: var(--red); pointer-events: none; }
.account-mode:has(.account-mode-ink) button[aria-pressed="true"] { border-bottom-color: transparent; }

/* Hanko stamps that appear while dragging and land when the choice is made. */
.card-stamp { position: absolute; z-index: 6; display: grid; justify-items: center; gap: 3px; padding: 10px 16px 8px; border: 3px solid currentColor; border-radius: 8px; background: rgba(242, 238, 223, .84); box-shadow: 3px 3px 0 rgba(18, 18, 18, .18); pointer-events: none; visibility: hidden; opacity: 0; }
.card-stamp b { font: 400 34px/1 "Yu Mincho", "MS Mincho", serif; letter-spacing: .04em; }
.card-stamp small { font-size: 9px; font-weight: 800; letter-spacing: .22em; }
.stamp-watch { top: 26px; left: 24px; color: var(--red); }
.stamp-pass { top: 26px; right: 24px; color: var(--ink); }
.stamp-maybe { bottom: 30px; left: 50%; color: #7a6a48; }

/* Mutual match: the red thread of fate. */
html.match-moment-open { overflow: hidden; }
.match-moment { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); overflow: hidden; }
.match-moment[hidden] { display: none; }
.match-moment-backdrop { position: absolute; inset: 0; background: rgba(10, 10, 11, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.match-moment-backdrop::before { content: ''; position: absolute; inset: 0; opacity: .24; background-image: radial-gradient(rgba(255, 255, 255, .25) .55px, transparent .7px); background-size: 5px 5px; }
.match-moment-stage { position: relative; z-index: 1; width: min(520px, 100%); display: grid; justify-items: center; text-align: center; color: var(--paper); }
.match-moment-kanji { position: absolute; z-index: -1; top: 50%; left: 50%; translate: -50% -56%; color: rgba(239, 75, 63, .16); font: 400 min(78vw, 420px)/1 "Yu Mincho", "MS Mincho", serif; pointer-events: none; user-select: none; }
.match-moment-pair { --seal: clamp(76px, 22vw, 104px); position: relative; width: min(86vw, 420px); aspect-ratio: 320 / 120; margin: 0 0 22px; }
.match-moment-thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.match-moment-thread path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; }
.match-moment-thread circle { fill: var(--red); }
.match-moment-seal { position: absolute; top: 50%; width: var(--seal); height: var(--seal); margin-top: calc(var(--seal) / -2); display: grid; place-items: center; overflow: hidden; border: 3px solid var(--red); border-radius: 50%; color: var(--ink); background: var(--paper); box-shadow: 6px 6px 0 #080808; font: 400 calc(var(--seal) * .42)/1 Georgia, serif; }
.match-moment-seal.you { left: calc(15% - var(--seal) / 2); }
.match-moment-seal.them { left: calc(85% - var(--seal) / 2); }
.match-moment-seal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.match-moment-seal img[hidden] { display: none; }
.match-moment-kicker { margin: 0 0 10px; color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: .22em; }
.match-moment-stage h2 { margin: 0; color: var(--paper); font: 400 clamp(44px, 12vw, 72px)/.95 Georgia, "Times New Roman", serif; letter-spacing: -.05em; }
.match-moment-copy { max-width: 340px; margin: 14px 0 26px; color: #b9b5aa; font: italic 16px/1.5 Georgia, serif; }
.match-moment-copy b { color: var(--paper); font-style: normal; font-weight: 400; }
.match-moment-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.match-moment-actions button { min-height: 48px; padding: 0 22px; border: 1px solid rgba(242, 238, 223, .6); color: var(--paper); background: transparent; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.match-moment-actions .primary { border-color: var(--red); background: var(--red); }
.match-moment-actions .primary:hover { background: #d93d32; }
.match-moment-actions button:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.match-moment-petals { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.match-moment-petals i { position: absolute; left: 0; top: 0; border-radius: 70% 0 70% 0; }

/* A thin ink stroke behind the mouse (desktop only, drawn by trail.js). Under the sun curtain, over everything else. */
.ink-trail { position: fixed; inset: 0; z-index: 90; width: 100vw; height: 100vh; pointer-events: none; }

/* Sign-in and sign-out: the sun covers the screen, then lifts away like a sheet. */
.sun-curtain { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: var(--red); }
.sun-curtain[hidden] { display: none; }
.sun-curtain span { color: rgba(18, 18, 18, .3); font: 400 clamp(90px, 22vw, 240px)/1 "Yu Mincho", "MS Mincho", serif; letter-spacing: .06em; }