/* Motion: transform + opacity only. Tokens live in variables.css. */

/* First-visit cover: hides image pop-in. Critical position/bg also inlined in HTML. */
.boot-cover {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--dark);
  transition:
    opacity var(--duration-drawer) var(--ease-marketing),
    visibility var(--duration-drawer);
}

.boot-cover.is-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-cover-inner {
  text-align: left;
}

.boot-cover-mark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  letter-spacing: 0.08em;
  color: var(--basalt);
  animation: bootMark var(--duration-marketing) var(--ease-marketing) both;
}

.boot-cover-sub {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  animation: bootSub var(--duration-marketing) var(--ease-marketing) 140ms both;
}

.boot-cover-rule {
  display: block;
  width: 40px;
  height: 4px;
  margin-top: 12px;
  background: var(--rust);
  transform-origin: left center;
  animation: bootRule 1100ms var(--ease-marketing) 280ms both;
}

@keyframes bootMark {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes bootSub {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bootRule {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

html.is-booting .hero-entrance,
html.is-booting .page-hero .container > h1,
html.is-booting .page-hero .container > p,
html.is-booting .hero-media {
  animation-play-state: paused;
}

html.is-ready .boot-cover:not(.is-out) {
  display: none;
}


/* Scroll reveal — marketing, once per section.
   Higher specificity so press/hover rules cannot collapse this to 160ms. */
.reveal,
.reveal.pillar-card,
.reveal.package-card,
.reveal.link-card,
.reveal.services-overview-tile,
.reveal.services-text-card,
.reveal.value-card,
.reveal.testimonial-card,
.reveal.case-card,
.reveal.service-price-item,
a.reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity var(--duration-marketing) var(--ease-marketing),
    transform var(--duration-marketing) var(--ease-marketing);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.visible,
.reveal.pillar-card.visible,
.reveal.package-card.visible,
.reveal.link-card.visible,
.reveal.services-overview-tile.visible,
.reveal.services-text-card.visible,
.reveal.value-card.visible,
.reveal.testimonial-card.visible,
.reveal.case-card.visible,
.reveal.service-price-item.visible,
a.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Hero copy */
.hero-entrance {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  animation-name: heroFadeIn;
  animation-duration: var(--duration-hero);
  animation-timing-function: var(--ease-marketing);
  animation-fill-mode: forwards;
}

.hero-entrance.delay-1 { animation-delay: 90ms; }
.hero-entrance.delay-2 { animation-delay: 180ms; }
.hero-entrance.delay-3 { animation-delay: 270ms; }

@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero {
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: -8%;
  background: center / cover no-repeat;
  z-index: 0;
  animation-name: heroDrift;
  animation-duration: 28s;
  animation-timing-function: var(--ease-in-out);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes heroDrift {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

.hero .container {
  position: relative;
  z-index: 2;
}

.page-hero .container > h1,
.page-hero .container > p {
  animation-name: heroFadeIn;
  animation-duration: var(--duration-hero);
  animation-timing-function: var(--ease-marketing);
  animation-fill-mode: both;
}

.page-hero .container > p {
  animation-delay: 120ms;
}

/* Modal — overlay fade, panel scale from center */
.modal-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-drawer) var(--ease-drawer),
    visibility var(--duration-drawer);
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-overlay .modal {
  transform: scale(0.96) translateY(12px);
  transform-origin: center;
  opacity: 0;
  transition:
    transform var(--duration-drawer) var(--ease-drawer),
    opacity var(--duration-drawer) var(--ease-drawer);
}

.modal-overlay.open .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Cookie sheet — same edge in and out */
.cookie-consent {
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform var(--duration-sheet) var(--ease-drawer),
    opacity var(--duration-sheet) var(--ease-drawer);
}

.cookie-consent.is-in {
  transform: translateY(0);
  opacity: 1;
}

/* Form success — rare, one-shot */
.form-success.visible {
  animation: formSuccessIn var(--duration-drawer) var(--ease-marketing) both;
}

@keyframes formSuccessIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Back to top */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: var(--radius);
  background: var(--basalt);
  color: var(--travertine);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity var(--duration-drawer) var(--ease-drawer),
    transform var(--duration-drawer) var(--ease-drawer),
    visibility var(--duration-drawer),
    background 200ms ease,
    color 200ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--rust);
  color: var(--travertine);
}

.back-to-top:active {
  transform: scale(0.97);
}

/* Press feedback stays short — never on an in-flight reveal */
.btn,
.service-chip,
.link-card:not(.reveal),
.package-card:not(.reveal),
.pillar-card:not(.reveal),
.services-overview-tile:not(.reveal),
.social-link,
.burger {
  transition-property: transform, box-shadow, background, color, border-color, opacity;
  transition-duration: var(--duration-press), 280ms, 280ms, 280ms, 280ms, var(--duration-press);
  transition-timing-function: var(--ease-out), ease, ease, ease, ease, var(--ease-out);
}

.btn:active,
.service-chip:active,
.link-card:active,
.package-card:active,
a.pillar-card:active,
.services-overview-tile:active,
.social-link:active,
.back-to-top.visible:active,
.burger:active {
  transform: scale(0.97);
}

.burger span {
  transition:
    transform var(--duration-drawer) var(--ease-drawer),
    opacity var(--duration-ui) var(--ease-out);
}

.burger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger.open span:nth-child(2) {
  opacity: 0;
}

.burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.media-tile img,
.pillar-card img,
.area-card .area-bg {
  transition: transform 560ms var(--ease-in-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: scale(0.97); }

  .media-tile:hover img { transform: scale(1.05); }
  .pillar-card:hover img { transform: scale(1.05); }
  .area-card:hover .area-bg { transform: scale(1.04); }

  .value-card:hover,
  .package-card:hover,
  .testimonial-card:hover,
  .area-card:hover {
    transform: translateY(-4px);
  }

  .services-text-card:hover,
  .service-chip:hover,
  .social-link:hover,
  .services-overview-tile:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.pillar-card,
  .reveal.package-card,
  .reveal.link-card,
  .reveal.services-overview-tile,
  .reveal.services-text-card,
  .reveal.value-card,
  .reveal.testimonial-card,
  .reveal.case-card,
  .reveal.service-price-item,
  a.reveal {
    opacity: 0;
    transform: none;
    transition: opacity 200ms ease;
  }

  .reveal.visible,
  .reveal.pillar-card.visible,
  .reveal.package-card.visible,
  .reveal.link-card.visible,
  .reveal.services-overview-tile.visible,
  .reveal.services-text-card.visible,
  .reveal.value-card.visible,
  .reveal.testimonial-card.visible,
  .reveal.case-card.visible,
  .reveal.service-price-item.visible,
  a.reveal.visible {
    opacity: 1;
    transform: none;
  }

  .hero-entrance,
  .page-hero .container > h1,
  .page-hero .container > p {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero-media {
    animation: none;
    inset: 0;
  }

  .boot-cover-mark,
  .boot-cover-sub,
  .boot-cover-rule {
    animation: none;
  }

  .boot-cover.is-out {
    transition: opacity 200ms ease, visibility 200ms;
  }

  .modal-overlay,
  .modal-overlay .modal,
  .cookie-consent,
  .back-to-top {
    transform: none;
    transition: opacity 200ms ease, visibility 200ms;
  }

  .modal-overlay .modal {
    opacity: 1;
  }

  .form-success.visible {
    animation: none;
  }

  .btn:active,
  .service-chip:active,
  .link-card:active,
  .package-card:active,
  a.pillar-card:active,
  .services-overview-tile:active,
  .social-link:active,
  .back-to-top.visible:active,
  .burger:active {
    transform: none;
  }

  .media-tile img,
  .pillar-card img,
  .area-card .area-bg {
    transition: none;
  }
}