/* ========================================================================= AVENTUR ECO TURISMO — motion.css Estados de revelação, keyframes e camadas de parallax. Toda animação daqui é suprimida em prefers-reduced-motion. ========================================================================= */ /* ------------------------------------------------- REVEAL (IO-driven) */ /* Tudo aqui é prefixado por `.js`, classe que o próprio documento ganha na primeira linha do . Sem script — desligado, bloqueado ou quebrado — nenhum elemento nasce invisível e a página continua legível. */ [data-reveal] { --rv-delay: calc(var(--i, 0) * 90ms); will-change: transform, opacity; } .js [data-reveal="up"] { opacity: 0; translate: 0 clamp(28px, 5vh, 60px); transition: opacity 0.9s var(--ease-out) var(--rv-delay), translate 1.05s var(--ease-out) var(--rv-delay); } .js [data-reveal="fade"] { opacity: 0; transition: opacity 1.1s var(--ease-out) var(--rv-delay); } .js [data-reveal="scale"] { opacity: 0; scale: 1.09; transition: opacity 1s var(--ease-out) var(--rv-delay), scale 1.4s var(--ease-out) var(--rv-delay); } .js [data-reveal="left"] { opacity: 0; translate: -42px 0; transition: opacity 0.9s var(--ease-out) var(--rv-delay), translate 1.05s var(--ease-out) var(--rv-delay); } .js [data-reveal="right"] { opacity: 0; translate: 42px 0; transition: opacity 0.9s var(--ease-out) var(--rv-delay), translate 1.05s var(--ease-out) var(--rv-delay); } /* Cortina orgânica: a imagem se revela por baixo de uma máscara curva. */ .js [data-reveal="curtain"] { clip-path: inset(0 0 100% 0 round var(--radius-l)); transition: clip-path 1.35s var(--ease-in-out) var(--rv-delay); } .js [data-reveal="curtain"] > img, .js [data-reveal="curtain"] > video, .js [data-reveal="curtain"] > picture > img { scale: 1.24; transition: scale 1.9s var(--ease-out) var(--rv-delay); } .is-in[data-reveal] { opacity: 1; translate: 0 0; scale: 1; } .is-in[data-reveal="curtain"] { clip-path: inset(0 0 0 0 round var(--radius-l)); } .is-in[data-reveal="curtain"] > img, .is-in[data-reveal="curtain"] > video, .is-in[data-reveal="curtain"] > picture > img { scale: 1; } .is-in .kicker { --kicker-scale: 1; } .js .kicker { --kicker-scale: 0; } .is-in.kicker, .is-in .kicker { --kicker-scale: 1; } /* ------------------------------------------- SPLIT TEXT (linhas/palavras) */ .split-line { display: block; overflow: hidden; padding-block: 0.04em; margin-block: -0.04em; } .js .split-line > span { display: block; translate: 0 110%; rotate: 2.4deg; transform-origin: left top; transition: translate 1.1s var(--ease-out) var(--sl-delay, 0ms), rotate 1.1s var(--ease-out) var(--sl-delay, 0ms), opacity 0.7s linear var(--sl-delay, 0ms); opacity: 0; } .is-in .split-line > span { translate: 0 0; rotate: 0deg; opacity: 1; } .js .split-word { display: inline-block; translate: 0 0.55em; opacity: 0; filter: blur(6px); transition: translate 0.85s var(--ease-out) var(--sw-delay, 0ms), opacity 0.65s var(--ease-out) var(--sw-delay, 0ms), filter 0.85s var(--ease-out) var(--sw-delay, 0ms); } .is-in .split-word { translate: 0 0; opacity: 1; filter: blur(0); } /* --------------------------------------------------------- PARALLAX */ /* O JS escreve --p (progresso 0→1) e --par (deslocamento em px). */ [data-parallax] { will-change: transform; transform: translate3d(0, var(--par, 0px), 0); } [data-parallax-scale] { will-change: transform; transform: translate3d(0, var(--par, 0px), 0) scale(var(--pscale, 1)); } .layer { position: absolute; inset: 0; pointer-events: none; } .layer > * { position: absolute; } /* --------------------------------------------------------- KEYFRAMES */ @keyframes grain-shift { 0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-6%, 4%, 0); } 40% { transform: translate3d(4%, -5%, 0); } 60% { transform: translate3d(-3%, 6%, 0); } 80% { transform: translate3d(5%, 2%, 0); } 100% { transform: translate3d(0, 0, 0); } } @keyframes float-soft { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -14px, 0) rotate(1.6deg); } } @keyframes sway { 0%, 100% { transform: rotate(-2.4deg); } 50% { transform: rotate(2.4deg); } } @keyframes pulse-ring { 0% { transform: scale(0.85); opacity: 0.75; } 70% { transform: scale(2.1); opacity: 0; } 100% { transform: scale(2.1); opacity: 0; } } @keyframes scroll-cue { 0% { transform: translateY(-70%); opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(150%); opacity: 0; } } @keyframes marquee-x { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes blob-morph { 0%, 100% { border-radius: 62% 38% 46% 54% / 54% 44% 56% 46%; } 33% { border-radius: 42% 58% 63% 37% / 39% 62% 38% 61%; } 66% { border-radius: 55% 45% 34% 66% / 62% 36% 64% 38%; } } @keyframes shimmer-line { 0% { transform: translateX(-110%); } 100% { transform: translateX(210%); } } @keyframes spin-slow { to { transform: rotate(360deg); } } @keyframes wave-slide { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } @keyframes fade-up-in { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes ken-burns { 0% { transform: scale(1.02) translate3d(0, 0, 0); } 100% { transform: scale(1.16) translate3d(-1.5%, -1.5%, 0); } } /* ------------------------------------------------- CLASSES DE ANIMAÇÃO */ .anim-float { animation: float-soft 7s var(--ease-in-out) infinite; } .anim-sway { animation: sway 6.5s var(--ease-in-out) infinite; transform-origin: 50% 0%; } .anim-spin-slow { animation: spin-slow 26s linear infinite; } .anim-blob { animation: blob-morph 16s var(--ease-in-out) infinite; } .anim-ken { animation: ken-burns 22s var(--ease-in-out) infinite alternate; } /* ------------------------------------------------ REDUÇÃO DE MOVIMENTO */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-reveal], .split-line > span, .split-word { opacity: 1 !important; translate: 0 0 !important; scale: 1 !important; rotate: 0deg !important; filter: none !important; clip-path: none !important; } [data-parallax], [data-parallax-scale] { transform: none !important; } .grain, .noise-veil, .particles { display: none !important; } }