/* Molly's Café After Dark — THE ENDING (styles for ending.js). Everything is prefixed .en-… */

/* ================================================================== the overlay */
/* z-index 55: above the game (.screen is 50) but under confetti (.fall 70) and toasts (80) */
.en-root { position: fixed; inset: 0; z-index: 55; overflow: hidden; background: #0b0706; color: var(--cream); font-family: "Nunito", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
.en-stage { position: absolute; inset: 0; z-index: 1; }
.en-svg { display: block; width: 100%; height: 100%; }
.en-sr, .en-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.en-fade { position: absolute; inset: 0; z-index: 9; background: #0b0706; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.en-fade.on { opacity: 1; }
.en-root .btn { min-height: 44px; }
.en-root button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.en-skip { position: absolute; z-index: 8; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); min-width: 44px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(29,21,19,.62); color: var(--cream); font-weight: 800; font-size: .95rem; letter-spacing: .02em; cursor: pointer; backdrop-filter: blur(4px); box-shadow: inset 0 0 0 1.5px rgba(251,243,228,.25); animation: en-fadein .4s ease both; }
.en-skip:hover { background: rgba(29,21,19,.8); }

/* the ☰ menu (top-left, every beat) */
.en-menu-wrap { position: absolute; z-index: 8; top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); }
.en-menu-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(29,21,19,.62); color: var(--cream); font-size: 1.2rem; line-height: 1; cursor: pointer; backdrop-filter: blur(4px); box-shadow: inset 0 0 0 1.5px rgba(251,243,228,.25); }
.en-menu-btn:hover, .en-menu-btn[aria-expanded="true"] { background: rgba(29,21,19,.85); }
.en-menu { position: absolute; top: 52px; left: 0; min-width: 250px; padding: 6px; border-radius: 16px; background: var(--paper); box-shadow: 0 14px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; animation: en-popin .2s ease both; transform-origin: top left; }
.en-menu button { min-height: 44px; border: 0; border-radius: 10px; background: none; color: var(--ink); font-weight: 800; font-size: .95rem; text-align: left; padding: 0 14px; cursor: pointer; white-space: nowrap; }
.en-menu button:hover, .en-menu button:focus-visible { background: #f1e6d2; outline: none; }

/* Molly's face (a clone of the HUD cat) */
.en-face { flex: none; width: 56px; height: 56px; display: grid; place-items: center; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.en-face svg { width: 100%; height: 100%; }
.en-face .eyes { transform-box: fill-box; transform-origin: center; animation: en-blink 5s infinite; }
.en-face .tail { transform-box: fill-box; transform-origin: 0% 100%; animation: en-wag 2.4s ease-in-out infinite; }
.en-face-emoji { font-size: 2.4rem; line-height: 1; }
.en-bubble { background: var(--paper); color: var(--ink); border-radius: 18px 18px 18px 4px; padding: 10px 16px; line-height: 1.4; font-size: 1rem; font-weight: 700; box-shadow: 0 10px 28px rgba(0,0,0,.45); min-height: 2.8em; display: flex; align-items: center; }

/* the speech bubble over the station */
.en-say { position: absolute; z-index: 4; top: max(14px, env(safe-area-inset-top)); left: 50%; width: min(560px, calc(100% - 32px)); display: flex; align-items: flex-end; gap: 8px; pointer-events: none; opacity: 0; transform: translate(-50%, -14px); transition: opacity .3s ease, transform .35s cubic-bezier(.3,1.4,.5,1); }
.en-say.in { opacity: 1; transform: translate(-50%, 0); }
.en-say.in .en-face { animation: en-bob .5s ease; }
.en-say .en-bubble { flex: 1; }

/* ================================================================== 1. the ticket */
.en-ticket { position: absolute; inset: 0; z-index: 2; overflow-y: auto; display: flex; background: radial-gradient(ellipse at 50% 0%, #3a2a24, #1d1513 62%, #0b0706); }
.en-tk { --bw: min(500px, calc(100vw - 40px)); width: 100%; max-width: 560px; margin: auto; padding: 28px 20px max(28px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 22px; }

.en-book { position: relative; width: var(--bw); aspect-ratio: 1.55; display: grid; grid-template-columns: 1fr 1fr; margin-top: calc(var(--bw) * .06); opacity: 0; transform: translateY(26px) scale(.94) rotate(-1deg); transition: opacity .6s ease, transform .7s cubic-bezier(.3,1.3,.5,1); filter: drop-shadow(0 18px 26px rgba(0,0,0,.5)); }
.en-in .en-book { opacity: 1; transform: rotate(-1deg); }
.en-book-l { position: relative; border-radius: 10px 3px 3px 10px; background: linear-gradient(90deg, #8a1f28, #b8323a 12%, #c23a42 60%, #a52a33); padding: 12% 12% 10%; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; box-shadow: inset -10px 0 14px rgba(0,0,0,.28); }
.en-book-l::before { content: ""; position: absolute; inset: 7%; border: 1.5px dashed rgba(251,243,228,.35); border-radius: 6px; }
.en-book-band { position: absolute; top: 0; bottom: 0; right: 16%; width: 7%; background: linear-gradient(90deg, #1d1513, #3a2a23 50%, #1d1513); box-shadow: 0 0 6px rgba(0,0,0,.4); }
.en-book-title { position: relative; margin: 0; font-family: "Fraunces", Georgia, serif; font-weight: 800; font-size: calc(var(--bw) * .056); color: var(--cream); letter-spacing: .02em; }
.en-book-owner { position: relative; margin: 2px 0 0; font-family: "Caveat", cursive; font-size: calc(var(--bw) * .042); color: #ffd7d3; line-height: 1.1; }
.en-book-r { position: relative; border-radius: 3px 10px 10px 3px; padding: 9% 9%; background-color: #fbf3e4; background-image: radial-gradient(circle, rgba(123,102,90,.28) 1px, transparent 1.4px); background-size: calc(var(--bw) * .036) calc(var(--bw) * .036); box-shadow: inset 12px 0 14px -8px rgba(0,0,0,.3); }
.en-book-note { margin: 0; font-family: "Caveat", cursive; font-size: calc(var(--bw) * .05); color: var(--muted); transform: rotate(-3deg); transform-origin: left; }
.en-pocket { position: absolute; z-index: 3; left: 54%; right: 4%; bottom: 6%; height: 42%; border-radius: 4px 4px 8px 8px; background: linear-gradient(#d9b98b, #c9a473); box-shadow: 0 -2px 0 rgba(255,255,255,.35) inset, 0 4px 8px rgba(58,42,35,.25); display: grid; place-items: center; }
.en-pocket::before { content: ""; position: absolute; left: 8%; right: 8%; top: 12%; border-top: 2px dashed rgba(90,58,38,.45); }
.en-pocket span { font-size: calc(var(--bw) * .06); color: var(--cherry); line-height: 1; margin-top: 8%; }

/* the ticket: tucked in the pocket (small, behind it) → slides up and out to the front */
.en-tcard { --tuck: translate(-50%, -50%) translate(calc(var(--bw) * .25), calc(var(--bw) * .08)) scale(.42) rotate(0deg);
  --shown: translate(-50%, -50%) translate(0, calc(var(--bw) * -.04)) scale(1) rotate(-3deg);
  position: absolute; z-index: 2; left: 50%; top: 50%; width: calc(var(--bw) * .9); color: #1d2433; font-size: calc(var(--bw) * .03); border-radius: 10px; overflow: hidden; transform: var(--tuck); filter: drop-shadow(0 10px 14px rgba(0,0,0,.35));
  background: radial-gradient(circle at 0 60%, transparent 9px, #f6f0de 10px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 60%, transparent 9px, #f6f0de 10px) right / 51% 100% no-repeat; }
.en-out .en-tcard { z-index: 4; transform: var(--shown); animation: en-tkout 1.5s cubic-bezier(.45,.05,.3,1) both; }
.en-now .en-book, .en-now .en-tcard, .en-now .en-tc-stamp, .en-now .en-tk-say, .en-now .en-gobtn { animation: none !important; transition: none !important; }
@keyframes en-tkout {
  0% { transform: var(--tuck); z-index: 2; }
  38% { transform: translate(-50%, -50%) translate(calc(var(--bw) * .25), calc(var(--bw) * -.13)) scale(.5) rotate(5deg); z-index: 2; }
  42% { z-index: 4; }
  100% { transform: var(--shown); z-index: 4; }
}
.en-tc-top { display: flex; justify-content: space-between; gap: 8px; padding: .7em 1.2em .6em; background: #1f3a6e; color: #fbf3e4; font-weight: 800; letter-spacing: .12em; font-size: .78em; }
.en-tc-body { position: relative; padding: 1em 1.4em 1.1em; background-image: repeating-linear-gradient(135deg, rgba(31,58,110,.045) 0 6px, transparent 6px 12px); }
.en-tc-route { font-family: "Fraunces", Georgia, serif; font-weight: 800; font-size: 1.55em; line-height: 1.15; color: #1f3a6e; }
.en-tc-route i { font-style: normal; color: var(--cherry); padding: 0 .15em; }
.en-tc-grid { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: .2em 2em; margin: .8em 0 .7em; }
.en-tc-grid small { display: block; font-size: .72em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6c7280; }
.en-tc-grid b { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 1.5em; color: #1d2433; }
.en-tc-names { display: flex; align-items: center; justify-content: space-between; gap: 1em; border-top: 1.5px dashed rgba(31,58,110,.35); padding-top: .6em; }
.en-tc-names > span:first-child { font-family: "Caveat", cursive; font-weight: 700; font-size: 1.75em; color: var(--cherry); line-height: 1; }
.en-tc-bar { flex: none; width: 34%; height: 2.1em; background: repeating-linear-gradient(90deg, #1d2433 0 2px, transparent 2px 4px, #1d2433 4px 5px, transparent 5px 8px, #1d2433 8px 11px, transparent 11px 13px); opacity: .85; }
.en-tc-stamp { position: absolute; right: 1.1em; top: 3.1em; width: 5.6em; height: 5.6em; border-radius: 50%; border: .2em double var(--cherry); color: var(--cherry); display: grid; place-items: center; text-align: center; font-weight: 800; font-size: .82em; line-height: 1.1; letter-spacing: .08em; transform: rotate(14deg); opacity: 0; }
.en-out .en-tc-stamp { opacity: .78; animation: en-stamp .45s 1.55s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes en-stamp { from { opacity: 0; transform: rotate(14deg) scale(2.2); } to { opacity: .78; transform: rotate(14deg) scale(1); } }

.en-tk-say { width: 100%; display: flex; align-items: flex-end; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .4s cubic-bezier(.3,1.4,.5,1); }
.en-tk.talk .en-tk-say { opacity: 1; transform: none; }
.en-tk.talk .en-tk-say .en-face { animation: en-bob .5s ease; }
.en-tk-say .en-bubble { flex: 1; font-size: 1.05rem; }
.en-gobtn { font-size: 1.15rem; padding: 14px 28px; min-height: 52px; }
.en-gobtn:not(.show) { visibility: hidden; opacity: 0; }
.en-gobtn.show { animation: en-popin .45s cubic-bezier(.3,1.6,.5,1) both; }

/* ================================================================== 2. the station (SVG) */
.en-svg .en-star { animation: en-twinkle 4s ease-in-out infinite; }
.en-svg .en-glow { animation: en-flicker 7s ease-in-out infinite; }
.en-svg .en-steam { transform-box: fill-box; transform-origin: center; animation: en-drift 14s ease-in-out infinite alternate; }
.en-svg .en-vig, .en-svg .en-night, .en-svg .en-glow, .en-svg .en-steam, .en-svg .en-puff { pointer-events: none; }
.en-svg .en-night { opacity: 0; transition: opacity 2.6s ease; }
.en-svg.en-dimmed .en-night { opacity: .5; }
.en-svg .en-sec { transform-box: fill-box; transform-origin: center; animation: en-spin 60s steps(60) infinite; }
.en-svg .en-ding { opacity: 0; transform-box: fill-box; transform-origin: center; }
.en-svg .en-ding.on { animation: en-ding 3s ease both; }

/* actors: .en-act (position, set by JS) > .en-hop (CSS moves) > .en-flip > .en-frames */
.en-svg .en-hop { transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .7s ease, transform .7s ease; }
.en-svg .en-shadow { transition: opacity .6s ease; }
.en-svg .en-jumping .en-hop { animation: en-jump .43s cubic-bezier(.3,.7,.5,1) 3; }
.en-svg .en-hopping .en-hop { animation: en-hopm .45s ease-out; }
.en-svg .en-board .en-hop { opacity: 0; transform: translateY(-16px) scale(.93); }
.en-svg .en-board .en-shadow { opacity: 0; }
.en-svg .en-startle .en-hop { animation: en-startle .55s ease-out; }
.en-svg .en-fly .en-hop { transform: rotate(-12deg); }
.en-svg .en-arhug .en-shadow { display: none; }
.en-svg .en-arhug-wrap { opacity: 0; transition: opacity .35s ease; }
.en-svg .en-arhug-wrap.on { opacity: 1; }
/* the tear (in sprite-pixel units: 1 = one pixel) */
.en-svg .en-tear-in { opacity: 0; transform-box: fill-box; transform-origin: 50% 0; }
.en-svg .en-cry .en-tear-in { animation: en-tear 3.4s ease-in both; }

/* the train: door leaves slide shut, then it pulls out to the right */
.en-svg .en-train { transition: transform 3.6s cubic-bezier(.55,0,.85,.55); }
.en-svg .en-train.en-go { transform: translateX(3000px); }
.en-svg .en-leaf { transition: transform .8s cubic-bezier(.5,0,.3,1); }
.en-svg .en-leaf-l { transform: translateX(-60px); }
.en-svg .en-leaf-r { transform: translateX(60px); }
.en-svg .en-closing .en-leaf, .en-svg .en-shut .en-leaf { transform: none; }
.en-svg .en-closing .en-dlight { fill: #ff5b4b; animation: en-blinkfast .3s steps(2) infinite; }
.en-svg .en-shut .en-dlight { fill: #ff5b4b; }
.en-svg .en-mlines { opacity: 0; stroke-dasharray: 70 34; transition: opacity .8s ease .5s; }
.en-svg .en-go .en-mlines { opacity: .75; animation: en-dash .4s linear infinite; }
.en-svg .en-puff circle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.en-svg.en-departing .en-puff circle { animation: en-puff 2.6s ease-out both; }

/* fx: rising hearts, the kiss heart */
.en-svg .en-heart { opacity: 0; transform-box: fill-box; transform-origin: center; animation: en-rise 3s ease-out both; }
.en-svg .en-pop { transform-box: fill-box; transform-origin: 50% 80%; animation: en-kiss 3s ease both; }

/* skip → end state: no transitions for a moment */
.en-svg.en-instant, .en-svg.en-instant * { transition: none !important; }

/* ================================================================== 3. the question */
.en-cards { position: absolute; inset: 0; z-index: 5; display: flex; overflow-y: auto; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
/* sits in the band above the heads (--tz = where the heads start on screen) */
.en-qwrap { bottom: auto; height: max(var(--tz, 50%), 270px); align-items: center; justify-content: center; overflow: visible; pointer-events: none; }
.en-q { pointer-events: auto; width: min(460px, 100%); background: rgba(255,250,242,.96); color: var(--ink); border-radius: 22px; padding: 20px 22px 22px; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 0 0 2px var(--line); animation: en-popin .55s cubic-bezier(.3,1.4,.5,1) both; }
.en-q:focus { outline: none; }
.en-q h2 { font-family: "Fraunces", Georgia, serif; font-weight: 800; font-size: clamp(1.35rem, 5.4vw, 1.9rem); line-height: 1.2; margin: 4px 0 18px; }
.en-q-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.en-big { min-width: 128px; min-height: 54px; font-size: 1.2rem; }
.en-kick { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--cherry); }

/* ================================================================== finals */
.en-final-wrap { align-items: flex-start; background: rgba(11,7,6,.5); backdrop-filter: blur(2px); animation: en-fadein 1s ease both; }
.en-final { width: min(620px, 100%); margin: auto; position: relative; text-align: center; animation: en-rise-card .9s cubic-bezier(.3,1.2,.5,1) both; }
.en-final:focus { outline: none; }

/* YES */
.en-yes .en-final { background: rgba(29,21,19,.88); border-radius: 24px; padding: 26px 22px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 0 0 1.5px rgba(251,243,228,.12); }
.en-yes .en-kick { color: #ff8a8f; }
.en-final h1 { font-family: "Fraunces", Georgia, serif; font-weight: 800; font-size: clamp(2rem, 8vw, 3rem); line-height: 1.05; margin: 6px 0 18px; }
.en-final h1 span { display: block; font-family: "Caveat", cursive; font-weight: 700; font-size: .72em; color: #ffd98a; margin-top: 4px; }
.en-polaroid { width: min(260px, 72%); margin: 0 auto 16px; padding: 10px 10px 4px; background: #fffdf8; border-radius: 3px; transform: rotate(-3deg); box-shadow: 0 14px 30px rgba(0,0,0,.45); animation: en-drop .8s .35s cubic-bezier(.3,1.4,.5,1) both; }
.en-pola-svg { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.en-polaroid figcaption { font-family: "Caveat", cursive; font-weight: 700; font-size: 1.5rem; color: var(--ink); padding: 4px 0 2px; }
.en-stats { font-size: 1.15rem; font-weight: 800; margin: 8px 0 4px; }
.en-note { margin: 0 auto 18px; max-width: 420px; opacity: .7; line-height: 1.45; }
.en-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 14px 0 0; }
.en-end-btns { margin-top: 22px; }
.en-final .en-letter { text-align: left; }
/* the ruled lines sit just under the handwriting (baseline ≈ 1px above each line) */
.en-final .letter.en-poem { background-position: 0 28px; }
/* Yes: the letter paper runs to the card's edges */
.en-yes .en-letter { margin: 0 -22px; }
.en-yes .en-letter .letter { border-radius: 0; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.en-letter.en-reading .en-poem > p { animation: en-stanza 1.1s ease both; }

/* NO: no card, just the envelope and the poem over the dimmed station */
.en-no.en-final-wrap { background: rgba(11,7,6,.3); backdrop-filter: none; transition: background .8s ease; }
.en-no.en-slow .en-final { animation-duration: 2s; }
.en-env { --ew: min(300px, 72vw); position: relative; width: var(--ew); aspect-ratio: 1.6; margin: calc(var(--ew) * .42) auto 0; /* room for the opened flap */ perspective: 700px; filter: drop-shadow(0 14px 22px rgba(0,0,0,.45)); }
.en-env > div { position: absolute; }
.en-env-back { inset: 0; border-radius: 8px; background: #e6d6b8; }
.en-env-paper { z-index: 2; left: 7%; right: 7%; top: 8%; bottom: 8%; border-radius: 4px; background: var(--paper) repeating-linear-gradient(transparent 0 11px, #e9dcc6 11px 12px); transition: transform 1s .45s cubic-bezier(.3,1.2,.5,1); }
.en-env-front { z-index: 3; inset: 0; border-radius: 8px; background: linear-gradient(#f6ecd7, #efe2c8); clip-path: polygon(0 34%, 50% 68%, 100% 34%, 100% 100%, 0 100%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7%; }
.en-env-front span { font-family: "Caveat", cursive; font-weight: 700; font-size: 1.6rem; color: var(--ink); }
.en-env-flap { z-index: 4; left: 0; right: 0; top: 0; height: 64%; background: linear-gradient(#efe2c8, #e3d2b1); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transition: transform .7s cubic-bezier(.5,0,.3,1), z-index 0s .35s; }
.en-env-seal { z-index: 5; left: 50%; top: 64%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--cherry); box-shadow: 0 2px 4px rgba(0,0,0,.3), inset 0 -2px 0 var(--cherry-d); display: grid; place-items: center; transition: transform .35s ease, opacity .35s ease; }
.en-env-seal::before { content: "♥"; color: #ffd7d3; font-size: 15px; line-height: 1; }
.en-env.open .en-env-seal { transform: scale(0) rotate(-30deg); opacity: 0; }
.en-env.open .en-env-flap { z-index: 1; transform: rotateX(180deg); }
.en-env.open .en-env-paper { transform: translateY(-34%); }
.en-no .en-letter { margin-top: -6px; }
.en-no .en-letter .letter { margin-top: 0; }
.en-quiet { margin-top: 18px; }
.en-close { min-width: 44px; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: rgba(29,21,19,.55); color: var(--cream); font-weight: 700; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(251,243,228,.3); animation: en-fadein .8s ease both; }
.en-cards.en-closed { background: transparent; pointer-events: none; }
.en-cards.en-closed .en-final { opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity .6s ease, transform .6s ease; animation: none; }
.en-reopen { position: fixed; z-index: 6; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--paper); color: var(--cherry); font-size: 1.6rem; cursor: pointer; pointer-events: auto; box-shadow: 0 8px 20px rgba(0,0,0,.45); animation: en-popin .45s cubic-bezier(.3,1.6,.5,1) both; }

/* ================================================================== screens */
.en-tall .en-bubble { font-size: .95rem; }
.en-tall .en-say .en-face { width: 46px; height: 46px; }
@media (max-width: 700px) {
  .en-say { left: auto; right: 16px; width: calc(100% - 90px); transform: translateY(-14px); }
  .en-say.in { transform: none; }
}
@media (max-width: 600px) {
  .en-q { padding: 16px 16px 18px; }
  .en-big { min-width: 112px; }
  .en-yes .en-final { padding: 22px 14px 20px; }
  .en-yes .en-letter { margin: 0 -14px; }
  .en-tk-say .en-bubble { font-size: .98rem; }
  .en-final .letter { padding: 22px 16px 24px; font-size: 1.32rem; }
}
@media (max-height: 520px) {
  .en-say { width: min(620px, calc(100% - 120px)); }
  .en-q { padding: 12px 16px 14px; }
  .en-q h2 { margin-bottom: 10px; }
}
/* Reduced motion: the engine's global rule already shortens every animation to ~0; loops just stop. */
.en-reduced .en-svg .en-star, .en-reduced .en-svg .en-glow, .en-reduced .en-svg .en-steam, .en-reduced .en-svg .en-sec, .en-reduced .en-face .eyes, .en-reduced .en-face .tail { animation: none; }

/* ================================================================== keyframes */
@keyframes en-fadein { from { opacity: 0; } }
@keyframes en-popin { from { opacity: 0; transform: scale(.8) translateY(12px); } }
@keyframes en-rise-card { from { opacity: 0; transform: translateY(40px); } }
@keyframes en-drop { from { opacity: 0; transform: rotate(-14deg) translateY(-30px) scale(1.1); } }
@keyframes en-stanza { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } }
@keyframes en-bob { 30% { transform: translateY(-4px) rotate(-4deg); } }
@keyframes en-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes en-wag { 50% { transform: rotate(14deg); } }
@keyframes en-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes en-flicker { 0%, 100% { opacity: 1; } 45% { opacity: .82; } 48% { opacity: .95; } 70% { opacity: .88; } }
@keyframes en-drift { from { transform: translate(-40px, 6px) scale(.95); opacity: .6; } to { transform: translate(50px, -10px) scale(1.12); opacity: 1; } }
@keyframes en-spin { to { transform: rotate(360deg); } }
@keyframes en-ding { 0% { opacity: 0; transform: translateY(12px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes en-jump { 0%, 100% { transform: translateY(0) scale(1.04, .94); } 15% { transform: translateY(-10px) scale(.96, 1.06); } 50% { transform: translateY(-70px) scale(1); } }
@keyframes en-hopm { 50% { transform: translateY(-42px); } }
@keyframes en-startle { 0%, 100% { transform: none; } 35% { transform: translateY(-34px) rotate(-8deg); } 70% { transform: translateY(-6px); } }
@keyframes en-tear { 0% { opacity: 0; transform: scale(.2); } 18% { opacity: 1; transform: scale(1); } 40% { opacity: 1; transform: translateY(.5px); } 88% { opacity: .9; transform: translateY(7px); } 100% { opacity: 0; transform: translateY(8px); } }
@keyframes en-blinkfast { 50% { opacity: .2; } }
@keyframes en-dash { to { stroke-dashoffset: 104; } }
@keyframes en-puff { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(-120px, -70px) scale(1.6); } }
@keyframes en-rise { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 12% { opacity: 1; transform: translate(0, -30px) scale(1); } 80% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), -520px) scale(.9) rotate(12deg); } }
@keyframes en-kiss { 0% { opacity: 0; transform: scale(0); } 18% { opacity: 1; transform: scale(1.3); } 30% { transform: scale(1); } 75% { opacity: 1; transform: translateY(-40px); } 100% { opacity: 0; transform: translateY(-90px) scale(.8); } }