/* ============================================================ OSS YOGA · MOTION SYSTEM Vocabulário único de movimento. Intensidade controlada por . ============================================================ */ :root { --m-ease: cubic-bezier(0.22, 1, 0.36, 1); --m-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --m-dur-fast: 0.55s; --m-dur-base: 0.85s; --m-dur-slow: 1.2s; --m-shift: 28px; } /* Intensidade por página (sobrescreve via data-motion) */ body[data-motion="soft"] { --m-shift: 14px; --m-dur-base: 0.55s; } body[data-motion="medium"] { --m-shift: 22px; --m-dur-base: 0.75s; } body[data-motion="strong"] { --m-shift: 36px; --m-dur-base: 1.0s; } /* Estado inicial: invisível, ligeiramente abaixo */ [data-reveal] { opacity: 0; transform: translate3d(0, var(--m-shift), 0); transition: opacity var(--m-dur-base) var(--m-ease), transform var(--m-dur-base) var(--m-ease); will-change: opacity, transform; } [data-reveal="scale"] { transform: translate3d(0, 0, 0) scale(0.965); } [data-reveal="left"] { transform: translate3d(calc(var(--m-shift) * -1), 0, 0); } [data-reveal="right"] { transform: translate3d(var(--m-shift), 0, 0); } /* Estado revelado */ [data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } /* Escalonamento (stagger) */ [data-stagger="1"] { transition-delay: 0.06s; } [data-stagger="2"] { transition-delay: 0.14s; } [data-stagger="3"] { transition-delay: 0.22s; } [data-stagger="4"] { transition-delay: 0.30s; } [data-stagger="5"] { transition-delay: 0.38s; } [data-stagger="6"] { transition-delay: 0.46s; } /* "Respiração" lenta em imagens de fundo / heroes */ .m-breath { animation: m-breath 16s var(--m-ease-soft) infinite alternate; transform-origin: center 55%; } @keyframes m-breath { from { transform: scale(1.00); } to { transform: scale(1.045); } } /* Compatibilidade com a antiga classe .fi do main.js */ .fi { opacity: 0; transform: translate3d(0, var(--m-shift), 0); transition: opacity var(--m-dur-base) var(--m-ease), transform var(--m-dur-base) var(--m-ease); } .fi.in, .fi.is-in { opacity: 1; transform: translate3d(0, 0, 0); } /* ============================================================ VÍDEO DE APRESENTAÇÃO (cursos) Bloco reutilizável:
Usa var(--page-accent) automaticamente em cada página. ============================================================ */ .video-intro{ background:#0f1a14; padding:90px 0; position:relative; border-top:1px solid rgba(201,169,79,.08); } .video-intro::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 50% 0%,rgba(201,169,79,.05),transparent 55%); } .video-intro-inner{ max-width:980px;margin:0 auto;padding:0 24px; position:relative;z-index:1; } .video-intro-head{text-align:center;max-width:680px;margin:0 auto 44px} .v-eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:Helvetica,Arial,sans-serif;font-size:.7rem;letter-spacing:3px; text-transform:uppercase;font-weight:500; color:var(--page-accent,#c9a94f);margin-bottom:18px; } .v-eyebrow::before{ content:"";width:32px;height:1px;background:var(--page-accent,#c9a94f); } .video-intro-head h2{ font-family:Georgia,serif;font-weight:300; font-size:clamp(2rem,4vw,3rem);line-height:1.1; color:#f5f1e8;margin:0 0 14px; } .video-intro-head h2 em{color:var(--page-accent,#c9a94f);font-style:italic} .video-intro-head p{ color:rgba(245,241,232,.62);font-size:1rem;line-height:1.7; font-family:Georgia,serif;margin:0; } .video-frame{ position:relative;width:100%;aspect-ratio:16/9; border-radius:14px;overflow:hidden; background:#0a0a08; box-shadow:0 24px 60px rgba(0,0,0,.55); } .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .video-placeholder{ position:absolute;inset:0; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px; background: radial-gradient(circle at 50% 50%,rgba(201,169,79,.10),transparent 60%), linear-gradient(135deg,#16221b 0%,#0a1410 100%); } .video-placeholder-icon{ width:84px;height:84px;border-radius:50%; border:1.5px solid var(--page-accent,#c9a94f); display:flex;align-items:center;justify-content:center; color:var(--page-accent,#c9a94f); padding-left:6px; } .video-placeholder-icon svg{width:26px;height:26px;fill:currentColor} .video-placeholder-text{ font-family:Helvetica,Arial,sans-serif;font-size:.7rem;letter-spacing:3px; text-transform:uppercase;color:var(--page-accent,#c9a94f);opacity:.85; } /* ============================================================ INVESTIMENTO · SOB CONSULTA Bloco usado nas páginas de curso/formação no lugar dos cards de preço. Usa var(--page-accent) automaticamente. ============================================================ */ .invest-consulta{ max-width:720px;margin:0 auto;padding:48px 40px;text-align:center; background:rgba(13,26,16,.55); border:1px solid var(--page-accent,#c9a94f); border-color:color-mix(in srgb, var(--page-accent,#c9a94f) 30%, transparent); } .invest-consulta-tag{ font-family:Helvetica,Arial,sans-serif;font-size:.62rem;letter-spacing:3px; text-transform:uppercase;color:var(--page-accent,#c9a94f);font-weight:700; margin-bottom:14px; } .invest-consulta-title{ font-family:Georgia,serif;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:300; color:#f5f1e8;line-height:1.15;margin:0 0 18px; } .invest-consulta-title em{color:var(--page-accent,#c9a94f);font-style:italic} .invest-consulta-desc{ font-size:.95rem;color:rgba(245,241,232,.7);line-height:1.75; max-width:540px;margin:0 auto 28px;font-family:Georgia,serif; } .invest-consulta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .invest-consulta-btns .btn{min-width:180px} @media(max-width:560px){ .invest-consulta{padding:36px 24px} .invest-consulta-btns{flex-direction:column;width:100%} .invest-consulta-btns .btn{width:100%} } /* Acessibilidade: respeita preferência do sistema */ @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal].is-in, .fi, .fi.in, .fi.is-in { opacity: 1 !important; transform: none !important; transition: none !important; } .m-breath { animation: none !important; } html { scroll-behavior: auto !important; } }