/* ========================================================= I4PL Motion Layer Applied selectively to storytelling pages (home, about, certification, learn-with-us). Function pages opt out by simply not adding the `data-motion` attribute on . Honors prefers-reduced-motion via the existing media query in styles.css. ========================================================= */ /* -- Reveal-on-scroll primitives ---------------------------- */ [data-motion] .reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); will-change: transform, opacity; } [data-motion] .reveal.is-visible { opacity: 1; transform: translateY(0); } [data-motion] .reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1); } [data-motion] .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; } [data-motion] .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; } [data-motion] .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; } [data-motion] .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; } [data-motion] .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; } [data-motion] .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; } [data-motion] .reveal-stagger.is-visible > *:nth-child(n+7) { transition-delay: 480ms; } [data-motion] .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); } /* -- Hero treatment: parallax sub-layer ---------------------- */ [data-motion] .hero-figure { transition: transform 900ms cubic-bezier(.2,.7,.2,1); } [data-motion] .hero-figure.is-visible { transform: translateY(0) scale(1); } [data-motion] .hero-figure:not(.is-visible) { transform: translateY(20px) scale(.98); } /* The headline highlight underline draws in on view */ [data-motion] .hero-copy h1 em::after { transform: scaleX(0); transform-origin: left center; transition: transform 900ms cubic-bezier(.2,.7,.2,1) 300ms; } [data-motion] .hero-copy.is-visible h1 em::after { transform: scaleX(1); } /* -- Section header underline draw -------------------------- */ [data-motion] .section-head h2 { position: relative; padding-bottom: 14px; } [data-motion] .section-head h2::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 56px; background: var(--i4-orange); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 700ms cubic-bezier(.2,.7,.2,1); } [data-motion] .section-head.is-visible h2::after { transform: scaleX(1); } /* -- Count-up stat block ------------------------------------ */ [data-motion] .countup { font-variant-numeric: tabular-nums; } /* -- Sticky narrative section (about page origin story) ----- */ .stickywrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: flex-start; } .stickywrap .sticky-media { position: sticky; top: calc(var(--sp-6) + 64px); align-self: start; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-lg); } .stickywrap .sticky-media img { width: 100%; height: 100%; object-fit: cover; } .stickywrap .sticky-flow > * + * { margin-top: var(--sp-7); } .stickywrap .sticky-step { padding-block: var(--sp-5); border-top: 1px solid var(--line); } .stickywrap .sticky-step:first-child { border-top: none; padding-top: 0; } .stickywrap .sticky-step .year { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.875rem; font-weight: 700; color: var(--i4-orange-dark); letter-spacing: 0.08em; text-transform: uppercase; } .stickywrap .sticky-step h3 { margin-top: var(--sp-2); font-size: 1.5rem; } .stickywrap .sticky-step p { color: var(--ink-soft); font-size: 1rem; margin-bottom: 0; } @media (max-width: 860px) { .stickywrap { grid-template-columns: 1fr; gap: var(--sp-5); } .stickywrap .sticky-media { position: relative; top: auto; aspect-ratio: 16/10; } } /* -- Marquee strip (chapter names, credential acronyms) ----- */ .marquee { overflow: hidden; position: relative; padding: var(--sp-5) 0; border-block: 1px solid var(--line); background: var(--paper-warm); } .marquee-track { display: flex; gap: var(--sp-7); width: max-content; animation: marquee 38s linear infinite; } .marquee-item { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.25rem; font-weight: 600; color: var(--i4-teal-deep); letter-spacing: -0.005em; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sp-3); } .marquee-item::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--i4-orange); margin-left: var(--sp-3); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; } } /* -- Cert pride moment: animated ring on credential card ---- */ .cred-card { position: relative; background: linear-gradient(155deg, var(--i4-teal-deep), var(--i4-teal-dark) 75%); color: #fff; padding: var(--sp-7) var(--sp-6); border-radius: var(--r-lg); overflow: hidden; } .cred-card h3 { color: #fff; margin-bottom: var(--sp-3); } .cred-card .acro { font-family: 'Source Serif 4', Georgia, serif; font-weight: 700; font-size: 3rem; letter-spacing: -0.02em; color: var(--i4-orange); line-height: 1; } .cred-card .ring { position: absolute; right: -64px; top: -64px; width: 240px; height: 240px; border-radius: 50%; border: 1px solid rgba(247,148,30,.32); } .cred-card .ring::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid transparent; border-top-color: var(--i4-orange); border-right-color: var(--i4-orange); animation: ring-spin 8s linear infinite; } @keyframes ring-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .cred-card .ring::after { animation: none; } } /* -- Image-grid lazy fade-in -------------------------------- */ [data-motion] .lazy-fade { opacity: 0; transition: opacity 500ms ease; } [data-motion] .lazy-fade.is-loaded { opacity: 1; }