/* animations & transitions */

/* --- page reveal --- */
.page {
  opacity: 0;
  transform: translateY(30px);
  animation: pageAppear 0.6s ease forwards;

  button {
    transition: var(--general-transition);

    &:hover {
      transform: var(--translate-hover);
      box-shadow: var(--general-shadow);

      &:active {
        opacity: 0.7;
        transform: var(--translate-active);
      }
    }
  }
}

@keyframes pageAppear {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wrapArrow {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  45% {
    transform: translateX(20px);
    opacity: 1;
  }

  50% {
    transform: translateX(20px);
    opacity: 0;
  }

  51% {
    transform: translateX(-20px);
    opacity: 0;
  }

  55% {
    opacity: 1;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* vertical twin of wrapArrow: on mobile the arrow points down
   (rotate(90deg)), so the wrap must slide along Y and keep that
   rotation — otherwise it snaps horizontal and hops sideways */
@keyframes wrapArrowDown {
  0% {
    transform: rotate(90deg) translateY(0);
    opacity: 1;
  }

  45% {
    transform: rotate(90deg) translateY(20px);
    opacity: 1;
  }

  50% {
    transform: rotate(90deg) translateY(20px);
    opacity: 0;
  }

  51% {
    transform: rotate(90deg) translateY(-20px);
    opacity: 0;
  }

  55% {
    opacity: 1;
  }

  100% {
    transform: rotate(90deg) translateY(0);
    opacity: 1;
  }
}

@keyframes popoutFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes formPop {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.95);
  }

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

@keyframes popoutFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes formPopOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
}

@keyframes successFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* scroll-triggered card reveal: cards stay hidden until their section
   scrolls into view, then fade + slide in once (classes are added by
   JS, so no-JS / reduced-motion visitors see them plainly) */
.reveal {
  opacity: 0;
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal-up {
  transform: translateY(40px);
}

.reveal.revealed {
  opacity: 1;
  transform: none;
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */

html {
  scroll-behavior: smooth;
}

.site-header {
  transition:
    transform 0.35s ease,
    opacity 0.35s ease;

  &.hide {
    transform: translateY(-100%);
    opacity: 0;
  }
}

/* ============================================================
   HOME
   ============================================================ */

.home {
  .button {
    &:has(button:disabled) {
      cursor: not-allowed;
    }

    button {
      &:disabled {
        pointer-events: none;
        cursor: not-allowed;
        opacity: 0.4;
      }
    }
  }
}

/* ============================================================
   ABOUT
   ============================================================ */

.about {
  .stats {
    div {
      transition: var(--general-transition);

      &:hover {
        transform: var(--translate-hover);
        border: var(--hover-border);
        box-shadow: var(--white-shadow-hover);
      }
    }
  }
}

/* ============================================================
   SERVICES
   ============================================================ */

.service {
  .card-holder {
    .flip-card {
      /* lift on hover, in both flipped and unflipped states (the wrapper
         never rotates, so this transform never fights the flip) */
      &:hover {
        transform: translateY(-6px);
        box-shadow: var(--white-shadow-hover);
      }

      /* the panel's border lives on the rotating .card */
      &:hover .card {
        border-color: #5b7191;
      }
    }
  }
}

/* ============================================================
   WHY US
   ============================================================ */

.why {
  .list {
    p {
      transition: var(--general-transition);

      &:hover {
        transform: var(--translate-hover);
        box-shadow: var(--white-shadow-hover);
        border: 1px solid #5b7191;
      }
    }
  }
}

/* ============================================================
   PROCESS
   ============================================================ */

.process {
  .card-holder {
    
    > div {
      .arrow {
        &:hover {
          animation: wrapArrow .9s linear;
        }
      }
    }

    .card {
      transition: var(--general-transition);

      &:hover {
        transform: translateX(6px);
        box-shadow: var(--white-shadow-hover);
        border: var(--general-border);
      }
    }
  }
}

/* ============================================================
   CONTACT
   ============================================================ */

.contact {
  .card-holder {
    .card {
      transition: var(--general-transition);

      &:hover {
        border: var(--hover-border);
        transform: var(--translate-hover);
        box-shadow: var(--white-shadow-hover);
      }
    }
  }
}

/* ============================================================
   MODAL / POPOUT
   ============================================================ */

.popout {
  &.active {
    animation: popoutFade 0.3s ease forwards;
  }

  &.active .form {
    animation: formPop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }


  &.closing {
    animation: popoutFadeOut 0.3s ease forwards;
  }

  &.closing .form {
    animation: formPopOut 0.3s ease forwards;
  }

  .form {
    form {
      .input-group {
        input,
        textarea {
          transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;

          &:focus {
            border-color: #0f5eb3;
            box-shadow: 0 0 4px 2px rgba(49, 154, 202, 0.15);
            transform: translateY(-4px);
          }
        }

        span {
          transition: color 0.3s ease, opacity 0.3s ease;
        }
      }

      .button-group {
        button {
          transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
        }

        button[type="submit"] {
          &:hover {
            background-color: #113f7d;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
            transform: translateY(-4px);

            &:active {
              background-color: #1f3b68;
              transform: translateY(-2px);
            }
          }
        }

        button[type="reset"] {
          &:hover {
            background-color: #cccccc;
            color: #3a3a3a;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
            transform: translateY(-4px);

            &:active {
              background-color: rgb(219, 219, 219);
              transform: translateY(-2px);
            }
          }
        }
      }
    }

    /* X close button: hover spins the badge */
    .close {
      .icon {
        transition: var(--general-transition);
      }

      &:hover .icon {
        background: #052950;
        color: #fff;
        transform: rotate(90deg);
      }
    }

    .form-success {
      animation: successFadeIn 0.4s ease;
    }

    .success-close {
      transition: var(--general-transition);

      &:hover {
        background: #052950;
        color: #fff;
      }
    }
  }
}

/* reduced motion */

@media (prefers-reduced-motion: reduce) {
  /* no smooth scrolling for anchor jumps either */
  html {
    scroll-behavior: auto;
  }

  /* disable entrance/exit animations and hover transitions; layouts
     stay identical, everything just happens instantly */
  .page,
  .site-header,
  .service .card-holder .flip-card,
  .service .card-holder .card,
  .service .flip-front img,
  .service .card-holder .flip-badge,
  .page button,
  .about .stats > div,
  .why .list > p,
  .process .card-holder .card,
  .process .arrow,
  .contact .card-holder .card,
  .hero .btn-primary,
  .hero .btn-secondary,
  .nav-cta,
  .nav-cta .cta-arrow,
  .nav-toggle,
  .site-header .nav-pill,
  .site-header .nav-pill a,
  .site-header .nav-phone,
  .popout,
  .popout .form,
  .form-success {
    animation: none;
    transition: none;
  }

  /* the background image is fine under reduced motion — just freeze
     its drift so nothing moves */
  .bg-image {
    animation: none;
  }

  /* with animations off, the back button's resting opacity (0) would
     keep it invisible, so it must simply show while the card is flipped */
  .service .card-holder .flip-card.flipped .flip-back-badge {
    opacity: 1;
    animation: none;
  }
}

/* ==================================================== */
/*                    responsive                        */
/* ==================================================== */

/* the hamburger button only exists for small screens */
.nav-toggle {
  display: none;
}

/* keep anchor jumps clear of the fixed header */
#home,
#about,
#service,
#why,
#process,
#contact {
  scroll-margin-top: 90px;
}

/* body scroll is locked while the mobile menu is open */
body.menu-open {
  overflow: hidden;
}

/* ---------------------------------------------------- */
/*                  tablets (≤ 992px)                    */
/* ---------------------------------------------------- */

@media (max-width: 992px) {
  .site-header {
    padding: 14px 24px;
  }

  .hero {
    .title {
      font-size: 36px;
    }

    .number {
      font-size: 42px;
    }
  }

  .service .card-holder > div {
    flex: 0 0 calc((100% - 15px) / 2);
  }

  .why .list > p {
    flex: 0 0 calc((100% - 15px) / 2);
  }

  .process .card-holder > div {
    flex: 0 0 calc((100% - 15px) / 2);
  }
}

/* ---------------------------------------------------- */
/*                    phones (≤ 768px)                   */
/* ---------------------------------------------------- */

@media (max-width: 768px) {
  /* ---- header + hamburger menu ---- */
  body {
    padding-top: 72px;
  }

  .site-header {
    padding: 10px 16px;
  }

  .site-header .container {
    padding: 6px 8px 6px 12px;
    border-radius: 14px;
  }

  .site-header h1,
  .site-header h1 span {
    font-size: 18px;
  }

  /* the pill becomes a floating rounded drawer below the header;
     the CTA is dropped on small screens (the hero CTA takes over) */
  .site-header .nav-cta {
    display: none;
  }

  /* the drawer IS the .nav-pill element, so target it directly to beat
     the base pill styles (equal specificity, later source) */
  .site-header .nav-pill {
    position: fixed;
    top: 84px;
    right: 16px;
    width: min(80vw, 320px);
    max-height: calc(100dvh - 110px);
    padding: 6px 10px 14px;
    /* stack the drawer title above the links, full width */
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border: 1px solid #dfe6ef;
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(5, 41, 80, 0.35);
    overflow-y: auto;
    transform: translateX(calc(100% + 16px));
    visibility: hidden;
    transition:
      transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0.35s;
    z-index: 1001;

    /* small heading gives the panel an intentional top edge */
    .nav-drawer-title {
      display: block;
      margin: 0;
      padding: 14px 14px 10px;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #9aa3ad;
    }


    ul {
      flex-direction: column;
      gap: 4px;

      li {
        a {
          font-size: 1.02rem;
          font-weight: 600;
          padding: 13px 16px;
          border-radius: 14px;
          color: #26313d;

          &:hover,
          &.active {
            background: #f1f3f6;
            color: var(--primary);
            box-shadow: none;
            text-shadow: none;
            scale: 1;
          }
        }
      }
    }
  }

  .site-header.nav-open .nav-pill {
    transform: translateX(0);
    visibility: visible;
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: #eef3f8;
    color: var(--primary);
    font-size: 1.35rem;
    cursor: pointer;
    transition: var(--general-transition);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1002;

    &:hover {
      background: var(--primary);
      color: #fff;
    }
  }

  /* phone contact button, beside the hamburger (scoped to beat the
     base .site-header .nav-phone hide rule) */
  .site-header .nav-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: #eef3f8;
    font-size: 1.15rem;
    cursor: pointer;
    transition: var(--general-transition);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1002;

    .fi-rr-phone-call {
      color: var(--secondary);
    }

    &:hover {
      background: var(--primary);

      .fi-rr-phone-call {
        color: #fff;
      }
    }
  }

  /* ---- shared page/hero sizing ---- */
  .page {
    padding: 10% 5%;
    margin: 4% 0;
    gap: 22px;

    > * {
      flex: 1 1 100%;
    }
  }

  .hero {
    padding: 1% 0;

    .title {
      font-size: 28px;
    }

    .number {
      font-size: 38px;
    }

    .description {
      font-size: 0.95rem;
    }

    button {
      width: 100%;
      padding: 14px 20px;
      touch-action: manipulation;
    }
  }

  .home .image {
    order: -1;
  }

  /* ---- about ---- */
  .about .content .list > p {
    flex: 1 1 100%;
  }

  .about .stats > div {
    padding: 6%;

    .stat-value {
      font-size: 2rem;
    }
  }

  /* ---- service ---- */
  .service {
    padding: 10% 5%;

    .card-holder {
      gap: 18px;

      > div {
        flex: 1 1 100%;
      }
    }
  }

  /* ---- why ---- */
  .why {
    padding: 10% 5%;

    .list {
      gap: 12px;

      > p {
        flex: 1 1 100%;
      }
    }
  }

  /* ---- process ---- */
  .process {
    padding: 10% 5%;

    .card-holder {
      gap: 12px;

      > div {
        flex: 1 1 100%;
      }

      .arrow {
        transform: rotate(90deg);

        /* the wrap animation must follow the arrow's new (downward)
           direction instead of sliding it sideways */
        &:hover {
          animation: wrapArrowDown .9s linear;
        }
      }

      div .card {
        padding: 6% 5%;
      }
    }
  }

  /* ---- contact ---- */
  .contact .card-holder {
    gap: 14px;

    .card {
      padding: 18px;
    }
  }

  /* ---- footer ---- */
  .site-footer {
    padding: 24px 16px;

    .container {
      flex-direction: column;
      gap: 18px;
    }

    .container:last-of-type {
      align-items: center;
      text-align: center;
    }
  }

  /* ---- popout form ---- */
  .popout {
    padding: 10px;
  }

  /* service flip cards */
  .service .card-holder .flip-card .flip-badge {
    width: 38px;
    height: 38px;
    bottom: 12px;
  }
  
  .service .card-holder .flip-card .flip-front .flip-badge {
    right: 12px;
  }

  .service .card-holder .flip-card .flip-back-badge {
    left: 12px;
  }

  .popout .form {
    padding: 26px 18px;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 20px;

    .description h2 {
      font-size: 1.5rem;
    }

    form {
      .row {
        grid-template-columns: 1fr;
      }

      .button-group {
        flex-direction: column;

        button {
          width: 100%;
        }
      }

      .input-group textarea {
        min-height: 130px;
      }
    }

    .close {
      top: 12px;
      right: 12px;
    }
  }
}