/* ============================================================
   HOMEPAGE — Stili della pagina iniziale
   ============================================================ */

/* Splash Screen */
.splash {
  position: fixed;
  inset: 0;
  z-index: var(--z-splash);
  background: #e2ddd1; /* Colore estratto esattamente dal frame del video */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.splash.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash__video {
  width: 100%; /* Allarghiamo per permettere il taglio */
  max-width: 380px; 
  transition: max-width 0.3s ease;
  clip-path: inset(0 15% 0 15%); /* Taglia la filigrana a sinistra e destra */
  object-fit: cover;
  opacity: 0;
  animation: fadeInVideo 0.5s ease 0.8s forwards; /* Nasconde il primo secondo bianco */
}

@keyframes fadeInVideo {
  to { opacity: 1; }
}

@media (min-width: 768px) {
  .splash__video {
    max-width: 600px; /* Più grande su desktop */
    clip-path: inset(0 12% 0 12%);
  }
}

/* Homepage Layout */
.homepage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xl) var(--space-md);
  padding-top: var(--space-3xl);
}

.homepage__logo-wrap {
  margin-bottom: var(--space-2xl);
  animation: fadeInUp 0.8s ease 0.3s both;
}

.homepage__logo {
  width: 220px;
  max-width: 60vw;
  filter: drop-shadow(0 4px 12px rgba(242, 140, 56, 0.15));
}

/* CTA principale */
.homepage__cta {
  width: 100%;
  max-width: 360px;
  margin-bottom: var(--space-3xl);
  animation: fadeInUp 0.8s ease 0.6s both;
}

.homepage__start-btn {
  font-size: 1.15rem;
  padding: 18px 32px;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
}

.homepage__start-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}

.homepage__start-btn:hover::after {
  width: 300px;
  height: 300px;
}

/* Sezione Sala Invernale */
.homepage__winter {
  width: 100%;
  max-width: 480px;
  animation: fadeInUp 0.8s ease 0.9s both;
}

.homepage__winter-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease;
}

.homepage__winter-image:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.15);
}

.homepage__winter-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.homepage__winter-image:hover img {
  transform: scale(1.05);
}

.homepage__winter-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-lg);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: var(--color-white);
}

.homepage__winter-overlay h2 {
  font-size: 1.2rem;
  margin-bottom: var(--space-xs);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.homepage__winter-overlay p {
  font-size: 0.85rem;
  opacity: 0.9;
  font-weight: 300;
  line-height: 1.5;
}