/* =========================================
   ΒΑΣΙΚΕΣ ΡΥΘΜΙΣΕΙΣ
   ========================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
}

body {
  margin: 0;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background: #111;
  color: #fff;
}

img {
  display: block;
}


/* =========================================
   ΑΡΧΙΚΟ SECTION
   ========================================= */

.intro-section,
.outro-section {
  min-height: 100svh;

  display: flex;
  align-items: center;

  padding: 8vw;

  background: #171717;
}

.intro-section > div,
.outro-section > div {
  width: min(760px, 100%);
}

.intro-section h1,
.outro-section h2 {
  margin: 12px 0 24px;

  font-size: clamp(48px, 8vw, 110px);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.intro-section p,
.outro-section p {
  max-width: 600px;

  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.6;

  color: rgba(255, 255, 255, 0.72);
}


/* =========================================
   KITCHEN SCROLL SECTION
   ========================================= */

.kitchen-scroll {
  position: relative;
}

/*
  Αυτό είναι το στοιχείο που θα παραμένει
  στην οθόνη όσο εκτελείται το animation.
*/
.kitchen-stage {
  position: relative;

  width: 100%;
  height: 100svh;

  overflow: hidden;

  background: #d6d2ca;
}


/*
  Κρατάμε την πραγματική αναλογία των εικόνων:
  1024 x 572.

  Έτσι τα clip-path παραμένουν σωστά.
*/
.kitchen-scene {
  position: absolute;

  top: 50%;
  left: 50%;

  width: min(
    100vw,
    calc(100svh * 1024 / 572)
  );

  aspect-ratio: 1024 / 572;

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

  overflow: hidden;

  background: #ddd9d1;
}


/*
  Όλες οι εικόνες τοποθετούνται
  ακριβώς η μία πάνω στην άλλη.
*/
.kitchen-scene img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

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


/* Άδειος χώρος */
.room-background {
  z-index: 1;
}


/* Τα κινούμενα κομμάτια */
.kitchen-piece {
  z-index: 2;

  opacity: 0;

  will-change: transform, opacity;
}


/* Τελική πλήρης φωτογραφία */
.final-frame {
  z-index: 10;

  opacity: 0;

  will-change: opacity;
}


/* =========================================
   CSS MASKS / CLIP PATHS
   ========================================= */

/*
  clip-path: inset(top right bottom left);

  Τα ποσοστά έχουν υπολογιστεί πάνω
  στη συγκεκριμένη εικόνα 1024 x 572.
*/


/* Κάτω ντουλάπια — αριστερό τμήμα */
.lower-left {
  clip-path: inset(
    64.5%
    69.4%
    12.7%
    11.2%
  );
}


/* Κάτω ντουλάπια — κεντρικό τμήμα */
.lower-center {
  clip-path: inset(
    64.5%
    50%
    12.7%
    30.5%
  );
}


/* Κάτω ντουλάπια — δεξί τμήμα */
.lower-right {
  clip-path: inset(
    64.5%
    30.6%
    12.7%
    50%
  );
}


/* Πάγκος */
.countertop {
  z-index: 4;

  clip-path: inset(
    60.8%
    30.6%
    35%
    11.2%
  );
}


/* Πλάτη κουζίνας */
.backsplash {
  z-index: 3;

  clip-path: inset(
    45.8%
    30.6%
    38.4%
    11.5%
  );
}


/* Λευκά επάνω ντουλάπια */
.upper-cabinets {
  z-index: 5;

  clip-path: inset(
    21.6%
    31.8%
    53.6%
    13%
  );
}


/* Ψηλά ξύλινα ντουλάπια δεξιά */
.tall-cabinets {
  z-index: 6;

  clip-path: inset(
    12.2%
    7.7%
    12.4%
    67.3%
  );
}


/* =========================================
   ΚΕΙΜΕΝΑ ΠΑΝΩ ΣΤΗ ΣΚΗΝΗ
   ========================================= */

.start-copy,
.finish-copy {
  position: absolute;

  z-index: 20;

  left: clamp(24px, 6vw, 100px);
  bottom: clamp(70px, 10vh, 130px);

  width: min(560px, calc(100vw - 48px));

  color: #fff;

  text-shadow:
    0 2px 15px rgba(0, 0, 0, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.28);
}

.start-copy h2,
.finish-copy h2 {
  margin: 10px 0 0;

  font-size: clamp(42px, 6.5vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.finish-copy {
  opacity: 0;
}

.eyebrow {
  margin: 0;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* =========================================
   ΚΟΥΜΠΙΑ
   ========================================= */

.cta-button,
.dark-button {
  display: inline-block;

  margin-top: 28px;
  padding: 15px 25px;

  border-radius: 999px;

  text-decoration: none;
  font-weight: 700;
}

.cta-button {
  background: #fff;
  color: #111;
}

.dark-button {
  background: #fff;
  color: #111;
}


/* =========================================
   SCROLL HINT
   ========================================= */

.scroll-hint {
  position: absolute;

  z-index: 30;

  right: 28px;
  bottom: 28px;

  display: flex;
  align-items: center;
  gap: 10px;

  color: #fff;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.16em;
  text-transform: uppercase;

  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.scroll-hint .arrow {
  font-size: 20px;
  animation: bounce-arrow 1.2s ease-in-out infinite;
}

@keyframes bounce-arrow {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(7px);
  }
}


/* =========================================
   OUTRO
   ========================================= */

.outro-section {
  background: #efece5;
  color: #171717;
}

.outro-section p {
  color: rgba(0, 0, 0, 0.65);
}

.outro-section .dark-button {
  background: #171717;
  color: #fff;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 700px) {
  .intro-section,
  .outro-section {
    padding: 28px;
  }

  .start-copy,
  .finish-copy {
    left: 24px;
    bottom: 78px;

    width: calc(100vw - 48px);
  }

  .start-copy h2,
  .finish-copy h2 {
    font-size: clamp(38px, 11vw, 58px);
  }

  .scroll-hint {
    right: 20px;
    bottom: 20px;
  }
}