@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; } .fr-chai { position: fixed; left: 0; right: 0; bottom: 28px; z-index: 70; display: flex; align-items: center; gap: 16px; width: max-content; max-width: min(560px, calc(100vw - 32px)); margin: 0 auto; padding: 14px 22px 14px 18px; border-radius: 22px; background: #16151b; color: #f6f4f0; font-size: 15px; line-height: 1.45; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28); opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 0.5s var(--ease, cubic-bezier(0.22, 0.61, 0.2, 1)), transform 0.6s var(--ease, cubic-bezier(0.22, 0.61, 0.2, 1)); } .fr-chai.is-in { opacity: 1; transform: none; } .fr-chai .fr-chai-line a { white-space: nowrap; color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; } .fr-chai .fr-chai-line a::after { content: " \2192"; } .fr-chai-glass { position: relative; flex: none; width: 28px; height: 32px; margin-top: 8px; color: #f6f4f0; } .fr-chai-glass svg { display: block; } .fr-chai-tea { fill: #c9884f; transform-origin: 50% 100%; animation: fr-pour 1.1s var(--ease, cubic-bezier(0.22, 0.61, 0.2, 1)) both; } .fr-chai-glass i { position: absolute; bottom: 30px; left: calc(7px + var(--n) * 6px); width: 2px; height: 12px; border-radius: 2px; background: rgba(246, 244, 240, 0.7); opacity: 0; animation: fr-steam 2.2s calc(0.9s + var(--n) * 0.35s) ease-out infinite; } .fr-chai-glass i:nth-child(1) { --n: 0; } .fr-chai-glass i:nth-child(2) { --n: 1; } .fr-chai-glass i:nth-child(3) { --n: 2; } @keyframes fr-pour { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes fr-steam { 0% { opacity: 0; transform: translateY(4px) scaleY(0.6); } 30% { opacity: 0.8; } 100% { opacity: 0; transform: translate(3px, -14px) scaleY(1.2) rotate(8deg); } } @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; } .fr-chai, .fr-chai.is-in { transition: none; transform: none; } .fr-chai-tea, .fr-chai-glass i { animation: none; } }