@charset "utf-8";
/* CSS Document */

/* ---------- Slide-in section ---------- */
  .sit-section {
    box-sizing: border-box;
    width: 100%;
    height: 700px;
    display: flex;
    justify-content: center;   /* images meet in the middle */
    align-items: center;
    overflow: hidden;          /* hides anything off-screen / prevents horizontal scrollbar */
    position: relative;        /* lets the text sit on top, centred */
    background: #fff;
  }

  .sit-img {
    width: 50%;                /* each image fills half the section */
    height: 100%;              /* full 700px height of the section */
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: transform 1.2s ease-out, opacity 1.2s ease-out;
    transition-delay: 1s;      /* the 1 second wait after coming into view */
  }

  /* Start positions: pushed fully off-screen to the left / right */
  .sit-img-left  { transform: translateX(-100vw); }
  .sit-img-right { transform: translateX(100vw); }

  /* End positions: when the section is in view, move to the middle */
  .sit-section.sit-in-view .sit-img {
    transform: translateX(0);
    opacity: 1;
  }

  /* Centred text, fades in after the images have met */
  .sit-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 90%;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 5rem);
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);  /* keeps it readable over any photo */
    opacity: 0;
    transition: opacity 1s ease-in;
    transition-delay: 2.2s;    /* 1s wait + 1.2s image slide = starts as the images meet */
  }

  .sit-section.sit-in-view .sit-text { opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .sit-img,
    .sit-text { transition: none; }
  }
/* Tablet */
  @media (max-width: 1024px) {
    .sit-section { height: 500px; }
}

/* Phone */
  @media (max-width: 600px) {
    .sit-section { height: 320px; }
}