/* ==========================================================================
   MOTION — every animation and transition of the site lives in this file.
   Loaded last. Delete the <link> to this file and the site becomes static.

   1. Settings                      4. Header (Antra reference)
   2. Page transition (4 bars)      5. Hover effects (Construcfy reference)
   3. Reveal on scroll              6. Small details
   7. Reduced motion
   ========================================================================== */

/* 1. SETTINGS ------------------------------------------------------------- */
:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --reveal-duration: 0.5s;      /* how long each element takes to appear */
  --reveal-distance: 10%;       /* how far it rises (of its own height) */
  --reveal-max: 48px;           /* limit of that rise for tall blocks */
  --hover-duration: 0.3s;
}

/* 2. PAGE TRANSITION ------------------------------------------------------
   Four vertical bars cover the screen. When a page opens they fold away
   upwards one after another (the Construcfy loading animation). When a link
   is clicked they grow back from the bottom before the next page loads
   (main.js > 8), so both pages are joined by the same movement.            */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  pointer-events: none;
}

.page-transition i {
  flex: 1;
  height: 100%;
  background: var(--color-bars);
  box-shadow: 1px 0 0 var(--color-bars);   /* hides hairline gaps between bars */
  transform-origin: top;
  animation: bars-open 0.7s var(--ease-out-quart) both;
}

.page-transition i:nth-child(2) { animation-duration: 0.8s; animation-delay: 0.1s; }
.page-transition i:nth-child(3) { animation-duration: 0.9s; animation-delay: 0.2s; }
.page-transition i:nth-child(4) { animation-duration: 0.8s; animation-delay: 0.3s; }

@keyframes bars-open {
  from { transform: scaleY(1); }
  to { transform: scaleY(0); }
}

/* Leaving the page */
.is-leaving .page-transition i {
  transform-origin: bottom;
  animation: bars-close 0.45s var(--ease-in-out) both;
}

.is-leaving .page-transition i:nth-child(2) { animation-duration: 0.45s; animation-delay: 0.06s; }
.is-leaving .page-transition i:nth-child(3) { animation-duration: 0.45s; animation-delay: 0.12s; }
.is-leaving .page-transition i:nth-child(4) { animation-duration: 0.45s; animation-delay: 0.18s; }

@keyframes bars-close {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* 3. REVEAL ON SCROLL -----------------------------------------------------
   main.js > 7 marks blocks with data-reveal and adds .is-visible when they
   enter the screen. "up" = rise and fade in, "fade" = fade in only.
   --reveal-delay is set per element (0.2s to 0.6s, like the reference).    */
.js [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--reveal-duration) ease var(--reveal-delay, 0.2s),
    transform var(--reveal-duration) ease var(--reveal-delay, 0.2s);
}

.js [data-reveal="up"] {
  transform: translateY(min(var(--reveal-distance), var(--reveal-max)));
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* The decorative squares over the photos appear one by one */
.js .pixels[data-reveal] {
  opacity: 1;
  transition: none;
}

.js .pixels[data-reveal] i {
  opacity: 0;
  transition: opacity var(--reveal-duration) ease;
}

.js .pixels[data-reveal] i:nth-child(1) { transition-delay: 0.4s; }
.js .pixels[data-reveal] i:nth-child(2) { transition-delay: 0.5s; }
.js .pixels[data-reveal] i:nth-child(3) { transition-delay: 0.6s; }

.js .pixels[data-reveal].is-visible i {
  opacity: 1;
}

/* 4. HEADER (Antra reference) --------------------------------------------- */
.site-nav__link,
.header-call__number,
.header-call__label,
.icon-btn {
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.site-nav__link .icon {
  transition: transform 0.3s ease-in-out;
}

.site-nav__item:hover > .site-nav__link .icon,
.site-nav__item.is-open > .site-nav__link .icon {
  transform: rotate(180deg);
}

/* Dropdowns (Stripe style): the menu fades and slides in, the shared panel
   moves and resizes between menus, the arrow of an option slides in, the
   line under a column title draws from the left */
.site-menu {
  transition: opacity 0.15s ease, transform 0.2s var(--menu-ease, ease), visibility 0s 0.2s;
}

.site-nav__item.is-open > .site-menu,
html:not(.has-menu-stage) .site-nav__item:hover > .site-menu,
html:not(.has-menu-stage) .site-nav__item:focus-within > .site-menu {
  transition: opacity 0.22s ease 0.05s, transform 0.3s var(--menu-ease, ease) 0.03s, visibility 0s;
}

.site-menu-stage {
  transition: transform 0.32s var(--menu-ease, ease), width 0.32s var(--menu-ease, ease),
    height 0.32s var(--menu-ease, ease), visibility 0s 0.25s;
}

.site-menu-stage.is-open {
  transition: transform 0.32s var(--menu-ease, ease), width 0.32s var(--menu-ease, ease),
    height 0.32s var(--menu-ease, ease), visibility 0s;
}

.site-menu-stage.is-jump,
.site-menu-stage.is-jump * {
  transition: none !important;
}

.site-menu-stage__panel {
  transition: opacity 0.2s ease, transform 0.3s var(--menu-ease, ease);
}

.site-menu-stage__caret {
  transition: left 0.32s var(--menu-ease, ease), opacity 0.2s ease;
}

.site-nav__link {
  transition: color 0.3s ease-in-out, opacity 0.25s ease;
}

.menu-col__title::after {
  transition: transform 0.5s var(--menu-ease, ease);
}

.menu-item__title,
.menu-item__text {
  transition: color 0.2s ease;
}

.menu-item__title .icon {
  transition: opacity 0.2s ease, transform 0.3s var(--menu-ease, ease);
}

.site-menu__dot {
  animation: menu-dot 2.4s ease-in-out infinite;
}

@keyframes menu-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(218, 46, 46, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(218, 46, 46, 0); }
}

/* Header button: the sweep */
.header-btn {
  transition: color 0.3s ease-in-out;
}

.header-btn::before {
  transition: transform 0.4s var(--ease-in-out);
}

.site-logo {
  transition: opacity var(--hover-duration);
}

.site-logo:hover {
  opacity: 0.6;
}

.mobile-menu:not([hidden]) {
  animation: menu-in 0.35s var(--ease-out-quart);
}

@keyframes menu-in {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}

.mobile-menu__group > summary .icon {
  transition: transform var(--hover-duration);
}

/* 5. HOVER EFFECTS (Construcfy reference) --------------------------------- */

/* Buttons shrink slightly */
.btn {
  transition:
    border-color var(--hover-duration),
    background-color var(--hover-duration),
    color var(--hover-duration),
    transform var(--hover-duration);
}

.btn:hover {
  transform: scale3d(0.95, 0.95, 1.001);
}

.btn--block:hover {
  transform: scale3d(0.98, 0.98, 1.001);
}

/* Arrows move 3px in the direction they point */
.icon {
  transition: transform var(--hover-duration) ease;
}

a:hover .icon--arrow-right,
button:hover .icon--arrow-right {
  transform: translateX(3px);
}

a:hover .icon--arrow-up-right {
  transform: translate(3px, -3px);
}

button:hover .icon--arrow-left {
  transform: translateX(-3px);
}

/* Cards: title changes color, photo zooms in a little */
.service-card__title,
.post-card__title,
.link-list a,
.tag-list a,
.faq__question h3 {
  transition: color var(--hover-duration), border-color var(--hover-duration);
}

.service-card .photo,
.post-card .photo,
.area-card .photo {
  transition: transform 0.7s var(--ease-out-quart), opacity var(--hover-duration);
}

.service-card:hover .photo,
.post-card:hover .photo,
.area-card:hover .photo {
  transform: scale(1.06);
}

/* Links in text, footer and social icons */
a {
  transition: color var(--hover-duration);
}

.footer-main a:hover,
.footer-bottom a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

/* Footer credit: the logo dims like the header logo */
.footer-credit img {
  transition: opacity var(--hover-duration);
}

.footer-credit:hover img {
  opacity: 0.6;
}

.review-slider__nav button,
.about__social a {
  transition: color var(--hover-duration);
}

.review-slider__nav button:hover,
.about__social a:hover {
  color: var(--color-link);
}

.faq__question:hover h3 {
  color: var(--color-link);
}

.tag-list a:hover {
  color: var(--color-link);
}

/* 6. SMALL DETAILS -------------------------------------------------------- */

/* FAQ: arrow turns, answer fades in */
.faq__question .icon,
.review-slider__nav .icon {
  transition: transform var(--hover-duration) ease;
}

.faq__item[open] .faq__answer {
  animation: soft-in 0.4s ease;
}

/* Reviews: each review fades in when it becomes the active one */
.js .review.is-active {
  animation: soft-in 0.5s ease;
}

@keyframes soft-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Form fields */
.field input,
.field select,
.field textarea,
.choice span {
  transition:
    border-color var(--hover-duration),
    box-shadow var(--hover-duration),
    background-color var(--hover-duration),
    color var(--hover-duration);
}

/* Light / dark switch: sun and moon trade places with a quarter turn */
.theme-toggle__icon {
  transition: opacity 0.4s var(--ease-in-out), transform 0.4s var(--ease-in-out);
}

/* Back to top: fades in from below, arrow nudges up on hover */
.to-top {
  transition:
    opacity var(--hover-duration),
    transform var(--hover-duration),
    visibility var(--hover-duration);
}

.to-top::before {
  transition: background-color var(--hover-duration);
}

.to-top:hover .icon {
  transform: translateY(-3px);
}

/* Hero: the round scroll button fills in and its arrow dips on hover */
.hero__scroll {
  transition: background-color var(--hover-duration), color var(--hover-duration), border-color var(--hover-duration);
}

.hero__scroll:hover .icon--arrow-down {
  transform: translateY(6px);
}

/* Printing: everything visible, no bars */
@media print {
  .page-transition {
    display: none;
  }

  .js [data-reveal],
  .js .pixels[data-reveal] i {
    opacity: 1;
    transform: none;
  }
}

/* 7. REDUCED MOTION -------------------------------------------------------
   People who ask their device for less movement get the static site.       */
@media (prefers-reduced-motion: reduce) {
  .page-transition {
    display: none;
  }

  .js [data-reveal],
  .js .pixels[data-reveal] i {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}