/* Monarch Media: motion layer. Loaded after styles.css.
   Rules: transform/opacity/clip-path only; ease-out for entrances, ease-in-out for on-screen
   movement, linear for constant motion; hover motion gated to fine pointers; every moving
   effect has a reduced-motion fallback. Timings for marketing reveals run longer than UI. */

/* ---------- Buttons: fill sweep + press ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out); }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: right center;
  transition: transform 320ms var(--ease-out);
}
.btn--primary::before { background: var(--ivory); }
.btn--ghost::before { background: var(--champagne); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: scaleX(1); transform-origin: left center; }
  .btn--ghost:hover { color: var(--black); border-color: var(--champagne); }
}
.btn:active { transform: scale(0.97); }

.text-link { transition: text-decoration-color 200ms ease, text-underline-offset 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .text-link:hover { text-underline-offset: 9px; } }

/* ---------- Header: hides while reading down, returns on scroll up ---------- */
.site-header { transition: transform 300ms var(--ease-out), background-color 200ms ease; view-transition-name: site-header; }
.site-header.is-hidden { transform: translateY(-100%); }
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right center; transition: transform 250ms var(--ease-out);
}
.nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav a:hover::after { transform: scaleX(1); transform-origin: left center; } }

/* ---------- Scroll progress hairline (scroll-driven, no JS) ---------- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body::before {
      content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
      background: var(--champagne); transform-origin: left center; transform: scaleX(0);
      animation: progress linear both; animation-timeline: scroll(root);
      pointer-events: none;
    }
    @keyframes progress { to { transform: scaleX(1); } }
  }
}

/* ---------- Page entrance (hero and inner-page heroes) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes mask-up {
  from { clip-path: inset(0 0 100% 0); transform: translateY(40%); }
  to { clip-path: inset(-20% -5% -25% -5%); transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  :is(.hero, .page-hero) .eyebrow { animation: rise 900ms var(--ease-out) backwards; }
  :is(.hero, .page-hero) h1 { animation: mask-up 1200ms var(--ease-out) 120ms backwards; }
  :is(.hero, .page-hero) .lead { animation: rise 900ms var(--ease-out) 320ms backwards; }
  :is(.hero, .page-hero) .btn-row > * { animation: rise 900ms var(--ease-out) backwards; }
  :is(.hero, .page-hero) .btn-row > :nth-child(1) { animation-delay: 440ms; }
  :is(.hero, .page-hero) .btn-row > :nth-child(2) { animation-delay: 500ms; }
  .hero .plate { animation: plate-in 1200ms var(--ease-out) 200ms backwards; }
  @keyframes plate-in { from { opacity: 0; transform: translateY(32px) scale(0.97); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  :is(.hero, .page-hero) :is(.eyebrow, h1, .lead, .btn-row), .hero .plate { animation: fade 300ms ease backwards; }
}

/* ---------- Hero logo: rules draw out, wordmark wipes in, then one gold sheen ---------- */
.logo-anim { width: 100%; height: auto; overflow: visible; }
.logo-anim .rule { transform-box: fill-box; transform-origin: center; }
.logo-anim .wipe { transform-box: fill-box; transform-origin: left center; }
.plate--hero { overflow: hidden; }
.plate--hero::after {
  content: ""; position: absolute; inset: -20% -60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(227, 201, 142, 0.14) 50%, transparent 58%);
  transform: translateX(-100%); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .logo-anim .rule { animation: draw 1100ms var(--ease-in-out) 500ms both; }
  .logo-anim .wipe { animation: wipe 1300ms var(--ease-in-out) 800ms both; }
  .logo-anim .media { animation: fade 800ms ease 1500ms both; }
  .logo-anim .meta { animation: fade 800ms ease 1750ms both; }
  .plate--hero .plate-meta { animation: fade 800ms ease 1300ms both; }
  .plate--hero::after { animation: sheen 1800ms var(--ease-in-out) 2200ms both; }
  @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes sheen { 0% { transform: translateX(-100%); opacity: 1; } 100% { transform: translateX(100%); opacity: 1; } }
}

/* ---------- Pointer-tracked plate: tilt (JS) + spotlight ---------- */
.plate--hero { will-change: transform; }
.plate-light {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(227, 201, 142, 0.11), transparent 60%);
  transition: opacity 400ms ease;
}
.plate.is-lit .plate-light { opacity: 1; }
.plate > :not(.plate-light) { position: relative; z-index: 2; }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden; border-top: 1px solid var(--iron); padding-block: clamp(20px, 3vw, 36px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; }
.marquee-group { display: flex; align-items: center; flex: none; }
.marquee span { font: 500 clamp(2.75rem, 7vw, 6rem)/1 var(--serif); color: var(--champagne); white-space: nowrap; padding-inline: clamp(20px, 3vw, 44px); }
.marquee span.outline { color: transparent; -webkit-text-stroke: 1px var(--gold); }
.marquee i { flex: none; width: 10px; height: 10px; border: 1px solid var(--gold); transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 48s linear infinite; }
  @keyframes marquee { to { transform: translateX(-50%); } }
  @media (hover: hover) and (pointer: fine) { .marquee:hover .marquee-track { animation-play-state: paused; } }
}

/* ---------- Scroll reveals (JS adds .is-visible once) ----------
   Keep this selector list in sync with REVEAL in site.js. Hidden only when .js is set,
   so content is always visible without JavaScript. */
.js :is(.section-head, .statement .container > *, .row, .pillar, .step, .work-card, .service, .package, .faq, .cta-band .container > *, .two-col > *, .founder > *, .contact-card, .form, .footer-grid > *):not(.is-visible) {
  opacity: 0;
}
.js :is(.section-head, .statement .container > *, .row, .pillar, .step, .work-card, .service, .package, .faq, .cta-band .container > *, .two-col > *, .founder > *, .contact-card, .form, .footer-grid > *) {
  transition: opacity 900ms var(--ease-out) var(--d, 0ms), transform 1100ms var(--ease-out) var(--d, 0ms);
}
@media (prefers-reduced-motion: no-preference) {
  .js :is(.section-head, .statement .container > *, .row, .pillar, .step, .work-card, .service, .package, .faq, .cta-band .container > *, .two-col > *, .founder > *, .contact-card, .form, .footer-grid > *):not(.is-visible) {
    transform: translateY(32px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .js :is(.section-head, .statement .container > *, .row, .pillar, .step, .work-card, .service, .package, .faq, .cta-band .container > *, .two-col > *, .founder > *, .contact-card, .form, .footer-grid > *) {
    transition: opacity 300ms ease;
  }
}
/* Failsafe: the head script adds .reveal-all if site.js never runs */
.reveal-all :is(.section-head, .statement .container > *, .row, .pillar, .step, .work-card, .service, .package, .faq, .cta-band .container > *, .two-col > *, .founder > *, .contact-card, .form, .footer-grid > *) { opacity: 1 !important; transform: none !important; }

/* Process steps: the gold rule draws in after the step appears */
.js .step { border-top-color: transparent !important; position: relative; }
.js .step::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1200ms var(--ease-in-out) calc(var(--d, 0ms) + 200ms);
}
.js .step.is-visible::before, .reveal-all .step::before { transform: scaleX(1); }

/* ---------- Hover details: a gold rule draws across rows and cards ---------- */
.row, .pillar, .package { position: relative; }
.row::after, .pillar::after, .package::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right center; transition: transform 450ms var(--ease-out);
  pointer-events: none;
}
.row::after { bottom: -1px; }
.pillar::after, .package::after { top: 0; }
.row h3, .row .num { transition: transform 250ms var(--ease-out), color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  :is(.row, .pillar, .package):hover::after { transform: scaleX(1); transform-origin: left center; }
  .row:hover h3 { transform: translateX(8px); color: var(--ivory); }
  .row:hover .num { transform: translateX(4px); }
}
.choice span { transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease; }

/* Work cards: the plate lifts slightly under the pointer */
.work-card .plate { transition: transform 450ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .work-card:hover .plate { transform: translateY(-6px); } }

/* ---------- FAQ: smooth open where supported ---------- */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    height: 0; overflow: clip; opacity: 0;
    transition: height 300ms var(--ease-out), opacity 300ms var(--ease-out), content-visibility 300ms allow-discrete;
  }
  .faq details[open]::details-content { height: auto; opacity: 1; }
}

/* ---------- Page transitions between pages (Chrome/Edge/Safari 18+) ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 220ms var(--ease-out) both; }
  ::view-transition-new(root) { animation: vt-in 420ms var(--ease-out) both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}