/* =========================================================
   Elena 30 · invito
   ========================================================= */

@font-face {
  font-family: "Old Standard TT";
  src: url("../fonts/old-standard-tt-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Old Standard TT";
  src: url("../fonts/old-standard-tt-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-300.woff2") format("woff2");
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-500.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-600.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}

:root {
  --pink: #e3a9a4;          /* fondo del video, usato come fallback */
  --sage: #909c67;          /* busta */
  --sage-deep: #6f7a4a;
  --moss: #556131;          /* slide verde scuro */
  --lime: #c7e072;          /* slide verde chiaro */
  --berry: #aa4e50;         /* testo card */
  --berry-box: #b7484e;     /* box countdown */
  --paper: #f7f7f5;

  --serif: "Old Standard TT", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* altezza viewport reale (barre del browser mobile escluse) */
  --vh: 100vh;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* busta: larghezza e proporzione come nel riferimento (1214 × 850) */
  --env-w: min(86vw, 520px, calc(var(--vh) * 0.5 * 1.43));
}
@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

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

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--pink);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  position: fixed;
  inset: 0;
  font-family: var(--sans);
  color: var(--moss);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}
img, svg { display: block; }

:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* ---------- Video di sfondo ---------- */
.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  background: var(--pink);
}

/* ---------- Schermate ---------- */
.screen {
  position: fixed;
  inset: 0;
  height: var(--vh);
  z-index: 1;
  padding: var(--safe-t) 0 var(--safe-b);
}

/* =========================================================
   SCHERMATA 1 · Busta + card
   ========================================================= */
.intro {
  display: grid;
  place-items: center;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.intro.is-gone {
  opacity: 0;
  visibility: hidden;
}

.invite {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--env-w);
  outline-offset: 10px;
  animation: invite-in 1s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes invite-in {
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ---- Busta (immagine) ---- */
.envelope {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  filter: drop-shadow(0 18px 26px rgba(92, 40, 42, .28));
  transition:
    translate .7s cubic-bezier(.55, 0, .3, 1),
    opacity .6s ease;
}
.envelope img {
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---- Card bianca ---- */
.tag {
  position: relative;
  z-index: 6;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 72%;
  aspect-ratio: 670 / 440;
  margin-top: calc(var(--env-w) * -0.17);
  margin-right: calc(var(--env-w) * -0.03);
  padding: 7% 8% 8%;
  text-align: left;
  color: var(--berry);
  background: var(--paper) url("../img/card-paper.jpg") center / 240px;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .06),
    0 14px 30px rgba(92, 40, 42, .28);
}
.tag-hint {
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(var(--env-w) * .034);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.tag-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(var(--env-w) * .074);
  line-height: 1.1;
  text-transform: uppercase;
}

@media (hover: hover) {
  .invite:hover .envelope { translate: 0 -4px; }
}

/* ---- Uscita: prima la card a destra, poi la busta a sinistra ---- */
.intro.is-opening .invite { pointer-events: none; }

.intro.is-opening .tag {
  translate: 120vw 0;
  opacity: 0;
  transition:
    translate .65s cubic-bezier(.55, 0, .3, 1),
    opacity .5s ease .15s;
}
.intro.is-opening .envelope {
  translate: -120vw 0;
  opacity: 0;
  transition-delay: .45s, .6s;
}

/* =========================================================
   SCHERMATA 2 · Carosello
   ========================================================= */
.party {
  /* proporzioni dal mockup: slide 1 e 3 = 0.927 (l/a), slide 2 più piccola (84.5% × 85.7%) */
  --slide-h: min(
    calc(var(--vh) - var(--safe-t) - var(--safe-b) - 130px),
    calc(84vw / 0.927),
    700px
  );
  --slide-w: calc(var(--slide-h) * 0.927);
  --first-w: var(--slide-w);   /* serve a centrare la prima e l'ultima slide */
  --gap: 10px;

  /* slide + pallini centrati insieme in verticale */
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1s ease, visibility 0s linear 1s;
}
.party.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 1s ease;
}

.track {
  display: flex;
  align-items: center;
  gap: var(--gap);
  height: var(--slide-h);
  padding-inline: calc((100vw - var(--first-w)) / 2);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  position: relative;
  outline: none;
}
.track::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 var(--slide-w);
  height: var(--slide-h);
  margin: 0;
  overflow: hidden;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  /* tutte le misure interne sono in cqw/cqh: il contenuto scala con la slide */
  container-type: size;
}
.slide--moss { background: var(--moss); color: var(--lime); }
.slide--lime { background: var(--lime); color: var(--moss); }

.slide img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.slide p { margin: 0; }
.slide-in { height: 100%; }

.slide-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .01em;
  text-align: center;
  text-transform: uppercase;
}

.slide--small {
  flex-basis: calc(var(--slide-w) * .845);
  height: calc(var(--slide-h) * .857);
}
.slide-in { position: relative; }
.slide-in > * { position: absolute; }

/* ---------- Slide 1 · Elena 30 ---------- */
.hero-title {
  left: 0;
  right: 0;
  top: 5.2cqh;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6.6cqw;
  margin: 0;
  padding-left: 4cqw;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1;
}
.hero-name {
  font-style: italic;
  font-size: 15.6cqw;
}
.hero-num {
  font-size: 31cqw;
}
.hero-photos {
  left: 0;
  right: 0;
  top: 43.6cqh;
  height: 25.8cqh;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 1.1cqw;
}
.hero-photos img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
}
.hero-photos img:nth-child(1) { object-position: 40% 45%; }
.hero-photos img:nth-child(2) { object-position: 55% 40%; }
.hero-photos img:nth-child(3) { object-position: 45% 35%; }
.hero-photos img:nth-child(4) { object-position: 55% 30%; }
.hero-date {
  left: 6.7cqw;
  right: 6.2cqw;
  bottom: 6.6cqh;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 5cqw;
  line-height: 1;
  text-transform: uppercase;
}

/* ---------- Slide 2 · Be my guest ---------- */
.s-guest .slide-title {
  left: 0;
  right: 0;
  top: 7.6cqh;
  font-size: 10.8cqw;
  line-height: 1;
}
.countdown {
  left: 4.4cqw;
  right: 4cqw;
  top: 40cqh;
  height: 17.6cqh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.3cqw;
}
.cd-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--berry-box);
  color: var(--lime);
  line-height: 1;
}
.cd-num {
  font-weight: 600;
  font-size: 8.8cqw;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.cd-label {
  margin-top: 1.6cqw;
  font-weight: 500;
  font-size: 3.1cqw;
  text-transform: uppercase;
}
.events {
  left: 3.1cqw;
  right: 4.7cqw;
  bottom: 4.3cqh;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 4cqw;
}
.event {
  font-size: 4cqw;
  line-height: 1.22;
  text-transform: uppercase;
}
.event strong {
  display: block;
  font-weight: 600;
}
.event span { font-weight: 400; }
.event--right { text-align: right; }

/* ---------- Slide 3 · Le regole ---------- */
.s-rules .slide-title {
  left: 0;
  right: 0;
  top: 4cqh;
  font-size: 9.6cqw;
  line-height: .95;
}
.rules-photo {
  left: 50%;
  top: 22.6cqh;
  width: 34cqw;
  height: 42cqh;
  translate: -50% 0;
  margin: 0;
  padding: 2.9cqw;
  background: #fff;
}
.rules-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.rules-text {
  left: 11cqw;
  right: 9cqw;
  top: 68.6cqh;
  bottom: 4.3cqh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 3.75cqw;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}
.rules-intro { font-weight: 300; }
.rules-call { font-weight: 500; }

/* ---- Controlli ---- */
.controls {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 72px;
  padding-bottom: 8px;
}
.dots {
  display: flex;
  gap: 2px;
}
.dot {
  display: grid;
  place-items: center;
  width: 32px;
  height: 44px;
}
.dot::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  transition: background-color .3s ease;
}
.dot[aria-current="true"]::before { background: #fff; }

.arrows {
  position: absolute;
  right: max(24px, 2.4vw);
  top: 50%;
  translate: 0 -50%;
  display: none;
  gap: 10px;
}
.arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #2a2a2a;
  transition: opacity .3s ease;
}
.arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #2a2a2a;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.arrow:disabled { opacity: .45; cursor: default; }

/* =========================================================
   Desktop (versione ridotta)
   ========================================================= */
@media (pointer: fine), (min-width: 900px) {
  .arrows { display: flex; }
}

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  :root {
    --env-w: min(47vw, calc(var(--vh) * .56 * 1.43));
  }
  .invite {
    margin-top: 0;
    /* la card esce a destra come nel riferimento */
    translate: -8% 0;
  }
  .tag {
    position: absolute;
    left: 80%;
    top: 59%;
    width: 55%;
    margin: 0;
  }
  .tag-hint { font-size: calc(var(--env-w) * .027); }
  .tag-title { font-size: calc(var(--env-w) * .058); }

  .party { --gap: 16px; }
}

/* animazione d'ingresso della busta su desktop: mantiene lo spostamento */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  @keyframes invite-in {
    from { opacity: 0; translate: -8% 24px; }
    to   { opacity: 1; translate: -8% 0; }
  }
}

/* =========================================================
   Movimento ridotto
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .2s !important;
    transition-delay: 0s !important;
  }
}