to enable. This file intentionally scopes rules to avoid conflicts with other pages that may also use `.fixed`/`.static`. */ @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .scroll-story article { view-timeline: --article; } .scroll-story .fixed { position: fixed; inset: 0; } .scroll-story .static { position: absolute; inset: 0; z-index: 6; } .scroll-story .filler { display: block; width: 100%; position: absolute; bottom: 30vh; padding: 1rem; } .scroll-story .text-blocks p { -webkit-animation: slide-in, fade-in; animation: slide-in, fade-in; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; animation-timeline: --article; } .scroll-story .text-blocks p:nth-of-type(1) { animation-range: entry-crossing 50% entry-crossing 55%; } .scroll-story .text-blocks p:nth-of-type(2) { animation-range: entry-crossing 55% entry-crossing 60%; } .scroll-story .text-blocks p:nth-of-type(3) { animation-range: entry-crossing 60% entry-crossing 65%; } .scroll-story .text-blocks p:nth-of-type(4) { animation-range: entry-crossing 65% entry-crossing 70%; } .scroll-story .text-blocks p:nth-of-type(5) { animation-range: entry-crossing 70% entry-crossing 75%; } .scroll-story section:nth-of-type(2) article:nth-of-type(3), .scroll-story section:nth-of-type(2) article#share { height: 209vh; } .scroll-story section:nth-of-type(2) article:nth-of-type(3) h2, .scroll-story section:nth-of-type(2) article#share h2 { margin-top: 43vh; } /* Reveal panel sits between share and fin and is revealed by a curved wipe. */ .scroll-story section:nth-of-type(2) article#reveal { /* Enough scroll room for the wipe + a short hold before releasing into fin */ height: 117vh; } /* Put reveal copy in normal flow so fin can follow naturally */ .scroll-story section:nth-of-type(2) article#reveal .static { position: relative; inset: auto; height: auto; z-index: 2; } /* The reveal panel needs to sit above share during the wipe */ .scroll-story section:nth-of-type(2) article#reveal { position: relative; z-index: 8; } /* Reveal content fades in quickly once uncovered */ .scroll-story section:nth-of-type(2) article#reveal .reveal-content { -webkit-animation: fade-in both linear; animation: fade-in both linear; animation-timeline: --article; /* Start after the wipe has already begun */ animation-range: entry 26% entry 36%; } .scroll-story section:nth-of-type(2) article#reveal .fixed { -webkit-clip-path: ellipse(220% 200% at 50% 300%); clip-path: ellipse(220% 200% at 50% 300%); -webkit-animation: unclip both linear; animation: unclip both linear; animation-timeline: --article; /* Start shortly after share text is gone; complete before fin enters */ animation-range: entry 16% entry 52%; pointer-events: none; z-index: 0; background: #000; transform: translateZ(0); will-change: clip-path; } /* Make fin behave like a normal scrolling section after the reveal panel. */ .scroll-story section:nth-of-type(2) article#fin { height: auto; position: relative; z-index: 10; isolation: isolate; } .scroll-story .filler h2 { -webkit-animation: fade-away, fade-out; animation: fade-away, fade-out; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timeline: --article; animation-range: exit 55% exit 85%, exit 78% exit 98%; } /* Share: ensure main headline blurs/fades (not just hard fade) and give filler more dwell. */ .scroll-story section:nth-of-type(2) article#share .content > h2:first-of-type { -webkit-animation: fade-in, fade-away, fade-out; animation: fade-in, fade-away, fade-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; animation-timeline: --article; animation-range: entry 10% entry 22%, exit 55% exit 80%, exit 78% exit 95%; } .scroll-story section:nth-of-type(2) article#share .filler h2 { animation-range: exit 60% exit 88%, exit 82% exit 100%; } .scroll-story .loud-wrap { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); -webkit-animation: unmask both linear; animation: unmask both linear; animation-timeline: --article; animation-range: entry 5% entry 60%; -webkit-mask: linear-gradient(white 50%, transparent) 0 100% / 100% 200% no-repeat; mask: linear-gradient(white 50%, transparent) 0 100% / 100% 200% no-repeat; } .scroll-story .text-wrap { position: sticky; bottom: 4rem; transform-origin: 50% 0; -webkit-animation: fade-away both linear, fade-out both linear; animation: fade-away both linear, fade-out both linear; animation-timeline: --article; animation-range: exit 40% exit 75%, exit 70% exit 100%; } .scroll-story .text-blocks { -webkit-animation: fade-out both linear; animation: fade-out both linear; animation-timeline: --article; animation-range: entry-crossing 75% entry-crossing 100%; } .scroll-story section:nth-of-type(2) article:nth-of-type(3) .fixed { -webkit-animation: fade-in both linear, fade-out both linear; animation: fade-in both linear, fade-out both linear; animation-timeline: --article, --article; animation-range: entry 45% exit-crossing 0%, exit 0% exit 15%; } .scroll-story section:nth-of-type(2) article#share .fixed { -webkit-animation: fade-in both linear; animation: fade-in both linear; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timeline: --article; animation-range: entry 45% entry 60%; } /* Fade out the share copy; the wipe begins shortly after this. */ .scroll-story section:nth-of-type(2) article#share .static { -webkit-animation: fade-out both linear; animation: fade-out both linear; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timeline: --article; animation-range: exit 0% exit 12%; } /* Ensure the fin media isn't pinned over the page once revealed. */ .scroll-story section:nth-of-type(2) article#fin .fixed, .scroll-story section:nth-of-type(2) article#fin .static { position: relative; inset: auto; } .scroll-story section:nth-of-type(2) article:nth-of-type(2) .fixed { -webkit-animation: fade-in; animation: fade-in; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; animation-timeline: --article; animation-range: entry 60% exit 30%; } .scroll-story section:nth-of-type(2) article#chat .fixed { -webkit-animation: fade-in; animation: fade-in; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; animation-timeline: --article; animation-range: entry 30% entry 65%; } .scroll-story section:nth-of-type(2) article:nth-of-type(2) h2 { -webkit-animation: slide-in, fade-in, fade-away, fade-out; animation: slide-in, fade-in, fade-away, fade-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; animation-timeline: view(), view(), --article, --article; animation-range: entry 100% cover 25%, entry 100% cover 35%, exit 20% exit 40%, exit 40% exit 50%; } .scroll-story section:nth-of-type(2) article#chat .content > h2:first-of-type { -webkit-animation: slide-in, fade-in, fade-away, fade-out; animation: slide-in, fade-in, fade-away, fade-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; animation-timeline: view(), view(), --article, --article; animation-range: entry 100% cover 25%, entry 100% cover 35%, exit 20% exit 40%, exit 40% exit 50%; } } }