/* ===============================
   WEBLINE CATALOGUE
   BASE PAGE
   =============================== */
/* ===============================
   CATALOGUE — FREE PAGE SCROLLING
   =============================== */

html,
body.catalogue-body {
  scroll-snap-type: none !important;
}

body.catalogue-body .site-header,
body.catalogue-body .site-footer {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

/*
  Catalogue is a browsing page,
  so disable homepage snap behavior.
*/



.catalogue-body {
  min-height: 100%;
}

.catalogue-body .site-header {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}


/* Main catalogue area */

.catalogue-section {
  min-height: calc(100vh - var(--header-h));

  background: #262626;

  padding: 40px 34px 70px;

  position: relative;
}


/* Same title language as Services / Process */

.catalogue-title {
  width: fit-content;
  margin: 0 auto;

  text-align: center;

  font-family: 'Noto Sans Georgian', sans-serif;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.08em;

  color: rgba(255, 255, 255, 0.96);

  position: relative;
  padding-bottom: 10px;
}

.catalogue-title::after {
  content: '';

  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 2px;

  background: #598560;
  border-radius: 999px;

  box-shadow:
    0 0 10px rgba(89, 133, 96, 0.22);
}


/*
  Empty stage for now.
  Premium carousel goes here next.
*/

.catalogue-stage {
  min-height: 650px;
  margin-top: 44px;

  position: relative;
  overflow: hidden;
}


/* Static carousel geometry */

.catalogue-card {
  position: absolute;
  top: 50%;
  height: calc((100vw - 68px) * 0.252525);

  background: #303030;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  overflow: hidden;


  box-shadow: 0 28px 38px -18px rgba(0, 0, 0, 0.38);
}

.catalogue-card-image {
  position: absolute;

  left: 50%;
  top: 50%;

  display: block;

  max-width: none;
  max-height: none;

  transform: translate(-50%, -50%);

  pointer-events: none;
  user-select: none;

  will-change:
    width,
    height;
}

/* SIDE version */



/* Active */

.catalogue-card-active {
  width: 40%;
  left: 30%;

  transform:
    translateY(-50%)
    scale(1)
    perspective(1400px)
    rotateY(0deg);

  z-index: 3;

  box-shadow:
    0 28px 38px -18px rgba(0, 0, 0, 0.38);
}


/* Previous / Next */

.catalogue-card-prev {
  width: 17%;
  left: 14%;

  transform:
    translateY(-50%)
    scale(0.92)
    perspective(1400px)
    rotateY(3deg);

  z-index: 2;
}

.catalogue-card-next {
  width: 17%;
  left: 69%;

  transform:
    translateY(-50%)
    scale(0.92)
    perspective(1400px)
    rotateY(-3deg);

  z-index: 2;
}


/* Far Previous / Next */

.catalogue-card-far-prev {
  width: 17%;
  left: 5%;

  transform:
    translateY(-50%)
    scale(0.82)
    perspective(1400px)
    rotateY(5deg);

  z-index: 1;
}

.catalogue-card-far-next {
  width: 17%;
  left: 78%;

  transform:
    translateY(-50%)
    scale(0.82)
    perspective(1400px)
    rotateY(-5deg);

  z-index: 1;
}


/* Outermost Previous / Next */

.catalogue-card-outer-far-prev {
  width: 20%;
  left: -8%;

  transform:
    translateY(-50%)
    scale(0.72)
    perspective(1400px)
    rotateY(7deg);

  z-index: 0;
}

.catalogue-card-outer-far-next {
  width: 20%;
  left: 88%;

  transform:
    translateY(-50%)
    scale(0.72)
    perspective(1400px)
    rotateY(-7deg);

  z-index: 0;
}

.catalogue-card-outer-far-prev,
.catalogue-card-outer-far-next {
  z-index: 0;
}

.catalogue-card-far-prev,
.catalogue-card-far-next {
  z-index: 1;
}

.catalogue-card-prev,
.catalogue-card-next {
  z-index: 2;
}

.catalogue-card-active {
  z-index: 3;
}

/* ===============================
   CATALOGUE CAROUSEL MOTION
   =============================== */

.catalogue-card {
  cursor: grab;

  will-change:
    left,
    width,
    transform;
}

.catalogue-is-dragging .catalogue-card {
  cursor: grabbing;
}


/* ===============================
   CAROUSEL GESTURE TUTORIAL
   =============================== */

.catalogue-gesture-guide {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 180px;
  height: 90px;

  transform:
    translate(-50%, -50%)
    translateY(-260px);

  z-index: 20;

  pointer-events: none;

  opacity: 1;

  animation:
    catalogue-guide-life 5s linear forwards;
}


/* Hand */

.catalogue-gesture-hand {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 56px;
  height: 64px;

  transform: translate(-50%, -50%);

  opacity: 0;

  animation:
    catalogue-hand-swipe 2.1s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.25s
    2;
}


.catalogue-gesture-hand svg {
  display: block;

  width: 100%;
  height: 100%;

  fill: rgba(255, 255, 255, 0.66);

  filter:
    drop-shadow(
      0 5px 10px rgba(0, 0, 0, 0.28)
    );
}


/* Side-card click pulse */

.catalogue-card-prev::after,
.catalogue-card-next::after {
  content: '';

  position: absolute;

  left: 50%;
  top: 50%;

  width: 22px;
  height: 22px;

  border-radius: 50%;

  background: rgba(32, 40, 32, 0.82);

  

  border: 2px solid #598560;

  box-shadow:
  0 0 0 4px rgba(32, 40, 32, 0.34),
  0 0 18px rgba(89, 133, 96, 0.72);

  transform:
    translate(-50%, -50%)
    scale(0.35);

  opacity: 0;

  pointer-events: none;

  z-index: 10;
}


.catalogue-card-prev::after {
  animation:
    catalogue-click-pulse
    850ms
    cubic-bezier(0.22, 1, 0.36, 1)
    1.45s
    1;
}


.catalogue-card-next::after {
  animation:
    catalogue-click-pulse
    850ms
    cubic-bezier(0.22, 1, 0.36, 1)
    2.45s
    1;
}


/* Swipe movement */

@keyframes catalogue-hand-swipe {

  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translateX(0);
  }

  12% {
    opacity: 0.7;
  }

  35% {
    opacity: 0.7;
    transform:
      translate(-50%, -50%)
      translateX(-58px);
  }

  65% {
    opacity: 0.7;
    transform:
      translate(-50%, -50%)
      translateX(58px);
  }

  88% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translateX(0);
  }

}


/* Click pulse */

@keyframes catalogue-click-pulse {

  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(0.35);
  }

  20% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(3.6);
  }

}


/* Entire tutorial disappears */

@keyframes catalogue-guide-life {

  0%,
  84% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }

}


/* User already interacted */

.catalogue-gesture-guide.is-hidden {
  opacity: 0;
  visibility: hidden;

  transition:
    opacity 260ms ease,
    visibility 260ms ease;
}

html[lang="en"] .catalogue-title {
  font-family: 'Nunito Sans', sans-serif;
}

/* Smaller desktop — Catalogue ~16% reduction */
@media (min-width: 1230px) and (max-width: 1502px) {

  .catalogue-section {
    padding: 34px 29px 59px;
  }

  .catalogue-title {
    font-size: 32px;       /* 38px → ~16% smaller */
    padding-bottom: 8px;
  }

    .catalogue-stage {
    min-height: 546px;
    margin-top: 37px;
  }

  .catalogue-gesture-guide {
    transform:
      translate(-50%, -50%)
      translateY(-218px);
  }

}
@media (max-width: 1500px) {
  .catalogue-gesture-guide {
    top: 125px;

    transform:
      translateX(-50%);
  }
}

/* 1024 tablet — Catalogue title */
@media (max-width: 1024px) {

  .catalogue-title {
    font-size: 27px;
    padding-bottom: 7px;
  }

}

/* Real tablet landscape — Catalogue */
@media (hover: none) and (pointer: coarse)
       and (min-width: 1025px)
       and (max-width: 1366px)
       and (max-height: 700px) {

  .catalogue-section {
    padding:
      30px
      26px
      53px;
  }

  .catalogue-title {
    font-size: 29px;
    padding-bottom: 7px;
  }

  .catalogue-stage {
    min-height: 490px;
    margin-top: 33px;
  }

  .catalogue-gesture-guide {
    top: 113px;
  }
}

/* 800 portrait tablet — Catalogue carousel 30% larger */
@media (min-width: 769px) and (max-width: 820px) {

  .catalogue-card {
    scale: 1.60;
    top: 65%;
  }

}

/* ===============================
   430 MOBILE — CATALOGUE CAROUSEL
   =============================== */

@media (max-width: 430.99px) {

  .catalogue-card {
    scale: 1.7;
  }

}

/* ===============================
   360 SHORT MOBILE — CATALOGUE
   Galaxy S22
   =============================== */

@media (min-width: 350px) and (max-width: 364px) and (max-height: 700px) {

  .catalogue-stage {
    min-height: 400px;
    margin-top: 20px;
  }

}

/* ===============================
   375 SHORT MOBILE — CATALOGUE
   =============================== */

@media (min-width: 365px) and (max-width: 380px) and (max-height: 700px) {

  .catalogue-stage {
    min-height: 400px;
    margin-top: 20px;
  }

}

/* ===============================
   384 / 390 SHORT MOBILE — CATALOGUE
   =============================== */

@media (min-width: 381px) and (max-width: 400px) and (max-height: 700px) {

  .catalogue-stage {
    min-height: 400px;
    margin-top: 20px;
  }

   .catalogue-title {
    font-size: 26px;
    padding-bottom: 7px;
  }

}


/* =========================================
   CATALOGUE — EXPANDED PROJECT PREVIEW
   Initial responsive layout
   ========================================= */

.catalogue-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background: rgba(0, 0, 0, 0.82);

  overflow-y: auto;
  overscroll-behavior: contain;
}

.catalogue-preview-panel {
  position: relative;

  width: 100%;
  max-width: 1200px;
  max-height: calc(100dvh - 48px);

  padding: 24px;

  background: #303030;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;

  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);

  overflow-y: auto;
}

.catalogue-preview-image {
  display: block;

  width: 100%;
  height: auto;
  max-height: calc(100dvh - 100px);

  object-fit: contain;
  border-radius: 10px;
}

.catalogue-preview-close {
  position: absolute;
  top: 12px;
  right: 12px;

  width: 40px;
  height: 40px;

  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;

  background: #363636;
  color: white;

  font-size: 26px;
  cursor: pointer;

  z-index: 2;
}

/* Tablet and mobile — initial sizing */

@media (max-width: 1024px) {

  .catalogue-preview-overlay {
    padding: 16px;
  }

  .catalogue-preview-panel {
    padding: 14px;
    max-height: calc(100dvh - 32px);
  }

  .catalogue-preview-image {
    max-height: calc(100dvh - 80px);
  }

}


/* =========================================
   CATALOGUE — SMOOTH MORPH OPENING
   ========================================= */

.catalogue-preview-overlay {
  background: rgba(0, 0, 0, 0);

  transition:
    background-color 520ms ease;
}

/* Dark background gradually appears */

.catalogue-preview-overlay.is-open {
  background: rgba(0, 0, 0, 0.82);
}

/* FLIP animation surface */

.catalogue-preview-panel {
  transform-origin: top left;
  will-change: transform;
}

/* Hide close button during morph */

.catalogue-preview-close {
  opacity: 0;
  pointer-events: none;

  transition:
    opacity 200ms ease;
}

/* Reveal close button after expansion */

.catalogue-preview-overlay.is-ready
.catalogue-preview-close {
  opacity: 1;
  pointer-events: auto;
}