/* ============================================================ TWEAK STATES — driven by data-* attrs / vars on All default values keep the shipped look. ============================================================ */ /* ---------- Reveal style ---------- */ [data-reveal="aperture"] .reveal { transform: scale(1.06); } [data-reveal="aperture"] .reveal.in { transform: none; } [data-reveal="instant"] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } /* ---------- Marquee speed (multiplier var; 1 = default) ---------- */ .marquee__row.r1 { animation-duration: calc(46s / var(--marq-speed, 1)); } .marquee__row.r2 { animation-duration: calc(56s / var(--marq-speed, 1)); } /* ---------- Marquee fill ---------- */ [data-marq-fill="solid"] .marquee__row.r2 .marquee__item { color: var(--fg); -webkit-text-stroke: 0; } [data-marq-fill="outline"] .marquee__row.r1 .marquee__item { color: transparent; -webkit-text-stroke: 1px var(--gris-signal); } [data-marq-fill="outline"] .marquee__row.r1 .marquee__dot { color: var(--gris-signal); -webkit-text-stroke: 0; } /* ---------- Film grain overlay ---------- */ .fx-grain { position: fixed; inset: -120% ; z-index: 70; pointer-events: none; opacity: 0; 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%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; mix-blend-mode: overlay; transition: opacity var(--dur-slow) var(--ease-out-cinema); } [data-grain="fine"] .fx-grain { opacity: 0.07; } [data-grain="heavy"] .fx-grain { opacity: 0.16; background-size: 240px 240px; } [data-grain="fine"] .fx-grain, [data-grain="heavy"] .fx-grain { animation: grainshift 0.6s steps(3) infinite; } @keyframes grainshift { 0% { transform: translate(0,0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -2%); } 100% { transform: translate(0,0); } } /* ---------- Page vignette ---------- */ .fx-vignette { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 120% 90% at 50% 50%, transparent 52%, rgba(0,0,0,0.9) 100%); transition: opacity var(--dur-slow) var(--ease-out-cinema); } [data-vignette="soft"] .fx-vignette { opacity: 0.45; } [data-vignette="deep"] .fx-vignette { opacity: 0.85; } /* ---------- Hero backdrop: showreel ---------- */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity var(--dur-cinema) var(--ease-out-cinema); pointer-events: none; filter: saturate(0.9) contrast(1.04); } .hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.7) 100%); transition: opacity var(--dur-cinema) var(--ease-out-cinema); } [data-hero="showreel"] .hero__video, [data-hero="showreel"] .hero__veil { opacity: 1; } [data-hero="showreel"] .hero__glow { opacity: 0.4; } [data-hero="black"] .hero__glow { opacity: 0; } /* If the environment can't stream the showreel, keep the glow hero intact */ [data-hero-failed] .hero__video, [data-hero-failed] .hero__veil { opacity: 0 !important; } [data-hero-failed][data-hero="showreel"] .hero__glow { opacity: 1; } /* ---------- Display weight ---------- */ [data-display="black"] h1, [data-display="black"] h2, [data-display="black"] h3, [data-display="black"] .chapter__index, [data-display="black"] .tier__price { font-weight: var(--fw-black); } /* ---------- Serif editorial moments off ---------- */ [data-serif="off"] .statement__editorial, [data-serif="off"] .statement__editorial em, [data-serif="off"] .close-q__q, [data-serif="off"] .chapter__quote, [data-serif="off"] .footer__tag, [data-serif="off"] .chapter--intro h2 em, [data-serif="off"] .services__head h2 em { font-family: var(--font-sans); font-style: normal; font-weight: var(--fw-medium); } [data-serif="off"] .statement__editorial, [data-serif="off"] .close-q__q { letter-spacing: -0.02em; } /* ---------- Headline case ---------- */ [data-case="upper"] .work__head h2, [data-case="upper"] .services__head h2, [data-case="upper"] .chapter--intro h2, [data-case="upper"] .chapter--client h3, [data-case="upper"] .chapter--join h2 { text-transform: uppercase; letter-spacing: -0.01em; } /* ---------- Portfolio hover style ---------- */ [data-grid-hover="gray"] .tile__media, [data-grid-hover="gray"] .ph { filter: grayscale(1); transition: filter var(--dur-slow) var(--ease-out-cinema), transform var(--dur-slow) var(--ease-out-cinema); } [data-grid-hover="gray"] .tile:hover .tile__media, [data-grid-hover="gray"] .tile:hover .ph { filter: grayscale(0); } [data-grid-hover="tilt"] .tile { transition: transform var(--dur-slow) var(--ease-out-cinema), box-shadow var(--dur-slow) var(--ease-out-cinema); transform-style: preserve-3d; } [data-grid-hover="tilt"] .tile:hover { transform: perspective(900px) rotateX(4deg) rotateY(-4deg) scale(1.01); } [data-grid-hover="tilt"] .tile:hover .tile__media { transform: none; } /* ---------- Portfolio reveal style ---------- */ [data-grid-reveal="always"] .tile__name { opacity: 1; transform: none; } [data-grid-reveal="always"] .tile__veil { opacity: 0.5; } [data-grid-reveal="cover"] .tile__veil { background: rgba(0,0,0,0.6); } [data-grid-reveal="cover"] .tile:hover .tile__veil { opacity: 1; } [data-grid-reveal="cover"] .tile__name { left: 0; right: 0; bottom: 50%; transform: translateY(50%); justify-content: center; text-align: center; flex-direction: column; align-items: center; gap: 6px; } [data-grid-reveal="cover"] .tile:hover .tile__name { transform: translateY(50%); } /* ---------- Density ---------- */ [data-density="tight"] .pad-y { padding-block: clamp(56px, 7vw, 96px); } [data-density="tight"] .statement { min-height: 56svh; } /* ---------- Corner language ---------- */ [data-corners="sharp"] { --radius-lg: 6px; --radius-xl: 8px; } [data-corners="square"] { --radius-lg: 0px; --radius-xl: 0px; } [data-corners="square"] .tier, [data-corners="square"] .ph, [data-corners="square"] .tile, [data-corners="sharp"] .tier, [data-corners="sharp"] .ph, [data-corners="sharp"] .tile { border-radius: var(--radius-lg); } /* ---------- Glow temperature ---------- */ [data-glow="teal"] .btn--mono { box-shadow: var(--glow-teal-soft); } [data-glow="teal"] .btn--mono:hover { box-shadow: var(--glow-teal-strong); } [data-glow="teal"] .tier:hover { box-shadow: var(--shadow-modal), var(--glow-teal-strong); } [data-glow="teal"] .tile:hover { box-shadow: var(--glow-teal-strong); } /* ---------- Floating CTA ---------- */ .float-cta { position: fixed; right: clamp(16px, 3vw, 34px); bottom: clamp(16px, 3vw, 34px); z-index: 75; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: var(--radius-full); background: var(--surface-frosted-bg); -webkit-backdrop-filter: var(--surface-frosted-blur); backdrop-filter: var(--surface-frosted-blur); border: 1px solid rgba(255,255,255,0.16); color: var(--fg); font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.16em; text-transform: uppercase; box-shadow: var(--glow-white-soft), var(--shadow-card); opacity: 0; transform: translateY(20px) scale(0.96); pointer-events: none; transition: opacity var(--dur-base) var(--ease-out-cinema), transform var(--dur-base) var(--ease-out-cinema), border-color var(--dur-base) var(--ease-out-cinema); } .float-cta .ico { width: 16px; height: 16px; } [data-floatcta="on"] .float-cta.is-visible { opacity: 1; transform: none; pointer-events: auto; } .float-cta:hover { border-color: rgba(255,255,255,0.34); box-shadow: var(--glow-white-strong), var(--shadow-card); } @media (max-width: 600px) { .float-cta { display: none; } } /* ---------- Ambient drift target ---------- */ [data-drift="on"] .hero__glow, [data-drift="on"] .hero__aperture { transition: transform 600ms var(--ease-out-cinema); } /* ============================================================ NEW SET — CTA style · Section dividers · Base color · Progress ============================================================ */ /* ---------- Hero CTA style ---------- */ [data-cta="single"] .hero__ctas .btn--ghost { display: none; } [data-cta="link"] .hero__ctas .btn--ghost { height: auto; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; color: var(--fg-soft); position: relative; gap: 12px; } [data-cta="link"] .hero__ctas .btn--ghost:hover { transform: none; color: var(--fg); } [data-cta="link"] .hero__ctas .btn--ghost::after { content: ""; position: absolute; left: 28px; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out-cinema); } [data-cta="link"] .hero__ctas .btn--ghost:hover::after { transform: scaleX(1); } /* ---------- Section dividers ---------- */ .divider { display: none; align-items: center; gap: clamp(20px, 3vw, 40px); width: min(1320px, 100% - 11vw); margin-inline: auto; padding-block: clamp(8px, 2vw, 28px); } .divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gris-signal) 30%, var(--gris-signal) 70%, transparent); } .divider__mark { display: none; place-items: center; color: var(--gris-voix); } .divider__mark svg { width: 22px; height: 22px; } [data-dividers="filet"] .divider { display: flex; } [data-dividers="filet"] .divider::before, [data-dividers="filet"] .divider::after { background: var(--border-soft); } [data-dividers="shutter"] .divider { display: flex; } [data-dividers="shutter"] .divider__mark { display: grid; } [data-dividers="none"] .divider { display: none; } /* ---------- Base color ---------- */ [data-base="charbon"] { --noir-absolu: #141414; --noir-profond: #181818; --gris-scene: #202020; } /* ---------- Scroll progress bar ---------- */ .scrollprog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90; background: transparent; opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-out-cinema); } [data-progress="on"] .scrollprog { opacity: 1; } .scrollprog__fill { height: 100%; width: 0; background: var(--blanc-pur); box-shadow: 0 0 12px rgba(255,255,255,0.55); transition: width 80ms linear; } [data-progress="on"][data-accent-bar="blue"] .scrollprog__fill { background: var(--accent); box-shadow: 0 0 12px rgba(20,168,212,0.6); } /* ============================================================ CTA BUTTON STYLES — fill · glow · icon · size Applies to primary CTAs (.btn--mono). Default = shipped look. ============================================================ */ /* ---------- Fill ---------- */ [data-cta-fill="ghost"] .btn--mono { background: var(--surface-frosted-bg); -webkit-backdrop-filter: var(--surface-frosted-blur); backdrop-filter: var(--surface-frosted-blur); color: var(--fg); border-color: rgba(255,255,255,0.14); box-shadow: 0 0 24px rgba(255,255,255,0.05); } [data-cta-fill="ghost"] .btn--mono:hover { border-color: rgba(255,255,255,0.3); box-shadow: 0 0 42px rgba(255,255,255,0.14); } [data-cta-fill="ghost"] .btn--mono .ico { color: var(--fg); } [data-cta-fill="outline"] .btn--mono { background: transparent; color: var(--fg); border-color: rgba(255,255,255,0.55); box-shadow: none; } [data-cta-fill="outline"] .btn--mono:hover { border-color: var(--blanc-pur); box-shadow: var(--glow-white-soft); } [data-cta-fill="outline"] .btn--mono .ico { color: var(--fg); } /* ---------- Glow temperature (explicit blue moment, opt-in) ---------- */ [data-cta-glow="teal"] .btn--mono { box-shadow: var(--glow-teal-soft); } [data-cta-glow="teal"] .btn--mono:hover { box-shadow: var(--glow-teal-strong); } /* ---------- Icon ---------- */ [data-cta-icon="off"] .btn .ico { display: none; } /* ---------- Size ---------- */ [data-cta-size="compact"] .btn--lg { height: 52px; padding: 0 26px; font-size: 11px; } [data-cta-size="ample"] .btn--lg { height: 72px; padding: 0 46px; font-size: 14px; letter-spacing: 0.2em; } /* ---------- Shape (capsule is default; brand-signature) ---------- */ [data-cta-shape="round"] .btn { border-radius: var(--radius-lg); } [data-cta-shape="sharp"] .btn { border-radius: 0; } /* ---------- Icon pastille (icon inside a ring) ---------- */ [data-cta-pastille="on"] .btn .ico { box-sizing: content-box; width: 15px; height: 15px; padding: 7px; border: 1px solid currentColor; border-radius: var(--radius-full); } /* ---------- Hover behaviors ---------- */ /* default = scale (declared in styles.css). Other modes neutralise scale. */ [data-cta-hover="arrow"] .btn:hover, [data-cta-hover="sweep"] .btn:hover, [data-cta-hover="glow"] .btn:hover { transform: none; } [data-cta-hover="arrow"] .btn .ico { transition: transform var(--dur-base) var(--ease-out-cinema); } [data-cta-hover="arrow"] .btn:hover .ico { transform: translateX(6px); } [data-cta-hover="sweep"] .btn { position: relative; overflow: hidden; } [data-cta-hover="sweep"] .btn::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0.14; transform: translateX(-101%); transition: transform var(--dur-slow) var(--ease-out-cinema); } [data-cta-hover="sweep"] .btn:hover::before { transform: translateX(0); } [data-cta-hover="sweep"] .btn > * { position: relative; z-index: 1; } [data-cta-hover="glow"] .btn--mono:hover { box-shadow: var(--glow-white-strong), var(--glow-white-strong); } [data-cta-glow="teal"][data-cta-hover="glow"] .btn--mono:hover { box-shadow: var(--glow-teal-strong), var(--glow-teal-strong); } /* ============================================================ PORTFOLIO GRID LAYOUTS — tuned for mostly-vertical photos Default (no attr) = éditorial (asymmetric, in styles.css). ============================================================ */ @media (min-width: 761px) { /* Portrait ×3 — tall 3-up, last item widens to fill the row */ [data-grid-layout="portrait3"] .grid-work { grid-auto-rows: clamp(360px, 36vw, 560px); } [data-grid-layout="portrait3"] .tile { grid-column: span 4 !important; grid-row: auto !important; } [data-grid-layout="portrait3"] .tile.s-h { grid-column: span 8 !important; } /* Portrait ×4 — denser 4-up portrait grid */ [data-grid-layout="portrait4"] .grid-work { grid-auto-rows: clamp(300px, 30vw, 460px); } [data-grid-layout="portrait4"] .tile { grid-column: span 3 !important; grid-row: auto !important; } /* Vertical ×2 — large statement portraits, two per row */ [data-grid-layout="duo"] .grid-work { grid-auto-rows: clamp(460px, 46vw, 720px); } [data-grid-layout="duo"] .tile { grid-column: span 6 !important; grid-row: auto !important; } /* Mosaïque — masonry of mostly-portrait tiles with one wide accent */ [data-grid-layout="mosaic"] .grid-work { display: block; column-count: 3; column-gap: clamp(14px, 1.6vw, 24px); grid-auto-rows: auto; } [data-grid-layout="mosaic"] .tile { display: block; width: 100%; break-inside: avoid; grid-column: auto !important; grid-row: auto !important; margin-bottom: clamp(14px, 1.6vw, 24px); } [data-grid-layout="mosaic"] .tile.s-a { aspect-ratio: 4 / 5; } [data-grid-layout="mosaic"] .tile.s-b { aspect-ratio: 3 / 4; } [data-grid-layout="mosaic"] .tile.s-c { aspect-ratio: 4 / 5; } [data-grid-layout="mosaic"] .tile.s-d { aspect-ratio: 4 / 3; } [data-grid-layout="mosaic"] .tile.s-e { aspect-ratio: 3 / 4; } [data-grid-layout="mosaic"] .tile.s-f { aspect-ratio: 4 / 5; } [data-grid-layout="mosaic"] .tile.s-g { aspect-ratio: 3 / 4; } [data-grid-layout="mosaic"] .tile.s-h { aspect-ratio: 4 / 5; } } /* ============================================================ CINÉMA — opt-in atmospheric effects (camera / lens metaphor) All off by default; gated by data-attrs on . (Grain, vignette, scroll-progress already defined above.) ============================================================ */ /* ---- Viewfinder corner framing marks ---- */ .fx-viewfinder { position: fixed; inset: 0; z-index: 190; pointer-events: none; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out-cinema); } .fx-viewfinder i { position: absolute; width: 26px; height: 26px; border: 1.5px solid rgba(255,255,255,0.5); } .fx-viewfinder i:nth-child(1) { top: 22px; left: 22px; border-width: 1.5px 0 0 1.5px; } .fx-viewfinder i:nth-child(2) { top: 22px; right: 22px; border-width: 1.5px 1.5px 0 0; } .fx-viewfinder i:nth-child(3) { bottom: 22px; left: 22px; border-width: 0 0 1.5px 1.5px; } .fx-viewfinder i:nth-child(4) { bottom: 22px; right: 22px; border-width: 0 1.5px 1.5px 0; } [data-viewfinder="on"] .fx-viewfinder { opacity: 1; } /* ---- Hero cursor spotlight ---- */ .hero__spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out-cinema); background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 42%), rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 60%); } [data-spot="on"] .hero__spot { opacity: 1; } /* ---- Hero parallax (JS sets transform; CSS only enables the transition) ---- */ [data-parallax="on"] .hero__wordmark { transition: transform 320ms var(--ease-out-cinema); } /* ============================================================ HÉRO — ATMOSPHÈRE — crisp, high-contrast, modern-monochrome. All off by default; gated by data-attrs on . ============================================================ */ .hero__grid, .hero__sweep, .hero__reticle { position: absolute; pointer-events: none; opacity: 0; transition: opacity var(--dur-cinema) var(--ease-out-cinema); } .hero__grid, .hero__sweep, .hero__reticle { z-index: 1; inset: 0; } .hero__hud { position: absolute; pointer-events: none; z-index: 3; inset: 0; } /* ---- Grille technique : edge-masked blueprint grid ---- */ .hero__grid { background-image: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 72px 72px; background-position: center; -webkit-mask: radial-gradient(ellipse 64% 58% at 50% 46%, transparent 22%, #000 86%); mask: radial-gradient(ellipse 64% 58% at 50% 46%, transparent 22%, #000 86%); } [data-hero-grid="on"] .hero__grid { opacity: 1; } /* ---- Balayage : specular light sweep across the stage ---- */ .hero__sweep { overflow: hidden; } .hero__sweep::before { content: ""; position: absolute; top: -60%; left: -40%; width: 34%; height: 220%; transform: translateX(-160%) rotate(12deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent); } [data-hero-sweep="on"] .hero__sweep { opacity: 1; } [data-hero-sweep="on"] .hero__sweep::before { animation: heroSweep 7.5s var(--ease-in-out-cinema) infinite; } @keyframes heroSweep { 0% { transform: translateX(-160%) rotate(12deg); } 55%, 100% { transform: translateX(520%) rotate(12deg); } } /* ---- Mire de mise au point : autofocus brackets locking on the wordmark ---- */ .hero__reticle { inset: auto; top: 50%; left: 50%; translate: -50% -50%; width: min(66vw, 780px); height: min(38vh, 320px); } .hero__reticle i { position: absolute; width: 30px; height: 30px; border: 1.5px solid rgba(255,255,255,0.7); } .hero__reticle i:nth-child(1) { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; } .hero__reticle i:nth-child(2) { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; } .hero__reticle i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1.5px 1.5px; } .hero__reticle i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; } [data-hero-reticle="on"] .hero__reticle { opacity: 1; animation: focusLock 5s var(--ease-in-out-cinema) infinite; } @keyframes focusLock { 0%, 100% { transform: translate(-50%, -50%) scale(1.07); opacity: 0.45; } 18%, 72% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; } } /* ---- HUD viseur : camera readouts in the corners ---- */ .hero__hud { font-family: var(--font-sans); font-stretch: var(--mona-width); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.62); } .hero__hud > div { position: absolute; display: flex; align-items: center; gap: 9px; white-space: nowrap; } .hud-rec { left: clamp(20px, 5.5vw, 64px); bottom: clamp(34px, 6vh, 56px); } .hud-tc { color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: 0.12em; } .hud-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blanc-pur); box-shadow: var(--glow-white-soft); animation: recBlink 1.5s steps(1, end) infinite; } @keyframes recBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0.15; } } @media (prefers-reduced-motion: reduce) { [data-hero-sweep="on"] .hero__sweep::before, [data-hero-reticle="on"] .hero__reticle, .hud-dot { animation: none; } } /* ============================================================ DYNAMIQUE — scroll, reveal, and interaction motion. Gated by data-attrs on ; most default ON. ============================================================ */ /* ---- Section reveal (permanent: aperture — opacity + scale + blur) ---- */ .reveal { transform: scale(0.965); filter: blur(7px); transition: opacity var(--dur-cinema) var(--ease-out-cinema), transform var(--dur-cinema) var(--ease-out-cinema), filter var(--dur-cinema) var(--ease-out-cinema); } .reveal.in { opacity: 1; transform: none; filter: none; } /* ---- Statement line-by-line mask reveal (permanent) ---- */ .stmt-line { display: block; overflow: hidden; } .stmt-line > span { display: block; transform: translateY(110%); transition: transform var(--dur-cinema) var(--ease-out-cinema); transition-delay: calc(var(--ln, 0) * 130ms); } .reveal.in .stmt-line > span { transform: translateY(0); } /* ---- Portfolio: magnetic hover (permanent; JS sets --tx/--ty) ---- */ .grid-work { position: relative; } .tile__name { transition: transform var(--dur-base) var(--ease-out-cinema), opacity var(--dur-slow) var(--ease-out-cinema); } .tile:hover .tile__name { transform: translate(var(--tx, 0px), var(--ty, 0px)); } /* ---- Client card parallax (permanent; JS sets --par) ---- */ .cc__media { transform: translateX(var(--par-media, 0px)); will-change: transform; } .cc__body { transform: translateX(var(--par-body, 0px)); will-change: transform; } /* ---- Nav auto hide/reveal (permanent) ---- */ .nav { transition: transform var(--dur-base) var(--ease-out-cinema), background-color var(--dur-slow) var(--ease-out-cinema), backdrop-filter var(--dur-slow) var(--ease-out-cinema), border-color var(--dur-slow) var(--ease-out-cinema); } .nav.nav--hidden { transform: translateY(-115%); } @media (prefers-reduced-motion: reduce) { .stmt-line > span { transition: none; transform: none; } }