/* Base do kit de movimento: o que todo site usa. A identidade de cada site fica no motion.css dele.
   Variáveis opcionais por site: --mq-bg, --mq-ink, --mq-dot (faixa), --glow (luz do cursor). */
html.lenis{scroll-behavior:auto!important}

.progress{position:fixed;inset:0 0 auto;height:3px;z-index:60;background:linear-gradient(90deg,var(--btn-bg,var(--accent)),var(--glow-2,var(--accent-text,var(--accent))));transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* Palavras dos títulos sobem de dentro de uma máscara */
/* Folga de acentos, caudas e itálico: a máscara e o preenchimento do brilho cobrem tudo que a letra desenha, e as margens negativas mantêm o espaçamento original */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.3em .12em .22em;margin:-.3em -.12em -.22em}
.w>span{display:inline-block;will-change:transform;padding:.3em .12em .22em;margin:-.3em -.12em -.22em}

/* A entrada agora é do GSAP */
.motion .hero-copy,.motion .hero-copy>*,.motion .hero-photo,.motion .hero-photo img,.motion .hero h1 em{animation:none}

/* Luz que acompanha o cursor nas faixas de cor */
.drench{position:relative}
.drench::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--lx,78%) var(--ly,28%),var(--glow,oklch(100% 0 0/.10)),transparent 65%)}

/* Faixa de frases que corre */
.marquee{overflow:hidden;padding-block:clamp(16px,2.2vw,28px);background:var(--mq-bg,var(--accent-soft));color:var(--mq-ink,var(--ink))}
.marquee-track{display:flex;align-items:center;gap:clamp(22px,3vw,44px);width:max-content;will-change:transform}
.marquee span{font:var(--hw,700) clamp(26px,4vw,54px)/1 var(--serif);letter-spacing:-.02em;white-space:nowrap}
.marquee i{flex:none;width:clamp(10px,1.2vw,16px);aspect-ratio:1;border-radius:50%;background:var(--mq-dot,currentColor)}

/* Cartões 3D */
.tilt{transform-style:preserve-3d;will-change:transform}
.tilt:hover{background-image:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%),oklch(100% 0 0/.22),transparent 70%)}

/* Dúvidas abrem deslizando */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  details::details-content{block-size:0;overflow:clip;transition:block-size .5s cubic-bezier(.16,1,.3,1),content-visibility .5s allow-discrete}
  details[open]::details-content{block-size:auto}
}

@keyframes drift{to{translate:-60px 50px;scale:1.15}}
@keyframes breathe{50%{scale:1.07;opacity:.92}}

/* ===== Vida em repouso =====
   Tudo pausado por padrão; só anda quando a seção está na tela (.is-live). Cores por site: --orb-a, --orb-b. */
@media(prefers-reduced-motion:no-preference){
  main>section{position:relative;isolation:isolate}

  /* Fotos respiram: zoom e deriva muito lentos */
  .kb{animation:kb 13s ease-in-out var(--kd,0s) infinite alternate;animation-play-state:paused}
  .is-live .kb{animation-play-state:running}
  @keyframes kb{to{scale:1.16;translate:-3.2% -2.4%}}

  /* Fotos de cartão: o enquadramento passeia pela imagem (sem sair da moldura) */
  .pan{animation:pan 8s ease-in-out var(--kd,0s) infinite alternate;animation-play-state:paused}
  .is-live .pan{animation-play-state:running}
  @keyframes pan{from{object-position:50% 6%}to{object-position:50% 94%}}

  /* Fotos soltas flutuam e inclinam de leve */
  .drift{animation:drift var(--dd,9s) ease-in-out infinite alternate;animation-play-state:paused}
  .is-live .drift{animation-play-state:running}
  @keyframes drift{to{translate:0 -12px;rotate:1.4deg}}

  /* Manchas de luz que derivam atrás das seções */
  .orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
  .orb{position:absolute;width:var(--s);aspect-ratio:1;border-radius:50%;opacity:.55;animation:orb var(--dur) ease-in-out var(--delay) infinite alternate;animation-play-state:paused}
  .orb-a{background:radial-gradient(circle,var(--orb-a,oklch(80% .1 80/.5)),transparent 68%)}
  .orb-b{background:radial-gradient(circle,var(--orb-b,oklch(70% .1 40/.4)),transparent 68%)}
  .is-live .orb{animation-play-state:running}
  @keyframes orb{to{translate:var(--dx) var(--dy);scale:1.3}}

  /* Cartões flutuam de leve, cada um no seu ritmo */
  .bob{animation:bob var(--bd,7s) ease-in-out infinite alternate;animation-play-state:paused}
  .is-live .bob{animation-play-state:running}
  @keyframes bob{to{translate:0 -7px}}

  /* Palavra de destaque dos títulos ganha um brilho que passa */
  .motion h1 em .w>span,.motion h2 em .w>span{background-image:linear-gradient(105deg,currentColor 42%,oklch(100% 0 0) 50%,currentColor 58%);background-size:260% 100%;background-position:130% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 7s ease-in-out infinite}
  .motion h2 em .w:nth-child(even)>span{animation-delay:-3s}
  @keyframes shine{0%,52%{background-position:130% 0}100%{background-position:-30% 0}}

  /* Botões de ação pulsam; WhatsApp também */
  .hero-actions .btn:not(.btn-ghost),.contact-actions .btn:not(.btn-ghost),.mbar .btn:not(.btn-ghost){animation:ring 2.9s ease-out infinite}
  @keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in oklch,var(--btn-bg,var(--accent)) 55%,transparent)}70%,100%{box-shadow:0 0 0 18px transparent}}
  .wa-float{animation:ring-wa 3.4s ease-out infinite}
  @keyframes ring-wa{0%{box-shadow:0 0 0 0 oklch(62% .17 150/.55)}70%,100%{box-shadow:0 0 0 20px transparent}}

  /* Setas dão uma batidinha chamando para o clique */
  .nudge{display:inline-block;animation:nudge 3.4s ease-in-out infinite}
  @keyframes nudge{0%,68%,100%{translate:0}82%{translate:6px}}

  /* Brilho que passa pelas fotos de tempos em tempos */
  .shine{position:relative;overflow:hidden}
  .shine::after{content:'';position:absolute;inset:-20%;pointer-events:none;z-index:2;background:linear-gradient(105deg,transparent 43%,oklch(100% 0 0/.3) 50%,transparent 57%);translate:-135% 0;animation:sheen 8s ease-in-out var(--sd,0s) infinite;animation-play-state:paused}
  .is-live .shine::after{animation-play-state:running}
  @keyframes sheen{0%{translate:-135% 0}30%,100%{translate:135% 0}}

  /* Indicador de rolagem do hero */
  .scroll-cue{position:fixed;left:50%;bottom:26px;z-index:25;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;font:600 12px/1 var(--sans,system-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--cue-ink,var(--ink));transition:opacity .5s,translate .5s}
  .scroll-cue.gone{opacity:0;translate:-50% 14px}
  .scroll-cue i{width:22px;height:36px;border:2px solid currentColor;border-radius:14px;position:relative;opacity:.8}
  .scroll-cue i::after{content:'';position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:currentColor;animation:wheel 1.8s ease-in-out infinite}
  @keyframes wheel{0%{translate:0 0;opacity:1}70%,100%{translate:0 12px;opacity:0}}
  @media(max-width:860px){.scroll-cue{bottom:86px}}

  /* Carrossel: pontinhos e convite para deslizar */
  .swipe-hint{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px;padding-inline:2px;font:600 13px/1 var(--sans,system-ui);color:var(--muted,inherit)}
  .swipe-text{display:inline-flex;align-items:center;gap:10px;transition:opacity .5s}
  .swipe-text b{display:inline-block;width:26px;height:2px;background:currentColor;position:relative;animation:swipe 1.6s ease-in-out infinite}
  .swipe-text b::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;rotate:45deg}
  @keyframes swipe{0%,100%{translate:0}50%{translate:8px}}
  .swipe-hint.touched .swipe-text{opacity:0}
  .swipe-dots{display:flex;gap:7px}
  .swipe-dots i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.28;transition:opacity .3s,width .3s}
  .swipe-dots i.on{opacity:1;width:22px;border-radius:4px;background:var(--btn-bg,var(--accent,currentColor))}

  /* Ondinha ao tocar */
  .ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;scale:0;animation:ripple .7s ease-out forwards}
  @keyframes ripple{to{scale:1;opacity:0}}
}

/* Assinatura no final de cada site */
.credit{display:flex;justify-content:center;align-items:center;gap:8px;padding:18px var(--gutter,20px) calc(26px + env(safe-area-inset-bottom));font:500 13px/1.4 var(--sans,system-ui);letter-spacing:.04em;color:var(--muted,inherit);text-align:center}
@media(max-width:860px){body:has(.mbar) .credit{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}
.credit a{font-weight:700;color:var(--credit-accent,var(--accent-text,var(--ink)));padding-bottom:2px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;transition:background-size .35s}
.credit a:hover{background-size:0 1.5px;background-position:100% 100%}
.credit .heart{display:inline-block;color:var(--btn-bg,var(--accent,currentColor));animation:beat 2.4s ease-in-out infinite}
@keyframes beat{0%,100%{scale:1}12%{scale:1.25}24%{scale:1}}