, not descendants, so they stay immediately present (no "catching up" after load) while the page content gets a graceful entrance. Also deliberately opacity-only, no transform: transforming an ancestor (even briefly, even via animation) makes it the containing block for every position:fixed descendant, which would knock those fixed elements off their intended viewport position for the duration of the animation. Pure CSS keyframe, not JS-driven: it runs and completes on its own the instant the stylesheet loads, so a script error elsewhere can never leave the page stuck invisible. */ @keyframes page-fade-in{ from{ opacity:0; } to{ opacity:1; } } #main-content{ animation:page-fade-in .5s var(--ease) both; } @media (prefers-reduced-motion: reduce){ #main-content{ animation:none; } } /* ---------- Scroll reveal (used site-wide via .reveal) ---------- */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-reveal), transform .8s var(--ease-reveal); } .reveal.is-visible{ opacity:1; transform:none; } /* ---------- Card stagger reveal ---------- Each card is observed individually (see animations.js), so it reveals exactly when IT scrolls into view — not gated behind a parent container's timer, which is what previously let a section fall out of sync with fast scrolling. A small fixed nth-child delay adds a light stagger for cards that enter the viewport together (e.g. a row of 3), without the whole group waiting on the slowest one. Card-grid containers keep their existing .reveal markup/class for backward compatibility, but their own opacity is neutralized here so it can't compound with each card's independent reveal. */ .pillars.reveal, .why-grid.reveal, .quote-row.reveal, .process.reveal, .compare.reveal, .service-grid.reveal, .stat-strip.reveal{ opacity:1; transform:none; transition:none; } .pillar, .why-item, .quote-card, .step, .compare__col, .service-chip, .stat-card{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-reveal), transform .7s var(--ease-reveal); } .pillar.is-visible, .why-item.is-visible, .quote-card.is-visible, .step.is-visible, .compare__col.is-visible, .service-chip.is-visible, .stat-card.is-visible{ opacity:1; transform:none; } .pillar:nth-child(2), .why-item:nth-child(2), .quote-card:nth-child(2), .step:nth-child(2), .compare__col:nth-child(2), .service-chip:nth-child(2), .stat-card:nth-child(2){ transition-delay:70ms; } .pillar:nth-child(3), .why-item:nth-child(3), .quote-card:nth-child(3), .step:nth-child(3), .compare__col:nth-child(3), .service-chip:nth-child(3), .stat-card:nth-child(3){ transition-delay:140ms; } .pillar:nth-child(4), .why-item:nth-child(4), .quote-card:nth-child(4), .step:nth-child(4), .compare__col:nth-child(4), .service-chip:nth-child(4), .stat-card:nth-child(4){ transition-delay:210ms; } .pillar:nth-child(5), .why-item:nth-child(5), .quote-card:nth-child(5), .step:nth-child(5), .compare__col:nth-child(5), .service-chip:nth-child(5), .stat-card:nth-child(5){ transition-delay:280ms; } .pillar:nth-child(6), .why-item:nth-child(6), .quote-card:nth-child(6), .step:nth-child(6), .compare__col:nth-child(6), .service-chip:nth-child(6), .stat-card:nth-child(6){ transition-delay:350ms; } /* ---------- Draw-on-load line art (e.g. the hero vine) ---------- */ .draw-on-load path{ stroke-dasharray:400; stroke-dashoffset:400; } .draw-on-load{ opacity:0; } .draw-on-load.is-drawn{ opacity:1; } .draw-on-load.is-drawn path{ transition:stroke-dashoffset 1.8s var(--ease) .3s; stroke-dashoffset:0; } .draw-on-load.is-drawn .leaf{ transition:opacity .6s var(--ease) 1.4s, transform .6s var(--ease) 1.4s; opacity:1; transform:scale(1); } .draw-on-load .leaf{ opacity:0; transform:scale(.4); transform-origin:center; } /* ---------- Marquee scroll (industries / tag rows) ---------- */ .marquee__track{ animation:scroll-left 42s linear infinite; } .marquee.is-paused .marquee__track{ animation-play-state:paused; } @media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; overflow-x:auto; } } @keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* ---------- Card lift (shared hover language: pillar / service-chip / why-item / quote-card) ---------- */ .pillar, .service-chip, .why-item, .quote-card, .step{ transition: background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .pillar:hover, .service-chip:hover, .why-item:hover, .quote-card:hover{ transform: translateY(-5px); box-shadow: 0 20px 40px rgba(21,21,15,0.08), inset 0 0 0 1px rgba(92,143,34,0.22); position: relative; z-index: 2; } /* ---------- Image placeholder shimmer (premium "loading" feel while real photos are pending) ---------- */ .media-placeholder{ position:absolute; inset:0; overflow:hidden; } .media-placeholder::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%); background-size:200% 100%; animation: shimmer-sweep 3.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce){ .media-placeholder::after{ animation:none; } } @keyframes shimmer-sweep{ 0%{ background-position:160% 0; } 100%{ background-position:-60% 0; } } /* ---------- Text reveal (staggered word-in for hero headlines) ---------- */ .reveal-text{ overflow:hidden; } .reveal-text .word{ display:inline-block; opacity:0; transform:translateY(100%); transition:opacity .6s var(--ease), transform .6s var(--ease); } .reveal-text.is-revealed .word{ opacity:1; transform:translateY(0); } /* ---------- Number counter (stat-card values) ---------- */ .stat-card__num.is-counting{ font-variant-numeric:tabular-nums; } /* ---------- Timeline (About page milestones) ---------- */ .timeline{ position:relative; max-width:760px; } .timeline::before{ content:''; position:absolute; left:9px; top:6px; bottom:6px; width:1px; background:var(--paper-line); } .timeline__fill{ position:absolute; left:9px; top:6px; width:1px; height:0; background:var(--green); transition:height 1s var(--ease); } .timeline-item{ position:relative; padding:0 0 48px 44px; } .timeline-item__frame{ width:64px; height:64px; border-radius:4px; margin-bottom:14px; } .timeline-item__frame .media-placeholder__label{ font-size:0.5rem; } .timeline-item__frame .media-placeholder svg{ width:16px; height:16px; } .timeline-item:last-child{ padding-bottom:0; } .timeline-item__dot{ position:absolute; left:0; top:4px; width:19px; height:19px; border-radius:50%; background:var(--paper); border:2px solid var(--paper-line); transition:border-color .5s var(--ease), background .5s var(--ease); } .timeline-item.is-visible .timeline-item__dot{ border-color:var(--green); background:var(--green-pale); } .timeline-item__year{ font-family:var(--font-label); font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--green-deep); margin-bottom:6px; display:block; } .timeline-item h3{ margin-bottom:8px; font-size:1.15rem; } .timeline-item p{ color:var(--graphite); font-size:0.95rem; max-width:56ch; } /* ---------- Button micro-interaction (press feedback + shine) ---------- */ .btn{ transform:translateY(0); position:relative; overflow:hidden; } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0) scale(0.97); } .btn::before{ content:''; position:absolute; top:0; left:-75%; width:50%; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,0.22), transparent); transform:skewX(-18deg); transition:left .65s var(--ease); pointer-events:none; } .btn:hover::before{ left:125%; } /* ---------- Magnetic buttons (shared, applied via animations.js) ---------- */ .btn{ will-change:transform; } /* ---------- Image hover (real CMS photos only — .media-frame already has overflow:hidden, so the scaled image never spills its frame) ---------- */ .media-real{ transition:transform .5s var(--ease); } .media-frame:hover .media-real{ transform:scale(1.04); } /* ---------- Scroll progress (thin bar, tracks scroll % — see animations.js) ---------- */ .scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:61; background:var(--green); transform-origin:left; transform:scaleX(0); transition:transform .1s linear; pointer-events:none; } @media (prefers-reduced-motion: reduce){ .scroll-progress{ transition:none; } } /* ---------- Soft ambient glow — one instance only (floating CTA), so it never compounds across multiple simultaneously-visible buttons ---------- */ @keyframes ambient-glow{ 0%, 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); } 50%{ box-shadow:0 0 18px 1px rgba(255,255,255,0.22); } } .mobile-cta-bar__book{ animation:ambient-glow 5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce){ .mobile-cta-bar__book{ animation:none; } } /* ---------- Tilt cards (subtle 3D hover, applied to pillar/service-chip) ---------- */ .pillar, .service-chip{ transform-style:preserve-3d; } /* ---------- Smooth accordion (JS animates height on the

itself — no markup change needed across the 33+ existing .faq-item instances) ---------- */ .faq-item.is-animating{ overflow:hidden; transition:height .35s var(--ease); } /* ---------- Particle field (canvas-based atmosphere, used sparingly) ---------- */ .particle-field{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; } /* ---------- Glass panel (used on book-demo wizard) ---------- */ .glass-panel{ background:rgba(247,246,241,0.72); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ .glass-panel{ background:var(--paper); } } .btn .spinner{ width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,0.35); border-top-color:currentColor; animation:spin 0.7s linear infinite; display:none; } .btn.is-loading .spinner{ display:inline-block; } .btn.is-loading .btn-arrow, .btn.is-loading .btn-label{ opacity:0.5; } @keyframes spin{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .btn .spinner{ animation:none; } }