/* ===== Animações =====
   Só usam opacity/transform/translate/clip-path: nenhuma altera o layout.
   Estados iniciais valem apenas com JS (.js); .is-in dispara a entrada. */

/* Transição de página (cor do kit original: #FFBC7D)
   A cortina sobe sozinha por CSS (não depende de JS); ao clicar num link ela desce. */
.page-transition {
	position: fixed; inset: 0; z-index: 9999; background: var(--peach); pointer-events: none;
	transform: translateY(-100%); animation: curtain-up .9s cubic-bezier(.77, 0, .18, 1) .1s backwards;
}
body.is-leaving .page-transition { animation: curtain-down .55s cubic-bezier(.77, 0, .18, 1) forwards; }
@keyframes curtain-up { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes curtain-down { from { transform: translateY(100%); } to { transform: translateY(0); } }
html:not(.js) .page-transition { display: none; }

/* Cabeçalho entra de cima */
.js .site-header { animation: hdr-in .9s var(--ease) .5s both; }
@keyframes hdr-in { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }

/* Hero */
.js .hero__photo { opacity: 0; transform: translateY(40px) scale(.96); transition: opacity 1.2s var(--ease) .7s, transform 1.4s var(--ease) .7s; }
.js body.is-ready .hero__photo { opacity: 1; transform: none; }
.js .hero__word--dee { opacity: 0; translate: 120px 0; transition: opacity 1s var(--ease) 1.4s, translate 1.3s var(--ease) 1.4s; }
.js body.is-ready .hero__word--dee { opacity: 1; translate: 0 0; }
.hero__word--lara span::after { content: ''; }
.js .strip--white { translate: -110% 0; transition: translate 1.3s var(--ease) 1.1s; }
.js .strip--cream { translate: 110% 0; transition: translate 1.3s var(--ease) 1.25s; }
.js body.is-ready .strip { translate: 0 0; }
.js .strip h2 { opacity: 0; transition: opacity 1s .35s; }
.js body.is-ready .strip h2 { opacity: 1; }

/* Revelação ao rolar */
.js [data-animate] { opacity: 0; transition: opacity .9s var(--ease), transform .9s var(--ease), clip-path 1.2s var(--ease); transition-delay: var(--d, 0ms); will-change: transform, opacity; }
.js [data-animate].is-in { opacity: 1; transform: none; }
.js [data-animate="fade-up"]    { transform: translateY(40px); }
.js [data-animate="fade-left"]  { transform: translateX(60px); }
.js [data-animate="fade-right"] { transform: translateX(-60px); }
.js [data-animate="zoom"]       { transform: scale(.7); }
.js [data-animate="reveal-left"] { opacity: 1; clip-path: inset(0 100% 0 0); }
.js [data-animate="reveal-up"]   { opacity: 1; clip-path: inset(100% 0 0 0); }
.js [data-animate="reveal-left"].is-in, .js [data-animate="reveal-up"].is-in { clip-path: inset(0 0 0 0); }
.js [data-animate="reveal-left"] img { transform: scale(1.15); transition: transform 1.6s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-animate="reveal-left"].is-in img { transform: none; }
/* cartões do blog: as animações de entrada não devem brigar com o hover */
.blog-card-outer[data-animate].is-in { transition: opacity .9s var(--ease), transform .9s var(--ease); }


/* Ícones sociais flutuam levemente em loop no rodapé */
.social--footer li { animation: float 4s ease-in-out infinite; }
.social--footer li:nth-child(2) { animation-delay: .4s; } .social--footer li:nth-child(3) { animation-delay: .8s; } .social--footer li:nth-child(4) { animation-delay: 1.2s; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

/* Botão do CTA pulsa suavemente */
.cta .btn--cream { animation: nudge 3.2s ease-in-out 2s infinite; }
@keyframes nudge { 0%, 88%, 100% { box-shadow: 0 0 0 0 rgba(244, 236, 230, .0); } 92% { box-shadow: 0 0 0 0 rgba(244, 236, 230, .55); } 100% { box-shadow: 0 0 0 16px rgba(244, 236, 230, 0); } }

/* Linha preta da biografia se desenha */
.js .about__line { transform-origin: left center; transform: scaleX(0); transition: transform 1.4s var(--ease) .3s; }
.js .about__carousel.is-in .about__line { transform: scaleX(1); }

/* Reduz movimento */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
	.js [data-animate], .js .hero__photo, .js .strip, .js .strip h2 { opacity: 1 !important; transform: none !important; translate: none !important; clip-path: none !important; }
	.page-transition { display: none; }
}