/* ========================================================================== MOTION — keyframes, scroll-reveal states, hero choreography hooks ========================================================================== */ @keyframes antiqueFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(0.5deg); } } @keyframes waypointGlow { 0% { box-shadow: 0 0 0 0 rgba(74, 111, 165, 0.5); } 70% { box-shadow: 0 0 0 12px rgba(74, 111, 165, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 111, 165, 0); } } @keyframes compassPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.85; } } @keyframes inkDraw { to { stroke-dashoffset: 0; } } /* ---- Scroll reveal (non-hero sections) --------------------------------- */ /* Only hide reveal content once JS is confirmed running. */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--oj-ease-cinematic), transform 0.7s var(--oj-ease-cinematic); } .js .reveal.is-visible { opacity: 1; transform: none; } /* Cards that carry their own rotate keep it through the reveal */ .js .chronicle.reveal { transform: translateY(22px) rotate(var(--rot, -1deg)); } .js .chronicle.reveal.is-visible { transform: rotate(var(--rot, -1deg)); } /* ---- The Dispatch Route (signature) ----------------------------------- */ .dispatch-route { position: fixed; inset-inline-start: max(12px, calc((100vw - var(--oj-container-max)) / 2 - 30px)); top: 0; height: 100vh; width: 40px; z-index: 40; pointer-events: none; display: none; } @media (min-width: 1180px) { .dispatch-route { display: block; } } .dispatch-route svg { height: 100%; width: 100%; overflow: visible; } .dispatch-route__path { fill: none; stroke: var(--oj-accent-gold); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; opacity: 0.5; } .dispatch-route__progress { fill: none; stroke: var(--oj-compass-blue); stroke-width: 2.5; stroke-linecap: round; } .dispatch-route__pin { fill: var(--oj-bg-canvas); stroke: var(--oj-accent-gold); stroke-width: 2; transition: stroke 0.4s ease, fill 0.4s ease; } .dispatch-route__pin.is-active { fill: var(--oj-compass-blue); stroke: var(--oj-compass-blue); } /* Corner compass that points to the active waypoint */ .route-compass { position: fixed; inset-inline-end: 22px; bottom: 22px; width: 54px; height: 54px; z-index: 40; display: none; border-radius: 50%; background: color-mix(in srgb, var(--oj-bg-canvas) 85%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--oj-border-warm); box-shadow: var(--oj-shadow-md); place-items: center; } @media (min-width: 1180px) { .route-compass { display: grid; } } .route-compass svg { width: 30px; height: 30px; } .route-compass__ring { fill: none; stroke: var(--oj-text-muted); stroke-width: 1.4; } .route-compass__tick { stroke: var(--oj-text-muted); stroke-width: 1.4; stroke-linecap: round; } .route-compass__needle { transform-box: fill-box; transform-origin: center; transition: transform 0.9s var(--oj-ease-paper); } .route-compass__needle .n { fill: var(--oj-accent-gold); } .route-compass__needle .s { fill: var(--oj-text-muted); } /* ---- Hero choreography ------------------------------------------------- */ /* --hero-progress (0..1) is set on by main.js during the sticky pin. */ .hero { --hero-progress: 0; } .hero__pin { position: sticky; top: 0; min-height: 100vh; display: grid; align-items: start; /* clears the floating header, which now overlays the hero */ padding-top: clamp(104px, 12.5vh, 148px); overflow: hidden; } .hero__plane { position: absolute; pointer-events: none; will-change: transform, opacity; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 78%); mix-blend-mode: multiply; } [data-theme="dark"] .hero__plane { mix-blend-mode: screen; } .hero__plane--back { inset: -8% -12% auto -12%; opacity: calc(0.09 + var(--hero-progress) * 0.08); transform: scale(calc(1.04 + var(--hero-progress) * 0.14)) translateY(calc(var(--hero-progress) * -22px)); } .hero__plane--mid { width: min(46vw, 540px); inset-inline-end: -8%; top: 6%; opacity: calc(0.1 + var(--hero-progress) * 0.06); transform: rotate(calc(var(--hero-progress) * 34deg)) translateY(calc(var(--hero-progress) * 40px)); } .hero__plane--fore { width: min(42vw, 480px); inset-inline-start: -9%; bottom: -6%; opacity: calc(0.16 - var(--hero-progress) * 0.1); transform: translateX(calc(var(--hero-progress) * -70px)) translateY(calc(var(--hero-progress) * 30px)); } [data-theme="dark"] .hero__plane--back { opacity: calc(0.1 + var(--hero-progress) * 0.06); } [data-theme="dark"] .hero__plane--mid { opacity: calc(0.1 + var(--hero-progress) * 0.05); } [data-theme="dark"] .hero__plane--fore { opacity: calc(0.15 - var(--hero-progress) * 0.08); } .hero__copy { transform: translateY(calc(var(--hero-progress) * -40px)); opacity: calc(1 - var(--hero-progress) * 0.85); will-change: transform, opacity; } /* Headline word mask reveal on load */ .hero__headline .word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.12em; margin-bottom: -0.12em; } .hero__headline .word > span { display: inline-block; transform: translateY(120%); animation: heroWordUp 0.9s var(--oj-ease-cinematic) forwards; animation-delay: calc(var(--i, 0) * 90ms + 200ms); } @keyframes heroWordUp { to { transform: translateY(0); } } .hero__flourish { display: inline-block; opacity: 0; animation: heroFlourish 1.1s ease forwards; animation-delay: 640ms; } @keyframes heroFlourish { from { opacity: 0; transform: translateY(8px) rotate(-2deg); } to { opacity: 1; transform: none; } } .hero__devices { perspective: 1500px; will-change: transform; } .hero__device { will-change: transform; transition: none; backface-visibility: hidden; } /* Phones sit fanned open, then rotate toward the viewer as progress grows */ .hero__device--left { transform-origin: right center; transform: rotateY(calc(22deg - var(--hero-progress) * 16deg)) rotate(calc(-6deg + var(--hero-progress) * 3deg)) translateY(calc(var(--hero-progress) * -14px)); } .hero__device--right { transform-origin: left center; transform: rotateY(calc(-22deg + var(--hero-progress) * 16deg)) rotate(calc(6deg - var(--hero-progress) * 3deg)) translateY(calc(var(--hero-progress) * -26px)); } .hero__satellite { position: absolute; z-index: 3; will-change: transform, opacity; opacity: calc(0.9 + var(--hero-progress) * 0.2); filter: drop-shadow(0 12px 24px rgba(44, 24, 16, 0.16)); } .hero__satellite--polaroid { inset-inline-start: -19%; top: 6%; transform: translate(calc(var(--hero-progress) * -30px), calc(var(--hero-progress) * -14px)) rotate(-9deg) scale(calc(0.88 + var(--hero-progress) * 0.12)); } [dir="rtl"] .hero__satellite--polaroid { transform: translate(calc(var(--hero-progress) * 30px), calc(var(--hero-progress) * -14px)) rotate(9deg) scale(calc(0.88 + var(--hero-progress) * 0.12)); } @media (max-width: 1100px) { .hero__satellite--polaroid { display: none; } } .hero__scrollcue { position: absolute; left: 50%; bottom: clamp(20px, 5vh, 44px); translate: -50% 0; font-family: var(--oj-font-ui); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oj-text-muted); opacity: calc(1 - var(--hero-progress) * 3); display: grid; justify-items: center; gap: 6px; z-index: 3; } .hero__scrollcue::after { content: ""; width: 1px; height: 22px; background: linear-gradient(var(--oj-accent-gold), transparent); animation: compassPulse 2s ease-in-out infinite; } /* Flight-path drawn across the map layer during Beat 2 */ .hero__route { stroke: var(--oj-accent-gold); stroke-width: 2; stroke-dasharray: 4 6; fill: none; stroke-dashoffset: var(--route-dash, 600); } @media (prefers-reduced-motion: reduce) { .hero { --hero-progress: 0 !important; height: auto !important; } .hero__pin { position: relative; height: auto; min-height: 0; padding-top: 124px; padding-bottom: 72px; } .hero__plane { display: none; } .hero__copy { transform: none; opacity: 1; } .hero__headline .word > span { transform: none; animation: none; } .hero__flourish { opacity: 1; animation: none; } .hero__device--left, .hero__device--right { transform: rotateY(0) rotateZ(0); } .hero__satellite { opacity: 1; transform: none; position: relative; left: auto; right: auto; margin: 12px; } .status-badge__dot { animation: none; } .js .reveal { opacity: 1 !important; transform: none !important; } }