/* Società Agricola Idolea — coming soon */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root {
  --bg: #f6f5ee;
  --ink: #1c1b18;
  --ink-muted: #5c5a54;
  --accent: #3d5a3a;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --content-w: 420px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

main.stage {
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
}

.stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding: max(env(safe-area-inset-top), clamp(0.3rem, 1.5vmin, 0.75rem))
    max(env(safe-area-inset-right), clamp(1.25rem, 5vw, 2rem))
    max(env(safe-area-inset-bottom), clamp(0.3rem, 1.5vmin, 0.75rem))
    max(env(safe-area-inset-left), clamp(1.25rem, 5vw, 2rem));
  box-sizing: border-box;
}

.card {
  width: min(100%, var(--content-w));
  max-height: 100%;
  min-height: 0;
  padding: clamp(0.15rem, 0.8vmin, 0.4rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.2rem, 0.8vmin, 0.5rem);
}

/* ── Logo ── */

.logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  min-height: 0;
  flex: 0 0 auto;
  width: 100%;
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out) 0.1s both;
}

.logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ── Payoff ── */

.payoff-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex: 0 0 auto;
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out) 0.25s both;
}

.payoff {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ── Hero scene (bg + elementi overlay) ── */

.hero-scene {
  position: relative;
  width: 100%;
  flex: 0 1 auto;
  min-height: 0;
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out) 0.4s both;
}

.hero-bg {
  display: block;
  width: 100%;
  height: auto;
}

.hero-elementi {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Goccino ── */

.goccino-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out) 0.55s both;
}

.goccino {
  display: block;
  width: min(250px, 55%);
  height: auto;
}

/* ── Coming Soon ── */

.coming-soon {
  margin: 0;
  width: 100%;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: clamp(0.65rem, 3.2vmin, 1.6rem);
  font-weight: 300;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out) 0.7s both;
}

/* ── Contatti ── */

.contacts {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.4em;
  width: 100%;
  margin-top: auto;
  padding-top: clamp(0.5rem, 2vmin, 1.5rem);
  font-style: normal;
  font-size: clamp(0.55rem, 1.4vmin, 0.72rem);
  font-weight: 300;
  color: var(--ink-muted);
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out) 0.85s both;
}

.contacts > * {
  white-space: nowrap;
}

.contacts-name {
  color: var(--ink-muted);
}

.contacts a {
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}

.contacts a:hover {
  color: var(--ink);
}

.contacts-sep {
  color: var(--ink-muted);
  opacity: 0.4;
  user-select: none;
}

/* ── Footer su 2 righe in mobile ── */

@media (max-width: 640px) {
  .contacts {
    flex-wrap: wrap;
    row-gap: 0.35em;
  }

  .contacts-break {
    flex-basis: 100%;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
  }
}

/* ── Apparizione ── */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Comparsa + fluttuazione elementi SVG ── */

@keyframes el-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes el-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

#el-1 {
  opacity: 0;
  animation: el-in 1.8s var(--ease-out) 0.8s both,
             el-float 4.0s ease-in-out 2.6s infinite;
}
#el-2 {
  opacity: 0;
  animation: el-in 1.8s var(--ease-out) 1.4s both,
             el-float 4.6s ease-in-out 3.2s infinite;
}
#el-3 {
  opacity: 0;
  animation: el-in 1.8s var(--ease-out) 2.0s both,
             el-float 5.2s ease-in-out 3.8s infinite;
}
#el-4 {
  opacity: 0;
  animation: el-in 1.8s var(--ease-out) 2.6s both,
             el-float 4.3s ease-in-out 4.4s infinite;
}
#el-5 {
  opacity: 0;
  animation: el-in 1.8s var(--ease-out) 3.2s both,
             el-float 5.0s ease-in-out 5.0s infinite;
}
#el-6 {
  opacity: 0;
  animation: el-in 1.8s var(--ease-out) 3.8s both,
             el-float 4.8s ease-in-out 5.6s infinite;
}

/* ── Rispetta preferenza riduzione movimento ── */

@media (prefers-reduced-motion: reduce) {
  .logo-wrap,
  .payoff-wrap,
  .hero-scene,
  .goccino-wrap,
  .coming-soon,
  .contacts {
    animation: none;
    opacity: 1;
    transform: none;
  }

  #el-1, #el-2, #el-3,
  #el-4, #el-5, #el-6 {
    animation: none;
    opacity: 1;
  }
}