/* Entrances start when the document becomes visible, with a static fallback. */
[data-opening] { --opening-delay: 0ms; --opening-y: 14px; --opening-duration: 720ms; }
html[data-opening-state="waiting"] [data-opening] { opacity: 0; }
html[data-opening-state="playing"] [data-opening] { animation: opening-arrive var(--opening-duration) cubic-bezier(.22,.61,.36,1) var(--opening-delay) backwards; }
[data-opening="header"] { --opening-y: -7px; --opening-duration: 500ms; }
[data-opening="eyebrow"] { --opening-delay: 90ms; --opening-y: 8px; }
[data-opening="title"] { --opening-delay: 180ms; --opening-y: 28px; --opening-duration: 820ms; }
[data-opening="text"] { --opening-delay: 300ms; --opening-y: 12px; }
[data-opening="actions"] { --opening-delay: 420ms; --opening-y: 12px; }
[data-opening="visual"] { --opening-delay: 540ms; --opening-y: 18px; --opening-duration: 900ms; }

.js [data-reveal] { --reveal-x: 0px; --reveal-y: 16px; --reveal-scale: 1; --reveal-duration: 700ms; }
.js [data-reveal="heading"] { --reveal-y: 28px; }
.js [data-reveal="text"] { --reveal-y: 10px; }
.js [data-reveal="card"] { --reveal-y: 22px; --reveal-scale: .99; }
.js [data-reveal="image"] { --reveal-y: 24px; --reveal-scale: .975; }
.js [data-reveal="lateral"] { --reveal-y: 0px; --reveal-x: -22px; }
.js .reveal-pending { opacity: 0; translate: var(--reveal-x) var(--reveal-y); scale: var(--reveal-scale); }
.js [data-reveal].is-visible { animation: reveal-arrive var(--reveal-duration) cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms) backwards; }
.js [data-reveal]:focus-within, [data-opening]:focus-within { opacity: 1; translate: none; scale: 1; animation: none !important; }

@keyframes opening-arrive { from { opacity: 0; translate: 0 var(--opening-y); } to { opacity: 1; translate: 0 0; } }
@keyframes reveal-arrive { from { opacity: 0; translate: var(--reveal-x) var(--reveal-y); scale: var(--reveal-scale); } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes gentle-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 800px) {
  [data-opening="title"] { --opening-y: 18px; }
  .js [data-reveal] { --reveal-duration: 580ms; }
  .js [data-reveal="heading"] { --reveal-y: 18px; }
  .js [data-reveal="image"] { --reveal-y: 14px; --reveal-scale: .99; }
  .js [data-reveal="lateral"] { --reveal-x: -10px; }
}

/* System reduced motion retains brief fades, without spatial or continuous motion. */
html[data-motion="gentle"] *, html[data-motion="gentle"] *::before, html[data-motion="gentle"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-motion="gentle"] [data-opening], html[data-motion="gentle"] [data-reveal] { translate: none; scale: 1; }
html[data-motion="gentle"][data-opening-state="playing"] [data-opening] { animation: gentle-arrive 360ms ease-out var(--opening-delay) backwards !important; }
html[data-motion="gentle"] [data-reveal].is-visible { animation: gentle-arrive 360ms ease-out var(--reveal-delay, 0ms) backwards !important; }
html[data-motion="gentle"] .scene-piece { transform: rotate(var(--angle, 0deg)); }
html[data-motion="gentle"] [data-magnetic], html[data-motion="gentle"] .process-visual, html[data-motion="gentle"] .process-step:hover .process-illustration, html[data-motion="gentle"] .project-card:hover, html[data-motion="gentle"] .whatsapp-float:hover, html[data-motion="gentle"] .difference-words span:hover { transform: none !important; }
html[data-motion="gentle"] .marquee-track { transform: none; }
html[data-motion="gentle"] .marquee-toggle { display: none; }
html[data-motion="gentle"] .whatsapp-float::before { opacity: 0; }
html[data-motion="gentle"] [data-reveal]:focus-within, html[data-motion="gentle"] [data-opening]:focus-within { animation: none !important; }

/* This choice changes only the site, without overriding the OS by default. */
.motion-controls:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 36px; font: 13px/1.5 Arial, sans-serif; }
.motion-controls label { font-weight: 700; }
.motion-controls select { min-height: 44px; max-width: 100%; padding: 8px 32px 8px 12px; border: 1px solid #aaa3b4; border-radius: 4px; background: var(--ink); color: var(--paper); font: inherit; cursor: pointer; }
.motion-controls select:hover { border-color: var(--paper); }
.motion-controls #motion-status { color: #c9c2b9; }

html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
html[data-motion="reduced"] [data-reveal], html[data-motion="reduced"] .reveal-pending { opacity: 1; translate: none; scale: 1; }
html[data-motion="reduced"] [data-magnetic], html[data-motion="reduced"] .project-card:hover, html[data-motion="reduced"] .whatsapp-float:hover, html[data-motion="reduced"] .difference-words span:hover { transform: none !important; }
html[data-motion="reduced"] .scene-piece { transform: rotate(var(--angle, 0deg)); }
html[data-motion="reduced"] .process-visual, html[data-motion="reduced"] .process-step:nth-child(even) .process-visual, html[data-motion="reduced"] .process-step:hover .process-illustration { transform: none; }
html[data-motion="reduced"] .whatsapp-float::before { opacity: 0; }
html[data-motion="reduced"] .marquee-track { transform: none; }
html[data-motion="reduced"] .marquee-toggle { display: none; }

/* Static fallback when JavaScript is disabled or blocked. */
@media (prefers-reduced-motion: reduce) {
html:not([data-motion]) *, html:not([data-motion]) *::before, html:not([data-motion]) *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
html:not([data-motion]) [data-reveal], html:not([data-motion]) .reveal-pending { opacity: 1; translate: none; scale: 1; }
html:not([data-motion]) [data-magnetic], html:not([data-motion]) .project-card:hover, html:not([data-motion]) .whatsapp-float:hover, html:not([data-motion]) .difference-words span:hover { transform: none !important; }
html:not([data-motion]) .scene-piece { transform: rotate(var(--angle, 0deg)); }
html:not([data-motion]) .process-visual, html:not([data-motion]) .process-step:nth-child(even) .process-visual, html:not([data-motion]) .process-step:hover .process-illustration { transform: none; }
html:not([data-motion]) .whatsapp-float::before { opacity: 0; }
html:not([data-motion]) .marquee-track { transform: none; }
html:not([data-motion]) .marquee-toggle { display: none; }
}