/* ---------- Vice City au coucher du soleil ---------- */
#scene { background: #000; --horizon: 60%; }
.world {
  position: absolute;
  inset: 0;
  transition: transform 1.1s ease-in, opacity 1s ease-in, filter .6s ease;
}
.skywrap { position: absolute; left: 0; right: 0; top: 0; height: var(--horizon); overflow: hidden; }
.sky { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.sky-day { background: linear-gradient(180deg, #120a35 0%, #34176a 28%, #9b2f8f 56%, #ff5f72 80%, #ffb35c 100%); }
.sky-night {
  background: linear-gradient(180deg, #03020c 0%, #0b0a2a 42%, #261048 74%, #4f1858 100%);
  transition: opacity 2.6s ease;
}
.stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2.4s ease; }
.cloud {
  position: absolute;
  height: 1.6vh;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 170, 200, .75) 30%, rgba(255, 210, 170, .7) 70%, transparent);
  filter: blur(3px);
  opacity: 0;
  transition: opacity 2.4s ease;
  animation: cloud-drift 46s linear infinite alternate;
}
.sun {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(66vw, 42vh);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff1a0 0%, #ffc14d 35%, #ff7a4a 62%, var(--pink) 100%);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 54% no-repeat, repeating-linear-gradient(#000 0 10px, transparent 10px 15px);
  mask: linear-gradient(#000 0 0) top / 100% 54% no-repeat, repeating-linear-gradient(#000 0 10px, transparent 10px 15px);
  filter: drop-shadow(0 0 40px rgba(255, 150, 80, .7));
  transform: translate(-50%, 95%);
  transition: transform 3.2s cubic-bezier(.2, .7, .2, 1);
}
.skyline {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 16vh;
  transform: translateY(100%);
  transition: transform 1.8s .4s cubic-bezier(.2, .7, .2, 1);
}
.skyline.back { height: 25vh; opacity: .7; transition-delay: .15s; }
.skyline .window { transition: opacity 1.4s ease; }
.sea {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--horizon);
  opacity: 0;
  transition: opacity 1.6s ease, filter 2.4s ease;
  background:
    radial-gradient(ellipse 22% 60% at 50% 0%, rgba(255, 190, 110, .75), transparent 70%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .055) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, #ff7f63 0%, #8a2c83 40%, #2a0d4a 75%, #12061f 100%);
  animation: shimmer 3s linear infinite;
}
.palm {
  position: absolute;
  bottom: -2vh;
  height: 78vh;
  width: auto;
  fill: var(--silhouette);
  transition: transform 2.2s .3s cubic-bezier(.2, .7, .2, 1);
}
.palm.left { left: -12vh; transform: translateX(-70%) rotate(-4deg); transform-origin: bottom center; }
.palm.right { right: -14vh; height: 66vh; transform: translateX(70%) scaleX(-1); }

#scene.on .sky-day, #scene.on .sea { opacity: 1; }
#scene.on .stars { opacity: .45; }
#scene.on .cloud { opacity: .75; }
#scene.on .sun { transform: translate(-50%, 34%); }
#scene.on .skyline { transform: translateY(0); }
#scene.on .palm.left { transform: translateX(0) rotate(-4deg); animation: sway 6s 2.5s ease-in-out infinite alternate; }
#scene.on .palm.right { transform: translateX(0) scaleX(-1); }
#scene.on .bar { height: var(--bar); }

#scene.night .sky-night { opacity: 1; }
#scene.night .stars { opacity: 1; animation: twinkle 2.6s ease-in-out infinite alternate; }
#scene.night .cloud { opacity: .18; }
#scene.night .sun { transform: translate(-50%, 115%); transition-duration: 2.6s; }
#scene.night .sea { filter: brightness(.42) saturate(.85); }

#scene.passed .world { filter: saturate(.35) brightness(.7); }
#scene.out .world { transform: scale(1.2); opacity: 0; filter: brightness(2); }

/* ---------- Titres ---------- */
.titles {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--bar) + 5vh);
  z-index: 3;
  padding: 0 16px;
  text-align: center;
  transition: opacity .8s ease, transform .8s ease;
}
.titles .l1 { font-size: min(18vw, 12vh); }
.titles .l2 { font-size: min(15vw, 10vh); margin-top: -1vh; }
.titles .name { font-size: min(31vw, 22vh); margin-top: 2.5vh; }
.titles > * { opacity: 0; }
.titles .in { animation: flicker .9s steps(1) forwards; }
.titles .name.in { animation: slam .6s cubic-bezier(.2, 1.4, .4, 1) forwards, glow 2.4s .6s ease-in-out infinite alternate; }
#scene.night .titles { opacity: 0; transform: translateY(-5vh); }

@keyframes flicker {
  0% { opacity: 0; }
  10% { opacity: 1; }
  20% { opacity: .15; }
  32% { opacity: 1; }
  45% { opacity: .35; }
  55%, 100% { opacity: 1; }
}
@keyframes slam {
  from { opacity: 0; transform: scale(2.8); }
  60% { opacity: 1; }
  to { opacity: 1; transform: scale(1); }
}
@keyframes glow {
  to { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .7)) drop-shadow(5px 7px 0 #2a0a3a) drop-shadow(0 0 46px rgba(255, 120, 80, .8)); }
}
@keyframes shimmer { to { background-position: 0 0, 0 22px, 0 0; } }
@keyframes sway { from { transform: rotate(-4deg); } to { transform: rotate(-1.5deg); } }
@keyframes twinkle { from { opacity: .7; } to { opacity: 1; } }
@keyframes cloud-drift { from { translate: -6vw 0; } to { translate: 6vw 0; } }