/* ========================================================================== DELVANO — Motion system (spec §15, §16, §17) Concept: PERCEPTION SHIFT. Motion reinforces the idea of a view changing. It never gates content and never delays navigation. The hidden initial states are scoped to [data-anim="on"], set by a one-line inline script in . Without JS — or with reduced motion — every element renders in its final state immediately. ========================================================================== */ @layer motion { /* -------------------------------------------------------------------------- Block reveal — a short lift, used for anything that is not a title. -------------------------------------------------------------------------- */ [data-anim="on"] [data-reveal] { opacity: 0; transform: translateY(26px); } [data-anim="on"] [data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--dur-editorial) var(--ease-editorial) var(--block-delay, 0ms), transform var(--dur-editorial) var(--ease-editorial) var(--block-delay, 0ms); } /* Titles carry their motion on the lines, so the block itself only fades. */ [data-anim="on"] [data-reveal="title"] { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- Clipped line reveal — the signature title entrance (spec §15): masked, translateY ~40px → 0, opacity 0 → 1, ~700ms, slight line stagger. -------------------------------------------------------------------------- */ .line { display: block; } [data-anim="on"] [data-reveal] .line { overflow: hidden; /* Keeps descenders and italic overhang from being clipped by the mask. */ padding-bottom: 0.12em; margin-bottom: -0.12em; } [data-anim="on"] [data-reveal] .line__inner { display: block; opacity: 0; transform: translateY(0.9em); will-change: transform; } [data-anim="on"] [data-reveal].is-in .line__inner { opacity: 1; transform: translateY(0); transition: transform var(--dur-editorial) var(--ease-editorial) calc(var(--delay, 0ms) + var(--block-delay, 0ms)), opacity calc(var(--dur-editorial) - 200ms) linear calc(var(--delay, 0ms) + var(--block-delay, 0ms)); } /* Once the reveal has played, drop the hint so text stays crisp. */ [data-anim="on"] [data-reveal].is-in .line__inner { will-change: auto; } /* -------------------------------------------------------------------------- Media reveal — scale 1.05 → 1 over ~900ms. Kept subtle (spec §15). -------------------------------------------------------------------------- */ [data-anim="on"] [data-reveal] .media { clip-path: inset(0 0 0 0); } [data-anim="on"] [data-reveal] .media > img, [data-anim="on"] [data-reveal] .media > picture { transform: scale(1.05); transition: transform var(--dur-cinematic) var(--ease-editorial); } [data-anim="on"] [data-reveal].is-in .media > img, [data-anim="on"] [data-reveal].is-in .media > picture { transform: scale(1); } /* -------------------------------------------------------------------------- Rule draw — hairlines that extend as a section enters. -------------------------------------------------------------------------- */ [data-anim="on"] [data-reveal] .draw { transform: scaleX(0); transform-origin: left; } [data-anim="on"] [data-reveal].is-in .draw { transform: scaleX(1); transition: transform var(--dur-cinematic) var(--ease-editorial) 120ms; } /* -------------------------------------------------------------------------- PERCEPTION LENS (spec §16) Two readings of the same surface stacked; the top one is revealed only inside a soft circular mask that follows the pointer. Opt-in per section and only enabled by JS once the device qualifies. -------------------------------------------------------------------------- */ .lens { position: relative; } .lens__shift { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; transition: opacity var(--dur-ui) var(--ease-out); } .lens[data-lens-ready="true"][data-lens-active="true"] .lens__shift { opacity: 1; } .lens[data-lens-ready="true"] .lens__shift { --lens-size: 190px; -webkit-mask-image: radial-gradient( circle var(--lens-size) at var(--lens-x, 50%) var(--lens-y, 50%), #000 0%, #000 62%, transparent 100% ); mask-image: radial-gradient( circle var(--lens-size) at var(--lens-x, 50%) var(--lens-y, 50%), #000 0%, #000 62%, transparent 100% ); } /* The alternate perception: same composition, colder and sharper — the "before" reading of an image whose "after" is warm and resolved. */ .lens__shift .media { filter: contrast(1.34) saturate(0.35) brightness(0.82); } /* A hairline ring makes the lens legible as an intentional instrument rather than a rendering artefact. */ .lens[data-lens-ready="true"][data-lens-active="true"]::after { content: ""; position: absolute; z-index: 3; left: var(--lens-x, 50%); top: var(--lens-y, 50%); width: 380px; height: 380px; margin: -190px 0 0 -190px; border: 1px solid rgb(var(--ivory-rgb) / 0.18); border-radius: 50%; pointer-events: none; } /* Hint shown once the section is in view, so the interaction is discoverable without being required. Hidden entirely where the lens cannot run. */ .lens__hint { display: none; } .lens[data-lens-ready="true"] .lens__hint { position: absolute; z-index: 4; inset-block-end: var(--space-3); inset-inline-end: var(--space-3); display: inline-flex; align-items: center; gap: 0.6em; font-size: 0.625rem; font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgb(var(--ivory-rgb) / 0.55); pointer-events: none; transition: opacity var(--dur-ui) var(--ease-out); } .lens[data-lens-active="true"] .lens__hint { opacity: 0; } /* -------------------------------------------------------------------------- Service rows — active gains contrast, inactive recede (spec §15). 400–600ms. Desktop only; mobile uses the accordion instead. -------------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { [data-service-row][data-state="muted"] { opacity: 0.42; } [data-service-row][data-state="active"] { opacity: 1; } [data-service-row] { transition: opacity var(--dur-ui-slow) var(--ease-out); } } /* -------------------------------------------------------------------------- Approach steps — progressive activation, very restrained (spec §15). -------------------------------------------------------------------------- */ [data-anim="on"] [data-reveal] .step__index { opacity: 0.35; } [data-anim="on"] [data-reveal].is-in .step__index { opacity: 1; transition: opacity var(--dur-ui-slow) var(--ease-out) var(--step-delay, 0ms); } /* -------------------------------------------------------------------------- Page transition — a short ivory-to-transparent wipe on entry only. No loader, no blocking overlay, no delay on outbound clicks (spec §17). -------------------------------------------------------------------------- */ @keyframes delvano-enter { from { opacity: 0; } to { opacity: 1; } } [data-anim="on"] main { animation: delvano-enter var(--dur-ui) var(--ease-out) both; } @media (prefers-reduced-motion: reduce) { [data-anim="on"] main { animation: none; } } }