/* ═══════════════════════════════════════════════ THE KRAFT — SHARED ANIMATION SYSTEM Linked last in so it overrides per-page [data-anim] rules at same specificity. ═══════════════════════════════════════════════ */ /* ── PAGE ENTER / EXIT TRANSITIONS ── */ /* Animate transform only — never body opacity, so the nav overlay (which lives inside body) is never made invisible mid-animation */ @keyframes pageEnter { from { transform: translateY(10px); } to { transform: none; } } body { animation: pageEnter 0.3s cubic-bezier(0.16,1,0.3,1) both; } body.page-exit { transform: translateY(-6px) !important; transition: transform 0.18s ease-in !important; pointer-events: none !important; } /* Fade the nav overlay in/out independently so it's always sharp */ #navOverlay, #navBackdrop { animation: none !important; } /* ── SCROLL-IN: DEFAULT (fade up + blur) ── */ [data-anim] { opacity: 0; transform: translateY(28px); filter: blur(5px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.75s cubic-bezier(0.16, 1, 0.3, 1); } [data-anim].in-view { opacity: 1; transform: none; filter: none; } /* ── SCROLL-IN: SLIDE FROM LEFT ── */ [data-anim="left"] { transform: translateX(-36px); filter: blur(4px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s cubic-bezier(0.16, 1, 0.3, 1); } [data-anim="left"].in-view { opacity: 1; transform: none; filter: none; } /* ── SCROLL-IN: SCALE UP ── */ [data-anim="scale"] { transform: scale(0.93) translateY(14px); filter: blur(4px); transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), filter 0.65s cubic-bezier(0.16, 1, 0.3, 1); } [data-anim="scale"].in-view { opacity: 1; transform: none; filter: none; } /* ── SCROLL-IN: CLIP REVEAL (page titles, large headings) ── */ [data-anim="clip"] { opacity: 1; /* keep visible — clip handles the hide */ filter: none; transform: none; clip-path: inset(0 0 105% 0); transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1); } [data-anim="clip"].in-view { clip-path: inset(0 0 0% 0); } /* ══════════════════════════════════════════════ BUTTON / CTA HOVER ANIMATIONS ══════════════════════════════════════════════ */ /* Filled blue buttons — white sweep on hover */ .nav-cta, .closing-cta, .nav-overlay-cta { position: relative; overflow: hidden; transition: opacity 0.2s, transform 0.12s cubic-bezier(0.16,1,0.3,1) !important; } .nav-cta::after, .closing-cta::after, .nav-overlay-cta::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.13); transform: translateX(-101%); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .nav-cta:hover::after, .closing-cta:hover::after, .nav-overlay-cta:hover::after { transform: translateX(0); } .nav-cta:active, .closing-cta:active { transform: scale(0.97) !important; } /* Outline/ghost buttons — glow border + soft fill on hover */ /* Targets the inline-styled outline buttons (Get a Quote, View Mawheriki) */ a[style*="border:1px solid var(--border)"], a[style*="border: 1px solid var(--border)"] { transition: color 0.25s, border-color 0.25s, background 0.35s, transform 0.12s cubic-bezier(0.16,1,0.3,1) !important; } a[style*="border:1px solid var(--border)"]:active, a[style*="border: 1px solid var(--border)"]:active { transform: scale(0.97) !important; } /* ══════════════════════════════════════════════ ACCORDION — SERVICE ROWS ══════════════════════════════════════════════ */ /* Sub-services start hidden, fade in when row opens */ .sub-service { opacity: 0; transform: translateY(18px); filter: blur(4px); transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .service-row.open .sub-service { opacity: 1; transform: none; filter: none; } /* Stagger each card */ .service-row.open .sub-service:nth-child(1) { transition-delay: 0.18s; } .service-row.open .sub-service:nth-child(2) { transition-delay: 0.28s; } .service-row.open .sub-service:nth-child(3) { transition-delay: 0.38s; } /* Fade out instantly when closing so re-open feels fresh */ .service-row:not(.open) .sub-service { transition-delay: 0s !important; transition-duration: 0.2s !important; } /* Service trigger — left accent bar on hover/open */ .service-trigger { position: relative; } .service-trigger::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent, #0052FF); transform: scaleY(0); transform-origin: bottom; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .service-trigger:hover::before, .service-row.open .service-trigger::before { transform: scaleY(1); } /* Trigger active press */ .service-trigger:active { background: rgba(255, 255, 255, 0.04) !important; } /* ══════════════════════════════════════════════ NAV LINKS — enhanced hover (all pages) ══════════════════════════════════════════════ */ .nav-links a { transition: color 0.2s, letter-spacing 0.3s cubic-bezier(0.16,1,0.3,1) !important; } .nav-links a:hover { letter-spacing: 0.16em !important; } /* ══════════════════════════════════════════════ TEAM / WORK / SCENARIO CARDS — press feedback ══════════════════════════════════════════════ */ .team-panel, .work-item, .scenario, .service-item { transition: transform 0.15s cubic-bezier(0.16,1,0.3,1), filter 0.15s !important; } .team-panel:active, .work-item:active, .scenario:active, .service-item:active { transform: scale(0.98) !important; filter: brightness(0.9) !important; } /* ══════════════════════════════════════════════ FOCUS RING (accessibility) ══════════════════════════════════════════════ */ a:focus-visible, button:focus-visible { outline: 1px solid rgba(0, 82, 255, 0.7); outline-offset: 3px; }