/* =============================================================================
   Solicitors Theme — animations & micro-interactions
   Scroll reveals, counters, header scroll state, hero motion, logo marquee.
   All effects are disabled under prefers-reduced-motion.
   ========================================================================== */

/* ---------- Scroll reveal ------------------------------------------------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="zoom"]  { transform: scale(.94); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Header scroll state ------------------------------------------- */
.site-header { transition: box-shadow .3s ease, padding .3s ease, background .3s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(22,32,58,.10); }
.site-header.is-scrolled .header__inner { min-height: 68px; }

/* ---------- Scroll cue (vertical traveling-light) ------------------------- */
.hero__cue {
	position: absolute; right: clamp(1.5rem, 4vw, 3.25rem); bottom: clamp(1.75rem, 4vw, 3rem); z-index: 3;
	display: flex; flex-direction: column; align-items: center; gap: .85rem;
	color: rgba(255,255,255,.7); transition: color var(--transition);
	opacity: 0; animation: heroIn .9s ease forwards; animation-delay: .85s;
}
.hero__cue:hover { color: var(--color-gold); }
.hero__cue-label { writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--font-head); font-size: .68rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
.hero__cue-line { position: relative; width: 1.5px; height: 64px; background: rgba(255,255,255,.22); overflow: hidden; border-radius: 2px; }
.hero__cue-line i { position: absolute; left: 0; top: 0; width: 100%; height: 45%; background: linear-gradient(var(--color-gold), rgba(192,160,98,0)); animation: cueTravel 1.9s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes cueTravel { 0% { transform: translateY(-110%); } 55%, 100% { transform: translateY(255%); } }

/* ---------- Parallax ------------------------------------------------------ */
[data-parallax] { will-change: transform; }

/* ---------- Hero motion (Ken Burns) --------------------------------------- */
.hero__bg img { animation: kenburns 20s ease-out infinite alternate; transform-origin: center; }
@keyframes kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.09); }
}
.hero__inner > * { opacity: 0; animation: heroIn .9s cubic-bezier(.22,.61,.36,1) forwards; }
.hero__inner > *:nth-child(1) { animation-delay: .15s; }
.hero__inner > *:nth-child(2) { animation-delay: .30s; }
.hero__inner > *:nth-child(3) { animation-delay: .45s; }
.hero__inner > *:nth-child(4) { animation-delay: .60s; }
@keyframes heroIn {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Stat icon entrance (only when JS has tagged it) --------------- */
.stat[data-reveal] .stat__icon { opacity: 0; transform: scale(.4) rotate(-18deg); }
.stat[data-reveal].is-visible .stat__icon { animation: statIcon .7s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: .12s; }
@keyframes statIcon { to { opacity: 1; transform: scale(1) rotate(0); } }

/* ---------- Counter (number pop) ------------------------------------------ */
.stat__num { transition: transform .4s ease; }
.is-visible .stat__num { animation: countPop .6s ease; }
@keyframes countPop {
	0% { transform: scale(.8); }
	60% { transform: scale(1.06); }
	100% { transform: scale(1); }
}

/* ---------- Card / button hover polish ------------------------------------ */
.card, .team-card, .btn, .quote, .stat { transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition); }
.card__more { transition: letter-spacing var(--transition), color var(--transition); }
.card:hover .card__more { letter-spacing: .03em; }
.btn { position: relative; overflow: hidden; }
.btn::after {
	content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
	transform: translateX(-120%); transition: transform .6s ease;
}
.btn:hover::after { transform: translateX(120%); }

/* (Nav-link underline now lives in main.css as a refined scaleX indicator.) */

/* ---------- Mobile nav panel transition ----------------------------------- */
.primary-nav .menu-item { opacity: 1; }
@media (max-width: 860px) {
	.primary-nav.is-open .menu-item { animation: navItemIn .4s ease forwards; opacity: 0; }
	.primary-nav.is-open .menu-item:nth-child(1) { animation-delay: .05s; }
	.primary-nav.is-open .menu-item:nth-child(2) { animation-delay: .10s; }
	.primary-nav.is-open .menu-item:nth-child(3) { animation-delay: .15s; }
	.primary-nav.is-open .menu-item:nth-child(4) { animation-delay: .20s; }
	.primary-nav.is-open .menu-item:nth-child(5) { animation-delay: .25s; }
	.primary-nav.is-open .menu-item:nth-child(6) { animation-delay: .30s; }
	@keyframes navItemIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
}

/* ---------- Reduced motion: disable everything ---------------------------- */
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
	.hero__bg img { animation: none !important; }
	.hero__inner > * { opacity: 1 !important; animation: none !important; }
	.is-visible .stat__num { animation: none !important; }
	.stat__icon, .stat[data-reveal] .stat__icon { opacity: 1 !important; transform: none !important; animation: none !important; }
	.btn::after { display: none; }
	.tcard__inner { transition: none !important; }
	.faqx__a.is-animating { transition: none !important; }
	.faqx__icon svg, .faqx__item::before { transition: none !important; }
	.tslider__track { transition: none !important; }
	.tslider__progress i { animation: none !important; }
	.lmarquee__track { animation: none !important; }
	.lmarquee { -webkit-mask-image: none; mask-image: none; }
	.prefooter__icon::after { animation: none !important; }
	* { scroll-behavior: auto !important; }
}