/* ========================================================================== Entrance motion — only active when assets/js/motion.js adds .motion to (never under prefers-reduced-motion). Sections gain .is-visible once, when they scroll into view. Uses the individual `translate` / `scale` properties rather than `transform`, so they compose with transforms elements already use for layout (the values teardrop, journey labels, rotated word-cloud words). ========================================================================== */ :root { --ease-out: cubic-bezier(.22, .8, .24, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); --stagger: 90ms; } /* -- Staggered rise + fade ------------------------------------------------ */ .motion .reveal { opacity: 0; translate: 0 26px; transition: opacity .9s var(--ease-out), translate .9s var(--ease-out), scale 1s var(--ease-spring); transition-delay: calc(min(var(--i, 0), 10) * var(--stagger) + 120ms); } .motion .is-visible .reveal { opacity: 1; translate: none; scale: none; } /* Shapes that grow into place instead of rising */ .motion .toc-mark.reveal, .motion .hero-photo .circle.reveal, .motion .quote-mark.reveal, .motion .values-center.reveal, .motion .ip-more.reveal, .motion .contact-mark.reveal { translate: none; scale: .86; } /* Word cloud: opacity only — rotated words carry an SVG transform attribute */ .motion .wordcloud text.reveal { translate: none; transition: opacity 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms + 250ms); } /* Vertical rule on the vision page grows downwards */ .motion #vision-detail .rule.reveal { translate: none; scale: 1 0; transform-origin: top; } /* -- Line art that draws itself ------------------------------------------- */ .motion .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out); transition-delay: calc(min(var(--d, 0), 12) * 80ms + 300ms); } .motion .is-visible .draw { stroke-dashoffset: 0; } .motion .journey-line.draw { transition-duration: 2.2s; } /* Journey dots pop in after the curve has passed them */ .motion .journey-dots circle { scale: 0; transform-box: fill-box; transform-origin: center; transition: scale .6s var(--ease-spring); } .motion .is-visible .journey-dots circle { scale: 1; } .motion .journey-dots circle:nth-child(1) { transition-delay: .3s; } .motion .journey-dots circle:nth-child(2) { transition-delay: .8s; } .motion .journey-dots circle:nth-child(3) { transition-delay: 1.3s; } .motion .journey-dots circle:nth-child(4) { transition-delay: 1.8s; } .motion .journey-dots circle:nth-child(5) { transition-delay: 2.3s; } /* -- Slow settle on full-bleed photos ------------------------------------- A copy of the section background on ::before starts slightly enlarged and eases back to 1 as the page arrives. */ .motion #cover, .motion .hero-photo, .motion #quote-phrase { isolation: isolate; } .motion #cover::before, .motion .hero-photo::before, .motion #quote-phrase::before { content: ""; position: absolute; inset: 0; z-index: -1; background: inherit; scale: 1.08; transition: scale 2.6s var(--ease-out); } .motion #cover.is-visible::before, .motion .hero-photo.is-visible::before, .motion #quote-phrase.is-visible::before { scale: 1; }