/* assets/css/modules.scrolly.css */

/* =========================
   HERO
========================= */
.hero{
  position: relative;
  overflow: hidden;
  min-height: var(--app-vh, 100dvh);
  min-height: 100svh;
}

.hero--embassy::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.28);
  z-index: 1;
}

.hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85) contrast(1.05);
  z-index: 0;
}

.hero__content{
  position: relative;
  z-index: 2;
  min-height: var(--app-vh, 100dvh);
  min-height: 100svh;
  display: grid;
  place-content: center;
  place-items: center;
  gap: clamp(8px, 1.2vw, 16px);
  padding: calc(var(--scr-nav-height, 80px) + 28px) var(--pad) 44px;
  text-align: center;
}

.hero__year{
  margin: 0;
  font-size: clamp(11px, 1.05vw, 14px);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

.hero__title{
  font-size: var(--h1);
  line-height: 0.98;
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}

.hero__subtitle{
  font-size: var(--p);
  max-width: min(68ch, 92vw);
  margin: 0;
  line-height: 1.58;
  text-shadow: 0 0 22px rgba(0,0,0,0.55);
  opacity: 0.98;
  text-wrap: pretty;
}

/* =========================
   SCROLLY BASE
========================= */
.scrolly{
  position: relative;
}

.scrolly__sticky{
  position: sticky;
  top: 0;
  height: var(--app-vh, 100dvh);
  min-height: 100svh;
  overflow: hidden;
}

.scrolly__media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Scrim */
.scrolly__scrim{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 2;
  transition: background 260ms ease;
}

.scrolly.is-overlay .scrolly__scrim{
  background: rgba(0,0,0,0.18);
}

/* Overlay (single mechanism) */
.scrolly__overlay{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  pointer-events: none;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity 260ms ease, transform 260ms ease;

  padding: 26px var(--pad);

  /* default */
  align-items: end;
  justify-items: start;
  text-align: left;
}

.scrolly.is-overlay .scrolly__overlay{
  opacity: 1;
  transform: translateY(0);
}

.scrolly__overlayInner{
  width: min(760px, 100%);
}

/* IMPORTANT: use only real font weights you actually have (Book 400, Heavy 800) */
.scrolly__headline{
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.45;
  margin: 0;
  font-weight: 400;
  text-shadow: 0 0 18px rgba(0,0,0,0.65);
}

/* =========================
   YEAR (step-based)
========================= */
.scrolly__year{
  position: relative;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding-top: 30px; 

  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 18px rgba(0,0,0,0.65);
}

[data-scrolly-module="intro"][data-active-step="intro-image"] .scrolly__year{
  opacity: 0.95;
}

[data-scrolly-module="intro"][data-active-step="intro-overlay"] .scrolly__year{
  opacity: 0;
}

/* =========================
   POSITION MODIFIERS (set on SECTION)
========================= */

/* First overlay: center-right */
.scrolly.overlay--center-right .scrolly__overlay{
  align-items: center;      /* centro verticale */
  justify-items: end;       /* a destra */
  text-align: left;       /* testo centrato nel box */
  padding-right: var(--pad);
}

.scrolly.overlay--center-right .scrolly__overlayInner{
  width: min(520px, 40vw);  /* box più “pulito” */
  max-width: 520px;
}

.scrolly.overlay--center-right .scrolly__media{
  object-position: 58% 50%;
}


/* Second overlay: top, smaller, same font weight */
.scrolly.overlay--top-small .scrolly__overlay{
  align-items: start;
  justify-items: start;
  text-align: left;
  padding-top: calc(var(--scr-nav-height, 80px) + 14px);
}

.scrolly.overlay--top-small .scrolly__overlayInner{
  width: min(520px, 100%);
}

.scrolly.overlay--top-small .scrolly__headline{
  font-size: 18px;
  font-weight: 400;
}

/* Optional extras */
.scrolly.overlay--center .scrolly__overlay{
  align-items: center;
  justify-items: center;
  text-align: center;
}

.scrolly.overlay--right .scrolly__overlay{
  justify-items: end;
  text-align: right;
}

/* =========================
   SECTION-SPECIFIC MEDIA TWEAKS
========================= */
.scrolly--sat .scrolly__media{
  object-position: 72% 50%;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 640px){
  :root{
    --scr-mobile-top-safe: calc(var(--scr-nav-height, 80px) + 28px);
  }

  .hero{
    min-height: var(--app-vh, 100dvh);
    min-height: 100svh;
  }
  .hero__content{
    min-height: var(--app-vh, 100dvh);
    min-height: 100svh;
    padding: calc(var(--scr-nav-height, 80px) + 18px) 18px 32px;
    gap: 10px;
  }

  .hero__year{
    font-size: 10px;
    letter-spacing: 0.09em;
  }

  .hero__title{
    max-width: 12ch;
  }

  .hero__subtitle{
    max-width: min(38ch, 92vw);
    line-height: 1.5;
  }

  .scrolly__overlay{
    padding: var(--scr-mobile-top-safe) 18px 16px;
  }

  .scrolly__headline{
    font-size: 18px;
    font-weight: 400;
  }

  /* On mobile, right-aligned center can feel harsh. Make it bottom-left for readability */
  .scrolly.overlay--center-right .scrolly__overlay{
    align-items: start;
    justify-items: start;
    text-align: left;
  }

  .scrolly.overlay--center-right .scrolly__overlayInner{
    width: min(92vw, 560px);
  }

  .scrolly.overlay--center-right .scrolly__media{
    object-position: 64% 50%;
  }

  .scrolly.overlay--top-small .scrolly__overlay{
    padding-top: var(--scr-mobile-top-safe);
  }

  .scrolly.overlay--top-small .scrolly__headline{
    font-size: 18px;
    font-weight: 400;
  }

  .scrolly__overlayInner{
    width: min(100vw, 760px);
  }

  .scrolly__year{
    padding-top: var(--scr-mobile-top-safe);
  }
}