@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } :root:active-view-transition .ec-topbar { view-transition-name: ec-topbar; } :root:active-view-transition .fr-nav { view-transition-name: fr-nav; } :root:active-view-transition .ec-hero .ec-cap { view-transition-name: ec-hero-cap; } :root:active-view-transition .fr-hero .fr-hero-body { view-transition-name: fr-hero-body; } ::view-transition-group(enlarger-hero) { z-index: 1; } ::view-transition-group(ec-hero-cap), ::view-transition-group(fr-hero-body) { z-index: 2; } ::view-transition-group(ec-topbar), ::view-transition-group(fr-nav) { z-index: 3; } .turbo-progress-bar { visibility: hidden; } .ec-loader { position: fixed; top: 14px; left: 50%; z-index: 2147483000; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: #fff; box-shadow: 0 8px 24px rgba(20, 16, 24, 0.18), 0 0 0 1px rgba(20, 16, 24, 0.06); opacity: 0; scale: 0.6; pointer-events: none; transition: opacity 0.18s ease, scale 0.18s ease; } .ec-loader .ec-rosette { display: block; width: 26px; height: 26px; fill: #fb761c; } .ec-loader .ec-rosette-ring { opacity: 0.28; } html[aria-busy="true"] .ec-loader { opacity: 1; scale: 1; transition: opacity 0.2s ease 0.3s, scale 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) 0.3s; } html[aria-busy="true"] .ec-loader .ec-rosette-ring { animation: ec-ring 1.1s ease-in-out calc(var(--i) * 0.11s) infinite; } @keyframes ec-ring { 0%, 100% { opacity: 0.28; } 35% { opacity: 1; } } :where(button[aria-busy="true"], form[aria-busy="true"] :is(button[type="submit"], button:not([type]))) { position: relative; animation: ec-busy-words 0.2s ease 0.12s both; } :where(button[aria-busy="true"], form[aria-busy="true"] :is(button[type="submit"], button:not([type]))) > * { animation: ec-busy-hide 0s 0.12s both; } :where(button[aria-busy="true"], form[aria-busy="true"] :is(button[type="submit"], button:not([type])))::after { content: ""; position: absolute; inset: 0; width: 1.15em; height: 1.15em; margin: auto; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='20 20 472 472'%3E%3Cg fill='%23000'%3E%3Ccircle cx='291.0' cy='264.0' r='6.4'/%3E%3Ccircle cx='284.0' cy='278.4' r='6.4'/%3E%3Ccircle cx='271.5' cy='288.4' r='6.4'/%3E%3Ccircle cx='255.9' cy='291.9' r='6.4'/%3E%3Ccircle cx='240.3' cy='288.3' r='6.4'/%3E%3Ccircle cx='227.8' cy='278.3' r='6.4'/%3E%3Ccircle cx='220.9' cy='263.9' r='6.4'/%3E%3Ccircle cx='220.9' cy='247.9' r='6.4'/%3E%3Ccircle cx='227.9' cy='233.5' r='6.4'/%3E%3Ccircle cx='240.4' cy='223.5' r='6.4'/%3E%3Ccircle cx='256.0' cy='220.0' r='6.4'/%3E%3Ccircle cx='271.6' cy='223.6' r='6.4'/%3E%3Ccircle cx='284.1' cy='233.6' r='6.4'/%3E%3Ccircle cx='291.0' cy='248.0' r='6.4'/%3E%3Ccircle cx='309.7' cy='268.4' r='9.9'/%3E%3Ccircle cx='299.0' cy='290.5' r='9.9'/%3E%3Ccircle cx='279.8' cy='305.7' r='9.9'/%3E%3Ccircle cx='255.8' cy='311.1' r='9.9'/%3E%3Ccircle cx='231.9' cy='305.6' r='9.9'/%3E%3Ccircle cx='212.7' cy='290.3' r='9.9'/%3E%3Ccircle cx='202.1' cy='268.1' r='9.9'/%3E%3Ccircle cx='202.2' cy='243.5' r='9.9'/%3E%3Ccircle cx='212.9' cy='221.4' r='9.9'/%3E%3Ccircle cx='232.1' cy='206.2' r='9.9'/%3E%3Ccircle cx='256.1' cy='200.8' r='9.9'/%3E%3Ccircle cx='280.0' cy='206.3' r='9.9'/%3E%3Ccircle cx='299.2' cy='221.7' r='9.9'/%3E%3Ccircle cx='309.8' cy='243.8' r='9.9'/%3E%3Ccircle cx='338.5' cy='275.0' r='15.2'/%3E%3Ccircle cx='322.0' cy='308.9' r='15.2'/%3E%3Ccircle cx='292.5' cy='332.4' r='15.2'/%3E%3Ccircle cx='255.7' cy='340.7' r='15.2'/%3E%3Ccircle cx='219.0' cy='332.2' r='15.2'/%3E%3Ccircle cx='189.6' cy='308.6' r='15.2'/%3E%3Ccircle cx='173.3' cy='274.6' r='15.2'/%3E%3Ccircle cx='173.4' cy='236.9' r='15.2'/%3E%3Ccircle cx='189.9' cy='203.0' r='15.2'/%3E%3Ccircle cx='219.4' cy='179.5' r='15.2'/%3E%3Ccircle cx='256.2' cy='171.2' r='15.2'/%3E%3Ccircle cx='292.9' cy='179.7' r='15.2'/%3E%3Ccircle cx='322.3' cy='203.3' r='15.2'/%3E%3Ccircle cx='338.6' cy='237.3' r='15.2'/%3E%3Ccircle cx='382.6' cy='285.2' r='23.4'/%3E%3Ccircle cx='357.4' cy='337.3' r='23.4'/%3E%3Ccircle cx='312.1' cy='373.2' r='23.4'/%3E%3Ccircle cx='255.6' cy='386.0' r='23.4'/%3E%3Ccircle cx='199.2' cy='373.0' r='23.4'/%3E%3Ccircle cx='154.1' cy='336.8' r='23.4'/%3E%3Ccircle cx='129.1' cy='284.6' r='23.4'/%3E%3Ccircle cx='129.3' cy='226.7' r='23.4'/%3E%3Ccircle cx='154.5' cy='174.6' r='23.4'/%3E%3Ccircle cx='199.8' cy='138.7' r='23.4'/%3E%3Ccircle cx='256.3' cy='125.9' r='23.4'/%3E%3Ccircle cx='312.7' cy='138.9' r='23.4'/%3E%3Ccircle cx='357.8' cy='175.1' r='23.4'/%3E%3Ccircle cx='382.8' cy='227.3' r='23.4'/%3E%3Ccircle cx='450.4' cy='300.8' r='35.9'/%3E%3Ccircle cx='411.7' cy='380.8' r='35.9'/%3E%3Ccircle cx='342.1' cy='436.0' r='35.9'/%3E%3Ccircle cx='255.5' cy='455.5' r='35.9'/%3E%3Ccircle cx='168.9' cy='435.6' r='35.9'/%3E%3Ccircle cx='99.6' cy='380.0' r='35.9'/%3E%3Ccircle cx='61.3' cy='299.9' r='35.9'/%3E%3Ccircle cx='61.5' cy='211.1' r='35.9'/%3E%3Ccircle cx='100.2' cy='131.1' r='35.9'/%3E%3Ccircle cx='169.8' cy='75.9' r='35.9'/%3E%3Ccircle cx='256.4' cy='56.4' r='35.9'/%3E%3Ccircle cx='343.0' cy='76.3' r='35.9'/%3E%3Ccircle cx='412.3' cy='131.9' r='35.9'/%3E%3Ccircle cx='450.6' cy='212.0' r='35.9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; animation: ec-busy-in 0.2s ease 0.12s both, ec-busy-turn 1.8s linear infinite; } @keyframes ec-busy-words { to { -webkit-text-fill-color: transparent; } } @keyframes ec-busy-hide { to { visibility: hidden; } } @keyframes ec-busy-in { to { opacity: 1; } } @keyframes ec-busy-turn { to { rotate: 1turn; } } @keyframes ec-pop { 0% { scale: 0.6; } 55% { scale: 1.22; } 100% { scale: 1; } } @keyframes ec-nudge { 0% { scale: 1; } 40% { scale: 1.06; } 100% { scale: 1; } } @keyframes ec-roll { from { translate: 0 0.7em; opacity: 0; } to { translate: none; opacity: 1; } } :is(button, .cta-btn, .ev-prop-in).ec-arrived { animation: ec-nudge 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); } .ec-done::before { content: "\2713"; display: inline-block; margin-right: 0.4em; animation: ec-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .upvote-box-wrap.ec-arrived .upvote-box svg { animation: ec-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .upvote-box-wrap.ec-arrived .upvote-box-count { display: inline-block; animation: ec-roll 0.35s ease-out; } .feed-rsvp-going.ec-arrived { display: inline-block; animation: ec-nudge 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); } @media (prefers-reduced-motion: no-preference) { :where(.ec-photo-watch) :is(.ec-shot, .mh-shot, .ec-recap-shot, .event-snapshot, .mh-post-shot, .mh-post-strip, .fn-cite-pic) img:not(.ec-photo-in) { filter: brightness(1.32) saturate(0.2) contrast(0.82); } :is(.ec-shot, .mh-shot, .ec-recap-shot, .event-snapshot, .mh-post-shot, .mh-post-strip, .fn-cite-pic) img.ec-photo-developing { animation: ec-develop 1s cubic-bezier(0.2, 0.7, 0.2, 1); } } @keyframes ec-develop { from { filter: brightness(1.32) saturate(0.2) contrast(0.82); } } ::view-transition-group(lightbox-photo) { animation-duration: 0.34s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); } ::view-transition-old(lightbox-photo), ::view-transition-new(lightbox-photo) { height: 100%; object-fit: cover; } @media (prefers-reduced-motion: no-preference) { .flash-banner { animation: ec-toast-in 0.5s cubic-bezier(0.2, 1.3, 0.4, 1); } } @keyframes ec-toast-in { from { opacity: 0; translate: 0 -16px; } } @media (prefers-reduced-motion: no-preference) { .ec-flip { display: inline-block; animation: ec-flip 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); } } @keyframes ec-flip { from { opacity: 0; translate: 0 -0.5em; } } @media (prefers-reduced-motion: no-preference) { .ec-page.is-seen { --ec-pace: 0.4; } :where(.ec-photo-watch) .ec-page .ec-hero .ec-shot:not(:has(img.ec-photo-in)) { background: #1d1a22; } :where(.ec-photo-watch) .ec-page .ec-hero .ec-shot:not(:has(img.ec-photo-in))::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(246, 244, 240, 0.09) 50%, transparent 70%) -100% 0 / 60% 100% no-repeat; animation: ec-stage-light 1.6s ease-in-out 6; } :where(.ec-photo-watch) .ec-page .ec-hero .ec-shot img:not(.ec-photo-in) { filter: saturate(0) contrast(0.42) brightness(1.75) sepia(0.3); } :root:not([data-turbo-preview]) .ec-page .ec-hero .ec-shot img.ec-photo-developing { animation: ec-print calc(2.4s * var(--ec-pace, 1)) cubic-bezier(0.45, 0, 0.25, 1), ec-hero-settle calc(2.4s * var(--ec-pace, 1)) cubic-bezier(0.16, 1, 0.3, 1); } :root:not([data-turbo-preview]) .ec-page .ec-hero .ec-cap :is(.ec-hero-city, .ec-hero-flag) { animation: ec-come-up calc(0.7s * var(--ec-pace, 1)) cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.15s * var(--ec-pace, 1)) backwards; } :root:not([data-turbo-preview]) .ec-page .ec-hero .ec-cap .ec-hero-city::after { animation: ec-nudge-in calc(0.6s * var(--ec-pace, 1)) cubic-bezier(0.3, 1.5, 0.5, 1) calc(0.55s * var(--ec-pace, 1)) backwards; } :root:not([data-turbo-preview]) .ec-page .ec-hero .ec-cap h1 { animation: ec-title-up calc(1s * var(--ec-pace, 1)) cubic-bezier(0.16, 1, 0.3, 1) calc(0.25s * var(--ec-pace, 1)) backwards; } :root:not([data-turbo-preview]) .ec-page .ec-hero .ec-going-av { animation: ec-face-drop calc(0.6s * var(--ec-pace, 1)) cubic-bezier(0.3, 1.5, 0.5, 1) calc((0.6s + var(--n, 0) * 0.08s) * var(--ec-pace, 1)) backwards; } .ec-page .ec-hero .ec-going-av:nth-child(2) { --n: 1; } .ec-page .ec-hero .ec-going-av:nth-child(3) { --n: 2; } .ec-page .ec-hero .ec-going-av:nth-child(4) { --n: 3; } :root:not([data-turbo-preview]) .ec-page .ec-hero .ec-going > .ec-mono:not(:has(.ec-odo)) { display: inline-block; animation: ec-roll calc(0.5s * var(--ec-pace, 1)) cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.85s * var(--ec-pace, 1)) backwards; } :root:not([data-turbo-preview]) .ec-page .ec-hero .ec-chip { animation: ec-come-up calc(0.6s * var(--ec-pace, 1)) cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.95s * var(--ec-pace, 1)) backwards; } .ec-page .ec-ledger .ec-flap { display: inline-block; transform-origin: 50% 0; } :root:not([data-turbo-preview]) .ec-page .ec-ledger .ec-flap { animation: ec-flap calc(0.7s * var(--ec-pace, 1)) cubic-bezier(0.3, 1.35, 0.5, 1) calc((0.45s + var(--n, 0) * 0.13s) * var(--ec-pace, 1)) backwards; } .ec-page .ec-ledger .ec-cell-when > .ec-flap:nth-of-type(2) { --n: 1; } .ec-page .ec-ledger .ec-cell-time .ec-flap { --n: 2; } :root:not([data-turbo-preview]) .ec-page .ec-ledger .ec-cell-time { animation: ec-show calc(0.2s * var(--ec-pace, 1)) linear calc(0.71s * var(--ec-pace, 1)) backwards; } :root:not([data-turbo-preview]) .ec-page .ec-ledger .ec-cell-where > .ec-v { animation: ec-wipe calc(0.8s * var(--ec-pace, 1)) cubic-bezier(0.65, 0, 0.35, 1) calc(0.75s * var(--ec-pace, 1)) backwards; } :root:not([data-turbo-preview]) .ec-page .ec-ledger .ec-cell-where > :not(.ec-v) { animation: ec-come-up calc(0.7s * var(--ec-pace, 1)) cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.95s * var(--ec-pace, 1)) backwards; } :root:not([data-turbo-preview]) .ec-page .ec-ledger .ec-where-go svg { animation: ec-pin-drop calc(0.8s * var(--ec-pace, 1)) cubic-bezier(0.3, 1.3, 0.5, 1) calc(1.45s * var(--ec-pace, 1)) backwards; } .ec-page .ec-ledger .ec-cell-where:has(.ec-where-link:hover, .ec-where-go:hover) .ec-where-go svg { animation: ec-pin-hop 0.6s cubic-bezier(0.3, 1.3, 0.5, 1); } :root:not([data-turbo-preview]) .ec-page .ec-join { animation: ec-come-up calc(0.8s * var(--ec-pace, 1)) cubic-bezier(0.2, 0.8, 0.2, 1) calc(1.1s * var(--ec-pace, 1)) backwards; } .ec-page .ec-wait .ec-pic { filter: grayscale(1) sepia(0.1) contrast(0.62) brightness(1.4); } .ec-page .ec-face.ec-in .ec-pic { animation: ec-portrait 1.4s cubic-bezier(0.45, 0, 0.25, 1) var(--d, 0s) backwards; } } @keyframes ec-stage-light { to { background-position: 250% 0; } } @keyframes ec-print { 0% { filter: saturate(0) contrast(0.42) brightness(1.75) sepia(0.3); } 40% { filter: saturate(0.35) contrast(0.7) brightness(1.3) sepia(0.2); } } @keyframes ec-hero-settle { from { scale: 1.09; } } @keyframes ec-come-up { from { opacity: 0; translate: 0 18px; } } @keyframes ec-nudge-in { from { opacity: 0; translate: -8px 0; } } @keyframes ec-title-up { from { opacity: 0; translate: 0 0.4em; filter: blur(8px); } } @keyframes ec-face-drop { from { opacity: 0; translate: 0 -14px; scale: 0.4; } } @keyframes ec-show { from { opacity: 0; } } @keyframes ec-flap { from { opacity: 0; transform: perspective(500px) rotateX(-88deg); } 50% { opacity: 1; } } @keyframes ec-wipe { from { clip-path: inset(-32px 100% -8px 0); } to { clip-path: inset(-32px 0 -8px 0); } } @keyframes ec-pin-drop { 0% { opacity: 0; translate: 0 -22px; } 45% { opacity: 1; translate: 0 2px; scale: 1.15 0.8; } 70% { translate: 0 -4px; scale: 0.95 1.08; } 100% { translate: 0 0; scale: 1; } } @keyframes ec-pin-hop { 40% { translate: 0 -6px; } 70% { translate: 0 1px; scale: 1.1 0.9; } } @keyframes ec-portrait { from { filter: grayscale(1) sepia(0.1) contrast(0.62) brightness(1.4); } } .ec-under { position: fixed; inset: 0; z-index: 2147482000; visibility: hidden; pointer-events: none; overflow: hidden; background: #22132b; color: #ece9e3; font-family: Archivo, system-ui, sans-serif; clip-path: inset(0 0 calc(100% - var(--band, 0px)) 0); } .ec-under[data-edge="foot"] { clip-path: inset(calc(100% - var(--band, 0px)) 0 0 0); } .ec-under.is-out { visibility: visible; } .ec-under::after { content: ""; position: absolute; left: 0; right: 0; height: 26px; } .ec-under[data-edge="head"]::after { top: calc(var(--band, 0px) - 26px); background: linear-gradient(to bottom, transparent, rgba(8, 4, 12, 0.55)); } .ec-under[data-edge="foot"]::after { bottom: calc(var(--band, 0px) - 26px); background: linear-gradient(to top, transparent, rgba(8, 4, 12, 0.55)); } .ec-under-story, .ec-under-floor { position: absolute; left: 0; right: 0; display: none; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0; } .ec-under[data-edge="head"] .ec-under-story { display: flex; top: var(--band, 0px); translate: 0 -100%; } .ec-under[data-edge="foot"] .ec-under-floor { display: flex; bottom: var(--band, 0px); translate: 0 100%; } .ec-under-row { display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); } .ec-under-wheel { display: block; flex: none; } .ec-under .ec-rosette { display: block; width: 30px; height: 30px; fill: #fb761c; } .ec-under .ec-rosette-ring { transform-box: fill-box; transform-origin: center; } .ec-under-year { flex: none; font-size: 32px; font-weight: 800; font-stretch: 62%; line-height: 0.9; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; color: #e0864a; } .ec-under-says { display: grid; min-width: 0; } .ec-under-say { grid-area: 1 / 1; align-self: center; font-size: 13.5px; font-weight: 500; line-height: 1.3; color: #d9d2dc; opacity: 0; } .ec-under-say:last-child { opacity: 1; } .ec-under-stamps { width: 100%; overflow: hidden; } .ec-under-strip { display: flex; gap: 10px; width: max-content; margin-inline: auto; padding: 6px 20px; } .ec-under-stamp { --p: 6px; --h: 2.4px; display: flex; flex-direction: column; width: 52px; padding: 4px 4px 0; background: #fff; rotate: var(--turn, 0deg); -webkit-mask: radial-gradient(circle var(--h) at center, #0000 96%, #000) calc(var(--p) / -2) calc(var(--p) / -2) / var(--p) var(--p) round, linear-gradient(#000 0 0) calc(var(--p) / 2) calc(var(--p) / 2) / calc(100% - var(--p)) calc(100% - var(--p)) no-repeat; mask: radial-gradient(circle var(--h) at center, #0000 96%, #000) calc(var(--p) / -2) calc(var(--p) / -2) / var(--p) var(--p) round, linear-gradient(#000 0 0) calc(var(--p) / 2) calc(var(--p) / 2) / calc(100% - var(--p)) calc(100% - var(--p)) no-repeat; } .ec-under-pic { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #3a2a44; } .ec-under-pic img { display: block; width: 100%; height: 100%; object-fit: cover; } .ec-under-name { padding: 4px 0 6px; font-size: 8.5px; font-weight: 800; font-stretch: 62%; line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase; text-align: center; color: #1d1524; overflow-wrap: anywhere; } .ec-under-floor .ec-rosette { width: 40px; height: 40px; } .ec-under-line { max-width: 30ch; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: #d9d2dc; text-align: center; } html.is-under { background-color: #22132b; } html.is-lifting body > :not(.ec-under, .skip-link, .fr-skip, #flash, .ec-loader) { translate: 0 var(--ec-lift, 0px); } @media (prefers-reduced-motion: no-preference) { .ec-under.is-telling :is(.ec-rosette-ring, .ec-under-wheel, .ec-under-say, .ec-under-stamp, .ec-under-strip, .ec-under-line) { animation-play-state: paused; } .ec-under.is-telling.is-out :is(.ec-rosette-ring, .ec-under-wheel, .ec-under-say, .ec-under-stamp, .ec-under-strip, .ec-under-line) { animation-play-state: running; } .ec-under.is-telling .ec-under-story .ec-rosette-ring { animation: ec-under-ring 0.35s ease-out calc(0.2s + var(--i) * 0.18s) both; } .ec-under.is-telling .ec-under-say:nth-child(1) { animation: ec-under-say-1 6.4s linear both; } .ec-under.is-telling .ec-under-say:nth-child(2) { animation: ec-under-say-2 6.4s linear both; } .ec-under.is-telling .ec-under-say:nth-child(3) { animation: ec-under-say-3 6.4s linear both; } .ec-under.is-telling .ec-under-stamp { animation: ec-under-drop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) calc(1.5s + var(--n) * 0.17s) both; } .ec-under.is-telling .ec-under-strip { animation: ec-under-pan 2.6s cubic-bezier(0.45, 0, 0.3, 1) 1.9s both; } .ec-under.is-telling .ec-under-story .ec-under-wheel { animation: ec-under-turn 1s cubic-bezier(0.3, 1.3, 0.5, 1) 4.85s both; } .ec-under.is-telling .ec-under-floor .ec-under-wheel { animation: ec-under-roll 1.2s cubic-bezier(0.22, 0.8, 0.3, 1) 0.1s both; } .ec-under.is-telling .ec-under-floor .ec-under-line { animation: ec-under-rise 0.45s ease-out 1.15s both; } } @keyframes ec-under-ring { from { opacity: 0.16; scale: 0.6; } } @keyframes ec-under-say-1 { 0%, 3% { opacity: 0; translate: 0 6px; } 9%, 25% { opacity: 1; translate: 0 0; } 29%, 100% { opacity: 0; translate: 0 -6px; } } @keyframes ec-under-say-2 { 0%, 29% { opacity: 0; translate: 0 6px; } 34%, 57% { opacity: 1; translate: 0 0; } 61%, 100% { opacity: 0; translate: 0 -6px; } } @keyframes ec-under-say-3 { 0%, 60% { opacity: 0; translate: 0 6px; } 66%, 100% { opacity: 1; translate: 0 0; } } @keyframes ec-under-drop { from { opacity: 0; translate: 0 -40px; scale: 1.4; rotate: calc(var(--turn, 0deg) + 14deg); } } @keyframes ec-under-pan { to { translate: min(0px, calc(100vw - 100%)) 0; } } @keyframes ec-under-turn { 40% { scale: 1.25; } to { rotate: 1turn; } } @keyframes ec-under-roll { from { translate: -70vw 0; rotate: -2turn; } 82% { translate: 6px 0; } 92% { translate: -2px 0; scale: 1.06 0.94; } } @keyframes ec-under-rise { from { opacity: 0; translate: 0 8px; } } @media (prefers-reduced-motion: reduce) { html[aria-busy="true"] .ec-loader .ec-rosette-ring { animation: none; opacity: 1; } .ec-loader, html[aria-busy="true"] .ec-loader { transition: none; } :where(button[aria-busy="true"], form[aria-busy="true"] :is(button[type="submit"], button:not([type])))::after { animation: ec-busy-in 0s 0.12s both; } .ec-arrived, .ec-arrived *, .ec-done::before { animation: none !important; } .ec-under-says { display: block; } .ec-under-say { opacity: 1; } .ec-under-say + .ec-under-say::before { content: " "; } }