/* Animations and transitions for the Editorial concept: slow, precise, rule-and-reveal. Disabled for prefers-reduced-motion. */

@keyframes fade-up { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mask-up { from { clip-path: inset(0 0 100% 0); transform: translateY(30px); } to { clip-path: inset(-10% -5% -10% -5%); transform: none; } }
@keyframes spin-slow { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* Hero: the headline (the LCP element) paints immediately; only secondary items animate, and only via transform/opacity. */
.hero .eyebrow, .hero .lead, .hero .button-row, .hero .trust-row, .hero .breadcrumbs, .hero .meta, .hero .contact-notes { animation: fade-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero .breadcrumbs { animation-delay: 0.02s; }
.hero .eyebrow { animation-delay: 0.05s; }
.hero .eyebrow::before { transform-origin: left; animation: rule-in 0.9s 0.3s cubic-bezier(0.7, 0, 0.2, 1) both; }
.hero .lead, .hero .meta { animation-delay: 0.2s; }
.hero .button-row { animation-delay: 0.3s; }
.hero .trust-row { animation-delay: 0.4s; }
.hero .contact-notes { animation-delay: 0.35s; }
.trust-row { transform-origin: left; }

/* The orange disc breathes; the decorative ring stays still (a 760px rotating gradient repaints continuously). */
.hero::after { animation: breathe 7s ease-in-out infinite; will-change: transform; }

/* Route boxes */
.hero-visual { animation: fade-up 1s 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; transition: box-shadow 0.4s, transform 0.4s; }
.hero-visual:hover { transform: translate(-4px, -4px); box-shadow: 18px 18px 0 rgba(14, 14, 14, 0.18); }
.route li { animation: fade-in 0.6s both; transition: background 0.25s, color 0.25s, transform 0.25s; }
.route--long li:nth-child(1) { animation-delay: 0.9s; }
.route--long li:nth-child(2) { animation-delay: 1.1s; }
.route--long li:nth-child(3) { animation-delay: 1.3s; }
.route--long li:nth-child(4) { animation-delay: 1.5s; }
.route--long li:nth-child(5) { animation-delay: 1.7s; }
.route--short li:nth-child(1) { animation-delay: 1.1s; }
.route--short li:last-child { animation-delay: 1.4s; }
.route li:hover { background: var(--ink); color: #fff; transform: translateX(4px); }
.route-card--direct .route li:hover { background: #fff; color: var(--ink); }
.route--short li:last-child:hover { background: var(--accent); color: #fff; }

/* Ticker */
.marquee-track { animation: marquee 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee .chips li { transition: color 0.25s; }
.marquee .chips li:hover { color: var(--accent-text); }

/* Buttons: sweep fill handled in components; arrow nudge on links */
.btn { transition: color 0.3s, border-color 0.3s; }
.text-link { text-decoration: none; position: relative; transition: color 0.2s; }
.text-link::after { content: " \2192"; display: inline-block; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.text-link:hover::after { transform: translateX(6px); }
.card .text-link { border-bottom-width: 2px; transition: color 0.2s, border-color 0.2s; }

/* Header */
.site-header { transition: box-shadow 0.3s, background 0.3s; }
.site-header.is-scrolled { background: rgba(246, 244, 239, 0.98); box-shadow: 0 10px 30px rgba(14, 14, 14, 0.08); }
.brand img { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.brand:hover img { transform: rotate(90deg); }
.submenu { transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.3s; transition-delay: 0.2s; }
.has-menu:hover > .submenu, .has-menu:focus-within > .submenu, .has-menu.is-open > .submenu { transition-delay: 0s; }
.submenu-link { transition: background 0.2s; }
.submenu-link .badge { transition: background 0.2s, color 0.2s; }
.submenu-link:hover .badge { background: var(--ink); color: #fff; }
.menu-toggle span { transition: transform 0.3s, opacity 0.2s; }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.menu-open .primary-nav { animation: fade-up 0.35s ease both; }
@media (max-width: 980px) { .has-menu.is-open > .submenu { animation: fade-up 0.3s ease both; } }

/* Scroll progress */
.scroll-progress { position: fixed; z-index: 160; left: 0; top: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--accent); pointer-events: none; }

/* Scroll reveal (classes added by motion.js) */
.js-motion .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--delay, 0ms); }
.js-motion .reveal.is-visible { opacity: 1; transform: none; }
.js-motion .reveal--right { transform: translateX(48px); }
.js-motion .reveal--right.is-visible { transform: none; }

/* Cards invert; top rule turns orange */
.card > article { transition: background 0.4s ease, color 0.4s ease, border-color 0.4s; }
.card > article:hover { background: var(--ink); color: #e9e6dd; border-top-color: var(--accent); }
.card > article:hover h3, .card > article:hover h3 a { color: #fff; }
.card > article:hover p { color: #bdb9ad; }
.card > article:hover .text-link { color: #fff; }
.card > article:hover .badge { border-color: #fff; color: #fff; }
.card .badge { transition: border-color 0.4s, color 0.4s; }
.checkpoint, .list-block, .step, .review figure, .contact-notes li, .stat, .problem-list li, .tick-list li, .chips li, .trust-row li { transition: background 0.35s ease, color 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s; }
.checkpoint:hover { background: var(--ink); color: #e9e6dd; }
.checkpoint:hover h3 { color: #fff; }
.checkpoint:hover p:last-child { color: #bdb9ad; }
.step:hover .step-num { animation: nudge 1s ease-in-out infinite; }
.problem-list li:hover { padding-left: 76px; color: var(--accent-d); }
.tick-list li:hover { padding-left: 42px; }
.stat:hover dd { letter-spacing: -0.02em; }
.stat dd { transition: letter-spacing 0.5s ease; }
.review figure:hover { background: #fff; }
.chips li:hover { color: var(--accent-text); }
.trust-row li:hover { color: var(--accent-text); }

/* FAQ */
.faq-item { transition: background 0.3s; }
.faq-item:hover { background: rgba(14, 14, 14, 0.04); }
.faq-item summary { transition: padding-left 0.3s ease, color 0.2s; }
.faq-item summary:hover { padding-left: 74px; }
.faq-item summary::after { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.faq-item[open] p { animation: fade-up 0.5s ease both; }

/* Forms */
.form-fields input, .form-fields select, .form-fields textarea { transition: border-color 0.2s, box-shadow 0.25s; }
.form-badge::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--accent); animation: blink 1.6s ease-in-out infinite; }

/* CTA + footer */
.cta-band::before { content: ""; position: absolute; right: -180px; top: -180px; width: 560px; height: 560px; border-radius: 50%; background: repeating-radial-gradient(circle at center, transparent 0, transparent 24px, rgba(255, 255, 255, 0.28) 24px, rgba(255, 255, 255, 0.28) 25px); z-index: 0; }
.footer-links a { display: inline-block; transition: color 0.2s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.footer-links a:hover { transform: translateX(6px); }
.footer-wordmark { transition: color 0.6s ease; }
.site-footer:hover .footer-wordmark { color: #7a776c; }
.breadcrumbs a, .site-footer a { transition: color 0.2s; }
.consent { animation: fade-up 0.6s 0.8s ease both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-motion .reveal, .js-motion .reveal--right { opacity: 1 !important; transform: none !important; }
  .scroll-progress { display: none; }
}