/* ===================================================================== Macoc Educational Services — Motion & Effects Layer Loaded globally after layout.css on all public pages. Principles: • Progressive enhancement — the "hidden" initial states apply ONLY when has the .js-anim class (added synchronously by a head snippet), so with JS off nothing is ever hidden. • Fully disabled under prefers-reduced-motion. • GPU-friendly (opacity + transform only). ===================================================================== */ /* ─── Timing tokens ─────────────────────────────────────────────────── */ :root { --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --reveal-dur: 0.7s; } /* ─── Keyframes ─────────────────────────────────────────────────────── */ @keyframes macoc-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes macoc-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes macoc-pop-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } } @keyframes macoc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes macoc-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes macoc-sheen { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(220%); } } @keyframes macoc-pulse-ring{ 0% { box-shadow: 0 0 0 0 rgba(201,151,42,0.45); } 70% { box-shadow: 0 0 0 14px rgba(201,151,42,0); } 100% { box-shadow: 0 0 0 0 rgba(201,151,42,0); } } /* ===================================================================== 1. SCROLL REVEAL Curated marketing elements start hidden (only under .js-anim) and fade up when they scroll into view (JS adds .in-view). Never targets form fields or booking-step internals. ===================================================================== */ html.js-anim :is( .section-label, .section-heading, .section-subheading, .offering-card, .service-card, .booking-card, .why-card, .value-card, .step-card, .stat-card, .team-card, .feature-card, .blog-card, .pillar, .reveal ) { opacity: 0; transform: translateY(28px); transition: opacity var(--reveal-dur) var(--ease-out-soft), transform var(--reveal-dur) var(--ease-out-soft); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } html.js-anim :is( .section-label, .section-heading, .section-subheading, .offering-card, .service-card, .booking-card, .why-card, .value-card, .step-card, .stat-card, .team-card, .feature-card, .blog-card, .pillar, .reveal ).in-view { opacity: 1; transform: none; } /* Failsafe: if reveal.js never runs, reveal everything after a beat. */ html.js-anim-failsafe :is( .section-label, .section-heading, .section-subheading, .offering-card, .service-card, .booking-card, .why-card, .value-card, .step-card, .stat-card, .team-card, .feature-card, .blog-card, .pillar, .reveal ) { opacity: 1 !important; transform: none !important; } /* ===================================================================== 2. HERO ENTRANCE (above the fold — CSS load animation, no JS needed) ===================================================================== */ html.js-anim .page-hero-inner > *, html.js-anim .hero-inner > * { animation: macoc-fade-up 0.8s var(--ease-out-soft) both; } html.js-anim .page-hero-inner > *:nth-child(1), html.js-anim .hero-inner > *:nth-child(1) { animation-delay: 0.05s; } html.js-anim .page-hero-inner > *:nth-child(2), html.js-anim .hero-inner > *:nth-child(2) { animation-delay: 0.16s; } html.js-anim .page-hero-inner > *:nth-child(3), html.js-anim .hero-inner > *:nth-child(3) { animation-delay: 0.27s; } html.js-anim .page-hero-inner > *:nth-child(4), html.js-anim .hero-inner > *:nth-child(4) { animation-delay: 0.38s; } /* Gentle living gradient on dark hero/callout panels */ .page-hero, .alt-provision-callout { background-size: 180% 180% !important; animation: macoc-gradient 18s ease infinite; } /* ===================================================================== 3. HEADER ON SCROLL ===================================================================== */ .site-header { transition: box-shadow 0.3s ease, height 0.3s ease, background 0.3s ease; will-change: box-shadow, height; } .site-header.scrolled { box-shadow: 0 6px 24px rgba(26, 26, 46, 0.12); background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); } .site-logo-img { transition: transform 0.35s var(--ease-spring); } .site-logo:hover .site-logo-img { transform: scale(1.08) rotate(-3deg); } /* ===================================================================== 4. NAV LINK — animated underline growing from centre ===================================================================== */ .site-nav a { position: relative; overflow: hidden; } .site-nav a::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 0; height: 2px; background: var(--color-primary); border-radius: 2px; transform: translateX(-50%); transition: width 0.28s var(--ease-out-soft); } .site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a[aria-current="page"]::after { width: 60%; } /* ===================================================================== 5. BUTTONS — sheen sweep + springier lift ===================================================================== */ .btn { position: relative; overflow: hidden; } .btn::before { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent); transform: translateX(-120%); pointer-events: none; } .btn:hover::before, .btn:focus-visible::before { animation: macoc-sheen 0.9s var(--ease-out-soft); } .btn-primary:hover, .btn-secondary:hover, .btn-outline:hover, .btn-outline-light:hover { transform: translateY(-3px) scale(1.015); box-shadow: var(--shadow-medium); } .btn:active { transform: translateY(-1px) scale(0.99); } /* Header "Book a Class" — quiet attention pulse on first load */ html.js-anim .header-cta .btn-primary { animation: macoc-pulse-ring 2.4s ease-out 1.2s 2; } /* ===================================================================== 6. CARDS & ICONS — richer hover ===================================================================== */ .offering-card, .service-card, .booking-card, .why-card, .blog-card { transition: transform 0.32s var(--ease-out-soft), box-shadow 0.32s var(--ease-out-soft), border-color 0.32s var(--ease-out-soft); } .offering-card:hover, .service-card:hover, .booking-card:hover, .blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); } /* Highlighted service card gets a soft gold glow on hover */ .service-card--highlight:hover { box-shadow: 0 14px 40px rgba(201, 151, 42, 0.22); } /* Icons bounce/scale when their card is hovered */ .service-icon, .offering-icon { transition: transform 0.4s var(--ease-spring); display: inline-block; } .service-card:hover .service-icon, .offering-card:hover .offering-icon { transform: scale(1.18) rotate(-4deg); } /* Tag / badge subtle grow */ .service-tag, .offering-age-tag, .booking-price { transition: transform 0.3s var(--ease-out-soft); } .service-card:hover .service-tag, .booking-card:hover .booking-price { transform: scale(1.06); } /* Detail bullet arrows nudge on card hover */ .service-details li::before { transition: transform 0.3s var(--ease-out-soft); } .service-card:hover .service-details li::before { transform: translateX(3px); } /* Enquiry contact tiles + child cards lift a touch */ .enquiry-contact, .child-select-inner, .date-checkbox-label { transition: transform 0.25s var(--ease-out-soft), border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } .enquiry-contact:hover, .child-select-card:hover .child-select-inner { transform: translateY(-3px); box-shadow: var(--shadow-subtle); } /* Alt-provision feature chips */ .alt-feature { transition: transform 0.28s var(--ease-out-soft), background 0.28s ease; } .alt-feature:hover { transform: translateY(-3px); background: rgba(255,255,255,0.14); } /* Section labels get a tiny leading accent bar that draws in */ .section-label { position: relative; } /* ===================================================================== 7. FOOTER + misc links ===================================================================== */ .footer-policy-links a, .footer a { transition: color 0.2s ease, letter-spacing 0.2s ease; } .footer-policy-links a:hover { letter-spacing: 0.02em; } /* ===================================================================== 8. REDUCED MOTION — hard off-switch ===================================================================== */ @media (prefers-reduced-motion: reduce) { html.js-anim :is( .section-label, .section-heading, .section-subheading, .offering-card, .service-card, .booking-card, .why-card, .value-card, .step-card, .stat-card, .team-card, .feature-card, .blog-card, .pillar, .reveal ) { opacity: 1 !important; transform: none !important; transition: none !important; } html.js-anim .page-hero-inner > *, html.js-anim .hero-inner > *, html.js-anim .header-cta .btn-primary { animation: none !important; } .page-hero, .alt-provision-callout { animation: none !important; } .btn::before { display: none !important; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }