/* ============================================================ Mwasel Experience Layer — shared motion & polish for all pages Loaded after brand.css. Pure CSS (no Tailwind dependency). The `mw-anim` class is added to by a tiny inline bootstrap in each page ONLY when JS runs and the user does not prefer reduced motion. Everything gated on .mw-anim is therefore progressive enhancement; without JS the site is fully visible and static. ============================================================ */ /* ---------- global feel ---------- */ /* the page never pans sideways: decorative circles and side-reveal elements may momentarily extend past the edge, so clip at the root (clip > hidden: it cannot become a scroll container; hidden is the fallback for older browsers) */ html, body { overflow-x: hidden; overflow-x: clip; } ::selection { background: #4ED9A4; color: #1D1913; } :focus-visible { outline: 3px solid #0C7C51; outline-offset: 2px; border-radius: 6px; } /* paper grain — fixed, non-scrolling, pointer-transparent */ html.mw-anim body::after { content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* Hide the page until the experience script takes over, then the veil covers the reveal. A bootstrap timeout removes .mw-anim if the script never arrives, so content can never be lost. */ html.mw-anim:not(.mw-ready) body { opacity: 0; } /* ---------- page veil (loader + page transitions) ---------- */ #mw-veil { position: fixed; inset: 0; z-index: 200; background: #FBF9F5; display: flex; align-items: center; justify-content: center; pointer-events: none; } #mw-veil.mw-veil-active { pointer-events: auto; } #mw-veil .mw-veil-mark { position: relative; width: 120px; height: 120px; } #mw-veil .mw-veil-mark img { position: absolute; inset: 26px; width: 68px; height: 68px; object-fit: contain; } #mw-veil svg { position: absolute; inset: 0; overflow: visible; } /* ---------- header ---------- */ header.mw-scrolled { box-shadow: 0 10px 34px -18px rgba(29, 25, 19, 0.28); } header .mw-logo-tip { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } header a:hover .mw-logo-tip { transform: rotate(-6deg) scale(1.04); } /* nav underline draws in from the right (RTL reading direction) */ [data-mwasel-nav] a { position: relative; } [data-mwasel-nav] a::after { content: ""; position: absolute; right: 0; bottom: -6px; width: 100%; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.85; transform: scaleX(0); transform-origin: right center; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } [data-mwasel-nav] a:hover::after { transform: scaleX(1); } /* ---------- buttons & touchables ---------- */ .mw-press { transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1); } .mw-press:active { transform: scale(0.96); } /* soft light sweep across primary CTAs */ .mw-sheen { position: relative; overflow: hidden; } .mw-sheen::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; right: -60%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-18deg); transition: right 0.7s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .mw-sheen:hover::before { right: 120%; } [data-magnetic] { will-change: transform; } /* ---------- cards ---------- */ .mw-lift { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .mw-lift:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -24px rgba(29, 25, 19, 0.22); } [data-tilt] { transform-style: preserve-3d; will-change: transform; } .mw-tilt-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.45), transparent 60%); } [data-tilt]:hover .mw-tilt-shine { opacity: 1; } /* ---------- marquee ---------- */ .mw-marquee { overflow: hidden; white-space: nowrap; } .mw-marquee-track { display: inline-flex; align-items: center; width: max-content; will-change: transform; } .mw-marquee-track > * { flex-shrink: 0; } /* ---------- the دايرة, animated ---------- */ /* icon-container mint rings do a slow full spin on hover (index uses .open-circle.flex, cram-pack draws the ring on ::before) */ html.mw-anim .open-circle.flex { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } html.mw-anim .open-circle.flex:hover { transform: rotate(-375deg); } html.mw-anim .open-circle::before { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } html.mw-anim .open-circle:hover::before { transform: rotate(345deg); } /* teacher portrait ring nudges around the photo on hover */ html.mw-anim .daira-frame::after { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } html.mw-anim .daira-frame:hover::after { transform: rotate(-115deg); } html.mw-anim .daira-frame > img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } html.mw-anim .daira-frame:hover > img { transform: scale(1.05); } /* ---------- question bank micro-feedback ---------- */ @keyframes mw-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(4px); } 50% { transform: translateX(-4px); } 75% { transform: translateX(2px); } } html.mw-anim .qopt { transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; } html.mw-anim .qopt:active { transform: scale(0.985); } /* a correct answer changes color only: on phones any movement here reads as a "wrong!" shake, so motion is reserved for actual wrong answers */ html.mw-anim .qopt.wrong { animation: mw-shake 0.4s ease; } html.mw-anim .chip { transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease; } html.mw-anim .chip:active { transform: scale(0.94); } /* ---------- floating action button pulse ---------- */ @keyframes mw-fab-ring { 0% { box-shadow: 0 0 0 0 rgba(12, 124, 81, 0.35); } 100% { box-shadow: 0 0 0 16px rgba(12, 124, 81, 0); } } html.mw-anim .mw-fab { animation: mw-fab-ring 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite; } /* ---------- graph-paper texture for the hero chart card ---------- */ .mw-graph { background-image: linear-gradient(rgba(29, 25, 19, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 25, 19, 0.045) 1px, transparent 1px); background-size: 28px 28px; } /* ---------- reduced motion: kill everything in this layer ---------- */ @media (prefers-reduced-motion: reduce) { html.mw-anim body { opacity: 1 !important; } #mw-veil { display: none !important; } .mw-sheen::before { display: none; } html.mw-anim .mw-fab, html.mw-anim .qopt.correct, html.mw-anim .qopt.wrong { animation: none; } .mw-lift, .mw-press, html.mw-anim .open-circle.flex, html.mw-anim .open-circle::before, html.mw-anim .daira-frame::after, html.mw-anim .daira-frame > img, [data-mwasel-nav] a::after { transition: none; } }