/* * apple-transitions.css * Drop-in Apple-standard motion layer for diff-use.ca * Add to */ :root { --ease-std: cubic-bezier(0.25, 0.10, 0.25, 1.00); --ease-in: cubic-bezier(0.42, 0.00, 1.00, 1.00); --ease-out: cubic-bezier(0.00, 0.00, 0.58, 1.00); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.00); --ease-smooth: cubic-bezier(0.16, 1.00, 0.30, 1.00); --ease-snappy: cubic-bezier(0.25, 0.46, 0.45, 0.94); --dur-micro: 80ms; --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 480ms; --dur-enter: 640ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal, .reveal-up, .reveal-fade, .reveal-scale, .reveal-clip, .stagger-child { opacity: 1 !important; transform: none !important; clip-path: none !important; } } body { animation: du-body-in var(--dur-enter) var(--ease-smooth) both; } @keyframes du-body-in { from { opacity: 0; } to { opacity: 1; } } .nav { transition: height var(--dur-base) var(--ease-smooth), background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth), backdrop-filter var(--dur-base) var(--ease-smooth); } .nav.nav--scrolled .nav-inner { height: 52px; transition: height var(--dur-base) var(--ease-smooth); } .nav-inner { transition: height var(--dur-base) var(--ease-smooth); } .nav.nav--scrolled { box-shadow: 0 1px 18px rgba(0, 0, 0, 0.07); background: color-mix(in oklab, var(--paper) 92%, transparent); } .nav-links a { position: relative; transition: color var(--dur-fast) var(--ease-std); } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-base) var(--ease-spring); } .nav-links a:hover::after, .nav-links a.is-active::after { transform: scaleX(1); } .nav-cta { transition: transform var(--dur-base) var(--ease-spring), background var(--dur-fast) var(--ease-std), box-shadow var(--dur-base) var(--ease-smooth); } .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 4px 16px color-mix(in oklab, var(--ink) 18%, transparent); } .nav-cta:active { transform: translateY(0) scale(0.97); transition-duration: var(--dur-micro); } .reveal-up { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-enter) var(--ease-smooth), transform var(--dur-enter) var(--ease-smooth); will-change: opacity, transform; } .reveal-up.is-visible { opacity: 1; transform: translateY(0); } .reveal-fade { opacity: 0; transition: opacity var(--dur-slow) var(--ease-smooth); will-change: opacity; } .reveal-fade.is-visible { opacity: 1; } .reveal-scale { opacity: 0; transform: scale(0.97) translateY(16px); transition: opacity var(--dur-enter) var(--ease-smooth), transform var(--dur-enter) var(--ease-spring); will-change: opacity, transform; } .reveal-scale.is-visible { opacity: 1; transform: scale(1) translateY(0); } .reveal-clip { clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-slow) var(--ease-smooth); will-change: clip-path; } .reveal-clip.is-visible { clip-path: inset(0 0% 0 0); } .stagger-child { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-enter) var(--ease-smooth), transform var(--dur-enter) var(--ease-spring); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; } .stagger-child.is-visible { opacity: 1; transform: translateY(0); } .challenge, .app-card-slide, .team-card, .event-card { transition: background var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-smooth); will-change: transform, box-shadow; } .challenge:hover, .app-card-slide:hover, .team-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px color-mix(in oklab, var(--ink) 10%, transparent); } .event-card { transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-smooth); } .event-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px color-mix(in oklab, var(--ink) 9%, transparent); } .challenge:active, .app-card-slide:active, .team-card:active { transform: translateY(-1px) scale(0.995); transition-duration: var(--dur-micro); } .btn { transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-smooth); will-change: transform; } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px color-mix(in oklab, var(--ink) 15%, transparent); } .btn-primary:hover { box-shadow: 0 6px 24px color-mix(in oklab, var(--accent) 35%, transparent); } .btn:active { transform: scale(0.96) translateY(0); box-shadow: none; transition-duration: var(--dur-micro); } .btn .arr { transition: transform var(--dur-base) var(--ease-spring); } .btn:hover .arr { transform: translateX(5px); } .stim-btn { transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), transform var(--dur-base) var(--ease-spring); } .stim-btn:hover { transform: translateY(-1px); } .stim-btn:active { transform: scale(0.95); transition-duration: var(--dur-micro); } .apps-arrow { transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), transform var(--dur-base) var(--ease-spring); } .apps-arrow:hover { transform: scale(1.08); } .apps-arrow:active { transform: scale(0.94); transition-duration: var(--dur-micro); } section + section { transition: border-color var(--dur-slow) var(--ease-smooth); } .status-step::before { transition: background var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std), box-shadow var(--dur-slow) var(--ease-smooth); } .team-linkedin { transition: color var(--dur-fast) var(--ease-std), transform var(--dur-base) var(--ease-spring); } .team-linkedin:hover { transform: translateX(3px); } .footer-links a { transition: color var(--dur-fast) var(--ease-std); } body, .nav, .site-footer, .challenge, .app-card-slide, .team-card, .event-card, .facts > div, .chart, .tweaks { transition: background var(--dur-slow) var(--ease-smooth), color var(--dur-slow) var(--ease-smooth), border-color var(--dur-slow) var(--ease-smooth); } html { scroll-behavior: smooth; } /* ── Polish ───────────────────────────────────────────────────── */ /* Anchor targets clear the fixed nav on direct hash-loads and native (non-JS) jumps, so headings never hide beneath the bar. */ #top, section[id] { scroll-margin-top: 84px; } /* Keyboard focus — visible accent ring on every interactive control (base styles only defined this for the team LinkedIn link). */ .nav-links a:focus-visible, .nav-cta:focus-visible, .brand:focus-visible, .btn:focus-visible, .stim-btn:focus-visible, .apps-arrow:focus-visible, .footer-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* Pill-shaped controls read better with a rounded ring. */ .nav-cta:focus-visible, .btn:focus-visible, .stim-btn:focus-visible { border-radius: 999px; } .apps-arrow:focus-visible { border-radius: 50%; } /* Remove the lingering focus ring once a press has clearly begun, matching the pointer-press feedback. */ .btn:focus:not(:focus-visible), .nav-cta:focus:not(:focus-visible) { outline: none; }