/* Motion layer. Loaded after home.css; the .sj-motion class on is added by motion.js so the hidden pre-reveal states never apply without a working observer. */ :root { --sj-ease: cubic-bezier(.16, .84, .3, 1); --sj-ease-sharp: cubic-bezier(.3, .9, .2, 1); --sj-dur-fast: 180ms; --sj-dur: 300ms; --sj-dur-slow: 620ms; } /* ══════════════════════════════════════════════════════════════════════════ Scroll reveal ══════════════════════════════════════════════════════════════════════ */ .sj-motion [data-reveal] { transition: opacity var(--sj-dur-slow) var(--sj-ease), transform var(--sj-dur-slow) var(--sj-ease), clip-path var(--sj-dur-slow) var(--sj-ease-sharp); transition-delay: var(--sj-reveal-delay, 0ms); } .sj-motion [data-reveal]:not(.is-in) { will-change: opacity, transform, clip-path; } .sj-motion [data-reveal="up"]:not(.is-in) { opacity: 0; transform: translateY(30px); } .sj-motion [data-reveal="left"]:not(.is-in) { opacity: 0; transform: translateX(-34px); } .sj-motion [data-reveal="right"]:not(.is-in) { opacity: 0; transform: translateX(34px); } /* Vertical wipe — the workhorse for images and headlines in this layout. */ .sj-motion [data-reveal="unveil"]:not(.is-in) { clip-path: inset(0 0 100% 0); } /* Horizontal wipe — for rules and bars. */ .sj-motion [data-reveal="wipe"]:not(.is-in) { clip-path: inset(0 100% 0 0); } .sj-motion [data-reveal].is-in { opacity: 1; transform: none; } .sj-motion [data-reveal="unveil"].is-in, .sj-motion [data-reveal="wipe"].is-in { clip-path: inset(0 0 0 0); } /* ══════════════════════════════════════════════════════════════════════════ Shared button / icon behaviour ══════════════════════════════════════════════════════════════════════ */ .btn { transition: background-color var(--sj-dur-fast) ease, border-color var(--sj-dur-fast) ease, color var(--sj-dur-fast) ease, transform var(--sj-dur-fast) var(--sj-ease-sharp); } .btn svg { transition: transform var(--sj-dur) var(--sj-ease-sharp); } .btn:hover svg { transform: translateX(4px); } .btn:active { transform: translateY(1px); } .sj-hero__nav [data-hero-prev]:hover svg { transform: translateX(-4px); } .btn-secondary:hover svg:first-child { transform: translateX(-4px); } /* Light sweep across solid accent buttons. */ .btn-primary, .sj-strength__cta .btn { position: relative; overflow: hidden; } .btn-primary::after, .sj-strength__cta .btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%); transform: translateX(-110%); } .btn-primary:hover::after, .sj-strength__cta .btn:hover::after { animation: sj-sweep 720ms var(--sj-ease) forwards; } @keyframes sj-sweep { to { transform: translateX(110%); } } /* ══════════════════════════════════════════════════════════════════════════ Top bar + header ══════════════════════════════════════════════════════════════════════ */ .sj-topbar a { transition: color var(--sj-dur-fast) ease; } .sj-topbar a:hover { color: #fff; } .sj-header { transition: box-shadow var(--sj-dur) ease; } .sj-header__inner { transition: height var(--sj-dur) var(--sj-ease); } .sj-header.is-scrolled { box-shadow: 0 8px 28px rgba(11, 26, 43, .14); } .sj-header.is-scrolled .sj-header__inner { height: var(--sj-header-h-condensed); } /* Secondary-page sticky sub-nav follows the header as it condenses. */ .sj-condensed .sj-page-nav { top: var(--sj-header-h-condensed); } .sj-page-nav__list a { transition: color var(--sj-dur-fast) ease, border-bottom-color var(--sj-dur-fast) ease; } /* Hash jumps always land below the condensed header + page nav. Any in-page jump scrolls past the condense threshold. */ .sj-page-nav ~ .sj-section[id] { scroll-margin-top: calc(var(--sj-header-h-condensed) + 64px); } .sj-logo__mark { transition: width var(--sj-dur) var(--sj-ease), height var(--sj-dur) var(--sj-ease), font-size var(--sj-dur) var(--sj-ease), background-color var(--sj-dur-fast) ease; } .sj-logo__name { transition: font-size var(--sj-dur) var(--sj-ease); } .sj-logo__en { transition: opacity var(--sj-dur-fast) ease, max-height var(--sj-dur) var(--sj-ease); max-height: 16px; overflow: hidden; } .sj-header.is-scrolled .sj-logo__mark { width: 36px; height: 36px; font-size: 18px; } .sj-header.is-scrolled .sj-logo__name { font-size: 22px; } .sj-header.is-scrolled .sj-logo__en { opacity: 0; max-height: 0; } .sj-logo:hover .sj-logo__mark { background: var(--color-accent-700); } /* Reading-progress hairline docked to the header's bottom edge. */ .sj-scroll-progress { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; pointer-events: none; } .sj-scroll-progress span { display: block; height: 100%; background: var(--color-accent); transform: scaleX(var(--sj-progress, 0)); transform-origin: left center; } /* Nav underline grows from the centre instead of snapping on. */ .sj-nav__item > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -3px; height: 3px; background: var(--color-accent); transform: scaleX(0); transition: transform var(--sj-dur) var(--sj-ease-sharp); } .sj-nav__item > a:hover, .sj-nav__item.is-active > a, .sj-nav a.is-active { border-bottom-color: transparent; } .sj-nav__item > a:hover::after, .sj-nav__item.is-active > a::after, .sj-nav a.is-active::after { transform: scaleX(1); } .sj-nav__dropdown { transform-origin: top center; } .sj-nav__dropdown a { position: relative; opacity: 0; transform: translateX(-8px); transition: opacity var(--sj-dur) var(--sj-ease), transform var(--sj-dur) var(--sj-ease), background-color var(--sj-dur-fast) ease, color var(--sj-dur-fast) ease; } .sj-nav__item--has-dropdown:hover .sj-nav__dropdown a, .sj-nav__item--has-dropdown:focus-within .sj-nav__dropdown a { opacity: 1; transform: none; } .sj-nav__item--has-dropdown:hover .sj-nav__dropdown a:nth-child(2), .sj-nav__item--has-dropdown:focus-within .sj-nav__dropdown a:nth-child(2) { transition-delay: 40ms; } .sj-nav__item--has-dropdown:hover .sj-nav__dropdown a:nth-child(3), .sj-nav__item--has-dropdown:focus-within .sj-nav__dropdown a:nth-child(3) { transition-delay: 80ms; } .sj-nav__item--has-dropdown:hover .sj-nav__dropdown a:nth-child(4), .sj-nav__item--has-dropdown:focus-within .sj-nav__dropdown a:nth-child(4) { transition-delay: 120ms; } .sj-nav__item--has-dropdown:hover .sj-nav__dropdown a:nth-child(5), .sj-nav__item--has-dropdown:focus-within .sj-nav__dropdown a:nth-child(5) { transition-delay: 160ms; } .sj-nav__item--has-dropdown:hover .sj-nav__dropdown a:nth-child(6), .sj-nav__item--has-dropdown:focus-within .sj-nav__dropdown a:nth-child(6) { transition-delay: 200ms; } .sj-nav__dropdown a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-accent); transform: scaleY(0); transition: transform var(--sj-dur-fast) var(--sj-ease-sharp); } .sj-nav__dropdown a:hover::before { transform: scaleY(1); } .sj-search { transition: border-color var(--sj-dur-fast) ease, box-shadow var(--sj-dur-fast) ease; } .sj-search:focus-within { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); } .sj-search input { transition: width var(--sj-dur) var(--sj-ease); } .sj-search:focus-within input { width: 150px; } /* ══════════════════════════════════════════════════════════════════════════ Hero ══════════════════════════════════════════════════════════════════════ */ /* Slow push-in on the visible slide only, restarted by the is-active toggle. */ .sj-hero__slide img { transform: scale(1.02); transition: transform 900ms var(--sj-ease); will-change: transform; } .sj-hero__slide.is-active img { animation: sj-kenburns var(--sj-hero-interval, 6000ms) linear forwards; } .sj-hero.is-paused .sj-hero__slide.is-active img { animation-play-state: paused; } @keyframes sj-kenburns { from { transform: scale(1.02); } to { transform: scale(1.12); } } /* Copy re-enters on every slide change; motion.js re-arms .is-entering. */ .sj-hero__content.is-entering .sj-hero__accent { animation: sj-bar-in 560ms var(--sj-ease) both; } .sj-hero__content.is-entering .sj-hero__kicker { animation: sj-rise 620ms var(--sj-ease) 90ms both; } .sj-hero__content.is-entering .sj-hero__title { animation: sj-rise 720ms var(--sj-ease) 170ms both; } .sj-hero__content.is-entering .sj-hero__body { animation: sj-rise 720ms var(--sj-ease) 260ms both; } .sj-hero__content.is-entering .sj-hero__actions { animation: sj-rise 680ms var(--sj-ease) 350ms both; } @keyframes sj-bar-in { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } @keyframes sj-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } .sj-hero__accent { transform-origin: top center; } /* Active dot doubles as an autoplay progress bar. */ .sj-hero__dots button { position: relative; overflow: hidden; transition: background-color var(--sj-dur-fast) ease; } .sj-hero__dots button:hover { background: rgba(255, 255, 255, .55); } .sj-hero__dots button.is-active { background: rgba(255, 255, 255, .28); } .sj-hero__dots button::after { content: ""; position: absolute; inset: 0; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; } .sj-hero__dots button.is-active::after { animation: sj-dot-progress var(--sj-hero-interval, 6000ms) linear forwards; } .sj-hero.is-paused .sj-hero__dots button.is-active::after { animation-play-state: paused; } @keyframes sj-dot-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } .sj-hero__nav button { transition: background-color var(--sj-dur-fast) ease, border-color var(--sj-dur-fast) ease, transform var(--sj-dur-fast) var(--sj-ease-sharp); } /* Scroll cue */ .sj-hero__scroll { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 4px; text-decoration: none; } .sj-hero__scroll-text { font-size: 10px; font-weight: 800; letter-spacing: 0.34em; color: rgba(255, 255, 255, .55); transition: color var(--sj-dur-fast) ease; } .sj-hero__scroll-line { position: relative; width: 1px; height: 38px; background: rgba(255, 255, 255, .22); overflow: hidden; } .sj-hero__scroll-line::after { content: ""; position: absolute; left: 0; width: 1px; height: 14px; background: var(--color-accent); animation: sj-scroll-cue 1800ms var(--sj-ease) infinite; } .sj-hero__scroll:hover .sj-hero__scroll-text { color: #fff; } @keyframes sj-scroll-cue { 0% { top: -14px; } 100% { top: 38px; } } /* ══════════════════════════════════════════════════════════════════════════ Stats ══════════════════════════════════════════════════════════════════════ */ .sj-stats__item { position: relative; } .sj-stats__item::before { content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--sj-dur-slow) var(--sj-ease-sharp) var(--sj-reveal-delay, 0ms); } .sj-stats__item:first-child::before { left: 0; } .sj-stats__item.is-in::before { transform: scaleX(1); } .sj-stats__value strong { transition: color var(--sj-dur) ease; } .sj-stats__item:hover .sj-stats__value strong { color: #f0a833; } /* ══════════════════════════════════════════════════════════════════════════ About ══════════════════════════════════════════════════════════════════════ */ .sj-about__figure { overflow: hidden; } .sj-about__figure img { transition: transform 900ms var(--sj-ease); } .sj-about__figure:hover img { transform: scale(1.05); } .sj-about__feature { transition: background-color var(--sj-dur) ease; } .sj-about__feature h4 { transition: color var(--sj-dur-fast) ease; } .sj-about__feature:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } .sj-about__feature:hover h4 { color: var(--color-accent); } /* ══════════════════════════════════════════════════════════════════════════ Products ══════════════════════════════════════════════════════════════════════ */ .sj-product-card { position: relative; overflow: hidden; transition: background-color var(--sj-dur) ease, box-shadow var(--sj-dur) ease; } .sj-product-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--sj-dur) var(--sj-ease-sharp); } .sj-product-card:hover::before { transform: scaleX(1); } .sj-product-card img { transition: transform 800ms var(--sj-ease), filter var(--sj-dur) ease; } .sj-product-card:hover { box-shadow: var(--shadow-lg); } .sj-product-card:hover img { transform: scale(1.07); } .sj-product-card__tag, .sj-product-card h3 { transition: color var(--sj-dur-fast) ease, transform var(--sj-dur) var(--sj-ease-sharp); } .sj-product-card:hover .sj-product-card__tag { color: var(--color-accent); } .sj-product-card:hover h3 { transform: translateX(4px); } .sj-product-card .btn-ghost { transition: transform var(--sj-dur) var(--sj-ease-sharp); } .sj-product-card:hover .btn-ghost { transform: translateX(6px); } /* ══════════════════════════════════════════════════════════════════════════ Strength + certificates ══════════════════════════════════════════════════════════════════════ */ .sj-strength__item { position: relative; transition: background-color var(--sj-dur) ease; } .sj-strength__item:not(.sj-strength__cta)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--sj-dur) var(--sj-ease-sharp); } .sj-strength__item:not(.sj-strength__cta):hover::before { transform: scaleX(1); } .sj-strength__item:not(.sj-strength__cta):hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } .sj-strength__item > svg { transition: transform var(--sj-dur) var(--sj-ease-sharp); } .sj-strength__item:hover > svg { transform: translateY(-4px) scale(1.12); } .sj-strength__item h4 { transition: color var(--sj-dur-fast) ease; } .sj-strength__item:not(.sj-strength__cta):hover h4 { color: var(--color-accent); } .sj-certs figure { overflow: hidden; } .sj-certs figure img { transition: transform var(--sj-dur-slow) var(--sj-ease), background-color var(--sj-dur) ease; } .sj-certs figure:hover img { transform: scale(1.04); background: var(--color-neutral-200); } /* ══════════════════════════════════════════════════════════════════════════ Cases + partners ══════════════════════════════════════════════════════════════════════ */ .sj-case-card { overflow: hidden; } .sj-case-card img { transition: transform 900ms var(--sj-ease), opacity var(--sj-dur) ease; } .sj-case-card:hover img { transform: scale(1.06); opacity: 1; } .sj-case-card__meta { transition: transform var(--sj-dur-slow) var(--sj-ease), background var(--sj-dur) ease; } .sj-case-card:hover .sj-case-card__meta { transform: translateY(-8px); background: linear-gradient(0deg, rgba(9, 22, 36, .97), transparent); } .sj-case-card__client { position: relative; display: inline-block; } .sj-case-card__client::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--sj-dur) var(--sj-ease-sharp); } .sj-case-card:hover .sj-case-card__client::after { transform: scaleX(1); } .sj-partners__item { position: relative; transition: background-color var(--sj-dur) ease, color var(--sj-dur) ease; } .sj-partners__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--sj-dur) var(--sj-ease-sharp); } .sj-partners__item:hover { background: #14283e; color: #fff; } .sj-partners__item:hover::after { transform: scaleX(1); } .sj-partners__logo { transition: transform var(--sj-dur) var(--sj-ease-sharp); } .sj-partners__item:hover .sj-partners__logo { transform: translateY(-4px) scale(1.06); } /* ══════════════════════════════════════════════════════════════════════════ News ══════════════════════════════════════════════════════════════════════ */ .sj-news__item { position: relative; transition: background-color var(--sj-dur) ease, padding-left var(--sj-dur) var(--sj-ease); } .sj-news__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-accent); transform: scaleY(0); transition: transform var(--sj-dur) var(--sj-ease-sharp); } .sj-news__item:hover { padding-left: 20px; } .sj-news__item:hover::before { transform: scaleY(1); } .sj-news__date, .sj-news__title { transition: color var(--sj-dur-fast) ease; } .sj-news__item:hover .sj-news__date { color: var(--color-accent); } .sj-news__item:hover .sj-news__title { color: var(--color-accent-700); } .sj-news__filters .tag { cursor: pointer; transition: background-color var(--sj-dur-fast) ease, color var(--sj-dur-fast) ease, transform var(--sj-dur-fast) var(--sj-ease-sharp); } .sj-news__filters .tag:hover { transform: translateY(-2px); } .sj-news__filters .tag-outline:hover { background: var(--color-accent); color: #fff; } /* ══════════════════════════════════════════════════════════════════════════ Inner pages — reuse the same hover grammar ══════════════════════════════════════════════════════════════════════ */ .sj-list__item { position: relative; transition: background-color var(--sj-dur) ease, padding-left var(--sj-dur) var(--sj-ease); } .sj-list__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-accent); transform: scaleY(0); transition: transform var(--sj-dur) var(--sj-ease-sharp); } .sj-list__item:hover { padding-left: 20px; background: #eef3f8; } .sj-list__item:hover::before { transform: scaleY(1); } .sj-list__meta, .sj-list__title { transition: color var(--sj-dur-fast) ease; } .sj-list__item:hover .sj-list__meta, .sj-list__item:hover .sj-list__title { color: var(--color-accent); } .sj-feature-grid__item, .sj-scene-grid__item, .sj-service-grid__item, .sj-team-grid__item, .sj-culture__item, .sj-honor-grid__item { position: relative; overflow: hidden; transition: background-color var(--sj-dur) ease, box-shadow var(--sj-dur) ease; } .sj-feature-grid__item::before, .sj-scene-grid__item::before, .sj-service-grid__item::before, .sj-team-grid__item::before, .sj-culture__item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--sj-dur) var(--sj-ease-sharp); } .sj-feature-grid__item:hover::before, .sj-scene-grid__item:hover::before, .sj-service-grid__item:hover::before, .sj-team-grid__item:hover::before, .sj-culture__item:hover::before { transform: scaleX(1); } .sj-feature-grid__item:hover, .sj-scene-grid__item:hover, .sj-service-grid__item:hover, .sj-team-grid__item:hover, .sj-culture__item:hover, .sj-honor-grid__item:hover { background: #eef3f8; box-shadow: var(--shadow-lg); } .sj-feature-grid__item h3, .sj-scene-grid__item h3, .sj-service-grid__item h3, .sj-team-grid__name, .sj-culture__item h3 { transition: transform var(--sj-dur) var(--sj-ease-sharp), color var(--sj-dur-fast) ease; } .sj-feature-grid__item:hover h3, .sj-scene-grid__item:hover h3, .sj-service-grid__item:hover h3, .sj-team-grid__item:hover .sj-team-grid__name, .sj-culture__item:hover h3 { transform: translateX(4px); color: var(--color-accent); } .sj-honor-grid__item img, .sj-gallery img, .sj-video img { transition: transform 800ms var(--sj-ease); } .sj-honor-grid__item:hover img, .sj-gallery figure:hover img, .sj-video:hover img { transform: scale(1.06); } .sj-gallery figure { overflow: hidden; } .sj-sitemap__col a { transition: color var(--sj-dur-fast) ease, transform var(--sj-dur-fast) var(--sj-ease-sharp); } .sj-sitemap__col a:hover { transform: translateX(4px); } .sj-org__dept { transition: background-color var(--sj-dur) ease; } .sj-org__dept:hover { background: #eef3f8; } .sj-org__dept h4 { transition: color var(--sj-dur-fast) ease; } .sj-org__dept:hover h4 { color: var(--color-accent); } .sj-timeline__year, .sj-timeline__body h3 { transition: color var(--sj-dur-fast) ease; } .sj-timeline__item:hover .sj-timeline__year, .sj-timeline__item:hover .sj-timeline__body h3 { color: var(--color-accent-700); } .sj-pager__num { position: relative; transition: background-color var(--sj-dur) ease, color var(--sj-dur-fast) ease; } .sj-pager__num::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--sj-dur) var(--sj-ease-sharp); } .sj-pager__num:not(.is-active):hover { background: #eef3f8; } .sj-pager__num:not(.is-active):hover::after { transform: scaleX(1); } .sj-pager__num.is-active::after { display: none; } /* ══════════════════════════════════════════════════════════════════════════ Contact ══════════════════════════════════════════════════════════════════════ */ .sj-contact__row { transition: background-color var(--sj-dur) ease, padding-left var(--sj-dur) var(--sj-ease); } .sj-contact__row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); padding-left: 12px; } .sj-contact__row svg { transition: transform var(--sj-dur) var(--sj-ease-sharp); } .sj-contact__row:hover svg { transform: scale(1.14); } .sj-contact__form { transition: border-color var(--sj-dur) ease, box-shadow var(--sj-dur) ease; } .sj-contact__form:focus-within { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); box-shadow: var(--shadow-md); } .field > label { transition: color var(--sj-dur-fast) ease, transform var(--sj-dur-fast) var(--sj-ease-sharp); } .field:focus-within > label { color: var(--color-accent); transform: translateX(3px); } .input { transition: border-color var(--sj-dur-fast) ease, background-color var(--sj-dur-fast) ease, box-shadow var(--sj-dur-fast) ease; } .input:focus, .input:focus-visible { border-color: var(--color-accent); background: var(--color-bg); box-shadow: inset 0 -2px 0 var(--color-accent); } /* ══════════════════════════════════════════════════════════════════════════ Footer ══════════════════════════════════════════════════════════════════════ */ .sj-footer__links a, .sj-footer__legal a { display: inline-block; transition: color var(--sj-dur-fast) ease, transform var(--sj-dur-fast) var(--sj-ease-sharp); } .sj-footer__links a:hover, .sj-footer__legal a:hover { color: #fff; transform: translateX(4px); } .sj-footer__qr { transition: border-color var(--sj-dur) ease, background-color var(--sj-dur) ease, transform var(--sj-dur) var(--sj-ease-sharp); } .sj-footer__qr:hover { border-color: var(--color-accent); background: #1a3552; transform: translateY(-4px); } /* ══════════════════════════════════════════════════════════════════════════ Back to top ══════════════════════════════════════════════════════════════════════ */ .sj-to-top { position: fixed; right: 30px; bottom: 30px; z-index: 90; width: 48px; height: 48px; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; color: #fff; background: var(--color-accent); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity var(--sj-dur) ease, transform var(--sj-dur) var(--sj-ease-sharp), background-color var(--sj-dur-fast) ease; } .sj-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } .sj-to-top:hover { background: var(--color-accent-700); } .sj-to-top:hover svg { transform: translateY(-3px); } .sj-to-top svg { transition: transform var(--sj-dur) var(--sj-ease-sharp); } /* ══════════════════════════════════════════════════════════════════════════ Reduced motion ══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; } [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; } .sj-hero__scroll-line::after { display: none; } }