/* =========================================================
   SAN LORENZO CAMPI GIOVANI
   Temporary landing — cinematic stadium version
   ========================================================= */

:root {
  --green: #146B3E;
  --green-dark: #082d1b;
  --yellow: #E0B624;
  --yellow-light: #ffe36b;
  --black: #000;
  --white: #fff;
  --logo-width: min(72vw, 430px);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #000;
}

body {
  overflow: hidden;
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
}

/* Schermata nera iniziale: evita qualsiasi flash giallo al caricamento */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  pointer-events: none;
  animation: initialBlack 0.01s linear forwards;
}

.intro {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
}

/* =========================================================
   LOGO INIZIALE
   ========================================================= */

.logo-intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #000;
  animation: logoIntro 2.8s ease-in-out forwards;
  pointer-events: none;
}

.logo-intro-image {
  display: block;
  width: min(72vw, 520px);
  max-width: 88vw;
  max-height: 82vh;
  object-fit: contain;
}

/* =========================================================
   SCENE BASE
   ========================================================= */

.scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
}

.scene-logo {
  position: relative;
  z-index: 8;
  width: var(--logo-width);
  max-height: 70vh;
  object-fit: contain;
  will-change: transform, opacity;
}

/* =========================================================
   STADIUM LIGHTS
   ========================================================= */

.stadium-light {
  position: absolute;
  z-index: 2;
  width: 72vw;
  height: 125vh;
  opacity: .12;
  transform-origin: 50% 100%;
  filter: blur(5px);
  mix-blend-mode: screen;
}

.stadium-light-1 {
  left: -30vw;
  bottom: -65vh;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.75) 50%,
    transparent 100%
  );
  transform: rotate(24deg);
}

.stadium-light-2 {
  right: -30vw;
  bottom: -65vh;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.75) 50%,
    transparent 100%
  );
  transform: rotate(-24deg);
}

.stadium-light-3 {
  left: 15vw;
  bottom: -80vh;
  width: 45vw;
  opacity: .08;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.9),
    transparent
  );
}

/* =========================================================
   FLASH 01 — GIALLO
   ========================================================= */

.scene-yellow {
  background:
    radial-gradient(circle at 50% 50%, var(--yellow-light) 0%, var(--yellow) 48%, #b68c00 100%);
  animation: yellowScene 2.25s ease-in-out 2.8s forwards;
}

.scene-yellow .stadium-light-1 {
  animation: sweepLeft 1.25s ease-out 2.85s both;
}

.scene-yellow .stadium-light-2 {
  animation: sweepRight 1.25s ease-out 2.85s both;
}

.scene-yellow .stadium-light-3 {
  animation: sweepCenter 1.15s ease-out 2.9s both;
}

.scene-yellow .scene-logo {
  animation: logoImpact 2.25s cubic-bezier(.18,.82,.25,1) 2.8s forwards;
}

/* =========================================================
   FLASH 02 — VERDE
   ========================================================= */

.scene-green {
  background:
    radial-gradient(circle at 50% 50%, #1d8c53 0%, var(--green) 48%, var(--green-dark) 100%);
  animation: greenScene 2.25s ease-in-out 5.05s forwards;
}

.scene-green .stadium-light-1 {
  animation: sweepLeft 1.25s ease-out 5.10s both;
}

.scene-green .stadium-light-2 {
  animation: sweepRight 1.25s ease-out 5.10s both;
}

.scene-green .stadium-light-3 {
  animation: sweepCenter 1.15s ease-out 5.15s both;
}

.scene-green .scene-logo {
  animation: logoImpact 2.25s cubic-bezier(.18,.82,.25,1) 5.05s forwards;
}

/* =========================================================
   IMPACT / FLASH CORE
   ========================================================= */

.flash-core {
  position: absolute;
  z-index: 5;
  width: 10vmin;
  height: 10vmin;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  opacity: 0;
  filter: blur(3px);
  animation: flashCore 2.25s ease-out 2.8s forwards;
}

.scene-green .flash-core {
  animation-delay: 5.05s;
}

/* =========================================================
   FINAL SCENE
   ========================================================= */

.scene-final {
  z-index: 10;
  background: #000;
  animation: finalScene 1.15s ease-out 7.3s forwards;
}

/* =========================================================
   SFONDO FOTOGRAFICO FINALE — 17 FOTO SEQUENZIALI
   ========================================================= */

.final-bg {
  position: absolute;
  inset: -3%;
  z-index: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transform: scale(1.04);
  will-change: opacity, transform;
  filter: saturate(.82) brightness(.68);
  animation-name: sequentialPhoto;
  animation-duration: 102s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 
   Per far comparire la prima foto esattamente 1 secondo DOPO
   l'inizio della scena finale (che parte a 7.3s), la prima foto
   parte a 8.3s e ogni foto successiva a intervalli di 6s.
*/
.final-bg-1  { background-image: url("../img/comingsoon/01.jpeg");  animation-delay: 8.3s; }
.final-bg-2  { background-image: url("../img/comingsoon/02.jpeg");  animation-delay: 14.3s; }
.final-bg-3  { background-image: url("../img/comingsoon/03.jpeg");  animation-delay: 20.3s; }
.final-bg-4  { background-image: url("../img/comingsoon/04.jpeg");  animation-delay: 26.3s; }
.final-bg-5  { background-image: url("../img/comingsoon/05.jpeg");  animation-delay: 32.3s; }
.final-bg-6  { background-image: url("../img/comingsoon/06.jpeg");  animation-delay: 38.3s; }
.final-bg-7  { background-image: url("../img/comingsoon/07.jpeg");  animation-delay: 44.3s; }
.final-bg-8  { background-image: url("../img/comingsoon/08.jpeg");  animation-delay: 50.3s; }
.final-bg-9  { background-image: url("../img/comingsoon/09.jpeg");  animation-delay: 56.3s; }
.final-bg-10 { background-image: url("../img/comingsoon/10.jpeg"); animation-delay: 62.3s; }
.final-bg-11 { background-image: url("../img/comingsoon/11.jpeg"); animation-delay: 68.3s; }
.final-bg-12 { background-image: url("../img/comingsoon/12.jpeg"); animation-delay: 74.3s; }
.final-bg-13 { background-image: url("../img/comingsoon/13.jpeg"); animation-delay: 80.3s; }
.final-bg-14 { background-image: url("../img/comingsoon/14.jpeg"); animation-delay: 86.3s; }
.final-bg-15 { background-image: url("../img/comingsoon/15.jpeg"); animation-delay: 92.3s; }
.final-bg-16 { background-image: url("../img/comingsoon/16.jpeg"); animation-delay: 98.3s; }
.final-bg-17 { background-image: url("../img/comingsoon/17.jpeg"); animation-delay: 104.3s; }

/* Dissolvenza breve tra una foto e la successiva */
@keyframes sequentialPhoto {
  0%      { opacity: 0; transform: scale(1.045); }
  0.35%   { opacity: 1; transform: scale(1.043); }
  5.35%   { opacity: 1; transform: scale(1.036); }
  5.85%   { opacity: 0; transform: scale(1.032); }
  100%    { opacity: 0; transform: scale(1.045); }
}

/* Oscuramento delle foto per mantenere il logo leggibile */
.scene-final::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,.12) 0%,
      rgba(0,0,0,.38) 62%,
      rgba(0,0,0,.72) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.30) 0%,
      rgba(0,0,0,.08) 45%,
      rgba(0,0,0,.42) 100%
    );
}

.final-content {
  position: relative;
  z-index: 20;
  width: min(94vw, 800px);
  height: 100%;
  padding: 7vh 20px 5vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(25px) scale(.96);
  /* Il testo e il logo appaiono subito a 7.3s con lo sfondo nero */
  animation: revealContent 1.2s cubic-bezier(.16,.84,.25,1) 7.3s forwards;
}

.club-name {
  margin-bottom: clamp(10px, 2vh, 22px);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .10em;
  line-height: .9;
  font-size: clamp(1.55rem, 5vw, 3.5rem);
  text-shadow:
    0 2px 0 rgba(0,0,0,.4),
    0 0 30px rgba(224,182,36,.12);
}

.club-name span {
  display: block;
}

.club-name span:last-child {
  margin-top: .18em;
  color: var(--yellow);
  font-size: .48em;
  letter-spacing: .27em;
}

/* =========================================================
   CREST / HEARTBEAT
   ========================================================= */

.crest-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(78vw, 470px);
}

.crest-aura {
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(224,182,36,.20) 0%,
    rgba(20,107,62,.10) 38%,
    transparent 70%
  );
  filter: blur(18px);
  animation: auraPulse 1.55s ease-in-out 7.3s infinite;
}

.final-logo {
  position: relative;
  z-index: 2;
  display: block;
  width: var(--logo-width);
  max-height: 57vh;
  object-fit: contain;
  transform-origin: 50% 52%;
  filter:
    drop-shadow(0 18px 30px rgba(0,0,0,.65))
    drop-shadow(0 0 12px rgba(224,182,36,.14));
  animation: heartbeat 1.55s ease-in-out 7.3s infinite;
}

/* =========================================================
   COMING SOON
   ========================================================= */

.coming-soon {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: clamp(13px, 2vh, 22px);
  color: var(--yellow);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(.72rem, 1.9vw, 1.02rem);
  font-weight: 800;
  letter-spacing: .48em;
  text-indent: .48em;
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(224,182,36,.25);
}

.coming-soon .line {
  width: clamp(25px, 8vw, 75px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--yellow)
  );
}

.coming-soon .line:last-child {
  transform: scaleX(-1);
}

/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes logoIntro {
  0% { opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes initialBlack {
  0% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes yellowScene {
  0% { visibility: visible; opacity: 0; }
  3% { opacity: 1; }
  58% { opacity: 1; }
  100% { visibility: hidden; opacity: 0; }
}

@keyframes greenScene {
  0% { visibility: visible; opacity: 0; }
  3% { opacity: 1; }
  58% { opacity: 1; }
  100% { visibility: hidden; opacity: 0; }
}

@keyframes logoImpact {
  0% { opacity: 0; transform: scale(.68) rotate(-2deg); }
  5% { opacity: 1; transform: scale(1.10) rotate(.6deg); }
  10% { transform: scale(.96) rotate(-.25deg); }
  16%, 58% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(.94); }
}

@keyframes flashCore {
  0%, 3% { opacity: 0; transform: scale(.2); }
  6% { opacity: .9; transform: scale(5); }
  14% { opacity: 0; transform: scale(15); }
  100% { opacity: 0; }
}

@keyframes sweepLeft {
  0% { opacity: 0; transform: translateX(-40vw) rotate(24deg) scale(.7); }
  30% { opacity: .28; }
  100% { opacity: .04; transform: translateX(25vw) rotate(24deg) scale(1); }
}

@keyframes sweepRight {
  0% { opacity: 0; transform: translateX(40vw) rotate(-24deg) scale(.7); }
  30% { opacity: .28; }
  100% { opacity: .04; transform: translateX(-25vw) rotate(-24deg) scale(1); }
}

@keyframes sweepCenter {
  0% { opacity: 0; transform: translateY(25vh) scale(.6); }
  30% { opacity: .22; }
  100% { opacity: .03; transform: translateY(-5vh) scale(1); }
}

@keyframes finalScene {
  from { visibility: visible; opacity: 0; }
  to { visibility: visible; opacity: 1; }
}

@keyframes revealContent {
  0% { opacity: 0; transform: translateY(25px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  8% { transform: scale(1.055); }
  16% { transform: scale(1); }
  23% { transform: scale(1.09); }
  37% { transform: scale(1); }
}

@keyframes auraPulse {
  0%, 100% { opacity: .55; transform: scale(.92); }
  9% { opacity: .85; transform: scale(1.04); }
  23% { opacity: .95; transform: scale(1.09); }
  38% { opacity: .55; transform: scale(.92); }
}

/* =========================================================
   MOBILE / LOW HEIGHT
   ========================================================= */

@media (max-height: 700px) {
  :root {
    --logo-width: min(47vw, 300px);
  }
  .final-content { padding-top: 3vh; padding-bottom: 2vh; }
  .club-name { margin-bottom: 5px; }
  .coming-soon { margin-top: 8px; }
}

@media (max-width: 480px) {
  :root {
    --logo-width: min(72vw, 340px);
  }
  .club-name { font-size: clamp(1.4rem, 8vw, 2.25rem); }
  .coming-soon { gap: 8px; letter-spacing: .35em; text-indent: .35em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .scene-yellow, .scene-green { display: none; }
  .scene-final { visibility: visible; opacity: 1; animation: none; }
  .final-content { opacity: 1; transform: none; animation: none; }
}