/* ══════════════════════════════════════════════════════════════════════ EnglishWithDan — Motion layer Opt-out micro-interactions: scroll-reveal, card hover lift, button press, focus ring, animated hero accent, gentle page fade-in. Load AFTER css/tokens.css (uses --ease-standard, --shadow-md, --brand…). Pair with js/shared/scroll-reveal.js for the [data-reveal] behaviour. EVERYTHING here collapses to nothing under prefers-reduced-motion, and [data-reveal] only hides once JS has added `.sr-ready` to , so content is never left invisible if the script fails to load. ══════════════════════════════════════════════════════════════════════ */ /* ── Scroll reveal ───────────────────────────────────────────────────── */ .sr-ready [data-reveal] { opacity: 0; transform: translateY(28px) scale(.985); transition: opacity .6s var(--ease-standard, cubic-bezier(.4,0,.2,1)), transform .6s var(--ease-standard, cubic-bezier(.4,0,.2,1)); will-change: opacity, transform; } .sr-ready [data-reveal].is-in { opacity: 1; transform: none; } .sr-ready [data-reveal="left"] { transform: translateX(-34px); } .sr-ready [data-reveal="right"] { transform: translateX(34px); } .sr-ready [data-reveal="zoom"] { transform: scale(.9); } .sr-ready [data-reveal="left"].is-in, .sr-ready [data-reveal="right"].is-in, .sr-ready [data-reveal="zoom"].is-in { transform: none; } /* ── Hover lift for cards ────────────────────────────────────────────── */ .mo-lift, .course-card, .wt-task-card, .why-card, .testi-card, .result-card, .ai-card, .cert-item, .todays-lesson-card, .mocktest-card, .weakness-card, #homework-card .hw-item { transition: transform .22s var(--ease-standard, cubic-bezier(.4,0,.2,1)), box-shadow .22s var(--ease-standard, cubic-bezier(.4,0,.2,1)); } .mo-lift:hover, .course-card:hover, .wt-task-card:hover, .why-card:hover, .testi-card:hover, .result-card:hover, .ai-card:hover, .todays-lesson-card:hover, .mocktest-card:hover, #homework-card .hw-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md, 0 6px 24px rgba(0,0,0,.1)); } /* ── Button press ───────────────────────────────────────────────────── */ button:not(:disabled):not([aria-disabled="true"]):active, .btn:not(:disabled):active, [role="button"]:active, a.btn:active { transform: translateY(1px) scale(.985); } /* ── Nav link underline grow ────────────────────────────────────────── */ .nav-links a, .navbar .nav-links a { position: relative; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-standard, cubic-bezier(.4,0,.2,1)); border-radius: 2px; } .nav-links a:hover::after { transform: scaleX(1); } /* ── Focus ring (keyboard only) ────────────────────────────────────── */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--brand, #e53935); outline-offset: 2px; border-radius: var(--radius-sm, 9px); } /* ── Animated hero accent (index.css already gradient-clips .accent — this only adds the slow pan; higher specificity so it wins the tie) ── */ .hero h1 span.accent { background-image: linear-gradient( 100deg, var(--brand, #e53935) 0%, var(--brand2, #ff6b6b) 35%, var(--blue, #3d8bff) 65%, var(--brand, #e53935) 100% ); background-size: 220% 100%; animation: mo-accent-pan 7s linear infinite; } @keyframes mo-accent-pan { to { background-position: -220% 0; } } /* ── Idle float for the hero badge card ────────────────────────────── */ .hero-float-card { animation: mo-float 5s ease-in-out infinite; } /* ── Gentle page fade-in ──────────────────────────────────────────── */ @keyframes mo-page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .mo-page-in > main, body.mo-page-in { animation: mo-page-in .45s var(--ease-standard, cubic-bezier(.4,0,.2,1)) both; } /* ── Soft float keyframe (opt-in via .mo-float) ────────────────────── */ @keyframes mo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .mo-float { animation: mo-float 5s ease-in-out infinite; } /* ── Respect the user's motion preference ─────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .sr-ready [data-reveal] { opacity: 1 !important; transform: none !important; } .nav-links a::after { display: none; } .hero h1 span.accent { animation: none; background-position: 0 0; } .mo-lift:hover, .course-card:hover, .wt-task-card:hover, .why-card:hover, .testi-card:hover, .result-card:hover, .ai-card:hover, .todays-lesson-card:hover, .mocktest-card:hover, .weakness-card:hover, #homework-card .hw-item:hover { transform: none; } }