.overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg-primary);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.4s ease;
}

.overlay.open {
  transform: translateX(0);
}

.overlay-header {
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0 48px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-primary);
  z-index: 10;
}

.overlay-back {
  color: var(--accent-blue);
  font-size: 24px;
  cursor: pointer;
  margin-right: 24px;
  border: none;
  background: transparent;
  line-height: 1;
  padding: 0;
  transition: opacity var(--transition);
}

.overlay-back:hover {
  opacity: 0.7;
}

.overlay-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  color: #fff;
}

.overlay-body {
  padding: 64px 80px;
}

.moment-card {
  display: flex;
  gap: 48px;
  margin-bottom: 72px;
  align-items: center;
}

.moment-img {
  width: 40%;
  flex-shrink: 0;
  height: 280px;
  border-radius: var(--radius);
  overflow: hidden;
}

.moment-img-home { background: linear-gradient(135deg, #1e3a5f, #1A1A1A); }
.moment-img-business { background: linear-gradient(135deg, #0f1f3d, #1a2f5e); }
.moment-img-outdoor { background: linear-gradient(135deg, #0d2b1a, #1a3a25); }

/* Smart Home — real photos */
.moment-img-welcome,
.moment-img-leaving,
.moment-img-goodnight,
.moment-img-movie,
.moment-img-dinner {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(56, 189, 248, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s ease;
}

.moment-img-welcome {
  background-image: linear-gradient(135deg, rgba(17,17,17,0.2) 0%, rgba(17,17,17,0.4) 100%), url('../assets/images/moment-welcome.jpg');
}
.moment-img-leaving {
  background-image: linear-gradient(135deg, rgba(17,17,17,0.2) 0%, rgba(17,17,17,0.4) 100%), url('../assets/images/moment-leaving.jpg');
}
.moment-img-goodnight {
  background-image: linear-gradient(135deg, rgba(17,17,17,0.2) 0%, rgba(17,17,17,0.4) 100%), url('../assets/images/moment-goodnight.jpg');
}
.moment-img-movie {
  background-image: linear-gradient(135deg, rgba(17,17,17,0.2) 0%, rgba(17,17,17,0.4) 100%), url('../assets/images/moment-movie.jpg');
}
.moment-img-dinner {
  background-image: linear-gradient(135deg, rgba(17,17,17,0.2) 0%, rgba(17,17,17,0.4) 100%), url('../assets/images/moment-dinner.jpg');
}

.moment-card:hover .moment-img-welcome,
.moment-card:hover .moment-img-leaving,
.moment-card:hover .moment-img-goodnight,
.moment-card:hover .moment-img-movie,
.moment-card:hover .moment-img-dinner {
  transform: scale(1.03);
}

/* Smart Business — real photos */
.moment-img-work,
.moment-img-meeting,
.moment-img-break,
.moment-img-leavingwork,
.moment-img-energysaving {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(56, 189, 248, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s ease;
}

.moment-img-work {
  background-image: linear-gradient(135deg, rgba(17,17,17,0.2) 0%, rgba(17,17,17,0.4) 100%), url('../assets/images/moment-work.jpg');
}
.moment-img-meeting {
  background-image: linear-gradient(135deg, rgba(17,17,17,0.2) 0%, rgba(17,17,17,0.4) 100%), url('../assets/images/moment-meeting.jpg');
}
.moment-img-break {
  background-image: linear-gradient(135deg, rgba(17,17,17,0.2) 0%, rgba(17,17,17,0.4) 100%), url('../assets/images/moment-break.jpg');
}
.moment-img-leavingwork {
  background-image: linear-gradient(135deg, rgba(17,17,17,0.2) 0%, rgba(17,17,17,0.4) 100%), url('../assets/images/moment-leavingwork.jpg');
}
.moment-img-energysaving {
  background-image: linear-gradient(135deg, rgba(17,17,17,0.2) 0%, rgba(17,17,17,0.4) 100%), url('../assets/images/moment-energysaving.jpg');
}

.moment-card:hover .moment-img-work,
.moment-card:hover .moment-img-meeting,
.moment-card:hover .moment-img-break,
.moment-card:hover .moment-img-leavingwork,
.moment-card:hover .moment-img-energysaving {
  transform: scale(1.03);
}

/* Smart Outdoor — real photos */
.moment-img-guest,
.moment-img-bbq,
.moment-img-pool,
.moment-img-irrigation,
.moment-img-relax {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(56, 189, 248, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s ease;
}

.moment-img-guest {
  background-image: linear-gradient(135deg, rgba(17,17,17,0.2) 0%, rgba(17,17,17,0.4) 100%), url('../assets/images/moment-guest.jpg');
}
.moment-img-bbq {
  background-image: linear-gradient(135deg, rgba(17,17,17,0.2) 0%, rgba(17,17,17,0.4) 100%), url('../assets/images/moment-bbq.jpg');
}
.moment-img-pool {
  background-image: linear-gradient(135deg, rgba(17,17,17,0.2) 0%, rgba(17,17,17,0.4) 100%), url('../assets/images/moment-pool.jpg');
}
.moment-img-irrigation {
  background-image: linear-gradient(135deg, rgba(17,17,17,0.2) 0%, rgba(17,17,17,0.4) 100%), url('../assets/images/moment-irrigation.jpg');
}
.moment-img-relax {
  background-image: linear-gradient(135deg, rgba(17,17,17,0.2) 0%, rgba(17,17,17,0.4) 100%), url('../assets/images/moment-relax.jpg');
}

.moment-card:hover .moment-img-guest,
.moment-card:hover .moment-img-bbq,
.moment-card:hover .moment-img-pool,
.moment-card:hover .moment-img-irrigation,
.moment-card:hover .moment-img-relax {
  transform: scale(1.03);
}

.moment-text {
  flex: 1;
}

.moment-number {
  color: var(--accent-blue);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.moment-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 36px;
  color: #fff;
  margin-bottom: 16px;
}

.moment-tagline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  color: var(--accent-cyan);
  font-style: italic;
  margin-bottom: 16px;
}

.moment-body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-subtle);
  line-height: 1.8;
}

.teaser-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 48px;
  text-align: center;
  margin-bottom: 72px;
}

.teaser-card .moment-name {
  margin-bottom: 12px;
}

.teaser-card .moment-tagline {
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .overlay-body {
    padding: 32px 24px;
  }

  .moment-card {
    flex-direction: column;
    gap: 24px;
  }

  .moment-img {
    width: 100%;
    height: 220px;
  }
}