/* Master of Mental Maths — motion layer, shared by Designs 1–5. --------------------------------------------------------------------------- The five directions were drawn as static pages: Designs 1–4 are canvas exports with every rule inline, Design 5 is a hand-built responsive site. Rather than edit a thousand inline styles, anim.js tags elements with [data-rv] (reveal on scroll) and [data-mx] (hover behaviour) and this sheet supplies the motion. Everything here is opacity / transform / shadow only — nothing moves a box in layout, which matters because Designs 1–4 are fixed 1440px boards with fixed section heights that cannot reflow. Nothing applies until anim.js puts .dcx-motion on , so a page with JavaScript off is the plain design, fully visible. */ /* ── scroll reveal ─────────────────────────────────────────────────────── */ html.dcx-motion [data-rv]{ opacity:0; transition:opacity .62s cubic-bezier(.22,.7,.3,1) var(--rv-d,0ms), transform .62s cubic-bezier(.22,.7,.3,1) var(--rv-d,0ms); } html.dcx-motion [data-rv="up"] { transform:translate3d(0,24px,0) } html.dcx-motion [data-rv="left"] { transform:translate3d(-28px,0,0) } html.dcx-motion [data-rv="right"] { transform:translate3d(28px,0,0) } html.dcx-motion [data-rv="zoom"] { transform:scale(.955) } html.dcx-motion [data-rv="pop"] { transform:scale(.8) } /* springy overshoot for the small playful things */ html.dcx-motion [data-rv="pop"], html.dcx-motion [data-rv="pop"].is-in{ transition-timing-function:cubic-bezier(.34,1.56,.64,1); transition-duration:.55s; } html.dcx-motion [data-rv].is-in{ opacity:1; transform:none } /* ── buttons ───────────────────────────────────────────────────────────── */ /* lift, deepen, and sweep a highlight across — the one interaction a parent or a child is most likely to try before they read anything. */ html.dcx-motion [data-mx~="btn"]{ position:relative; overflow:hidden; isolation:isolate; transition:transform .24s cubic-bezier(.22,.7,.3,1), box-shadow .24s ease-out, filter .24s ease-out, background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out; } html.dcx-motion [data-mx~="btn"]::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%); transform:translateX(-130%); transition:transform .62s cubic-bezier(.3,.7,.4,1); } /* a white sheen is invisible on a pale button, so pale ones get a dark one */ html.dcx-motion [data-mx~="light"]::after{ background:linear-gradient(105deg,transparent 38%,rgba(20,32,43,.10) 50%,transparent 62%); } html.dcx-motion [data-mx~="btn"]:hover{ transform:translateY(-3px); box-shadow:0 12px 26px -10px rgba(16,24,40,.45); filter:saturate(1.06); } html.dcx-motion [data-mx~="btn"]:hover::after{ transform:translateX(130%) } html.dcx-motion [data-mx~="btn"]:active{ transform:translateY(-1px) scale(.984); box-shadow:0 5px 12px -8px rgba(16,24,40,.5); transition-duration:.08s; } html.dcx-motion [data-mx~="btn"]:focus-visible{ outline:3px solid rgba(11,99,206,.65); outline-offset:3px; } /* ── cards ─────────────────────────────────────────────────────────────── */ html.dcx-motion [data-mx~="card"]{ transition:transform .3s cubic-bezier(.22,.7,.3,1), box-shadow .3s ease-out, border-color .3s ease-out; } html.dcx-motion [data-mx~="card"]:hover{ transform:translateY(-6px); box-shadow:0 24px 44px -26px rgba(16,24,40,.5); } /* ── photographs ───────────────────────────────────────────────────────── */ /* No scaling: Designs 1–4 do not clip their images, so a zoom would spill past the frame. Light and depth instead. */ html.dcx-motion [data-mx~="img"]{ transition:filter .35s ease-out, box-shadow .35s ease-out; } html.dcx-motion [data-mx~="img"]:hover{ filter:saturate(1.1) contrast(1.02) brightness(1.02); box-shadow:0 22px 44px -28px rgba(16,24,40,.55); } /* ── header links ──────────────────────────────────────────────────────── */ html.dcx-motion [data-mx~="link"]{ position:relative } html.dcx-motion [data-mx~="link"]::after{ content:""; position:absolute; left:0; right:0; bottom:var(--mx-ul,6px); height:2px; background:currentColor; opacity:.9; transform:scaleX(0); transform-origin:left center; transition:transform .28s cubic-bezier(.22,.7,.3,1); pointer-events:none; } html.dcx-motion [data-mx~="link"]:hover::after, html.dcx-motion [data-mx~="link"]:focus-visible::after{ transform:scaleX(1) } /* ── the logo ──────────────────────────────────────────────────────────── */ html.dcx-motion [data-mx~="logo"] img, html.dcx-motion [data-mx~="logo"] svg{ transition:transform .42s cubic-bezier(.34,1.56,.64,1); } html.dcx-motion [data-mx~="logo"]:hover img, html.dcx-motion [data-mx~="logo"]:hover svg{ transform:rotate(-5deg) scale(1.06) } /* ── bead rails ────────────────────────────────────────────────────────── */ /* The beads count themselves onto the rod, left to right. */ html.dcx-motion [data-mx~="beads"] > i{ opacity:0; transform:scale(.3); transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s ease-out; } html.dcx-motion [data-mx~="beads"].is-in > i{ opacity:1; transform:none } html.dcx-motion [data-mx~="beads"].is-in > i:nth-child(1){ transition-delay:.05s } html.dcx-motion [data-mx~="beads"].is-in > i:nth-child(2){ transition-delay:.14s } html.dcx-motion [data-mx~="beads"].is-in > i:nth-child(3){ transition-delay:.23s } html.dcx-motion [data-mx~="beads"].is-in > i:nth-child(4){ transition-delay:.32s } html.dcx-motion [data-mx~="beads"].is-in > i:nth-child(5){ transition-delay:.41s } html.dcx-motion [data-mx~="beads"]:hover > i{ transform:translateY(-3px); transition-delay:0s, 0s; } html.dcx-motion [data-mx~="beads"]:hover > i:nth-child(2){ transition-delay:.05s } html.dcx-motion [data-mx~="beads"]:hover > i:nth-child(3){ transition-delay:.1s } html.dcx-motion [data-mx~="beads"]:hover > i:nth-child(4){ transition-delay:.15s } /* ── counting numbers ──────────────────────────────────────────────────── */ /* Tabular figures so the box does not twitch while the value climbs. */ html.dcx-motion [data-mx~="num"]{ font-variant-numeric:tabular-nums } /* ── anyone who has asked for less movement gets none of it ────────────── */ @media (prefers-reduced-motion: reduce){ html.dcx-motion [data-rv], html.dcx-motion [data-mx~="beads"] > i{ opacity:1 !important; transform:none !important; transition:none !important; } html.dcx-motion [data-mx]{ transition:none !important } html.dcx-motion [data-mx~="btn"]::after, html.dcx-motion [data-mx~="link"]::after{ display:none } html.dcx-motion [data-mx~="btn"]:hover, html.dcx-motion [data-mx~="card"]:hover{ transform:none } } /* ── Design 5 only ─────────────────────────────────────────────────────── */ /* It is the one direction with real class names, so it can carry real detail. These selectors match nothing in Designs 1–4. */ html.dcx-motion .card__media img{ transition:transform .55s cubic-bezier(.22,.7,.3,1), filter .35s ease-out; } html.dcx-motion .card:hover .card__media img{ transform:scale(1.05) } /* site.css already zooms these; keep its transition from being overridden */ html.dcx-motion .gallery img{ transition:transform .4s ease-out, filter .35s ease-out; } html.dcx-motion .level{ transition:transform .26s cubic-bezier(.22,.7,.3,1), box-shadow .26s ease-out, border-left-color .26s ease-out; } html.dcx-motion .level:hover{ transform:translateY(-4px); box-shadow:0 18px 32px -22px rgba(16,24,40,.5); } html.dcx-motion .level__n{ transition:transform .3s cubic-bezier(.34,1.56,.64,1) } html.dcx-motion .level:hover .level__n{ transform:scale(1.12) } html.dcx-motion .skills li{ transition:transform .28s cubic-bezier(.22,.7,.3,1) } html.dcx-motion .skills li:hover{ transform:translateY(-5px) } html.dcx-motion .skills__n{ transition:color .25s ease-out, letter-spacing .25s ease-out } html.dcx-motion .skills li:hover .skills__n{ color:#fff; letter-spacing:.18em } html.dcx-motion .step__bead{ transition:transform .38s cubic-bezier(.34,1.56,.64,1), background-color .25s ease-out, color .25s ease-out; } html.dcx-motion .step:hover .step__bead{ transform:scale(1.09) rotate(-7deg) } html.dcx-motion .trustrail__item{ transition:transform .26s cubic-bezier(.22,.7,.3,1) } html.dcx-motion .trustrail__item:hover{ transform:translateY(-3px) } html.dcx-motion .audience{ transition-property:transform,box-shadow,border-top-color } html.dcx-motion .audience:hover{ border-top-width:5px }