/* Eclipsion — motion layer.
   One system: a single easing curve, a single reveal rhythm (90ms stagger),
   gold as the only accent. Everything is gated behind `html.motion`, which
   motion-boot.js only sets when prefers-reduced-motion is NOT requested, so
   reduced-motion visitors get the plain, static site. */

:root {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.18, 1);
  --t0: 0.35s;                       /* when hero content starts, after the entrance wipe */
}
html.first-visit { --t0: 0.95s; }

html { scroll-padding-top: 5rem; }

/* ---------- Page entrance / exit wipe ---------- */

html.intro::before, html.is-leaving::before {
  content: ""; position: fixed; inset: 0; z-index: 10000; pointer-events: none;
  background: var(--green-deep);
  border-top: 4px solid var(--gold); border-bottom: 4px solid var(--gold);
}
html.intro::before { animation: wipeOut 0.7s var(--ease-io) 0s both; }
html.first-visit.intro::before { animation-delay: 0.75s; }
html.first-visit.intro::after {
  content: ""; position: fixed; left: 50%; top: 50%; z-index: 10001; pointer-events: none;
  width: 88px; height: 88px; margin: -44px 0 0 -44px;
  background: url("images/logo.png") center / contain no-repeat;
  animation: logoIntro 1.05s var(--ease) both;
}
html.is-leaving::before { animation: wipeIn 0.38s var(--ease-io) both; }
@keyframes wipeOut { from { transform: translateY(0); } to { transform: translateY(-101%); } }
@keyframes wipeIn { from { transform: translateY(101%); } to { transform: translateY(0); } }
@keyframes logoIntro {
  0% { opacity: 0; transform: scale(0.86); }
  32% { opacity: 1; transform: scale(1); }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04) translateY(-6px); }
}

/* ---------- Hero / page-hero choreography ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes wordUp { from { transform: translateY(112%); } to { transform: none; } }
@keyframes maskIn { from { clip-path: inset(0 100% 0 0); opacity: 0; } to { clip-path: inset(-4px -4px -4px -4px); opacity: 1; } }
@keyframes drawX { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hw-w {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0.08em 0.05em 0.16em; margin: -0.08em -0.05em -0.16em;
}
.hw-i { display: inline-block; }
html.motion .hw-i { animation: wordUp 1s var(--ease) both; animation-delay: calc(var(--t0) + 0.12s + var(--i) * 70ms); }

html.motion .hero .kicker,
html.motion .page-hero .kicker { animation: maskIn 0.9s var(--ease) var(--t0) both; }
html.motion .hero .subline,
html.motion .page-hero .lede { animation: rise 0.9s var(--ease) calc(var(--t0) + 0.55s) both; }
html.motion .hero-ctas { animation: rise 0.9s var(--ease) calc(var(--t0) + 0.75s) both; }
html.motion .hero::after,
html.motion .page-hero::after { transform-origin: left; animation: drawX 1.3s var(--ease-io) calc(var(--t0) + 0.2s) both; }

/* Hero photograph: slow settle-zoom, with restrained pointer + scroll drift.
   `scale` and `translate` are independent properties so they compose. */
.hero { --hx: 0px; --hy: 0px; --py: 0px; }
html.motion .hero-bg {
  scale: 1.08; translate: var(--hx) calc(var(--hy) + var(--py));
  animation: heroZoom 26s ease-out forwards;
  will-change: scale, translate;
}
@keyframes heroZoom { from { scale: 1.08; } to { scale: 1.12; } }

/* Eclipse motif: a faint gold ring that drifts slowly behind hero areas. */
.hero::before, .page-hero::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none; border-radius: 50%;
  width: min(46vw, 520px); aspect-ratio: 1; right: -7vw; top: -18%;
  border: 1.5px solid rgba(224, 164, 48, 0.3);
  box-shadow: 0 0 0 34px rgba(224, 164, 48, 0.06), inset 0 0 0 26px rgba(255, 255, 255, 0.025);
}
.page-hero { overflow: hidden; --py: 0px; }
.page-hero .wrap-xwide { position: relative; z-index: 2; }
html.motion .page-hero::before { translate: 0 var(--py); }
html.motion .hero::before { translate: calc(var(--hx) * -1.8) calc(var(--hy) * -1.8 + var(--py) * 0.6); }
html.motion .hero::before, html.motion .page-hero::before { animation: ringIn 1.6s var(--ease) var(--t0) both; }
@keyframes ringIn { from { opacity: 0; scale: 0.9; } to { opacity: 1; scale: 1; } }

/* ---------- Header: compaction, logo, nav ---------- */

.site-header { transition: box-shadow 0.3s ease, margin-bottom 0.25s ease; }
/* Compaction removes 0.9rem of height; the margin hands it back so content
   below never shifts when the header changes state. */
.site-header.is-scrolled { margin-bottom: 0.9rem; }
.site-header.is-scrolled .nav { padding-top: 0.45rem; padding-bottom: 0.45rem; }
html.motion .brand { transform-origin: 0 50%; transition: transform 0.35s var(--ease); }
html.motion .site-header.is-scrolled .brand { transform: scale(0.9); }
html.motion .brand img { transition: transform 0.6s var(--ease); }
html.motion .brand:hover img { transform: rotate(-8deg) scale(1.08); }
html.motion .site-header .brand { animation: rise 0.8s var(--ease) var(--t0) both; }

/* Nav label roll: the label slides up and a gold copy takes its place. */
.nav-links a .roll { display: inline-block; position: relative; overflow: hidden; vertical-align: bottom; line-height: 1.5; }
.nav-links a .roll > span { display: block; transition: transform 0.45s var(--ease); }
.nav-links a .roll::after {
  content: attr(data-text); position: absolute; left: 0; top: 100%; color: var(--gold); white-space: nowrap;
  transition: transform 0.45s var(--ease);
}
.nav-links a:hover .roll > span, .nav-links a:focus-visible .roll > span { transform: translateY(-100%); }
.nav-links a:hover .roll::after, .nav-links a:focus-visible .roll::after { transform: translateY(-100%); }
.nav-links a[aria-current="page"] .roll::after { color: var(--cream); }
html.motion .nav-links li { animation: rise 0.7s var(--ease) both; animation-delay: calc(var(--t0) + 0.1s + var(--i, 0) * 60ms); }

/* Mobile menu: items stagger in; toggle turns. */
.nav-toggle { transition: transform 0.4s var(--ease), background 0.2s ease; }
.nav-toggle[aria-expanded="true"] { transform: rotate(90deg); background: rgba(255, 255, 255, 0.12); }
@keyframes navItemIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 780px) {
  html.motion .nav.is-open .nav-links li { animation: navItemIn 0.5s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms + 60ms); }
}

/* ---------- Scroll reveal (enhances reveal.js) ---------- */

.reveal { transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); }
.reveal-d1 { --d: 90ms; } .reveal-d2 { --d: 180ms; } .reveal-d3 { --d: 270ms; } .reveal-d4 { --d: 360ms; }
.reveal.is-done { transition-delay: 0s; }

/* Image wipe: a vertical curtain lifts, the photo settles from a slight zoom. */
html.motion .img-mask { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--ease-io); transition-delay: var(--d, 0s); }
html.motion .img-mask.is-inview { clip-path: inset(0 0 0 0); }
html.motion .img-mask img { scale: 1.16; transition: scale 1.8s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0s), 0s; }
html.motion .img-mask.is-inview img { scale: 1; }
html.motion .img-mask + .photo-caption { opacity: 0; transform: translateY(8px); transition: opacity 0.7s var(--ease) 0.6s, transform 0.7s var(--ease) 0.6s; }
html.motion .img-mask.is-inview + .photo-caption { opacity: 1; transform: none; }
html.motion .photo-break-caption { opacity: 0; transform: translateY(10px); transition: opacity 0.7s var(--ease) 0.9s, transform 0.7s var(--ease) 0.9s; }
html.motion .photo-break.is-inview .photo-break-caption { opacity: 1; transform: none; }

/* Large photo break: restrained parallax (JS sets --py). */
html.motion .photo-break img { scale: 1.1; translate: 0 var(--py, 0px); }
html.motion .photo-break.img-mask img { scale: 1.2; }
html.motion .photo-break.img-mask.is-inview img { scale: 1.1; }

/* Kicker labels slide out from behind a mask. */
html.motion .k-mask { clip-path: inset(0 100% 0 0); transform: translateX(-10px); transition: clip-path 0.9s var(--ease) 0.15s, transform 0.9s var(--ease) 0.15s; }
html.motion .k-mask.is-inview { clip-path: inset(-4px -4px -4px -4px); transform: none; }

/* Statements: words rise one by one; the bold phrase gets a highlight sweep. */
.sw-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.05em 0.14em; margin: -0.06em -0.05em -0.14em; }
.sw-i { display: inline-block; transform: translateY(112%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.statement.is-inview .sw-i { transform: none; }
html.motion .statement strong {
  background: linear-gradient(rgba(224, 164, 48, 0.3), rgba(224, 164, 48, 0.3)) 0 90% / 0% 36% no-repeat;
  transition: background-size 1.1s var(--ease) 0.9s;
}
html.motion .statement.is-inview strong { background-size: 100% 36%; }

/* Drawn borders and dividers. */
html.motion .stat.draw, html.motion .way-card.draw { position: relative; border-top-color: transparent; }
html.motion .stat.draw::before, html.motion .way-card.draw::before {
  content: ""; position: absolute; left: 0; top: -3px; height: 3px; width: 100%; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-io) 0.15s;
}
html.motion .stat.draw.is-inview::before, html.motion .way-card.draw.is-inview::before { transform: scaleX(1); }
html.motion .pull-quote.draw { position: relative; border-left-color: transparent; }
html.motion .pull-quote.draw::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold);
  transform: scaleY(0); transform-origin: top; transition: transform 1s var(--ease-io) 0.1s;
}
html.motion .pull-quote.draw.is-inview::before { transform: scaleY(1); }
html.motion .rule-wrap.draw-rule { position: relative; border-top-color: transparent; }
html.motion .rule-wrap.draw-rule::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; z-index: 1; pointer-events: none;
  background: var(--gold-deep); transform: scaleX(0); transform-origin: left;
  transition: transform 1.4s var(--ease-io), background-color 1s ease 1.1s;
}
html.motion .rule-wrap.draw-rule.is-inview::before { transform: scaleX(1); background-color: var(--rule); }

/* Timeline dots and process numerals pop in with their row. */
html.motion .milestones li::before { scale: 0; transition: scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s; }
html.motion .milestones li.is-visible::before { scale: 1; }
html.motion .process-step::before { opacity: 0; translate: 0 8px; transition: opacity 0.7s ease 0.3s, translate 0.7s var(--ease) 0.3s; }
html.motion .process-step.is-visible::before { opacity: 1; translate: 0 0; }

/* ---------- Cards ---------- */

html.motion :is(.card, .story-card, .partner-card, .testimonial-card) { position: relative; }
html.motion :is(.card, .story-card, .partner-card, .testimonial-card)::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 3px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform 0.55s var(--ease); pointer-events: none;
}
.reveal.is-done { transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease), border-color 0.4s ease, opacity 0.4s ease; }
html.motion :is(.card, .story-card, .partner-card, .testimonial-card, .way-card):hover { transform: translateY(-5px); }
html.motion :is(.card, .story-card, .partner-card, .testimonial-card):hover {
  box-shadow: 0 22px 38px -26px rgba(31, 42, 34, 0.45); border-color: #CFC7AB;
}
html.motion :is(.card, .story-card, .partner-card, .testimonial-card):hover::after { transform: scaleX(1); }
html.motion :is(.card, .story-card, .testimonial-card) .photo-frame img { transition: transform 0.9s var(--ease); }
html.motion :is(.card, .story-card, .testimonial-card):hover .photo-frame img { transform: scale(1.06); }
html.motion :is(.card-body h3, .story-name, .testimonial-name, .partner-card h3, .way-card h3) { transition: transform 0.5s var(--ease), color 0.3s ease; }
html.motion :is(.card, .story-card, .testimonial-card, .partner-card, .way-card):hover :is(.card-body h3, .story-name, .testimonial-name, .partner-card h3, .way-card h3) { transform: translateX(5px); }
html.motion :is(.story-location, .testimonial-role, .story-field) { transition: transform 0.5s var(--ease) 0.04s; }
html.motion :is(.story-card, .testimonial-card):hover :is(.story-location, .testimonial-role) { transform: translateY(-2px); }
.partner-card img { transition: filter 0.4s ease, opacity 0.4s ease; }
.partner-card:hover img { filter: grayscale(0); opacity: 1; }

/* Gallery tiles: slow zoom, captions lift in. */
html.motion .g-item .photo-frame img, html.motion .g-item img { transition: transform 1s var(--ease), scale 1.8s var(--ease); }
html.motion .g-caption { opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.45s var(--ease); }
html.motion .g-item:hover .g-caption { opacity: 1; transform: none; }

/* ---------- Links, arrows, buttons ---------- */

html.motion main :is(p, li, figcaption, dd) a:not(.btn):not(.nav-cta) {
  text-decoration: none;
  background-image: linear-gradient(var(--gold-deep), var(--gold-deep)), linear-gradient(rgba(81, 155, 83, 0.4), rgba(81, 155, 83, 0.4));
  background-repeat: no-repeat; background-position: 0 100%, 0 100%;
  background-size: 0% 2px, 100% 1px; padding-bottom: 1px;
  transition: background-size 0.5s var(--ease), color 0.25s ease;
}
html.motion main :is(p, li, figcaption, dd) a:not(.btn):not(.nav-cta):hover { background-size: 100% 2px, 100% 1px; }
html.motion .footer-links a, html.motion .footer-social a { transition: color 0.25s ease, opacity 0.25s ease, border-color 0.25s ease, transform 0.4s var(--ease); }
html.motion .footer-links a {
  display: inline-block; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0% 1px no-repeat; padding-bottom: 1px;
  transition: background-size 0.5s var(--ease), color 0.25s ease, opacity 0.25s ease, transform 0.4s var(--ease);
}
html.motion .footer-links a:hover { background-size: 100% 1px; transform: translateX(3px); }
html.motion .footer-social a:hover { transform: translateY(-2px); }

.arrow { display: inline-block; transition: transform 0.45s var(--ease); }
a:hover > .arrow, a:focus-visible > .arrow { transform: translateX(6px); }

.btn { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
html.motion .btn { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.35s var(--ease), box-shadow 0.35s var(--ease), translate 0.4s var(--ease); }
html.motion .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 20px -14px rgba(0, 0, 0, 0.55); }
html.motion .btn:active { transform: translateY(0) scale(0.97); box-shadow: none; transition-duration: 0.1s; }
html.motion .nav-cta { transition: background 0.2s ease, transform 0.35s var(--ease); }
html.motion .nav-cta:hover { transform: translateY(-1px); }
html.motion .btn.is-magnetic { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.35s var(--ease), box-shadow 0.35s var(--ease), translate 0.15s ease-out; }

/* Form fields */
input[type="text"], input[type="email"], textarea { transition: border-color 0.25s ease, box-shadow 0.25s ease; }
input[type="text"]:focus, input[type="email"]:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(224, 164, 48, 0.22); outline: none; }

/* Disclosure */
html.motion .disclosure[open] summary::after { animation: spinIn 0.4s var(--ease); }
@keyframes spinIn { from { transform: rotate(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
html.motion .disclosure[open] .disclosure-grid { animation: rise 0.6s var(--ease) both; }

/* ---------- Section rail + back to top ---------- */

.section-rail { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 90; display: none; flex-direction: column; gap: 10px; align-items: flex-end; }
@media (min-width: 1180px) { .section-rail { display: flex; } }
.section-rail a {
  position: relative; display: block; width: 7px; height: 7px; border-radius: 4px; background: var(--green-deep);
  box-shadow: 0 0 0 2px rgba(250, 248, 241, 0.92); transition: height 0.45s var(--ease), background 0.3s ease; text-decoration: none;
}
.section-rail a.is-active { height: 22px; background: var(--gold); }
.section-rail a::after {
  content: attr(data-label); position: absolute; right: 18px; top: 50%; transform: translate(6px, -50%);
  background: var(--green-deep); color: var(--cream); font-size: 0.74rem; line-height: 1; letter-spacing: 0.04em;
  padding: 0.55em 0.8em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.35s var(--ease);
}
.section-rail a:hover::after, .section-rail a:focus-visible::after { opacity: 1; transform: translate(0, -50%); }

.to-top {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 120; width: 46px; height: 46px; border-radius: 50%;
  background: var(--green-deep); color: var(--gold); border: 1.5px solid rgba(224, 164, 48, 0.6); cursor: pointer;
  font-size: 1.15rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.35s ease, transform 0.5s var(--ease), background 0.2s ease, color 0.2s ease;
}
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--gold); color: var(--green-deep); transform: translateY(-3px); }
.to-top span { display: block; transition: transform 0.4s var(--ease); }
.to-top:hover span { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .to-top, .section-rail a { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-done, .arrow, .partner-card img, input[type="text"], input[type="email"], textarea, .nav-toggle { transition: none; }
  .nav-links a .roll > span, .nav-links a .roll::after { transition: none; }
}