/* ========== Motion system (premium / subtle) ========== */
/*
  Content stays visible by default. JS adds html.anim-ready to enable
  entrance states. Only transform + opacity are animated.
*/

:root {
  --motion-duration: 0.85s;
  --motion-duration-fast: 0.32s;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-distance: 24px;
  --motion-stagger: 0.1s;
}

@media (max-width: 767px) {
  :root {
    --motion-distance: 16px;
    --motion-duration: 0.7s;
    --motion-stagger: 0.08s;
  }
}

/* ---- Base reveals ---- */
.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-fade,
.reveal-scale,
.stagger-group,
.stagger,
.text-reveal,
.img-reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
}

html.anim-ready .reveal:not(.is-visible),
html.anim-ready .reveal-up:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, var(--motion-distance), 0);
}

html.anim-ready .reveal-left:not(.is-visible) {
  opacity: 0;
  transform: translate3d(calc(var(--motion-distance) * -1), 0, 0);
}

html.anim-ready .reveal-right:not(.is-visible) {
  opacity: 0;
  transform: translate3d(var(--motion-distance), 0, 0);
}

html.anim-ready .reveal-fade:not(.is-visible) {
  opacity: 0;
  transform: none;
}

html.anim-ready .reveal-scale:not(.is-visible) {
  opacity: 0;
  transform: scale(0.98);
}

.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-fade.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* Section header staggered children */
html.anim-ready .section__header:not(.is-visible) > .eyebrow,
html.anim-ready .section__header:not(.is-visible) > h2,
html.anim-ready .section__header:not(.is-visible) > p,
html.anim-ready .section__header:not(.is-visible) > .btn-group {
  opacity: 0;
  transform: translate3d(0, var(--motion-distance), 0);
}

.section__header > .eyebrow,
.section__header > h2,
.section__header > p,
.section__header > .btn-group {
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
}

.section__header.is-visible > .eyebrow {
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.section__header.is-visible > h2 {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--motion-stagger) * 1);
}

.section__header.is-visible > p {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--motion-stagger) * 2);
}

.section__header.is-visible > .btn-group {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--motion-stagger) * 3);
}

/* ---- Stagger groups ---- */
.stagger-group > *,
.stagger > * {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
}

html.anim-ready .stagger-group:not(.is-visible) > *,
html.anim-ready .stagger:not(.is-visible) > * {
  opacity: 0;
  transform: translate3d(0, var(--motion-distance), 0);
}

html.anim-ready .stagger-group.is-visible > .reveal,
html.anim-ready .stagger-group.is-visible > .reveal-up,
html.anim-ready .stagger-group.is-visible > .reveal-left,
html.anim-ready .stagger-group.is-visible > .reveal-right,
html.anim-ready .stagger-group.is-visible > .reveal-fade,
html.anim-ready .stagger-group.is-visible > .reveal-scale,
html.anim-ready .stagger.is-visible > .reveal,
html.anim-ready .stagger.is-visible > .reveal-up,
html.anim-ready .stagger.is-visible > .reveal-left,
html.anim-ready .stagger.is-visible > .reveal-right,
html.anim-ready .stagger.is-visible > .reveal-fade,
html.anim-ready .stagger.is-visible > .reveal-scale {
  opacity: 1;
  transform: none;
}

.stagger-group.is-visible > *:nth-child(1),
.stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.stagger-group.is-visible > *:nth-child(2),
.stagger.is-visible > *:nth-child(2) { transition-delay: calc(var(--motion-stagger) * 1); }
.stagger-group.is-visible > *:nth-child(3),
.stagger.is-visible > *:nth-child(3) { transition-delay: calc(var(--motion-stagger) * 2); }
.stagger-group.is-visible > *:nth-child(4),
.stagger.is-visible > *:nth-child(4) { transition-delay: calc(var(--motion-stagger) * 3); }
.stagger-group.is-visible > *:nth-child(5),
.stagger.is-visible > *:nth-child(5) { transition-delay: calc(var(--motion-stagger) * 4); }
.stagger-group.is-visible > *:nth-child(6),
.stagger.is-visible > *:nth-child(6) { transition-delay: calc(var(--motion-stagger) * 5); }
.stagger-group.is-visible > *:nth-child(7),
.stagger.is-visible > *:nth-child(7) { transition-delay: calc(var(--motion-stagger) * 6); }
.stagger-group.is-visible > *:nth-child(8),
.stagger.is-visible > *:nth-child(8) { transition-delay: calc(var(--motion-stagger) * 7); }
.stagger-group.is-visible > *:nth-child(9),
.stagger.is-visible > *:nth-child(9) { transition-delay: calc(var(--motion-stagger) * 8); }
.stagger-group.is-visible > *:nth-child(10),
.stagger.is-visible > *:nth-child(10) { transition-delay: calc(var(--motion-stagger) * 9); }
.stagger-group.is-visible > *:nth-child(11),
.stagger.is-visible > *:nth-child(11) { transition-delay: calc(var(--motion-stagger) * 10); }
.stagger-group.is-visible > *:nth-child(12),
.stagger.is-visible > *:nth-child(12) { transition-delay: calc(var(--motion-stagger) * 11); }
.stagger-group.is-visible > *:nth-child(n + 13),
.stagger.is-visible > *:nth-child(n + 13) { transition-delay: calc(var(--motion-stagger) * 12); }

/* Footer — lighter */
.footer-grid.stagger-group.is-visible > * {
  transition-duration: 0.7s;
}

html.anim-ready .footer-grid.stagger-group:not(.is-visible) > * {
  transform: translate3d(0, 16px, 0);
}

/* ---- Text reveal (block-level; no letter split) ---- */
.text-reveal {
  overflow: hidden;
}

html.anim-ready .text-reveal:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, var(--motion-distance), 0);
}

.text-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Image reveal ---- */
.img-reveal {
  position: relative;
  overflow: hidden;
}

.img-reveal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 1s var(--motion-ease), opacity 1s var(--motion-ease);
}

html.anim-ready .img-reveal:not(.is-visible) img {
  transform: scale(1.03);
  opacity: 0.92;
}

.img-reveal.is-visible img {
  transform: scale(1);
  opacity: 1;
}

/* ---- Hero entrance ---- */
html.anim-ready .hero.hero--enter .hero__media {
  opacity: 0;
}

html.anim-ready .hero.hero--enter .hero__content > * {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

.hero .hero__media {
  transition: opacity 0.9s var(--motion-ease);
}

.hero .hero__content > * {
  transition:
    opacity 0.75s var(--motion-ease),
    transform 0.75s var(--motion-ease);
}

.hero.is-entered .hero__media {
  opacity: 1;
}

.hero.is-entered .hero__content > *:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: 0.12s;
}

.hero.is-entered .hero__content > *:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: 0.24s;
}

.hero.is-entered .hero__content > *:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: 0.36s;
}

.hero.is-entered .hero__content > *:nth-child(4) {
  opacity: 1;
  transform: none;
  transition-delay: 0.48s;
}

.hero.is-entered .hero__content > *:nth-child(5) {
  opacity: 1;
  transform: none;
  transition-delay: 0.6s;
}

.hero.is-entered .hero__content > *:nth-child(6) {
  opacity: 1;
  transform: none;
  transition-delay: 0.72s;
}

.hero.is-entered .hero__content > *:nth-child(n + 7) {
  opacity: 1;
  transform: none;
  transition-delay: 0.82s;
}

/* Page hero soft entrance */
html.anim-ready .page-hero__content:not(.is-visible) > * {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

.page-hero__content > * {
  transition:
    opacity 0.75s var(--motion-ease),
    transform 0.75s var(--motion-ease);
}

.page-hero__content.is-visible > *:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.page-hero__content.is-visible > *:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}

.page-hero__content.is-visible > *:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: 0.2s;
}

.page-hero__content.is-visible > *:nth-child(4) {
  opacity: 1;
  transform: none;
  transition-delay: 0.28s;
}

.page-hero__content.is-visible > *:nth-child(n + 5) {
  opacity: 1;
  transform: none;
  transition-delay: 0.34s;
}

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  .faq-item__panel {
    display: block;
    transition: height 0.38s var(--motion-ease), opacity 0.32s var(--motion-ease);
  }

  .faq-item:not([open]) .faq-item__panel {
    height: 0;
    opacity: 0;
    overflow: hidden;
  }

  .faq-item[open] .faq-item__panel {
    height: auto;
    opacity: 1;
  }
}

.faq-item__icon {
  position: relative;
  transition: transform var(--motion-duration-fast) var(--motion-ease),
    background var(--motion-duration-fast) var(--motion-ease);
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.7rem;
  height: 1.5px;
  background: var(--color-bronze);
  transform: translate(-50%, -50%);
  transition: transform var(--motion-duration-fast) var(--motion-ease), opacity var(--motion-duration-fast);
}

.faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-item__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s var(--motion-ease);
  border-top-color: transparent;
}

.faq-item[open] .faq-item__panel {
  grid-template-rows: 1fr;
  border-top-color: var(--color-border);
}

.faq-item__panel-inner,
.faq-item__content {
  overflow: hidden;
  min-height: 0;
}

.faq-item__content {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition:
    opacity 0.32s var(--motion-ease),
    transform 0.32s var(--motion-ease);
}

.faq-item[open] .faq-item__content {
  opacity: 1;
  transform: none;
  transition-delay: 0.06s;
}

/* ---- Forms ---- */
.form-field .error-msg {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translate3d(0, -4px, 0);
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease),
    transform var(--motion-duration-fast) var(--motion-ease),
    max-height var(--motion-duration-fast) var(--motion-ease);
}

.form-field .error-msg.is-visible {
  display: block;
  max-height: 3rem;
  opacity: 1;
  transform: none;
  margin-top: 0.25rem;
}

.form-field input,
.form-field select,
.form-field textarea {
  transition:
    border-color var(--motion-duration-fast) var(--motion-ease),
    box-shadow var(--motion-duration-fast) var(--motion-ease),
    background-color var(--motion-duration-fast) var(--motion-ease);
}

.btn.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}

.btn.is-loading::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.55em;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.1em;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ---- Buttons / links micro-interactions ---- */
.btn {
  transition:
    transform 0.3s var(--motion-ease),
    background-color 0.3s var(--motion-ease),
    color 0.3s var(--motion-ease),
    border-color 0.3s var(--motion-ease),
    box-shadow 0.3s var(--motion-ease);
}

.btn:hover {
  transform: translateY(-3px);
}

.btn:active {
  transform: translateY(-1px);
}

.btn svg {
  transition: transform 0.3s var(--motion-ease);
}

.btn:hover svg {
  transform: translateX(3px);
}

.nav-desktop > a,
.nav-desktop .nav-dropdown > button {
  transition: color 0.28s var(--motion-ease);
}

.nav-desktop > a::after,
.nav-desktop .nav-dropdown > button::after {
  transition: transform 0.28s var(--motion-ease), opacity 0.28s var(--motion-ease);
}

/* ---- Header sticky polish ---- */
.site-header {
  transition:
    background-color 0.35s var(--motion-ease),
    box-shadow 0.35s var(--motion-ease),
    backdrop-filter 0.35s var(--motion-ease);
}

.site-header.is-scrolled {
  box-shadow: 0 8px 28px rgba(17, 22, 20, 0.08);
}

/* ---- Unused legacy retained (harmless) ---- */
.line-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.2s var(--motion-ease);
}

html.anim-ready .line-draw:not(.is-visible) {
  stroke-dashoffset: 1000;
}

.line-draw.is-visible {
  stroke-dashoffset: 0;
}

@keyframes hero-ken {
  from { transform: scale(1); }
  to { transform: scale(1.03); }
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(5px); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@media (max-width: 991px) {
  [data-parallax] {
    transform: none !important;
    will-change: auto;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 0.01ms;
    --motion-duration-fast: 0.01ms;
    --motion-distance: 0px;
    --motion-stagger: 0s;
  }

  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-fade,
  .reveal-scale,
  .stagger-group > *,
  .stagger > *,
  .text-reveal,
  .img-reveal img,
  .section__header > *,
  .page-hero__content > *,
  .hero .hero__content > *,
  .hero .hero__media,
  .faq-item__panel,
  .faq-item__content,
  .faq-item__icon,
  .btn {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
  }

  .hero__media img,
  .hero__slide img,
  .marquee__track,
  .btn.is-loading::after {
    animation: none !important;
  }

  .hero__slide {
    transition: none !important;
  }

  html {
    scroll-behavior: auto !important;
  }

  [data-parallax] {
    transform: none !important;
    will-change: auto !important;
  }
}