/* Motion layer: progressive enhancement only. */
html.motion-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  filter: blur(5px);
  transition:
    opacity 720ms cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
    transform 900ms cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
    filter 720ms ease var(--reveal-delay, 0ms);
}

html.motion-ready [data-reveal="side"] {
  transform: translate3d(-32px, 0, 0);
}

html.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

html.motion-ready .site-header {
  animation: header-arrival 720ms cubic-bezier(.16, 1, .3, 1) both;
}

html.motion-ready .hero::before,
html.motion-ready .page-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -30%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.11) 49%, transparent 57%);
  transform: translateX(-80%) rotate(8deg);
  mix-blend-mode: soft-light;
}

html.motion-ready body.motion-in .hero::before,
html.motion-ready body.motion-in .page-hero::before {
  animation: light-sweep 1.7s 260ms cubic-bezier(.16, 1, .3, 1) both;
}

html.motion-ready .hero > img,
html.motion-ready .page-hero > img {
  transform: scale(1.1);
  filter: saturate(.92) contrast(1.04);
  will-change: transform;
}

html.motion-ready body.motion-in .hero > img {
  animation: hero-drift 16s 100ms ease-out both;
}

html.motion-ready body.motion-in .page-hero > img {
  animation: page-drift 12s 100ms ease-out both;
}

html.motion-ready .hero-content > *,
html.motion-ready .page-hero-content > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

html.motion-ready body.motion-in .hero-content > *,
html.motion-ready body.motion-in .page-hero-content > * {
  animation: copy-arrival 780ms cubic-bezier(.16, 1, .3, 1) both;
}

html.motion-ready body.motion-in .hero-content > *:nth-child(1),
html.motion-ready body.motion-in .page-hero-content > *:nth-child(1) { animation-delay: 180ms; }
html.motion-ready body.motion-in .hero-content > *:nth-child(2),
html.motion-ready body.motion-in .page-hero-content > *:nth-child(2) { animation-delay: 260ms; }
html.motion-ready body.motion-in .hero-content > *:nth-child(3),
html.motion-ready body.motion-in .page-hero-content > *:nth-child(3) { animation-delay: 340ms; }
html.motion-ready body.motion-in .hero-content > *:nth-child(4),
html.motion-ready body.motion-in .page-hero-content > *:nth-child(4) { animation-delay: 420ms; }

html.motion-ready .hero-signal {
  opacity: 0;
  transform: translate3d(24px, 0, 0);
}

html.motion-ready body.motion-in .hero-signal {
  animation: copy-arrival 760ms 610ms cubic-bezier(.16, 1, .3, 1) both;
}

.eyebrow::before {
  transform-origin: left;
}

html.motion-ready [data-reveal].is-visible .eyebrow::before {
  animation: line-reveal 620ms cubic-bezier(.16, 1, .3, 1) both;
}

.service-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: border-color .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease;
}

.service-card > * {
  position: relative;
  z-index: 1;
}

.service-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(245,83,14,.16), transparent 42%);
  opacity: 0;
  transition: opacity .35s ease;
}

@media (hover: hover) {
  .service-card:hover {
    transform: translate3d(0, -9px, 0) rotateX(1deg);
    border-color: rgba(245,83,14,.62);
    box-shadow: 0 30px 70px rgba(0,0,0,.34);
  }
  .service-card:hover::after { opacity: 1; }
  .service-card:hover .section-no { letter-spacing: .12em; }
}

.section-no {
  transition: letter-spacing .35s ease;
}

.button {
  position: relative;
  overflow: hidden;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.24) 49%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}

.button > * { position: relative; z-index: 1; }
.button:hover::before { transform: translateX(130%); }

.price-panel,
.review-card,
.gallery-card,
.instagram-profile,
.booking-form {
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), border-color .35s ease, background-color .35s ease;
}

@media (hover: hover) {
  .price-panel:hover,
  .review-card:hover,
  .gallery-card:hover,
  .instagram-profile:hover {
    transform: translate3d(0, -5px, 0);
    border-color: rgba(204,27,89,.55);
  }
  .gallery-card:hover img { transform: scale(1.055); }
}

.gallery-card img {
  transition: transform .7s cubic-bezier(.16, 1, .3, 1), filter .45s ease;
}

.filters button {
  transition: transform .25s ease, color .25s ease, border-color .25s ease, background-color .25s ease;
}

.filters button:hover { transform: translateY(-2px); }
.filters button.is-active { animation: filter-pulse .5s ease both; }

.final-cta {
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  content: "";
  position: absolute;
  width: 34rem;
  height: 34rem;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: cta-orbit 12s linear infinite;
}

@keyframes header-arrival {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes copy-arrival {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes light-sweep {
  from { transform: translateX(-80%) rotate(8deg); }
  to { transform: translateX(85%) rotate(8deg); }
}

@keyframes hero-drift {
  from { transform: scale(1.1) translate3d(0, 0, 0); }
  to { transform: scale(1.04) translate3d(-1.2%, -.8%, 0); }
}

@keyframes page-drift {
  from { transform: scale(1.1) translate3d(0, 0, 0); }
  to { transform: scale(1.04) translate3d(-.8%, 0, 0); }
}

@keyframes line-reveal {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes filter-pulse {
  0% { transform: scale(.94); }
  70% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes cta-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg) scale(.88); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.05); }
  to { transform: translate(-50%, -50%) rotate(360deg) scale(.88); }
}

@media (max-width: 680px) {
  html.motion-ready [data-reveal],
  html.motion-ready [data-reveal="side"] { transform: translate3d(0, 20px, 0); }
  .final-cta::before { width: 23rem; height: 23rem; }
}

/* Home video: the copy enters only once the garage door has opened. */
html.motion-ready body.motion-in .hero-video .hero-content > *,
html.motion-ready body.motion-in .hero-video .hero-signal {
  animation: none;
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  filter: blur(7px);
  transition:
    opacity 760ms cubic-bezier(.16, 1, .3, 1) var(--hero-copy-delay, 0ms),
    transform 900ms cubic-bezier(.16, 1, .3, 1) var(--hero-copy-delay, 0ms),
    filter 700ms ease var(--hero-copy-delay, 0ms);
}
html.motion-ready body.motion-in .hero-video .hero-content > *:nth-child(1) { --hero-copy-delay: 0ms; }
html.motion-ready body.motion-in .hero-video .hero-content > *:nth-child(2) { --hero-copy-delay: 90ms; }
html.motion-ready body.motion-in .hero-video .hero-content > *:nth-child(3) { --hero-copy-delay: 180ms; }
html.motion-ready body.motion-in .hero-video .hero-content > *:nth-child(4) { --hero-copy-delay: 270ms; }
html.motion-ready body.motion-in .hero-video .hero-signal { --hero-copy-delay: 360ms; transform: translate3d(24px, 0, 0); }
html.motion-ready body.motion-in .hero-video.is-copy-visible .hero-content > *,
html.motion-ready body.motion-in .hero-video.is-copy-visible .hero-signal {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready [data-reveal],
  html.motion-ready [data-reveal="side"],
  html.motion-ready .hero-content > *,
  html.motion-ready .page-hero-content > *,
  html.motion-ready .hero-signal {
    opacity: 1;
    transform: none;
    filter: none;
  }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}