/* Story microsite — layout, nav; scroll snap (fallback) or GSAP fixed-stack (story-html--gsap-transitions). * Load vendor/muse/css/muse-fonts.css then muse.css before this file (see index.html). */ .story-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :root { --story-nav-dot: 8px; --story-nav-dot-active: 12px; --story-nav-gap: 16px; /* Figma Story-Lab: hero deck max width ≈ 696px (1rem = 10px in headline/deck scale). */ --story-slide-deck-max: 69.6rem; --story-magnetic-strength: 0.55; --story-magnetic-move-duration: 0.4s; --story-magnetic-reset-duration: 0.7s; } /* * Magnetic hover (GSAP in story.js): pointer zone + moving child. *
*
…visual…
*
* Optional: data-story-magnetic-strength="0.98", data-story-magnetic-radius="160" (px, zone center), * data-story-magnetic-delegate=".btn" — radius on a parent applies to all child zones. * Modifier story-magnetic--hit-pad enlarges the hover target. * Put CSS transform animations on __motion only if also using magnetic (not the zone). */ .story-magnetic { position: relative; touch-action: manipulation; } .story-magnetic__motion { will-change: transform; } .story-magnetic--hit-pad { --story-magnetic-hit-pad: clamp(1rem, 4vmin, 3rem); margin: calc(-1 * var(--story-magnetic-hit-pad)); padding: var(--story-magnetic-hit-pad); } .story-magnetic--fill > .story-magnetic__motion { width: 100%; height: 100%; } /* Native scroll snap when GSAP stack is off (e.g. remove story-html--gsap-transitions from ). */ html.story-html--snap:not(.story-html--gsap-transitions) { scroll-snap-type: y mandatory; scroll-behavior: smooth; } /* GSAP ScrollTrigger stack (Codepen-style): fixed panels + artificial document height from JS. */ html.story-html--gsap-transitions { scroll-snap-type: none; scroll-behavior: auto; } html.story-html--gsap-transitions #story-main > .story-snap { position: fixed; inset: 0; z-index: 25; width: 100%; height: 100vh; height: 100dvh; min-height: 0; scroll-snap-align: none; scroll-snap-stop: normal; } html.story-html--gsap-transitions #story-main > .story-snap:not(#story-intro) { opacity: 0; visibility: hidden; transform: scale(0.92); transform-origin: 50% 50%; } @media (prefers-reduced-motion: reduce) { .story-magnetic__motion { will-change: auto; } .story-slide-02-glow, .story-slide--03 .story-slide-03__glow-body { will-change: auto; animation: none !important; } html.story-html--snap:not(.story-html--gsap-transitions) { scroll-snap-type: none; scroll-behavior: auto; } .story-snap { scroll-snap-align: none; scroll-snap-stop: normal; } html.story-html--gsap-transitions #story-main > .story-snap:not(#story-intro) { transform: none; opacity: 0; visibility: hidden; } } *, *::before, *::after { box-sizing: border-box; } body.story-body { margin: 0; min-height: 100%; font-family: var(--muse-font-family-default); color: var(--muse-color-brand-white); background: var(--muse-color-brand-black); } /* Slide shells are layout, not controls — Muse global :focus-visible must not apply. */ #story-main .story-snap:focus, #story-main .story-snap:focus-visible, #story-main .story-snap__scroller:focus, #story-main .story-snap__scroller:focus-visible { outline: none; outline-offset: 0; outline-width: 0; } .story-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .story-skip { position: absolute; left: 1rem; top: 1rem; z-index: 1000; padding: 0.5rem 1rem; background: var(--muse-color-brand-white); color: var(--muse-color-brand-midnight); font-weight: 600; text-decoration: none; border-radius: 4px; transform: translateY(-150%); transition: transform 0.15s ease; } .story-skip:focus { transform: translateY(0); outline: 2px solid var(--muse-color-brand-medium-blue-40); outline-offset: 2px; } /* ——— Snap sections ——— */ .story-snap { position: relative; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; isolation: isolate; background: var(--muse-color-brand-black); } .story-snap--viewport { height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; } /* Last snap target: avoid trapping mandatory snap when nothing follows (magazine-home pattern) */ .story-snap--last { scroll-snap-stop: normal; } /* Shell: one viewport tall; inner column scrolls; wheel chains to document at edges. data-story-inner-scroll="capture-until-end" on section: wheel drives .story-snap__scroller until slide-specific end (e.g. slide 04 last stat bubble) before advancing slides. */ .story-snap--scroll-shell { height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; overflow: hidden; } .story-snap__scroller { height: 100%; max-height: 100dvh; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; /* Wheel-driven inner scroll; hide gutter so it does not sit beside dot nav (Chrome). */ scrollbar-width: none; -ms-overflow-style: none; } .story-snap__scroller::-webkit-scrollbar { width: 0; height: 0; } .story-snap__scroller:focus { outline: none; } /* ——— Inner-scroll: interstitial + panel (reusable; see slide 01) ——— */ .story-slide-scroll-doc { position: relative; } .story-interstitial { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: clamp(2rem, 4vh, 3rem) clamp(1.5rem, 5vw, 4rem); padding-top: max(clamp(2rem, 4vh, 3rem), var(--site-header-block-size)); box-sizing: border-box; text-align: center; } .story-interstitial__title { margin: 0; max-width: min(85rem, 100%); font-family: var(--muse-font-family-default); font-size: clamp(2.25rem, 6vw, 5rem); font-weight: 400; line-height: 1.1; color: #fff; text-shadow: 0 0 32px rgba(0, 0, 0, 0.95), 0 2px 24px rgba(0, 0, 0, 0.9), 0 4px 48px rgba(0, 0, 0, 0.75); } .story-slide-panel { position: relative; box-sizing: border-box; } .story-slide-panel--viewport { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding-top: var(--site-header-block-size); box-sizing: border-box; } .story-slide-panel--viewport > .story-slide__inner { width: 100%; } .story-slide-01__scroller { background: #000; overflow-x: hidden; } /* ——— Intro ——— */ /* Below 74rem: hero animation block stacks above title/deck (flex column). var() cannot be used in @media conditions. */ .story-intro__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #080808; transform: translateZ(0); } /* Intro hero canvas (see story-hero-animation.js) */ .story-intro__gradient-three, .story-intro__hero-wrap { position: absolute; inset: 0; pointer-events: none; will-change: opacity; } .story-intro__hero-canvas, .story-intro__gradient-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform: translateZ(0); } @media (max-width: 74rem) { .story-intro { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 2.45rem; overflow-y: auto; overflow-x: hidden; } .story-intro__bg { position: relative; flex-shrink: 0; width: 100%; min-height: clamp(18rem, 42vh, 32rem); } .story-intro__gradient-three, .story-intro__hero-wrap { position: relative; width: 100%; min-height: clamp(18rem, 42vh, 32rem); } } .story-intro__noise-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.035; mix-blend-mode: soft-light; pointer-events: none; } .story-intro__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-height: 100%; padding: max(2rem, var(--site-header-block-size)) 1.5rem 1.25rem; box-sizing: border-box; text-align: center; } @media (max-width: 75rem) { .story-intro__content { padding-top: 0; min-height: 0; flex: 0 0 auto; width: 100%; } } /* Figma Intro screen (254:8473): title + deck centered; scroll hint bottom */ .story-intro__main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; width: 100%; max-width: min(85rem, 100%); margin-inline: auto; } .story-intro__title { margin: 0; color: var(--muse-color-brand-white); text-align: center; font-feature-settings: "liga" 0, "clig" 0; font-family: var(--muse-font-family-default); font-size: 8rem; font-style: normal; font-weight: 700; line-height: 100%; } .story-intro__deck { margin: 0; color: var(--muse-color-brand-white); text-align: center; font-feature-settings: "liga" 0, "clig" 0; font-family: var(--muse-font-family-default); font-size: 4rem; font-style: normal; font-weight: 400; line-height: 120%; } @media (max-width: 74rem) { .story-intro__title { font-size: clamp(4rem, 12vw, 8rem); } .story-intro__deck { font-size: clamp(2rem, 6vw, 4rem); } } /* Intro headline + deck: hidden/blurred until JS reveal (see initStoryIntroTextReveal). */ html.story-html--intro-text-hydrate #story-intro:not(.story-intro--intro-text-revealed) .story-intro__title, html.story-html--intro-text-hydrate #story-intro:not(.story-intro--intro-text-revealed) .story-intro__deck { opacity: 0; filter: blur(16px); } .story-intro__scroll-hint { display: block; margin: 0; padding: 0.75rem 1rem 0.25rem; border: none; background: transparent; cursor: pointer; color: var(--muse-color-brand-white); text-align: center; font-feature-settings: "liga" 0, "clig" 0; font-family: var(--muse-font-family-default); font-size: 1.6rem; font-style: normal; font-weight: 400; line-height: 120%; } @media (max-width: 75rem) { .story-intro__scroll-hint { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); } } .story-intro__scroll-hint:hover { text-decoration: underline; text-underline-offset: 0.2em; } .story-intro__scroll-hint:focus-visible { outline: 2px solid var(--muse-color-brand-medium-blue-40); outline-offset: 4px; } /* ——— Slides (placeholders) ——— */ .story-slide.story-snap { position: relative; } .story-slide__a11y-surface { position: absolute; inset: 0; z-index: 0; /* Must not sit above bubbles/copy — only fills gaps via browse mode, not mouse capture */ pointer-events: none; } .story-slide__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: max(2rem, var(--site-header-block-size)) 1.5rem 2rem; box-sizing: border-box; text-align: center; } .story-slide--tall-inner .story-slide__inner { align-items: center; justify-content: flex-start; min-height: 220vh; padding: 3rem 1.5rem 4rem; text-align: center; } .story-slide--tall-inner .story-slide__panel { align-self: center; width: min(100%, 42rem); } /* Shared hero typography (Figma Story-Lab: single headline + deck, e.g. 254:8462, slide 06). */ .story-slide__headline { margin: 0; color: var(--muse-color-brand-white); text-align: center; font-feature-settings: "liga" 0, "clig" 0; font-family: var(--muse-font-family-default); font-size: clamp(20rem, 22vw, 30rem); font-style: normal; font-weight: 400; line-height: 1; } .story-slide__headline--nowrap { white-space: nowrap; } .story-slide__deck--nowrap { white-space: nowrap; } .story-slide__deck { margin: 0; color: var(--muse-color-brand-white); text-align: center; font-feature-settings: "liga" 0, "clig" 0; font-family: var(--muse-font-family-default); font-size: 4rem; font-style: normal; font-weight: 400; line-height: 1.2; max-width: min(var(--story-slide-deck-max), 100%); } @media (max-width: 75rem) { .story-slide__headline { font-size: clamp(2.75rem, 17vw, 40rem); } .story-slide__deck { font-size: clamp(2rem, 3.6vw, 4rem); } } .story-slide__inner--hero { position: relative; overflow: hidden; } /* Slide 01 (Figma 254:8478): deck + headline + deck stack */ .story-slide--01 .story-slide__inner { gap: clamp(0.75rem, 2.5vh, 1.75rem); } /* * Slide a11y: full-size invisible hit layer reads one sentence (NVDA hover); * visual copy stays in DOM for layout — no wrapper div. */ [class*="__a11y-hit"] { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; pointer-events: auto; } .story-slide--01 .story-slide__inner--hero > .story-slide__deck, .story-slide--01 .story-slide__inner--hero > .story-slide__headline { pointer-events: none; } .story-slide--02 .story-slide-02__content > .story-slide__deck, .story-slide--02 .story-slide-02__content > .story-slide__headline, .story-slide--02 .story-slide-02__content > .story-slide-02__deck-block { pointer-events: none; } .story-slide--06 .story-slide-06__content > .story-slide-06__headline-block, .story-slide--06 .story-slide-06__content > .story-slide__deck { pointer-events: none; } .story-slide--08 .story-slide-08__content > .story-slide__headline, .story-slide--08 .story-slide-08__content > .story-slide__deck { pointer-events: none; } .story-slide--09 .story-slide-09__panel-copy > .story-slide__deck, .story-slide--09 .story-slide-09__panel-copy > .story-slide__headline { pointer-events: none; } .story-slide-04__bubble-face > .story-stat__value, .story-slide-04__bubble-face > .story-stat__description, .story-slide-04__bubble-content > .story-stat__value, .story-slide-04__bubble-content > .story-stat__description, .story-slide-05__bubble-face > .story-stat__value, .story-slide-05__bubble-face > .story-stat__description { pointer-events: none; } /* Slide 01 headline: Three.js blobs + SVG knockout overlay (Safari-safe) + static fallback. */ .story-slide-01-headline { position: relative; display: inline-block; isolation: isolate; font-size: clamp(30rem, 32vw, 40rem) } @media (max-width: 75rem) { .story-slide-01-headline { font-size: clamp(15rem, 28vw, 30rem); } } .story-slide-01-headline__sizer { visibility: hidden; white-space: nowrap; } .story-slide-01-headline__fill { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* Pan layer is locked to the headline box; do not offset the canvas for vertical tuning. */ .story-slide-01-headline__gradient-pan { position: absolute; inset: 0; transform: scale(1.3); } .story-slide-01-headline__gradient-canvas { position: absolute; left: -100px; top: -100px; width: calc(100% + 200px); height: calc(100% + 200px); filter: blur(22px); transform: translateZ(0); } @media (max-width: 75rem) { .story-slide-01-headline__gradient-canvas { left: -300px; top: -300px; width: calc(100% + 600px); height: calc(100% + 600px); } } /* Black plate with transparent glyphs; sits above the gradient canvas. */ .story-slide-01-headline__knockout { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .story-slide-01-headline--static .story-slide-01-headline__fill { display: none; } .story-slide-01-headline--static .story-slide-01-headline__sizer { visibility: visible; color: transparent; -webkit-text-fill-color: transparent; background-color: #080808; background-image: radial-gradient( circle at 100% 100%, rgba(255, 145, 0, 1) 0%, rgba(255, 145, 0, 0.597) 54.7%, transparent 100% ), radial-gradient( circle at 79% 100%, rgba(255, 1, 128, 1) 0%, rgba(255, 1, 128, 0.597) 54.7%, transparent 100% ), radial-gradient( circle at 43% 100%, rgba(10, 200, 255, 1) 0%, rgba(10, 200, 255, 0.597) 54.7%, transparent 100% ), radial-gradient( circle at 15% 100%, rgba(26, 105, 255, 1) 0%, rgba(26, 105, 255, 0.597) 54.7%, transparent 100% ); background-size: 160% 140%; background-position: 50% 88%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; } .story-slide--01 .story-slide__deck { max-width: min(40rem, 92vw); } .story-slide--01 .story-slide-01-reveal { opacity: 0; } /* Hide interstitial copy once the stat panel is active (incl. smooth scroll between them). */ .story-slide--01.story-slide-01--panel-phase #story-slide-01-interstitial { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.45s ease, visibility 0.45s ease; } @media (prefers-reduced-motion: reduce) { .story-slide--01 .story-slide-01-reveal { opacity: 1; } .story-slide--01.story-slide-01--panel-phase #story-slide-01-interstitial { transition: none; } } .story-slide--01 .story-slide__headline, .story-slide--02 .story-slide__headline, .story-slide--03 .story-slide__headline, .story-slide--07 .story-slide__headline { margin-block: clamp(0.125rem, 1vh, 0.75rem); } /* Slide 02: bottom deck + glow (Figma dev 254:8496). Shared with 2↔3 curtain overlay. */ .story-slide--02 .story-slide__inner--hero { overflow: visible; } .story-slide-02__deck-block { position: relative; z-index: 0; width: min(100%, var(--story-slide-deck-max)); display: flex; flex-direction: column; align-items: center; } .story-slide-02-glow { position: absolute; left: 50%; top: 90%; width: min(176rem, 140vw); height: min(176rem, 140vw); aspect-ratio: 1 / 1; transform: translateX(-50%); pointer-events: none; border-radius: 176rem; background: linear-gradient(270deg, #ff9000 -1.12%, #ff007f 100%); box-shadow: 0 0 160px 0 rgba(255, 0, 127, 0.4); filter: blur(20px); will-change: transform; } .story-slide--02 .story-slide-02__bg-glow { z-index: 0; opacity: 0; } @media (prefers-reduced-motion: reduce) { .story-slide--02 .story-slide-02__bg-glow { opacity: 1; } } .story-slide-02__deck-after { position: relative; z-index: 1; } /* Full-viewport overlay for slide 2↔3 curtain transition (above GSAP stack panels). */ .story-curtain { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: visible; visibility: hidden; opacity: 0; } .story-curtain__glow { position: fixed; margin: 0; translate: none; z-index: 1; } .story-slide--02 .story-slide-02__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.75rem, 2.5vh, 1.75rem); min-height: 0; } /* Slide 03 (Figma 254:8482): warm glows behind copy, blue glow above */ .story-slide--03 { --story-slide-03-glow-size: min(50rem, 52vmin); --story-slide-03-drift-base: 7s; --story-slide-03-drift-amp: 18px; } .story-slide--03 .story-slide__inner--hero { overflow: visible; } .story-slide--03 .story-slide-03__bg-glows, .story-slide--03 .story-slide-03__fg-glow { position: absolute; inset: 0; pointer-events: none; overflow: visible; } .story-slide--03 .story-slide-03__bg-glows { z-index: 0; } .story-slide--03 .story-slide-03__fg-glow { z-index: 2; } .story-slide--03 .story-slide-03__glow { position: absolute; width: var(--story-slide-03-glow-size); height: var(--story-slide-03-glow-size); aspect-ratio: 1 / 1; pointer-events: auto; } .story-slide--03 .story-slide-03__glow .story-magnetic__motion { width: 100%; height: 100%; } .story-slide--03 .story-slide-03__glow-body { width: 100%; height: 100%; border-radius: 50rem; filter: blur(32px); will-change: transform; } .story-slide--03 .story-slide-03__glow--warm .story-slide-03__glow-body, .story-slide--03 .story-slide-03__glow--warm-2 .story-slide-03__glow-body { background: linear-gradient(270deg, #ff9000 -1.12%, #ff007f 100%); box-shadow: 0 0 160px 0 rgba(255, 144, 0, 0.4); } .story-slide--03 .story-slide-03__glow--blue .story-slide-03__glow-body { background: linear-gradient(270deg, #02c8ff -1.12%, #0a60ff 100%); box-shadow: 0 0 160px 0 rgba(2, 200, 255, 0.4); } .story-slide--03 .story-slide-03__glow--warm { left: -38%; top: 33%; } .story-slide--03 .story-slide-03__glow--blue { right: -45%; top: -38%; } .story-slide--03 .story-slide-03__glow--warm-2 { right: -57%; bottom: -67%; } @media (max-width: 75rem) { .story-slide--03 .story-slide-03__glow--warm { position: fixed; left: -20%; top: 50%; } .story-slide--03 .story-slide-03__glow--blue { position: fixed; right: 0; top: 20%; z-index: -100; } .story-slide--03 .story-slide-03__glow--warm-2 { position: fixed; right: 0; bottom: 15%; } } /* Lateral drift (slide 7 / glass pattern); transform-only */ @keyframes story-slide-03-glow-drift-0 { 0%, 100% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(calc(var(--story-slide-03-drift-amp) * 0.92), calc(var(--story-slide-03-drift-amp) * -0.18), 0); } 50% { transform: translate3d(calc(var(--story-slide-03-drift-amp) * -0.78), calc(var(--story-slide-03-drift-amp) * 0.22), 0); } 75% { transform: translate3d(calc(var(--story-slide-03-drift-amp) * 0.55), calc(var(--story-slide-03-drift-amp) * 0.2), 0); } } @keyframes story-slide-03-glow-drift-1 { 0%, 100% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(calc(var(--story-slide-03-drift-amp) * -0.85), calc(var(--story-slide-03-drift-amp) * 0.2), 0); } 45% { transform: translate3d(calc(var(--story-slide-03-drift-amp) * 0.68), calc(var(--story-slide-03-drift-amp) * 0.28), 0); } 70% { transform: translate3d(calc(var(--story-slide-03-drift-amp) * 0.42), calc(var(--story-slide-03-drift-amp) * -0.32), 0); } } @keyframes story-slide-03-glow-drift-2 { 0%, 100% { transform: translate3d(0, 0, 0); } 30% { transform: translate3d(calc(var(--story-slide-03-drift-amp) * -0.62), calc(var(--story-slide-03-drift-amp) * -0.25), 0); } 55% { transform: translate3d(calc(var(--story-slide-03-drift-amp) * 0.95), calc(var(--story-slide-03-drift-amp) * 0.12), 0); } 80% { transform: translate3d(calc(var(--story-slide-03-drift-amp) * -0.48), calc(var(--story-slide-03-drift-amp) * 0.26), 0); } } @media (prefers-reduced-motion: no-preference) { .story-slide--03 .story-slide-03__glow--warm .story-slide-03__glow-body { animation: story-slide-03-glow-drift-0 calc(var(--story-slide-03-drift-base) * 13.5 / 12.8) ease-in-out infinite; } .story-slide--03 .story-slide-03__glow--blue .story-slide-03__glow-body { animation: story-slide-03-glow-drift-1 calc(var(--story-slide-03-drift-base) * 15.2 / 12.8) ease-in-out infinite; } .story-slide--03 .story-slide-03__glow--warm-2 .story-slide-03__glow-body { animation: story-slide-03-glow-drift-2 var(--story-slide-03-drift-base) ease-in-out infinite; } } .story-slide--03 .story-slide-03__content { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.75rem, 2.5vh, 1.75rem); width: max-content; max-width: 100%; min-height: 0; overflow: visible; } /* In-flow copy above bg glows (positioned z-index 0 paints over static text otherwise) */ .story-slide--03 .story-slide-03__content > .story-slide__deck, .story-slide--03 .story-slide-03__content > .story-slide__headline { position: relative; z-index: 1; pointer-events: none; } .story-slide--03 .story-slide-03__content > .story-slide__deck:last-of-type { max-width: min(40rem, 92vw); } /* Slide 07 (Figma 311:4527): bokeh orbs + deck / headline / deck */ .story-slide--07 .story-slide__inner--hero { overflow: visible; } .story-slide--07 { /* Drift: same scale + timing as slide 8 glass (.gc keyframes use ~8–18px). */ --story-slide-07-drift-base: 7s; --story-slide-07-drift-amp: 18px; /* Match slide 8 .gc fills */ --story-slide-07-orb-warm: linear-gradient(135deg, #ff0180 0%, #ff9100 100%); --story-slide-07-orb-blue: linear-gradient(135deg, #1a69ff 0%, #0ac8ff 100%); } /* Slide 07 bokeh drift on __orb-drift; __orb keeps translate(-50%,-50%) anchor */ @keyframes story-slide-07-orb-drift-0 { 0%, 100% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(calc(var(--story-slide-07-drift-amp) * 0.92), calc(var(--story-slide-07-drift-amp) * -0.18), 0); } 50% { transform: translate3d(calc(var(--story-slide-07-drift-amp) * -0.78), calc(var(--story-slide-07-drift-amp) * 0.22), 0); } 75% { transform: translate3d(calc(var(--story-slide-07-drift-amp) * 0.55), calc(var(--story-slide-07-drift-amp) * 0.2), 0); } } @keyframes story-slide-07-orb-drift-1 { 0%, 100% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(calc(var(--story-slide-07-drift-amp) * -0.85), calc(var(--story-slide-07-drift-amp) * 0.2), 0); } 45% { transform: translate3d(calc(var(--story-slide-07-drift-amp) * 0.68), calc(var(--story-slide-07-drift-amp) * 0.28), 0); } 70% { transform: translate3d(calc(var(--story-slide-07-drift-amp) * 0.42), calc(var(--story-slide-07-drift-amp) * -0.32), 0); } } @keyframes story-slide-07-orb-drift-2 { 0%, 100% { transform: translate3d(0, 0, 0); } 30% { transform: translate3d(calc(var(--story-slide-07-drift-amp) * -0.62), calc(var(--story-slide-07-drift-amp) * -0.25), 0); } 55% { transform: translate3d(calc(var(--story-slide-07-drift-amp) * 0.95), calc(var(--story-slide-07-drift-amp) * 0.12), 0); } 80% { transform: translate3d(calc(var(--story-slide-07-drift-amp) * -0.48), calc(var(--story-slide-07-drift-amp) * 0.26), 0); } } @keyframes story-slide-07-orb-drift-3 { 0%, 100% { transform: translate3d(0, 0, 0); } 33% { transform: translate3d(calc(var(--story-slide-07-drift-amp) * 0.72), calc(var(--story-slide-07-drift-amp) * 0.3), 0); } 66% { transform: translate3d(calc(var(--story-slide-07-drift-amp) * -0.88), calc(var(--story-slide-07-drift-amp) * -0.15), 0); } } @keyframes story-slide-07-orb-drift-4 { 0%, 100% { transform: translate3d(0, 0, 0); } 22% { transform: translate3d(calc(var(--story-slide-07-drift-amp) * 0.82), calc(var(--story-slide-07-drift-amp) * 0.22), 0); } 48% { transform: translate3d(calc(var(--story-slide-07-drift-amp) * -0.72), calc(var(--story-slide-07-drift-amp) * 0.14), 0); } 74% { transform: translate3d(calc(var(--story-slide-07-drift-amp) * 0.5), calc(var(--story-slide-07-drift-amp) * -0.28), 0); } } .story-slide--07 .story-slide-07__bokeh { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* Match slide 8: orbs stay hidden until GSAP intro arms, then CSS drift only after --drift. */ .story-slide-07__bokeh:not(.story-slide-07__bokeh--orbs-visible) .story-slide-07__orb { opacity: 0; visibility: hidden; } .story-slide--07 .story-slide-07__orb { position: absolute; display: block; width: clamp(56px, 7.8vmin, 104px); height: clamp(56px, 7.8vmin, 104px); transform: translate(-50%, -50%); } .story-slide--07 .story-slide-07__bokeh.story-slide-07__bokeh--orbs-visible { pointer-events: auto; } .story-slide--07 .story-slide-07__bokeh.story-slide-07__bokeh--orbs-visible .story-slide-07__orb { pointer-events: auto; } .story-slide--07 .story-slide-07__orb.story-magnetic { border-radius: 50%; } .story-slide--07 .story-slide-07__orb .story-magnetic__motion { display: block; width: 100%; height: 100%; } .story-slide--07 .story-slide-07__orb-drift { display: block; width: 100%; height: 100%; border-radius: 50%; opacity: 0.88; box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.08); background: var(--story-slide-07-orb-warm); } @media (prefers-reduced-motion: reduce) { .story-slide-07__bokeh.story-slide-07__bokeh--orbs-visible .story-slide-07__orb-drift { animation: none !important; transform: none; } .story-slide-07__bokeh.story-slide-07__bokeh--orbs-visible .story-slide-07__orb { transform: translate(-50%, -50%); } } @media (prefers-reduced-motion: no-preference) { .story-slide-07__bokeh.story-slide-07__bokeh--orbs-visible:not(.story-slide-07__bokeh--drift) .story-slide-07__orb-drift { animation: none !important; } .story-slide--07 .story-slide-07__bokeh.story-slide-07__bokeh--drift .story-slide-07__orb:nth-child(1) .story-slide-07__orb-drift { will-change: transform; animation: story-slide-07-orb-drift-0 calc(var(--story-slide-07-drift-base) * 13.5 / 12.8) ease-in-out infinite; } .story-slide--07 .story-slide-07__bokeh.story-slide-07__bokeh--drift .story-slide-07__orb:nth-child(2) .story-slide-07__orb-drift { will-change: transform; animation: story-slide-07-orb-drift-1 calc(var(--story-slide-07-drift-base) * 15.2 / 12.8) ease-in-out infinite; } .story-slide--07 .story-slide-07__bokeh.story-slide-07__bokeh--drift .story-slide-07__orb:nth-child(3) .story-slide-07__orb-drift { will-change: transform; animation: story-slide-07-orb-drift-2 var(--story-slide-07-drift-base) ease-in-out infinite; } .story-slide--07 .story-slide-07__bokeh.story-slide-07__bokeh--drift .story-slide-07__orb:nth-child(4) .story-slide-07__orb-drift { will-change: transform; animation: story-slide-07-orb-drift-3 calc(var(--story-slide-07-drift-base) * 14.6 / 12.8) ease-in-out infinite; } .story-slide--07 .story-slide-07__bokeh.story-slide-07__bokeh--drift .story-slide-07__orb:nth-child(5) .story-slide-07__orb-drift { will-change: transform; animation: story-slide-07-orb-drift-4 calc(var(--story-slide-07-drift-base) * 16.1 / 12.8) ease-in-out infinite; } .story-slide--07 .story-slide-07__bokeh.story-slide-07__bokeh--drift .story-slide-07__orb:nth-child(6) .story-slide-07__orb-drift { will-change: transform; animation: story-slide-07-orb-drift-0 calc(var(--story-slide-07-drift-base) * 15.8 / 12.8) ease-in-out infinite; } .story-slide--07 .story-slide-07__bokeh.story-slide-07__bokeh--drift .story-slide-07__orb:nth-child(7) .story-slide-07__orb-drift { will-change: transform; animation: story-slide-07-orb-drift-2 calc(var(--story-slide-07-drift-base) * 13.2 / 12.8) ease-in-out infinite; } .story-slide--07 .story-slide-07__bokeh.story-slide-07__bokeh--drift .story-slide-07__orb:nth-child(8) .story-slide-07__orb-drift { will-change: transform; animation: story-slide-07-orb-drift-1 calc(var(--story-slide-07-drift-base) * 14.2 / 12.8) ease-in-out infinite; } .story-slide--07 .story-slide-07__bokeh.story-slide-07__bokeh--drift .story-slide-07__orb:nth-child(9) .story-slide-07__orb-drift { will-change: transform; animation: story-slide-07-orb-drift-4 calc(var(--story-slide-07-drift-base) * 12.4 / 12.8) ease-in-out infinite; } .story-slide--07 .story-slide-07__bokeh.story-slide-07__bokeh--drift .story-slide-07__orb:nth-child(10) .story-slide-07__orb-drift { will-change: transform; animation: story-slide-07-orb-drift-3 calc(var(--story-slide-07-drift-base) * 15.5 / 12.8) ease-in-out infinite; } } .story-slide--07 .story-slide-07__orb--blue .story-slide-07__orb-drift { background: var(--story-slide-07-orb-blue); } /* Per-orb layout + opacity */ .story-slide--07 .story-slide-07__orb:nth-child(1) { left: 18.5%; top: 22.7%; opacity: 0.78; } .story-slide--07 .story-slide-07__orb:nth-child(2) { left: 31.8%; top: 10.6%; opacity: 0.74; } .story-slide--07 .story-slide-07__orb:nth-child(3) { left: 59.1%; top: 11.8%; opacity: 0.86; } .story-slide--07 .story-slide-07__orb:nth-child(4) { left: 4.5%; top: 10.6%; opacity: 0.8; } .story-slide--07 .story-slide-07__orb:nth-child(5) { left: 4%; top: 57.2%; opacity: 0.84; } .story-slide--07 .story-slide-07__orb:nth-child(6) { left: 22%; top: 72.9%; opacity: 0.72; } .story-slide--07 .story-slide-07__orb:nth-child(7) { left: 76.9%; top: 79.4%; opacity: 0.85; } .story-slide--07 .story-slide-07__orb:nth-child(8) { left: 89.1%; top: 62.8%; opacity: 0.87; } .story-slide--07 .story-slide-07__orb:nth-child(9) { left: 76.9%; top: 22%; opacity: 0.79; } .story-slide--07 .story-slide-07__orb:nth-child(10) { left: 80.8%; top: 32.4%; opacity: 0.88; } .story-slide--07 .story-slide-07__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.75rem, 2.5vh, 1.75rem); min-height: 0; pointer-events: none; max-width: 85vw; } .story-slide-07__headline { position: relative; width: 100%; max-width: 100%; margin-inline: auto; } /* Slide 07 morph (same state machine as slide 06): hide SVG + bottom deck until slide is entered. */ .story-slide--07.story-slide-07--has-morph .story-slide-07__headline-morph-svg { display: block; } .story-slide--07.story-slide-07--has-morph:not(.story-slide-07--intro-armed) .story-slide-07__headline-morph-svg, .story-slide--07.story-slide-07--has-morph:not(.story-slide-07--intro-armed) #story-slide-07-deck { opacity: 0; visibility: hidden; } .story-slide--07.story-slide-07--intro-armed .story-slide-07__headline-morph-svg { display: block; visibility: visible; /* Opacity: GSAP intro (0→1) on enter; avoid forcing visible before tween runs. */ opacity: 0; } .story-slide--07.story-slide-07--deck-visible .story-slide-07__headline-morph-svg, .story-slide--07.story-slide-07--morph-failed .story-slide-07__headline-morph-svg { opacity: 1; } .story-slide--07.story-slide-07--intro-armed:not(.story-slide-07--deck-visible):not(.story-slide-07--morph-failed) #story-slide-07-deck { opacity: 0; visibility: hidden; } .story-slide--07.story-slide-07--morph-failed .story-slide-07__headline-morph-svg { display: none !important; } .story-slide--07.story-slide-07--morph-failed #story-slide-07-deck { opacity: 1; visibility: visible; } .story-slide--07 .story-slide-07__headline .story-slide__headline { position: relative; z-index: 1; padding-top: clamp(0.25rem, 1.5vh, 0.75rem); text-shadow: 0 0.08em 0.35em rgba(0, 0, 0, 0.55), 0 0.02em 0.12em rgba(0, 0, 0, 0.4); } .story-slide--07 .story-slide-07__headline .story-slide__headline.story-slide-07__headline-morph { width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; margin-bottom: 3rem; } .story-slide-07__headline-morph--active.story-slide__headline { text-shadow: none; } .story-slide-07__headline-morph-svg { display: none; width: 100%; max-width: 100%; aspect-ratio: 1051.173 / 303.912; height: auto; overflow: visible; } .story-slide-07__headline-morph--active .story-slide-07__headline-morph-svg { filter: drop-shadow(0 0.08em 0.35em rgba(0, 0, 0, 0.55)) drop-shadow(0 0.02em 0.12em rgba(0, 0, 0, 0.4)); } .story-slide--07 .story-slide-07__content > #story-slide-07-deck.story-slide__deck { max-width: min(85rem, 94vw); min-height: 3.2em; } @media (prefers-reduced-motion: reduce) { .story-slide--07.story-slide-07--has-morph .story-slide-07__headline-morph-svg, .story-slide--07.story-slide-07--has-morph #story-slide-07-deck { opacity: 1 !important; visibility: visible !important; } .story-slide--07.story-slide-07--has-morph .story-slide-07__headline-morph-svg { display: none !important; } } .story-slide--08 { /* Drift: one duration to tune. Shorter = faster. Scales all orbs together (ratios vs ref 12.8s). */ --story-glass-drift-base: 7s; --story-slide-08-content-fade: 0.65s; --story-slide-08-glass-size: 55vmin; } .story-slide--08 .story-slide-08__bg { position: absolute; z-index: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .story-slide--08 .story-slide-08__glass { position: relative; width: var(--story-slide-08-glass-size); height: var(--story-slide-08-glass-size); flex-shrink: 0; pointer-events: none; } .story-slide--08 .glass-scene.glass-scene--orbs-visible { pointer-events: auto; } .story-slide--08 .glass-scene .gc { position: absolute; } .story-slide--08 .glass-scene.glass-scene--orbs-visible .gc { pointer-events: auto; } .story-slide--08 .glass-scene .gc .story-magnetic { width: 100%; height: 100%; border-radius: 50%; } .story-slide--08 .glass-scene .gc .story-magnetic__motion { width: 100%; height: 100%; } .story-slide--08 .glass-scene .gc .story-slide-08__orb-drift { width: 100%; height: 100%; border-radius: 50%; } .story-slide--08 .glass-scene .gc .story-slide-08__orb-body { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.08); } /* Hidden until intro runs (avoids flash of last session’s layout on re-enter). */ .story-slide--08 .glass-scene:not(.glass-scene--orbs-visible) .gc { opacity: 0; visibility: hidden; } /* Post-intro drift: transform-only (compositor), no per-frame JS */ @keyframes story-glass-drift-0 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 25% { transform: translate3d(16px, -12px, 0) scale(1.018); } 50% { transform: translate3d(-10px, 14px, 0) scale(0.985); } 75% { transform: translate3d(8px, 8px, 0) scale(1.01); } } @keyframes story-glass-drift-1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 20% { transform: translate3d(-14px, 10px, 0) scale(1.012); } 45% { transform: translate3d(12px, 16px, 0) scale(0.992); } 70% { transform: translate3d(6px, -18px, 0) scale(1.02); } } @keyframes story-glass-drift-2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-12px, -16px, 0) scale(0.99); } 55% { transform: translate3d(18px, 6px, 0) scale(1.022); } 80% { transform: translate3d(-8px, 12px, 0) scale(0.996); } } @keyframes story-glass-drift-3 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(10px, 18px, 0) scale(1.015); } 66% { transform: translate3d(-16px, -8px, 0) scale(0.988); } } @keyframes story-glass-drift-4 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 22% { transform: translate3d(14px, 14px, 0) scale(0.994); } 48% { transform: translate3d(-12px, 8px, 0) scale(1.02); } 74% { transform: translate3d(8px, -20px, 0) scale(1.008); } } .story-slide--08 .glass-scene.glass-scene--drift .gc[data-i="0"] .story-slide-08__orb-drift { animation: story-glass-drift-0 calc(var(--story-glass-drift-base) * 13.5 / 12.8) ease-in-out infinite; } .story-slide--08 .glass-scene.glass-scene--drift .gc[data-i="1"] .story-slide-08__orb-drift { animation: story-glass-drift-1 calc(var(--story-glass-drift-base) * 15.2 / 12.8) ease-in-out infinite; } .story-slide--08 .glass-scene.glass-scene--drift .gc[data-i="2"] .story-slide-08__orb-drift { animation: story-glass-drift-2 var(--story-glass-drift-base) ease-in-out infinite; } .story-slide--08 .glass-scene.glass-scene--drift .gc[data-i="3"] .story-slide-08__orb-drift { animation: story-glass-drift-3 calc(var(--story-glass-drift-base) * 14.6 / 12.8) ease-in-out infinite; } .story-slide--08 .glass-scene.glass-scene--drift .gc[data-i="4"] .story-slide-08__orb-drift { animation: story-glass-drift-4 calc(var(--story-glass-drift-base) * 16.1 / 12.8) ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .story-slide--08 .glass-scene.glass-scene--drift .gc .story-slide-08__orb-drift { animation: none !important; } } .story-slide--08 .glass-overlay { position: absolute; inset: -22.5%; border-radius: 50%; background: rgba(37, 37, 37, 0); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.16); pointer-events: none; } .story-slide--08 .story-slide-08__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(1rem, 3vh, 2.5rem); width: 100%; max-width: calc(var(--story-slide-08-glass-size) * 1.2); box-sizing: border-box; text-align: center; opacity: 0; pointer-events: none; transition: opacity var(--story-slide-08-content-fade) ease-out; container-type: inline-size; } .story-slide--08 .story-slide__headline { font-size: clamp(20rem, 22cqw, 30rem); } .story-slide--08 .story-slide-08__content.story-slide-08__content--visible { opacity: 1; pointer-events: none; } .story-slide--08 .story-slide-08__content.story-slide-08__content--visible > * { pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .story-slide--08 .story-slide-08__content { transition-duration: 0.01ms; } } .story-slide--08 .story-slide__deck { font-size: clamp(2rem, 5cqw, 4rem); max-width: 100%; } @media (max-width: 62.125rem) { .story-slide--08 .story-slide-08__content { max-width: calc(var(--story-slide-08-glass-size) * 0.9); gap: clamp(0.65rem, 2vh, 1.25rem); } .story-slide--08 .story-slide__headline--nowrap { white-space: normal; text-wrap: balance; } .story-slide--08 .story-slide__headline { font-size: clamp(6rem, 11vw, 20rem); line-height: 1.05; } .story-slide--08 .story-slide__deck { font-size: clamp(2rem, 3.6vw, 10rem); line-height: 1.25; } } /* Slide 09 — dual silhouette panels (10% orgs / 4% cloud) */ .story-slide--09 { --story-slide-09-silhouette-size: min(44rem, 100%, 42vh); --story-slide-09-icon-size: 32%; --story-slide-09-icon-gradient-orgs: linear-gradient(135deg, #1a69ff 0%, #0ac8ff 100%); --story-slide-09-icon-gradient-cloud: linear-gradient(135deg, #1a69ff 0%, #0ac8ff 100%); display: flex; align-items: stretch; justify-content: center; padding: 0; position: relative; } .story-slide-09__motion { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 100%; padding: clamp(0.75rem, 2vh, 1.5rem) clamp(2rem, 3vw, 1.5rem); padding-top: max(clamp(0.75rem, 2vh, 1.5rem), var(--site-header-block-size)); box-sizing: border-box; } .story-slide-09__panels { display: flex; gap: clamp(1rem, 3vw, 2rem); width: 100%; max-width: min(120rem, 98vw); align-items: stretch; align-content: space-between; } .story-slide-09__panel { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: clamp(0.35rem, 1vh, 0.65rem); text-align: center; } .story-slide-09__particles { position: relative; flex: 0 0 auto; width: var(--story-slide-09-silhouette-size); max-width: min(100%, 50vw); aspect-ratio: 1; opacity: 0; pointer-events: none; margin: auto; } @media (max-height: 800px) { .story-slide-09__particles { max-width: min(100%, 30vh);; } } .story-slide-09__particles .story-slide-09__particles-inner { position: relative; width: 100%; height: 100%; } .story-slide-09__particle-host, .story-slide-09__particle-canvas { width: 100%; height: 100%; display: block; } .story-slide-09__particle-host { position: absolute; inset: 0; z-index: 0; } .story-slide-09__icon { position: absolute; left: 50%; top: 50%; z-index: 1; opacity: 0; width: var(--story-slide-09-icon-size); max-width: 72%; max-height: 72%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; background: var(--story-slide-09-icon-gradient); background-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .story-slide-09__icon--user { --story-slide-09-icon-gradient: var(--story-slide-09-icon-gradient-orgs); -webkit-mask-image: url("../images/story-slide-09-icon-user.png"); mask-image: url("../images/story-slide-09-icon-user.png"); } .story-slide-09__icon--cloud { --story-slide-09-icon-gradient: var(--story-slide-09-icon-gradient-cloud); -webkit-mask-image: url("../images/story-slide-09-icon-cloud.png"); mask-image: url("../images/story-slide-09-icon-cloud.png"); } .story-slide-09__panel-copy { position: relative; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; gap: clamp(0.15rem, 0.6vh, 0.35rem); max-width: min(36rem, 100%); } .story-slide--09 .story-slide-09__panel-copy .story-slide__headline { margin: 0; line-height: 1; text-shadow: 0 0.08em 0.35em rgba(0, 0, 0, 0.55), 0 0.02em 0.12em rgba(0, 0, 0, 0.4); font-size: clamp(6rem, 15vw, 20rem); } .story-slide--09 .story-slide-09__deck-before { font-size: clamp(2.5rem, 2vw, 6rem); line-height: 1.2; } .story-slide--09 .story-slide-09__deck-after { margin: 0; line-height: 1.2; max-width: 100%; font-size: clamp(2rem, 2vw, 4rem); } .story-slide--09 .story-slide-09-reveal { opacity: 0; } @media (max-width: 32rem) { .story-slide--09 { --story-slide-09-silhouette-size: min(15rem, 92vw, 36vh); } .story-slide-09__panels { flex-direction: column; max-width: min(38rem, 94vw); margin-inline: auto; } } @media (prefers-reduced-motion: reduce) { .story-slide--09 .story-slide-09-reveal, .story-slide-09__particles { opacity: 1; } } .story-slide__panel { margin-top: 2rem; padding: 1.5rem; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); } .story-slide--06 { --story-slide-06-video-size: 200rem; /* Fine-tune: vertical nudge of the whole square (negative = move up). */ --story-slide-06-video-shift-y: 0%; position: relative; } .story-slide-06__scroller { background: #000; overflow-x: hidden; } .story-slide-panel--viewport[data-story-slide-panel] { overflow: hidden; isolation: isolate; contain: paint; } .story-slide-panel--viewport .story-slide-06__motion { width: 100%; min-height: 100vh; min-height: 100dvh; } /* Oversized Brightcove square bleeds above the headline; clip until panel snap. */ .story-slide--06:not(.story-slide-06--panel-visible) .story-slide-06__bg, .story-slide--06:not(.story-slide-06--panel-visible) .story-slide-06__bc, .story-slide--06:not(.story-slide-06--panel-visible) .story-slide-panel[data-story-slide-panel] { visibility: hidden; } .story-slide--06 #story-slide-06-interstitial { position: relative; z-index: 2; background: var(--muse-color-brand-black); transition: opacity 0.45s ease, visibility 0.45s ease; } .story-slide--06.story-slide-06--panel-visible #story-slide-06-interstitial { opacity: 0; visibility: hidden; pointer-events: none; } .story-slide-06__motion { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 100%; padding: clamp(1.25rem, 3vh, 2.5rem) 1.5rem 3rem; gap: 0; box-sizing: border-box; } /* Headline + video share one positioning context: video bottom aligns to headline bottom. */ .story-slide-06__headline-block { position: relative; z-index: 0; width: 100%; max-width: min(100rem, 100%); margin-inline: auto; margin-bottom: 3rem; } .story-slide-06__headline-block .story-slide-06__bg { position: absolute; z-index: 0; left: 50%; bottom: 0; width: min(var(--story-slide-06-video-size), 92vw); aspect-ratio: 1 / 1; transform: translate(-50%, var(--story-slide-06-video-shift-y)); pointer-events: none; } .story-slide-06__bc { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; min-height: 0; margin: 0; border: 0; transform: none; opacity: 1; pointer-events: none; } .story-slide-06__bc.video-js { padding-top: 0 !important; background: transparent; } .story-slide-06__bc.video-js .vjs-tech { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .story-slide-06__bc.video-js .vjs-big-play-button, .story-slide-06__bc.video-js .vjs-control-bar { display: none !important; } .story-slide-06__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1rem, 4vh, 2.5rem); width: 100%; max-width: min(105rem, 100%); text-align: center; isolation: isolate; } /* Slide 06 morph (Club GSAP): hide headline SVG + deck until slide is entered; JS adds --has-morph when plugins load. */ .story-slide--06.story-slide-06--has-morph .story-slide-06__headline-morph-svg { display: block; } .story-slide--06.story-slide-06--has-morph:not(.story-slide-06--intro-armed) .story-slide-06__headline-morph-svg, .story-slide--06.story-slide-06--has-morph:not(.story-slide-06--intro-armed) #story-slide-06-deck { opacity: 0; visibility: hidden; } .story-slide--06.story-slide-06--intro-armed .story-slide-06__headline-morph-svg { display: block; visibility: visible; opacity: 0; } .story-slide--06.story-slide-06--deck-visible .story-slide-06__headline-morph-svg, .story-slide--06.story-slide-06--morph-failed .story-slide-06__headline-morph-svg { opacity: 1; } .story-slide--06.story-slide-06--intro-armed:not(.story-slide-06--deck-visible):not(.story-slide-06--morph-failed) #story-slide-06-deck { opacity: 0; visibility: hidden; } .story-slide--06.story-slide-06--morph-failed .story-slide-06__headline-morph-svg { display: none !important; } .story-slide--06.story-slide-06--morph-failed #story-slide-06-deck { opacity: 1; visibility: visible; } .story-slide--06 .story-slide-06__headline-block .story-slide__headline { position: relative; z-index: 1; padding-top: clamp(0.25rem, 1.5vh, 0.75rem); text-shadow: 0 0.08em 0.35em rgba(0, 0, 0, 0.55), 0 0.02em 0.12em rgba(0, 0, 0, 0.4); } /* Morph headline: fill headline-block width so SVG % width + aspect-ratio resolve (avoids ~0 height → layout jump). */ .story-slide--06 .story-slide-06__headline-block .story-slide__headline.story-slide-06__headline-morph { width: 100%; max-width: 100%; box-sizing: border-box; } .story-slide-06__headline-morph--active.story-slide__headline { text-shadow: none; } .story-slide-06__headline-morph-svg { display: none; width: 100%; max-width: 100%; aspect-ratio: 154.248 / 51.556; height: auto; overflow: visible; } .story-slide-06__headline-morph--active .story-slide-06__headline-morph-svg { filter: drop-shadow(0 0.08em 0.35em rgba(0, 0, 0, 0.55)) drop-shadow(0 0.02em 0.12em rgba(0, 0, 0, 0.4)); } .story-slide--06 .story-slide__deck { max-width: 100%; min-height: 3.2em; } @media (prefers-reduced-motion: reduce) { .story-slide--06.story-slide-06--has-morph .story-slide-06__headline-morph-svg, .story-slide--06.story-slide-06--has-morph #story-slide-06-deck { opacity: 1 !important; visibility: visible !important; } .story-slide--06.story-slide-06--has-morph .story-slide-06__headline-morph-svg { display: none !important; } } /* ——— Dot nav ——— */ .story-nav { position: fixed; top: 50%; right: 1.25rem; z-index: 50; translate: 0 -50%; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } html.story--past-intro .story-nav, html:not(.story--past-intro) .story-nav:focus-within { opacity: 1; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .story-nav { transition: none; } } .story-nav__list { display: flex; flex-direction: column; align-items: center; gap: var(--story-nav-gap); margin: 0; padding: 0; list-style: none; } .story-nav__item { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0.35rem; cursor: pointer; } .story-nav__link { position: relative; display: block; width: var(--story-nav-dot-active); height: var(--story-nav-dot-active); padding: 0; border: none; border-radius: 50%; background: transparent; cursor: pointer; } .story-nav__link .story-magnetic__motion, .story-nav__link-magnetic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .story-nav__link-face { flex-shrink: 0; width: var(--story-nav-dot-active); height: var(--story-nav-dot-active); border-radius: 50%; background: rgba(255, 255, 255, 0.35); transition: transform 0.15s ease, background 0.15s ease; } .story-nav__defs { position: absolute; width: 0; height: 0; overflow: hidden; } .story-nav__tooltip { position: absolute; right: calc(100% + 2px); top: 50%; z-index: 2; translate: 0 -50%; display: grid; grid-template: 1fr / 1fr; align-items: center; justify-items: stretch; width: max-content; max-width: min(90vw, 24rem); min-height: 2.75rem; pointer-events: none; opacity: 0; visibility: hidden; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); transition: opacity 0.15s ease, visibility 0.15s ease; } .story-nav__link:hover .story-nav__tooltip, .story-nav__link:focus-visible .story-nav__tooltip { opacity: 1; visibility: visible; } /* Flag: add class `story-html--no-nav-tooltips` on to hide dot-nav tooltips (SVG + markup unchanged). */ html.story-html--no-nav-tooltips .story-nav__tooltip { display: none !important; } .story-nav__tooltip-svg { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 2.75rem; } .story-nav__tooltip-label { grid-area: 1 / 1; z-index: 1; margin: 0; padding: 0.45rem 2.5rem 0.45rem 0.85rem; font-family: var(--muse-font-family-default); font-size: 1.4rem; font-weight: 500; line-height: 1.2; white-space: nowrap; color: var(--muse-color-brand-white); text-align: left; overflow: hidden; text-overflow: ellipsis; } @media (prefers-reduced-motion: reduce) { .story-nav__tooltip { transition: none; } .story-nav__link-face { transition: none; } } .story-nav__link:hover .story-nav__link-face, .story-nav__link:focus-visible .story-nav__link-face { background: rgba(255, 255, 255, 0.65); transform: scale(1.08); } .story-nav__link--active .story-nav__link-face { background: var(--muse-color-brand-white); transform: scale(1.15); } .story-nav__link--active:hover .story-nav__link-face, .story-nav__link--active:focus-visible .story-nav__link-face { transform: scale(1.15); } .story-nav__link:focus-visible { outline: 2px solid var(--muse-color-brand-medium-blue-40); outline-offset: 3px; } /* ——— Shared stat bubble typography (Figma Story-Lab) ——— */ .story-stat__value { margin: 0; color: #fff; text-align: center; font-feature-settings: "liga" 0, "clig" 0; font-family: var(--muse-font-family-default); font-size: 9.6rem; font-style: normal; font-weight: 400; line-height: 100%; } .story-stat__description { margin: 0; color: #fff; text-align: center; font-feature-settings: "liga" 0, "clig" 0; font-family: var(--muse-font-family-default); font-size: 3.9rem; font-style: normal; font-weight: 400; line-height: 115%; max-width: 20ch; } @media (max-width: 75rem) { .story-stat__value { font-size: clamp(3rem, 12vw, 9.6rem); } .story-stat__description { font-size: clamp(2rem, 4vw, 4.8rem); } } /* ——— Slide 04: title reveal, circle grid, stat carousel ——— */ .story-slide--04 { overflow-x: clip; --story-slide-04-circle-grad-angle: 127deg; --story-slide-04-gradient-cyan: rgb(2, 200, 255); --story-slide-04-gradient-blue-deep: rgb(10, 96, 255); --story-slide-04-circle-gap-ratio: 0.12; --story-slide-04-bubble-overlap: clamp(2.5rem, 6vw, 4.5rem); --story-slide-04-bubble-size: min(520px, 75vw); --story-slide-04-bubble-size-active: min(600px, 85vw); --story-slide-04-title-reveal-duration: 1.2s; --story-slide-04-title-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1); --story-slide-04-title-blur-start: 24px; background: #000; } .story-slide-04__scroller { background: #000; overflow-x: hidden; } .story-slide-04__scroll-doc { position: relative; } .story-slide-04__pin-wrap { position: relative; } .story-slide-04__hero-stack { position: sticky; top: 0; z-index: 1; height: 100vh; height: 100dvh; overflow-x: clip; overflow-y: hidden; isolation: isolate; } .story-slide-04__circle-bg { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: transparent; pointer-events: none; } .story-slide-04__circle-bg .story-slide-04__circle-grid { pointer-events: auto; --cols: 34; position: absolute; inset: 0; display: grid; min-height: 0; min-width: 0; padding: calc(100% / var(--cols) * var(--story-slide-04-circle-gap-ratio)); gap: calc(100% / var(--cols) * var(--story-slide-04-circle-gap-ratio)); } .story-slide-04__circle-grid-cell { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: visible; container-type: size; } .story-slide-04__circle-grid-dot { width: calc(100cqmin * var(--s, 0)); height: calc(100cqmin * var(--s, 0)); flex-shrink: 0; border-radius: 50%; background-image: linear-gradient( var(--story-slide-04-circle-grad-angle), var(--story-slide-04-gradient-cyan), var(--story-slide-04-gradient-blue-deep) ); background-repeat: no-repeat; } @supports not (width: 1cqmin) { .story-slide-04__circle-grid-dot { width: calc(100% * var(--s, 0)); height: calc(100% * var(--s, 0)); } } .story-slide-04__title-wrap { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; pointer-events: none; } .story-slide--04 .story-slide-04__title { font-size: clamp(2.25rem, 6vw, 5rem); line-height: 1; white-space: normal; opacity: 0; filter: blur(var(--story-slide-04-title-blur-start)); transform: translateY(12px); transition: opacity var(--story-slide-04-title-reveal-duration) var(--story-slide-04-title-reveal-ease), filter var(--story-slide-04-title-reveal-duration) var(--story-slide-04-title-reveal-ease), transform var(--story-slide-04-title-reveal-duration) var(--story-slide-04-title-reveal-ease); will-change: opacity, filter, transform; text-shadow: 0 0 32px rgba(0, 0, 0, 0.95), 0 2px 24px rgba(0, 0, 0, 0.9), 0 4px 48px rgba(0, 0, 0, 0.75); } .story-slide-04__title-line { display: block; } .story-slide-04__title-line + .story-slide-04__title-line { margin-top: 0.02em; } .story-slide-04__title.is-visible { opacity: 1; filter: blur(0); transform: translateY(0); } .story-slide-04__bubble-stage { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: flex-start; overflow-x: clip; overflow-y: visible; opacity: 0; pointer-events: none; perspective: 1100px; perspective-origin: 50% 50%; transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .story-slide-04__bubble-stage--visible { opacity: 1; pointer-events: auto; touch-action: pan-y pinch-zoom; } .story-slide-04__bubbles-track { position: relative; z-index: 1; display: flex; flex-direction: row; align-items: center; gap: 0; width: max-content; padding-left: max(2rem, calc(50vw - var(--story-slide-04-bubble-size-active) * 0.5)); padding-right: max(2rem, calc(50vw - var(--story-slide-04-bubble-size-active) * 0.5)); will-change: transform; } .story-slide-04__bubble { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin-right: calc(-1 * var(--story-slide-04-bubble-overlap)); will-change: transform; } .story-slide-04__bubble:last-child { margin-right: 0; } .story-slide-04__bubble-tilt { transform-origin: center center; transform-style: preserve-3d; will-change: transform, opacity; } .story-slide-04__bubble, .story-slide-04__bubble-face { pointer-events: auto; } .story-slide-04__bubble-face { position: relative; transform: translateZ(0); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; width: var(--story-slide-04-bubble-size); height: var(--story-slide-04-bubble-size); padding: clamp(2rem, 5vw, 4rem); border-radius: 50%; border: 1px solid rgba(255, 255, 255, var(--story-slide-04-face-border-alpha, 0.95)); text-align: center; color: #fff; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(var(--story-slide-04-face-backdrop-blur, 4px)); -webkit-backdrop-filter: blur(var(--story-slide-04-face-backdrop-blur, 4px)); will-change: filter, backdrop-filter; transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), height 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-width 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, filter 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease; } /* Defocused: no backdrop (compositor-safe); soften blur on whole face including border */ .story-slide-04__bubble-face--defocused { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, 0.06); } .story-slide-04__bubble-face--defocused::before { opacity: 0.4; } .story-slide-04__bubble-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; width: 100%; pointer-events: none; } .story-slide-04__bubble--active .story-slide-04__bubble-face { border-width: 2px; } .story-slide-04__bubble-face::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, 0.16); pointer-events: none; } .story-slide-04__bubble-face > *:not([class*="__a11y-hit"]) { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .story-slide--04 .story-slide-04__title { opacity: 1; filter: none; transform: none; transition: none; } .story-slide-04__circle-bg .story-slide-04__circle-grid { display: none; } .story-slide-04__circle-bg { background: linear-gradient( var(--story-slide-04-circle-grad-angle), var(--story-slide-04-gradient-cyan), var(--story-slide-04-gradient-blue-deep) ); } .story-slide-04__bubble-tilt { transform: none !important; opacity: 1 !important; } .story-slide-04__bubble-content, .story-slide-04__bubble-face { filter: none !important; } .story-slide-04__bubbles-track { transform: none !important; } .story-slide-04__bubble-stage { opacity: 1; pointer-events: auto; transition: none; } } /* ——— Mobile landscape: short viewport height (~≤500px; typical phone landscape is 360–430px) ——— */ @media (orientation: landscape) and (max-height: 500px) { :root { --story-nav-gap: 4px; --site-header-wordmark-height: 1.675rem; --site-header-block-size: calc(var(--site-header-wordmark-height) + 2rem); } .story-interstitial__title { font-size: 4rem; } .site-header__inner { padding-top: 0.3rem; padding-bottom: 0rem; min-height: var(--site-header-block-size); } /* Intro: keep title/deck over the hero animation (undo narrow-width column stack). */ .story-intro { display: block; gap: 0; overflow: hidden; } .story-intro__bg { position: absolute; inset: 0; flex-shrink: unset; width: auto; min-height: 0; } .story-intro__gradient-three, .story-intro__hero-wrap { position: absolute; inset: 0; width: auto; min-height: 0; } .story-intro__content { position: relative; z-index: 1; min-height: 100%; flex: unset; width: auto; padding-top: max(1rem, var(--site-header-block-size)); } .story-intro__title { font-size: 6rem; font-weight: 500; } .story-intro__deck { font-size: 2rem; } .story-slide__deck { font-size: 2rem; } .story-slide .story-slide__inner { padding-top: 0; } .story-slide .story-slide__inner .story-slide__headline { font-size: 14rem; margin-block: 0; } .story-slide--01 .story-slide-01-headline { font-size: 10rem; } .story-slide--01 .story-slide-01-headline__sizer { font-size: 10rem; } .story-slide-01__deck-before, .story-slide-01__deck-after { font-size: 2rem; } .story-slide--04 { --story-slide-04-bubble-size: min(520px, 55vh); --story-slide-04-bubble-size-active: min(600px, 65vh); } .story-slide--04 .story-stat__value { font-size: 3rem; } .story-slide--04 .story-stat__description { font-size: 1.6rem; } .story-slide--04 .story-slide-04__title { font-size: 4rem; } .story-slide-04__bubble-face { padding: 2rem; } .story-slide-06__headline-morph-svg, .story-slide-07__headline-morph-svg { width: 50%; margin-inline: auto; } .story-slide--07 .story-slide-07__headline .story-slide__headline.story-slide-07__headline-morph { margin-block: 0; } .story-slide .story-slide__inner .story-slide__headline { font-size: 10rem; } .story-slide--08 .story-slide__inner .story-slide__headline { font-size: 4rem; } .story-slide--08 .story-slide__deck { font-size: 2rem; } .story-slide--09 .story-slide-09__panel-copy .story-slide__headline { font-size: 6rem; } }