/* =====================================================
   AERTSEN — HOME SCENE BANNER
   Layered image entrance animations (desktop)
   MP4 video scenes (mobile)
   ===================================================== */

/* ---- Wrapper ---- */
.comm-section.home-section { position: relative; }

.home-main-banner {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  background: #1d1b3c;
}

.web-view { display: block; }
.mob-view { display: none; }

/* ---- Scene base ---- */
.home-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1),
              visibility 0.9s cubic-bezier(0.4,0,0.2,1);
}
.home-scene.active {
  opacity: 1;
  visibility: visible;
}

/* =====================================================
   ELEMENT LAYER BASE
   All images fill the banner absolutely.
   Each has a unique entry transform (defined per-class).
   ===================================================== */
.home-element {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.he-img-elem {
  position: absolute;
  opacity: 0;
  /* default hidden state */
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* When scene becomes active, images animate to their resting position */
.home-scene.active .he-img-elem {
  opacity: 1;
  transform: translate(0, 0) scale(1) !important;
}

/* =====================================================
   SCENE 1 — SOFA / LIVING ROOM
   Each layer enters from a distinct direction
   ===================================================== */

/* Background: scale in from center */
.sofa-main-bg {
  inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition-delay: 0s;
  transition-duration: 1.2s;
}

/* Chair: fly in from right */
.sofa-chair {
  bottom: 0; right: 0;
  width: 55%; height: auto;
  object-fit: contain;
  object-position: bottom right;
  transform: translate(300px, 100px) scale(1.05);
  transition-delay: 0.15s;
}

/* Light / pendant: drop from top */
.sofa-light {
  top: 0; left: 50%;
  transform: translate(-50%, -300px) scale(1.1);
  width: 35%; height: auto;
  transition-delay: 0.05s;
  transition-duration: 1.0s;
}

/* Main sofa: slide from left-bottom */
.sofa-main {
  bottom: 0; left: 0;
  width: 70%; height: auto;
  object-fit: contain;
  object-position: bottom left;
  transform: translate(-250px, 150px) scale(1.05);
  transition-delay: 0.22s;
}

/* Pillar/column: rise from bottom center */
.sofa-pillar {
  bottom: 0; left: 50%;
  transform: translate(-50%, 200px) scale(1.04);
  width: 28%; height: auto;
  transition-delay: 0.3s;
}

/* Rack: slide in from left */
.sofa-rack {
  top: 10%; left: 0;
  width: 22%; height: auto;
  transform: translate(-250px, 0px) scale(1.08);
  transition-delay: 0.38s;
}

/* Table 1: rise from bottom center */
.sofa-table1 {
  bottom: 0; left: 50%;
  transform: translate(-50%, 300px) scale(1.04);
  width: 40%; height: auto;
  transition-delay: 0.45s;
}

/* Table 2: slide from bottom-left */
.sofa-table2 {
  bottom: 0; left: 10%;
  width: 30%; height: auto;
  transform: translate(-200px, 200px) scale(1.06);
  transition-delay: 0.52s;
}

/* =====================================================
   SCENE 2 — KITCHEN
   ===================================================== */

.kitchen-main-bg {
  inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition-delay: 0s;
  transition-duration: 1.2s;
}

/* Back wall: fade+scale in */
.kitchen-wall {
  inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition-delay: 0.08s;
}

/* Garden/window: slide from right */
.kitchen-garden {
  top: 0; right: 0;
  width: 45%; height: auto;
  transform: translate(200px, 0px);
  transition-delay: 0.18s;
}

/* Main kitchen unit: slide up from bottom */
.kitchen-main {
  bottom: 0; left: 0;
  width: 100%; height: auto;
  object-fit: cover;
  object-position: bottom;
  transform: translate(0, 160px) scale(1.03);
  transition-delay: 0.28s;
}

/* Pendant lights: drop from top */
.kitchen-light {
  top: 0; left: 50%;
  transform: translate(-50%, -250px);
  width: 60%; height: auto;
  transition-delay: 0.1s;
  transition-duration: 1.0s;
}

/* Chair: slide from right */
.kitchen-chair {
  bottom: 0; right: 5%;
  width: 30%; height: auto;
  transform: translate(200px, 80px);
  transition-delay: 0.42s;
}

/* =====================================================
   SCENE 3 — BEDROOM
   ===================================================== */

.bedroom-main-bg {
  inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition-delay: 0s;
  transition-duration: 1.2s;
}

.bedroom-wall {
  inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition-delay: 0.06s;
}

/* Ceiling light: drop from top */
.bedroom-light {
  top: 0; left: 50%;
  transform: translate(-50%, -280px);
  width: 50%; height: auto;
  transition-delay: 0.1s;
  transition-duration: 1.0s;
}

/* Bed: slide up from bottom */
.bedroom-bed {
  bottom: 0; left: 50%;
  transform: translate(-50%, 200px) scale(1.04);
  width: 80%; height: auto;
  transition-delay: 0.22s;
}

/* Wardrobe: slide from right */
.bedroom-wardrobe {
  bottom: 0; right: 0;
  width: 35%; height: auto;
  transform: translate(200px, 0px);
  transition-delay: 0.35s;
}

/* Side table: slide from left */
.bedroom-table {
  bottom: 0; left: 0;
  width: 22%; height: auto;
  transform: translate(-150px, 80px);
  transition-delay: 0.46s;
}

/* =====================================================
   CONTENT / CTA
   ===================================================== */
.home-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 20;
  pointer-events: none;
}

.home-content-box {
  padding: 0 60px;
  max-width: 620px;
  pointer-events: all;
  /* Hidden until scene active */
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s 0.55s cubic-bezier(0.22,1,0.36,1),
              transform 0.8s 0.55s cubic-bezier(0.22,1,0.36,1);
}

.home-scene.active .home-content-box {
  opacity: 1;
  transform: none;
}

/* Scene 2 content on right side */
.home-content-2 { justify-content: flex-end; }
.home-content-2 .home-content-box {
  transform: translateX(40px);
  transition-delay: 0.55s;
}
.home-scene.active .home-content-2 .home-content-box {
  transform: none;
}

.hc-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 12px;
  display: block;
}

.hc-title-small {
  font-family: var(--font-sans);
  font-size: clamp(0.85rem, 1.4vw, 1.1rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.75);
  margin-bottom: 6px;
  text-transform: none;
}

.hc-title {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 5.5vw, 5.2rem);
  font-weight: 300;
  line-height: 1.08;
  color: #fff;
  margin-bottom: 32px;
}
.hc-title em {
  font-style: italic;
  color: var(--blush);
  position: relative;
  display: inline-block;
}
.hc-title em::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 0;
  width: 0; height: 2px;
  background: var(--blush);
  transition: width 1s 1.1s cubic-bezier(0.22,1,0.36,1);
}
.home-scene.active .hc-title em::after { width: 100%; }

.hc-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s 0.85s ease, transform 0.7s 0.85s ease;
}
.home-scene.active .hc-actions {
  opacity: 1;
  transform: none;
}

.hc-btn-primary {
  padding: 15px 38px;
  background: var(--blush);
  color: var(--deep-navy);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid var(--blush);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.hc-btn-primary:hover {
  background: #fff;
  border-color: #fff;
}

.hc-btn-outline {
  padding: 15px 38px;
  background: transparent;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 2px;
  transition: background 0.3s, border-color 0.3s;
}
.hc-btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
}

/* =====================================================
   SCENE NAV DOTS + COUNTER
   ===================================================== */
.home-scene-nav {
  position: absolute;
  bottom: 44px;
  left: 60px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 24px;
  /* stagger in with content */
  opacity: 0;
  transition: opacity 0.6s 0.9s ease;
}
.home-scene.active .home-scene-nav { opacity: 1; }

.scene-dots { display: flex; gap: 10px; }
.scene-dot {
  width: 28px; height: 2px;
  background: rgba(255,255,255,0.3);
  border: none; padding: 0; cursor: pointer;
  border-radius: 2px;
  transition: background 0.4s, width 0.4s;
}
.scene-dot.active { background: var(--blush); width: 52px; }

.scene-counter {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.45);
}
.scene-current { color: #fff; font-size: 0.9rem; }

/* =====================================================
   STATS BAR
   ===================================================== */
.home-stats {
  position: absolute;
  right: 55px;
  bottom: 55px;
  z-index: 30;
  display: flex;
  gap: 30px;
  opacity: 0;
  transition: opacity 0.6s 1.0s ease;
}
.home-scene.active .home-stats { opacity: 1; }

.home-stat {
  text-align: right;
  border-right: 1px solid rgba(255,255,255,0.18);
  padding-right: 30px;
}
.home-stat:last-child { border-right: none; padding-right: 0; }

.hs-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 500;
  color: #fff;
  line-height: 1;
}
.hs-num em {
  font-style: normal;
  font-size: 1.5rem;
  color: var(--blush);
}
.hs-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 5px;
}

/* =====================================================
   SCROLL HINT
   ===================================================== */
.scrolldown-hint {
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  writing-mode: vertical-rl;
  opacity: 0;
  transition: opacity 0.6s 1.2s ease;
}
.home-scene.active .scrolldown-hint { opacity: 1; }
.scrolldown-hint span {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  rotate: 180deg;
}
.sd-line {
  width: 1px; height: 55px;
  background: rgba(255,255,255,0.18);
  position: relative;
  overflow: hidden;
}
.sd-line::after {
  content: '';
  position: absolute;
  top: -100%; left: 0; right: 0; height: 50%;
  background: var(--blush);
  animation: sdScroll 1.8s ease-in-out infinite;
}
@keyframes sdScroll { 0%{top:-100%} 100%{top:200%} }

/* =====================================================
   MOBILE VIDEO SCENES
   ===================================================== */
@media (max-width: 768px) {
  .web-view { display: none; }
  .mob-view { display: block; }

  .home-main-banner {
    height: 100svh;
    min-height: 500px;
  }

  .sceneLottie {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .home-content-box {
    padding: 0 28px;
    max-width: 100%;
  }

  .home-content-2 { justify-content: flex-start; }

  .hc-title { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .home-stats { display: none; }
  .scrolldown-hint { display: none; }
  .home-scene-nav {
    left: 28px;
    bottom: 30px;
  }
}