/* Movimento e profundidade. Carregado depois do style.css; o JS (motion.js) cuida da parte que depende de scroll. */
/* cores das manchas de luz (kit) */
:root{--cue-ink:var(--accent-ink);--orb-a:oklch(87% .11 78/.55);--orb-b:oklch(70% .15 40/.3)}
@property --sun-y{syntax:'<length>';inherits:true;initial-value:0px}
html.lenis{scroll-behavior:auto!important}

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

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

/* Sol: sobe com o scroll e respira */
.hero-visual::before{translate:0 var(--sun-y);animation:rise-sun 1.6s cubic-bezier(.16,1,.3,1) both,breathe 7s ease-in-out 1.6s infinite}
@keyframes breathe{50%{scale:1.07;opacity:.92}}

/* Luz que acompanha o cursor nas faixas azuis */
.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%),oklch(100% 0 0/.10),transparent 65%)}

/* Ondas entre as seções */
.wave{position:relative;overflow:hidden;line-height:0;height:clamp(34px,5vw,72px);margin-top:-1px}
.wave.down{transform:scaleY(-1)}
.wave.up{margin-top:0;margin-bottom:-1px}
.wave svg{position:absolute;left:0;bottom:0;width:200%;max-width:none;height:100%;animation:wave 16s linear infinite}
.wave svg+svg{animation-duration:10s;animation-direction:reverse}
.wave path{fill:var(--sea)}
.wave svg:first-child path{fill:oklch(42% .07 238)}
@keyframes wave{to{translate:-50% 0}}

/* Faixa de frases que corre */
.marquee{overflow:hidden;padding-block:clamp(18px,2.4vw,30px);background:var(--sand);border-block:1px solid var(--line)}
.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:-.03em;white-space:nowrap;color:var(--sea)}
.marquee i{flex:none;width:clamp(10px,1.2vw,16px);aspect-ratio:1;border-radius:50%;background:var(--coral)}

/* Manchas de luz atrás das seções claras */
.jornada,.pro{position:relative;overflow:hidden}
.jornada>.container,.pro>.container{position:relative}
.jornada::before,.pro::before{content:'';position:absolute;width:clamp(320px,42vw,620px);aspect-ratio:1;border-radius:50%;pointer-events:none;animation:drift 16s ease-in-out infinite alternate}
.jornada::before{background:radial-gradient(circle,var(--sun),transparent 68%);opacity:.55;right:-10%;top:-30%}
.pro::before{background:radial-gradient(circle,oklch(82% .1 40/.45),transparent 68%);left:-14%;bottom:-30%;animation-delay:-6s}
@keyframes drift{to{translate:-60px 50px;scale:1.15}}

/* 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%)}
.step-card.tilt:hover,.info-card.tilt:hover{box-shadow:0 24px 50px -24px oklch(25% .07 240/.35)}
.step-card,.info-card{transition:box-shadow .4s}

/* 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}
}

@media(prefers-reduced-motion:reduce){.hero-visual::before,.wave svg,.jornada::before,.pro::before{animation:none}}

/* Agendamento: brilho solar atrás da abertura e cartões de escolha que reagem */
.book-intro{position:relative}
.book-intro::before{content:'';position:absolute;width:clamp(260px,34vw,480px);aspect-ratio:1;right:0;top:-40%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,var(--sun),transparent 68%);opacity:.5;animation:drift 14s ease-in-out infinite alternate;z-index:-1}
.choice,.day,.slot{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,background .2s,color .2s,border-color .2s}
@media(hover:hover){.choice:hover,.day:hover,.slot:hover{transform:translateY(-3px);box-shadow:0 14px 28px -16px oklch(25% .07 240/.4)}}
.slot[aria-pressed="true"],.day[aria-pressed="true"]{transform:scale(1.04)}
.step legend span{display:inline-block;transition:transform .5s cubic-bezier(.16,1,.3,1),color .3s}
.step:not([inert]) legend span{transform:scale(1.15);color:var(--coral)}