/* ==========================================================================
   AVM Paisagismo · motion.css
   Estados iniciais das transições. Só valem quando motion.js marcou o <html>:
   .motion     → GSAP + ScrollTrigger ativo
   .motion-io  → sem GSAP: fallback com IntersectionObserver + transições CSS
   .intro-pending → abertura (some sozinha em 3,5s se algo falhar)
   Com prefers-reduced-motion nada disso é aplicado.
   ========================================================================== */

/* ---------- Abertura ---------- */
.intro-pending .intro,
.intro-run .intro {
	display: grid;
	place-items: center;
	position: absolute;
	inset: 0;
	z-index: 8;
	background: var(--floresta);
	pointer-events: none;
}
.intro__leaf {
	width: clamp(80px, 12vw, 130px);
	fill: none;
	stroke: rgba(250, 248, 243, .9);
	stroke-width: 1.25;
	stroke-linecap: round;
}
.intro__leaf path { stroke-dasharray: 600; stroke-dashoffset: 600; }
.intro-pending .hero__label,
.intro-pending .hero__sub,
.intro-pending .hero__actions,
.intro-pending .scroll-cue,
.intro-pending .hero .hour { opacity: 0; }
.intro-pending .hero__title .line__in { transform: translateY(112%); }
.intro-pending .hero .frame { opacity: 0; }
.intro-pending .site-header { opacity: 0; }

/* Raios de luz passam uma vez (CSS puro, usado também no fallback) */
.motion .hero__rays, .motion-io .hero__rays { opacity: 0; }
.rays-pass .hero__rays { animation: rays-pass 3.2s var(--ease) forwards; }
@keyframes rays-pass {
	0% { opacity: 0; transform: translateX(-14%); }
	35% { opacity: .75; }
	100% { opacity: .42; transform: translateX(3%); }
}

/* ---------- Bloco "da planta ao 3D" (só com GSAP: palco sticky, rolagem nativa) ---------- */
.motion .planta { height: 260vh; }
.motion .planta__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: calc(var(--header-h) + 8px) 24px;
	overflow: hidden;
}
.motion .planta__head { margin-bottom: 1.2rem; }
.motion .planta__head .h2 { font-size: clamp(1.9rem, 4.2vw, 3.4rem); }
.motion .planta--overlay .planta__stage {
	display: block;
	aspect-ratio: 3 / 2;
	width: min(92vw, 1120px, calc((100svh - 380px) * 1.5));
}
.motion .planta--overlay .planta__layer { position: absolute; inset: 0; }
.motion .planta--overlay .planta__render { clip-path: circle(0% at 50% 50%); box-shadow: none; }
.motion .planta--overlay .planta__wave {
	display: block;
	position: absolute;
	left: 50%; top: 50%;
	width: 160%; aspect-ratio: 1;
	transform: translate(-50%, -50%) scale(.02);
	border-radius: 50%;
	border: 2px solid var(--luz);
	box-shadow: 0 0 60px rgba(243, 199, 122, .45), inset 0 0 60px rgba(243, 199, 122, .35);
	opacity: 0;
	pointer-events: none;
}
.motion .planta--side .planta__stage { width: min(92vw, 1180px, calc((100svh - 380px) * 3)); }
.motion .planta--side .planta__render { clip-path: inset(0 100% 0 0 round var(--radius)); }
.motion .planta__caption { margin-top: 1.2rem; }
@media (max-width: 767.98px) {
	.motion .planta--side .planta__stage { grid-template-columns: 1fr; width: min(92vw, calc((100svh - 330px) * .75)); }
}

/* ---------- Fallback sem GSAP ---------- */
.motion-io .reveal,
.motion-io .reveal-grow,
.motion-io .deliv__item,
.motion-io .step,
.motion-io .gallery__item,
.motion-io .space,
.motion-io .info,
.motion-io .juliana__portrait {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.2s var(--ease), transform 1.4s var(--ease), clip-path 1.6s var(--ease);
}
.motion-io .reveal-grow { clip-path: inset(100% 0 0 0); transform: none; }
.motion-io .juliana__portrait { clip-path: inset(100% 0 0 0 round 999px 999px 0 0); transform: none; }
.motion-io .in { opacity: 1 !important; transform: none !important; clip-path: inset(0 0 0 0) !important; }
.motion-io .juliana__portrait.in { clip-path: inset(0 0 0 0 round 0) !important; }
.motion-io .noite__title .line__in { transform: translateY(110%); transition: transform 1.6s var(--ease); }
.motion-io .noite.in .noite__title .line__in { transform: none; }
.motion-io .noite .glow { opacity: 0; transition: opacity 1.4s var(--ease); transition-delay: calc(var(--i) * .35s + .4s); }
.motion-io .noite.in .glow { opacity: .8; }

/* Ícones e aspas desenhados em traço */
.motion .icon--draw path, .motion .icon--draw rect, .motion .icon--draw circle,
.motion-io .icon--draw path, .motion-io .icon--draw rect, .motion-io .icon--draw circle {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
.motion-io .in .icon--draw path, .motion-io .in .icon--draw rect, .motion-io .in .icon--draw circle,
.motion-io .deliv__item.in .icon--draw * { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease); }
.quotes__mark.is-drawing path { stroke-dasharray: 1; animation: draw 1.8s var(--ease) forwards; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Luz de fim de tarde varrendo o retrato */
.motion .arch__light, .motion-io .arch__light { transform: translateX(60%); opacity: 0; }
.motion-io .juliana__portrait.in .arch__light { transform: none; opacity: 1; transition: transform 2s var(--ease) .6s, opacity 2s var(--ease) .6s; }

@media (prefers-reduced-motion: reduce) {
	.intro-pending .intro { display: none; }
	.motion .planta, .motion-io .planta { height: auto; }
}