/* Sigmood — motion. Rules of thumb: only translate / scale / rotate / opacity are animated (compositor-friendly), nothing hides content unless JavaScript has started (html.motion), and everything is switched off for prefers-reduced-motion. 1. Opening sequence (pure CSS, starts with the first paint; html.js is set in ) 2. Scroll reveals (IntersectionObserver in main.js adds .is-in) 3. Hover effects 4. Scroll-driven scenes (only in browsers that support animation-timeline; others keep the static layout) 5. Reduced motion */ /* ---------- 1. Opening sequence ---------- */ .page-loader{position:fixed;inset:0;z-index:100;display:none;place-items:center;background:var(--ink);color:white;pointer-events:none} .page-loader>span{font-size:clamp(46px,8vw,120px);font-weight:600;letter-spacing:-.065em} .loader-dot{color:var(--green)} .js:not(.no-intro) .page-loader{display:grid;animation:loader-out 1.25s var(--primary-ease) both} .js:not(.no-intro) .hero-title .line>span{animation:rise 1.25s var(--primary-ease) 1s both} .js:not(.no-intro) [data-hero-copy] .word>span{animation:rise 1.25s var(--primary-out) calc(1.2s + var(--delay,0s)) both} .js:not(.no-intro) :is(.hero-kicker,.hero-actions,.hero-footnote){animation:rise-half 1.25s var(--primary-ease) 1.4s both} .js:not(.no-intro) .hero-visual{animation:grow 1.25s var(--primary-out) 1.4s both} @keyframes loader-out{to{translate:0 -100%;visibility:hidden}} @keyframes rise{from{translate:0 110%}} @keyframes rise-half{from{translate:0 50%;opacity:0}} @keyframes grow{from{scale:0}} /* Pointer-following hero visual: main.js sets `translate`, the transition does the easing. */ .hero-visual{transition:translate 2s var(--power3-out)} /* ---------- 2. Scroll reveals ---------- */ .motion [data-lines]:not(.is-in) .line>span{translate:0 110%} .motion [data-lines].is-in .line>span{transition:translate 1.25s var(--primary-out)} .motion [data-lines].is-in .line:nth-child(2)>span{transition-delay:.1s} .motion [data-lines].is-in .line:nth-child(3)>span{transition-delay:.2s} .motion [data-reveal=""]:not(.is-in){opacity:0;translate:0 55px} .motion [data-reveal=""].is-in{transition:opacity 1.25s var(--primary-out),translate 1.25s var(--primary-out)} @media(max-width:760px){ .motion [data-reveal=mobile]:not(.is-in){opacity:0;translate:0 90px} .motion [data-reveal=mobile].is-in{transition:opacity 1.25s var(--primary-out),translate 1.25s var(--primary-out)} } /* ---------- 3. Hover: concepts grid (desktop pointers only) ---------- */ @media(min-width:761px) and (hover:hover){ .work-item{transition:filter .3s} .work-grid:has(.work-item:is(:hover,:focus-within)) .work-item:not(:hover,:focus-within){filter:grayscale(1)} .work-image>img{transition:scale .8s var(--power3-out)} .work-item:is(:hover,:focus-within) .work-image>img{scale:.95} .work-overlay{transition:opacity .4s var(--power3-out)} .work-item:is(:hover,:focus-within) .work-overlay{opacity:1;transition-duration:.6s} .work-hover-title{clip-path:inset(-.5em -.5em 0 -.5em);padding-bottom:.08em;margin-bottom:-.08em} .work-hover-title .char{display:inline-block;translate:0 100%;transition:translate .6s var(--power3-out) calc(var(--i)*.05s)} .work-item:is(:hover,:focus-within) .work-hover-title .char{translate:0 0} } /* ---------- 4. Scroll-driven scenes ---------- */ .section-shade{position:absolute;inset:0;z-index:10;display:none;background:#000;opacity:0;pointer-events:none} @supports (animation-timeline:view()) and (timeline-scope:--a){ @media(prefers-reduced-motion:no-preference){ /* Concepts: the title is pinned, then the green screen turns slate. The slate is a layer faded in on top of the green; the text colour flips over a short range. */ .concepts-section{timeline-scope:--work-head;background:var(--green);color:var(--ink);animation:concepts-ink linear both;animation-timeline:--work-head;animation-range:exit 30% exit 35%} .concepts-section::before{content:"";position:absolute;inset:0;background:var(--ink);opacity:0;animation:fade-in linear both;animation-timeline:--work-head;animation-range:exit 10% exit 55%} .concepts-section>*{position:relative} .work-head-block{height:150svh;padding:0;view-timeline:--work-head block} .work-head{position:sticky;top:90px;gap:12svh} /* Formats: the preview settles in, the circles drift apart. */ .format-stage{view-timeline:--format block} .format-preview{animation:preview-in linear both;animation-timeline:--format;animation-range:cover 10vh cover 50%} .circle-blue{animation:drift-up linear both;animation-timeline:--format;animation-range:cover 0% cover 100%} .circle-green{animation:drift-down linear both;animation-timeline:--format;animation-range:cover 0% cover 100%} /* Expertises: the giant title travels sideways while its letters rise one after another. Same timing as the original GSAP timeline: 26 letters of 0.5 each, staggered by 0.3, so letter i runs from i × 0.3/8 to (i × 0.3 + 0.5)/8 of the range. */ .expertise-section{view-timeline:--expertise block} .service-head{animation:head-slide linear both;animation-timeline:--expertise;animation-range:cover var(--head-start) cover var(--head-end)} .service-text .char{display:inline-block;animation:char-rise linear both;animation-timeline:--expertise; animation-range:cover calc(var(--chars-start) + var(--chars-span) * var(--i) * .3 / 8) cover calc(var(--chars-start) + var(--chars-span) * (var(--i) * .3 + .5) / 8)} @media(min-width:761px){ /* Section overlaps: the previous screen drops by 25vh and darkens while the next one covers it. */ body{timeline-scope:--cover-hero,--cover-studio,--cover-expertise,--cover-sectors,--cover-contact} .studio-section{view-timeline:--cover-hero block} .concepts-section{view-timeline:--cover-studio block} .offers-section{view-timeline:--cover-expertise block} .contact-section{view-timeline:--cover-sectors block} .site-footer{view-timeline:--cover-contact block} .hero{z-index:1}.studio-section{z-index:2}.concepts-section{z-index:3}.manifesto-section{z-index:4} .expertise-section{z-index:5}.offers-section{z-index:6}.sectors-section{z-index:7}.contact-section{z-index:8} :is(.hero,.studio-section,.expertise-section,.sectors-section,.contact-section), :is(.hero,.studio-section,.expertise-section,.sectors-section,.contact-section)>.section-shade{animation-range:cover 0% cover 100vh;animation-fill-mode:both;animation-timing-function:linear} .section-shade{display:block;animation-name:shaded} :is(.hero,.studio-section,.expertise-section,.sectors-section,.contact-section){animation-name:pushed} .hero,.hero>.section-shade{animation-timeline:--cover-hero} .studio-section,.studio-section>.section-shade{animation-timeline:--cover-studio} .expertise-section,.expertise-section>.section-shade{animation-timeline:--cover-expertise} .sectors-section,.sectors-section>.section-shade{animation-timeline:--cover-sectors} .contact-section,.contact-section>.section-shade{animation-timeline:--cover-contact} /* Concepts title shrinks from 1.75 while pinned. */ .work-head-wrap{animation:head-shrink linear both;animation-timeline:--work-head;animation-range:contain 0% exit 50%} /* Manifesto: 250svh stage, the white panel grows to full screen and the inline image opens. */ .manifesto-section{margin-top:-20svh;background:var(--ink)} .manifesto-stage{height:250svh;view-timeline:--manifesto block} .manifesto-sticky{position:sticky;top:0;height:100svh} .manifesto-panel{position:absolute;top:0;left:0;height:100svh;padding:140px var(--gutter) 0; animation:panel-rise linear both,panel-grow linear both;animation-timeline:--manifesto,--manifesto;animation-range:contain 0% contain 30svh,contain 0% contain 100%} .manifesto-title{animation:title-settle linear both;animation-timeline:--manifesto;animation-range:contain 0% contain 100%} .manifesto-image{width:1.3em;animation:window-open linear both;animation-timeline:--manifesto;animation-range:contain 30svh contain 100%} .manifesto-words{animation:words-left linear both;animation-timeline:--manifesto;animation-range:contain 30svh contain 100%} .manifesto-for{animation:words-right linear both;animation-timeline:--manifesto;animation-range:contain 30svh contain 100%} .manifesto-insights article{animation:insight-in linear both;animation-timeline:view(block 0px);animation-range:entry 20% cover 40%} /* Expertises: 300svh stage, pinned screen, three cards rise in turn (0.5 each, 0.2 stagger → total 0.9). */ .expertise-section{height:300svh} .services-sticky{position:sticky;top:0;display:flex;align-items:center;height:100svh;padding:0} .service-head{top:50%;transform:translateY(-50%);--head-start:20vh;--head-end:100%;--head-from:50vw;--head-to:-80vw} .service-text{font-size:20vw;--chars-start:20svh;--chars-span:280svh;--rise:75svh} .service-card{animation:card-rise linear both;animation-timeline:--expertise; animation-range:cover calc(100svh + 200svh * var(--i) * .2 / .9) cover calc(100svh + 200svh * (var(--i) * .2 + .5) / .9)} .service-card:nth-of-type(1){--i:0}.service-card:nth-of-type(2){--i:1}.service-card:nth-of-type(3){--i:2} } @media(max-width:760px){ .work-head-block{height:110svh} .work-head{top:100px;gap:18svh} .concepts-section::before{animation-range:exit 5% exit 55%} .services-sticky{padding:280px 0 0} .service-head{top:80px;--head-start:30vh;--head-end:60%;--head-from:80vw;--head-to:-120vw} .service-text{font-size:29vw;--chars-start:10svh;--chars-span:80svh;--rise:30svh} } /* View timelines default to the scroll-padding inset (105px, set for anchors): measure against the full viewport instead. Kept last, because the view-timeline shorthand resets the inset. */ .work-head-block,.format-stage,.expertise-section,.studio-section,.concepts-section,.offers-section,.contact-section,.site-footer,.manifesto-stage{view-timeline-inset:0px} } } @keyframes pushed{to{translate:0 25vh}} @keyframes shaded{to{opacity:.5}} @keyframes fade-in{to{opacity:1}} @keyframes concepts-ink{from{color:var(--ink)}to{color:white}} @keyframes head-shrink{from{scale:1.75}} @keyframes panel-rise{from{translate:0 50vh}} @keyframes panel-grow{from{scale:.55}} @keyframes title-settle{from{scale:1.6}} @keyframes window-open{from{clip-path:inset(0 50%)}} @keyframes words-left{from{translate:.65em 0}} @keyframes words-right{from{translate:-.77em 0}} @keyframes insight-in{from{translate:0 50%;opacity:0}} @keyframes head-slide{from{translate:var(--head-from) 0}to{translate:var(--head-to) 0}} @keyframes char-rise{from{translate:0 var(--rise);scale:1.5}} @keyframes card-rise{from{translate:0 100svh}} @keyframes preview-in{from{translate:0 65px;rotate:-8deg;scale:.88}} @keyframes drift-up{to{translate:0 -15%}} @keyframes drift-down{to{translate:0 15%}} /* ---------- 5. Reduced motion ---------- */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*:before,*:after{animation:none!important;transition:none!important} .page-loader{display:none!important} .hero-slide{transform:none} }