/* Progressive motion layer. Load after theme.css; motion.js owns opt-in classes. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-quick: 220ms;
  --motion-reveal: 640ms;
}

/* Static is the default. Neither missing JavaScript nor a saved pause hides content. */
.motion-intro { opacity: 1; translate: none; }
.motion-sequence.entrance { animation: none; }
html:not(.motion-ready) :is(.reveal, .entrance, .motion-intro) {
  opacity: 1;
  transform: none;
  translate: none;
  animation: none;
  transition: none;
}
html:not(.motion-ready) .whatsapp-prompt { animation: none; transform: none; }

/* Use translate for entrances so hover transforms remain independent. */
.js-motion .reveal,
.js-motion .reveal.visible { transform: none; }

@media (prefers-reduced-motion: no-preference) {
  html.motion-ready.js-motion .reveal {
    opacity: 0;
    translate: var(--reveal-x, 0px) var(--reveal-y, 18px);
    transition:
      opacity var(--motion-reveal) var(--motion-ease) var(--reveal-delay, 0ms),
      translate var(--motion-reveal) var(--motion-ease) var(--reveal-delay, 0ms),
      transform 260ms var(--motion-ease),
      box-shadow 260ms ease,
      border-color var(--motion-quick) ease,
      background-color var(--motion-quick) ease;
  }
  html.motion-ready.js-motion .reveal:not(.visible) { transition: none; }
  html.motion-ready.js-motion .reveal.visible { opacity: 1; translate: none; }

  /* Sticky/fixed containing blocks and large layout wrappers never move. */
  html.motion-ready.js-motion :is(
    section.reveal, .container.reveal, .service-aside.reveal,
    .faq-topics.reveal, .service-layout.reveal, .faq-page-layout.reveal,
    .reveal:has(.service-aside, .faq-topics, dialog)
  ) { translate: none; transform: none; }

  html.motion-ready .motion-sequence > .motion-intro {
    animation: pe-intro 680ms var(--motion-ease) var(--intro-delay, 0ms) backwards;
  }
  html.motion-ready :is(.hero-copy, .page-hero-grid) .motion-sequence {
    animation: none;
  }

  /* A single, small zoom settles back to the photograph's original framing. */
  html.motion-ready .home-hero > .hero-backdrop:not([src*="supplied-"]) {
    transform-origin: center center;
    animation: pe-hero-drift 4.5s cubic-bezier(.2, .45, .45, 1) both;
    animation-play-state: paused;
  }
  html.motion-ready .home-hero.motion-in-view > .hero-backdrop:not([src*="supplied-"]) {
    animation-play-state: running;
  }

  /* Short ribbon accents preserve its existing text, spacing and wrapping. */
  html.motion-ready .brand-ribbon.motion-in-view > .container > span {
    animation: pe-ribbon-enter 600ms var(--motion-ease) backwards;
  }
  html.motion-ready .brand-ribbon.motion-in-view > .container > span:nth-child(2) { animation-delay: 70ms; }
  html.motion-ready .brand-ribbon.motion-in-view > .container > span:nth-child(3) { animation-delay: 140ms; }
  html.motion-ready .brand-ribbon.motion-in-view > .container > span:nth-child(4) { animation-delay: 210ms; }

  html.motion-ready :is(
    .button, .whatsapp-button, .header-phone, .menu-toggle,
    .dialog-close, .text-link, .service-card-link, .property-action
  ) {
    transition:
      transform var(--motion-quick) var(--motion-ease),
      background-color var(--motion-quick) ease,
      border-color var(--motion-quick) ease,
      color var(--motion-quick) ease,
      box-shadow var(--motion-quick) ease;
  }
  html.motion-ready :is(
    .service-card, .property-photo-card, .image-mini-card,
    .info-card, .area-card, .catalog-group, .pest-gallery-card
  ) {
    transition:
      transform 280ms var(--motion-ease),
      box-shadow 280ms ease,
      border-color var(--motion-quick) ease,
      background-color var(--motion-quick) ease;
  }
  html.motion-ready :is(
    .desktop-nav > a, .nav-dropdown > summary, .dropdown-panel a,
    .mobile-nav a, .footer-grid a, .catalog-list a, .faq-topics a
  ) {
    transition:
      color var(--motion-quick) ease,
      background-color var(--motion-quick) ease,
      box-shadow var(--motion-quick) ease,
      transform var(--motion-quick) var(--motion-ease);
  }
  html.motion-ready .site-header { transition: box-shadow 260ms ease; }
  html.motion-ready :is(.nav-chevron, .faq-chevron) {
    transition: transform 260ms var(--motion-ease), background-color 200ms ease;
  }
  html.motion-ready .menu-toggle span {
    transition: transform 240ms var(--motion-ease), opacity 160ms ease;
  }
  html.motion-ready .nav-dropdown[open] > .dropdown-panel {
    animation: pe-panel-enter 200ms var(--motion-ease) backwards;
  }
  html.motion-ready .mobile-nav:not([hidden]) {
    animation: pe-panel-enter 240ms var(--motion-ease) backwards;
  }
  html.motion-ready .faq-list details > p { animation: none; }
  html.motion-ready .faq-list details[open] > p {
    animation: pe-answer-enter 230ms var(--motion-ease) backwards;
  }
  html.motion-ready dialog[open] {
    animation: pe-dialog-enter 260ms var(--motion-ease) backwards;
  }
  html.motion-ready dialog[open]::backdrop {
    animation: pe-backdrop-enter 220ms ease backwards;
  }
  html.motion-ready :is(input, select, textarea) {
    transition: border-color 180ms ease, box-shadow 180ms ease;
  }

  /* Keyboard feedback retains the existing focus outlines and hit targets. */
  html.motion-ready :is(.button, .header-phone, .header-whatsapp-mobile):focus-visible {
    transform: translateY(-2px);
  }
  html.motion-ready :is(.text-link, .service-card-link, .property-action):focus-visible {
    transform: translateX(3px);
  }
  html.motion-ready :is(.service-card, .property-photo-card, .image-mini-card):focus-within {
    transform: translateY(-3px);
  }

  @media (hover: hover) and (pointer: fine) {
    html.motion-ready :is(.button, .header-phone, .header-whatsapp-mobile):hover {
      transform: translateY(-2px);
    }
    html.motion-ready :is(
      .service-card, .property-photo-card, .image-mini-card,
      .info-card, .area-card, .catalog-group, .pest-gallery-card
    ):hover { transform: translateY(-3px); }
    html.motion-ready :is(.text-link, .service-card-link, .property-action):hover {
      transform: translateX(3px);
    }
    html.motion-ready :is(.dropdown-panel a, .catalog-list a):hover {
      transform: translateX(2px);
    }
    html.motion-ready :is(
      .property-photo-card > img:not([src*="supplied-"]),
      .service-image > img:not([src*="supplied-"])
    ) { transition: transform 700ms var(--motion-ease); }
    html.motion-ready .property-photo-card:hover > img:not([src*="supplied-"]),
    html.motion-ready .service-card:hover .service-image > img:not([src*="supplied-"]) {
      transform: scale(1.025);
    }
  }
}

/* Touch taps should not retain the older stylesheet's hover lift or image zoom. */
@media (hover: none), (pointer: coarse) {
  html.motion-ready .button:hover,
  html.motion-ready .service-card:hover,
  html.motion-ready .service-card:hover img,
  html.motion-ready .property-photo-card:hover > img {
    transform: none;
  }
}

/* Never zoom, pan or clip the supplied pest photographs or their visible marks. */
html.motion-ready img[src*="supplied-"],
html.motion-ready .service-card:hover img[src*="supplied-"],
html.motion-ready .service-card:focus-within img[src*="supplied-"] {
  transform: none;
  scale: none;
}

/* Reaching a control by keyboard makes its entire reveal immediately visible. */
html.motion-ready.js-motion .reveal:focus-within,
html.motion-ready.js-motion .reveal:focus-visible,
html.motion-ready .motion-intro:focus-within {
  opacity: 1 !important;
  translate: none !important;
  animation: none !important;
  transition: none !important;
}

/* Background tabs stop spending animation work; the prompt keeps its resting text. */
html.motion-suspended *,
html.motion-suspended *::before,
html.motion-suspended *::after,
html.motion-suspended dialog::backdrop { animation-play-state: paused !important; }

/* Pausing reveals content immediately rather than freezing it mid-entrance. */
html.motion-paused :is(
  .reveal, .motion-intro, .entrance, .hero-backdrop,
  .brand-ribbon > .container > span, .whatsapp-prompt,
  .dropdown-panel, .mobile-nav, .faq-list details > p, dialog[open]
) {
  animation: none !important;
  opacity: 1 !important;
  translate: none !important;
  transform: none !important;
}
html.motion-paused :is(
  .button, .whatsapp-button, .header-phone, .text-link,
  .service-card, .property-photo-card, .image-mini-card,
  .info-card, .area-card, .catalog-group, .pest-gallery-card,
  .service-card-link, .property-action, .dropdown-panel a, .catalog-list a,
  .property-photo-card > img, .service-image > img
) { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  :is(
    .reveal, .motion-intro, .entrance, .hero-backdrop,
    .brand-ribbon > .container > span, .whatsapp-prompt,
    .dropdown-panel, .mobile-nav, .faq-list details > p, dialog[open]
  ) { opacity: 1 !important; translate: none !important; transform: none !important; }
  :is(
    .button, .whatsapp-button, .header-phone, .text-link,
    .service-card, .property-photo-card, .image-mini-card,
    .info-card, .area-card, .catalog-group, .pest-gallery-card,
    .service-card-link, .property-action, .dropdown-panel a, .catalog-list a,
    .property-photo-card > img, .service-image > img
  ) { transform: none !important; }
}

@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  :is(.reveal, .motion-intro, .entrance, .hero-backdrop, .brand-ribbon > .container > span) {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
  }
  .whatsapp-floating, .mobile-contact { display: none !important; }
}

@keyframes pe-intro {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: none; }
}
@keyframes pe-hero-drift {
  from { transform: scale(1.035); }
  to { transform: scale(1); }
}
@keyframes pe-ribbon-enter {
  from { opacity: .35; translate: 0 6px; }
  to { opacity: 1; translate: none; }
}
@keyframes pe-panel-enter {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: none; }
}
@keyframes pe-answer-enter {
  from { opacity: 0; translate: 0 5px; }
  to { opacity: 1; translate: none; }
}
@keyframes pe-dialog-enter {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: none; }
}
@keyframes pe-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}