/* A slower rhythm: native scrolling, eased depth, and independent object motion. */
:root { --tilt-follow: 850ms; --tilt-return: 1600ms; --fast: 480ms; --art-ease: cubic-bezier(.22,1,.36,1); }
.motion-ready .reveal-block { transition: transform 850ms var(--art-ease), opacity 850ms var(--art-ease); }
.motion-ready .chapter { transition: transform 900ms var(--art-ease), clip-path 900ms var(--art-ease); }
.motion-ready .service-item:nth-child(2) { transition-delay: 90ms; }
.motion-ready .service-item:nth-child(3) { transition-delay: 160ms; }
.directory-symbol { perspective: 500px; }
.directory-symbol svg { transform: rotateY(-14deg); filter: drop-shadow(3px 4px 0 #cfdeea); transition: transform 900ms var(--art-ease), filter 900ms var(--art-ease); }
.directory-link:hover .directory-symbol svg { transform: rotateY(22deg) rotateZ(-8deg) translateY(-5px); filter: drop-shadow(5px 8px 0 #cfdeea); }
.directory-arrow, .service-link svg, .item-plus, .contact-disc svg { transition-duration: 650ms; }
.service-trigger { transition: background-color 650ms var(--art-ease), box-shadow 650ms var(--art-ease); }
.support-item .service-trigger:hover { background: #f9fbfd; box-shadow: 0 12px 25px #173d6010; }
.infra-item .service-trigger:hover { background: #28516e; box-shadow: 0 12px 25px #061c302b; }
.infra-symbol { transition: transform 850ms var(--art-ease); filter: drop-shadow(3px 4px 0 #102f48); }
.service-trigger:hover .infra-symbol { transform: perspective(400px) rotateY(-22deg) rotateZ(-7deg) translateY(-4px); }
.server-object { animation: server-breathe 9s ease-in-out infinite; animation-play-state: paused; }
@keyframes server-breathe { 0%,100% { transform: translateZ(46px) rotateY(-16deg) rotateX(4deg); } 50% { transform: translateY(-10px) translateZ(56px) rotateY(-8deg) rotateX(7deg); } }
.motion-token { width: 62px; height: 62px; z-index: 4; pointer-events: none; perspective: 600px; }
.token-face { width: 100%; height: 100%; display: grid; place-items: center; color: #1f6fa3; background: #e1f0fa; border-radius: 20px; border-right: 5px solid #6cbfea; border-bottom: 6px solid #b2dcf3; box-shadow: 9px 14px 20px #173d601a; animation: token-float 8s ease-in-out infinite; animation-play-state: paused; }
.token-face svg { width: 29px; height: 29px; }
.token-trust { left: 8%; top: 37px; }
.token-tools { right: 0; top: 16px; width: 58px; height: 58px; }
.token-tools .token-face { background: #e3edf5; color: #275f8d; border-color: #afc6d8; animation-delay: -2s; animation-duration: 10s; }
.token-cloud { right: -6px; top: -53px; }
.token-cloud .token-face { animation-delay: -4s; }
.token-web { right: -9px; top: -16px; width: 54px; height: 54px; }
.token-web .token-face { animation-delay: -3s; }
.token-custom { right: 12%; top: 10px; width: 50px; height: 50px; }
.token-custom .token-face { background: #e6eff6; color: #275f8d; border-color: #b7cbdc; animation-delay: -5s; }
@keyframes token-float { 0%,100% { transform: translateY(4px) rotateX(8deg) rotateY(-20deg) rotateZ(-8deg); } 50% { transform: translateY(-12px) rotateX(-8deg) rotateY(14deg) rotateZ(6deg); } }
.scene-active .token-face, .scene-active .server-object { animation-play-state: running; }
.support-disc { transform: translateX(var(--scene-drift,0px)) scale(calc(.96 + var(--section-enter,1) * .04)); transition: transform 900ms var(--art-ease); }
.pass-surface { transform: perspective(800px) rotateX(var(--art-rx,0deg)) rotateY(calc(-14deg + var(--art-ry,0deg))) rotateZ(8deg); transition: transform 1100ms var(--art-ease); }
.infra-stack { transform: rotateY(calc(-18deg + var(--scene-turn,0deg) + var(--art-ry,0deg))) rotateX(calc(7deg + var(--art-rx,0deg))) rotateZ(-4deg); transition: transform 1000ms var(--art-ease); }
.infra-unit:nth-child(2) { transform: translateX(calc(14px + var(--scene-drift,0px) * .35)); }
.infra-unit:nth-child(3) { transform: translateX(calc(28px + var(--scene-drift,0px) * .7)); }
.browser-object { transform: translateY(var(--layer-y,0px)) perspective(1000px) rotateX(var(--art-rx,0deg)) rotateY(calc(var(--art-ry,0deg) + var(--scene-turn,0deg) * .35)); transition: transform 750ms var(--art-ease); }
.browser-mobile { transform: translateY(calc(var(--scene-drift,0px) * -.45)) rotateZ(5deg); transition: transform 850ms var(--art-ease); }
.mail-art .mail-object { transform: translateY(var(--layer-y,0px)) rotateX(var(--art-rx,0deg)) rotateY(calc(-12deg + var(--art-ry,0deg))) rotateZ(calc(-9deg + var(--scene-turn,0deg) * .5)); transition: transform 850ms var(--art-ease); }
.module { transform: translateY(var(--layer-y,0px)) perspective(800px) rotateX(var(--art-rx,0deg)) rotateY(calc(var(--art-ry,0deg) + var(--scene-turn,0deg))) rotateZ(-3deg); transition: transform 900ms var(--art-ease), box-shadow 900ms var(--art-ease); }
.custom-art:hover .module { box-shadow: 14px 22px 25px #173d6020; }
.contact-disc { transform: translateY(var(--layer-y,0px)) rotateX(var(--art-rx,0deg)) rotateY(calc(var(--art-ry,0deg) + var(--scene-turn,0deg))); transition: transform 950ms var(--art-ease); }
/* Slow entry of the content follows the modal's own arrival. */
.service-dialog-enter .dialog-service-mark { animation: dialog-mark-arrive 1100ms var(--art-ease) both; }
.service-dialog-enter .dialog-intro, .service-dialog-enter li, .service-dialog-enter .dialog-fit, .service-dialog-enter .dialog-contact { animation: dialog-content-arrive 650ms var(--art-ease) both; }
.service-dialog-enter .dialog-intro { animation-delay: 100ms; }
.service-dialog-enter li:nth-child(1) { animation-delay: 170ms; }
.service-dialog-enter li:nth-child(2) { animation-delay: 260ms; }
.service-dialog-enter li:nth-child(3) { animation-delay: 350ms; }
.service-dialog-enter .dialog-fit { animation-delay: 400ms; }
.service-dialog-enter .dialog-contact { animation-delay: 450ms; }
@keyframes dialog-content-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dialog-mark-arrive { from { opacity: 0; transform: perspective(500px) rotateY(-55deg) rotateZ(-14deg) translateY(14px); } to { opacity: 1; transform: perspective(500px) rotateY(0deg) rotateZ(-5deg) translateY(0); } }
body.page-idle .token-face, body.page-idle .server-object, body.swal2-shown .token-face, body.swal2-shown .server-object { animation-play-state: paused; }
@media (max-width:800px) {
  .motion-token { width: 46px; height: 46px; }
  .token-face { border-radius: 15px; border-right-width: 4px; border-bottom-width: 4px; }
  .token-face svg { width: 24px; height: 24px; }
  .token-trust { top: 23px; left: 6%; }
  .token-tools { right: 5px; top: 25px; }
  .token-cloud { top: -35px; right: -3px; }
  .token-web { top: -10px; right: -8px; }
  .token-custom { top: 15px; right: 12%; }
  .infra-unit:nth-child(2) { transform: translateX(calc(10px + var(--scene-drift,0px) * .25)); }
  .infra-unit:nth-child(3) { transform: translateX(calc(20px + var(--scene-drift,0px) * .5)); }
}
body.motion-off *, body.motion-off *::before, body.motion-off *::after { animation: none !important; transition: none !important; }
body.motion-off .token-face { transform: rotateY(-15deg) rotateZ(-5deg); }
body.motion-off .server-object { transform: translateZ(46px) rotateY(-16deg) rotateX(4deg); }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .token-face { transform: rotateY(-15deg) rotateZ(-5deg); }
}