* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
  background: #000;
}

.slideshow {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1);
  animation: zoom-out linear forwards;
}

@keyframes zoom-1 {
  0%   { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes zoom-2 {
  0%   { opacity: 1; width: 100vw; height: 100vh; top: 0; left: 0; border-radius: 0; }
  99%  { opacity: 1; width: calc(75vw + min(12.5vh, 20vw)); height: calc(75vh + min(12.5vh, 20vw)); top: calc(12.5vh - min(6.25vh, 10vw)); left: calc(12.5vw - min(6.25vh, 10vw)); border-radius: 4px; }
  100% { opacity: 0; width: calc(75vw + min(12.5vh, 20vw)); height: calc(75vh + min(12.5vh, 20vw)); top: calc(12.5vh - min(6.25vh, 10vw)); left: calc(12.5vw - min(6.25vh, 10vw)); border-radius: 4px; }
}
@keyframes zoom-3 {
  0%   { opacity: 1; width: calc(75vw + min(12.5vh, 20vw)); height: calc(75vh + min(12.5vh, 20vw)); top: calc(12.5vh - min(6.25vh, 10vw)); left: calc(12.5vw - min(6.25vh, 10vw)); border-radius: 4px; }
  99%  { opacity: 1; width: calc(50vw + min(25vh, 40vw)); height: calc(50vh + min(25vh, 40vw)); top: calc(25vh - min(12.5vh, 20vw)); left: calc(25vw - min(12.5vh, 20vw)); border-radius: 8px; }
  100% { opacity: 0; width: calc(50vw + min(25vh, 40vw)); height: calc(50vh + min(25vh, 40vw)); top: calc(25vh - min(12.5vh, 20vw)); left: calc(25vw - min(12.5vh, 20vw)); border-radius: 8px; }
}
@keyframes zoom-4 {
  0%   { opacity: 1; width: calc(50vw + min(25vh, 40vw)); height: calc(50vh + min(25vh, 40vw)); top: calc(25vh - min(12.5vh, 20vw)); left: calc(25vw - min(12.5vh, 20vw)); border-radius: 8px; }
  99%  { opacity: 1; width: calc(25vw + min(37.5vh, 60vw)); height: calc(25vh + min(37.5vh, 60vw)); top: calc(37.5vh - min(18.75vh, 30vw)); left: calc(37.5vw - min(18.75vh, 30vw)); border-radius: 12px; }
  100% { opacity: 0; width: calc(25vw + min(37.5vh, 60vw)); height: calc(25vh + min(37.5vh, 60vw)); top: calc(37.5vh - min(18.75vh, 30vw)); left: calc(37.5vw - min(18.75vh, 30vw)); border-radius: 12px; }
}
@keyframes zoom-5 {
  0%   { opacity: 1; width: calc(25vw + min(37.5vh, 60vw)); height: calc(25vh + min(37.5vh, 60vw)); top: calc(37.5vh - min(18.75vh, 30vw)); left: calc(37.5vw - min(18.75vh, 30vw)); border-radius: 12px; box-shadow: none; }
  100% { opacity: 1; width: min(50vh, 80vw); height: min(50vh, 80vw); top: calc(50vh - min(25vh, 40vw)); left: calc(50vw - min(25vh, 40vw)); border-radius: 32px; box-shadow: 0 8px 30px rgba(0,0,0,0.25); }
}

/* Image assignments + staggered timing with progressive zoom */
.slide-1 { background-image: url('public/img/image_1.jpg'); animation-name: zoom-1; animation-duration: 0.5s; animation-delay: 0s; }
.slide-2 { background-image: url('public/img/image_2.jpg'); animation-name: zoom-2; animation-duration: 0.4s; animation-delay: 0.5s; inset: unset; }
.slide-3 { background-image: url('public/img/image_3.jpg'); animation-name: zoom-3; animation-duration: 0.3s; animation-delay: 0.9s; inset: unset; }
.slide-4 { background-image: url('public/img/image_4.jpg'); animation-name: zoom-4; animation-duration: 0.3s; animation-delay: 1.2s; inset: unset; }
.slide-5 {
  background-image: url('public/img/image_5.jpg');
  animation-name: zoom-5;
  animation-duration: 0.4s;
  animation-delay: 1.5s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  inset: unset;
}

/* White backdrop behind slide 5 — hides earlier slides when it shrinks */
.white-backdrop {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  animation: fade-in 0.01s linear 0.5s forwards;
}

/* Blur overlay — intensifies after last image (2.75s) */
.blur-overlay {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  animation: blur-intensify 2s linear forwards;
}

/* Gradient background — disabled for now */
.gradient-bg {
  display: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #FFF, #3C98CB);
  opacity: 0;
  animation: fade-in 0.5s linear 1.8s forwards;
}

@keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Logo — centered above the square image */
.logo {
  position: absolute;
  top: calc(43vh - min(25vh, 40vw));
  left: 50%;
  width: 14%;
  transform: translate(-50%, -100%);
  opacity: 0;
  z-index: 10;
  animation: fade-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.8s forwards;
}

/* Slogan — above the square image, below the logo */
.slogan {
  position: absolute;
  top: calc(45vh - min(25vh, 40vw));
  left: 50%;
  transform: translate(-50%, 0);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: #000;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  z-index: 10;
  animation: fade-in 0.6s ease-out 2.2s forwards;
}

/* Coming soon — below the square image */
.coming-soon {
  position: absolute;
  top: calc(53vh + min(25vh, 40vw));
  left: 50%;
  transform: translate(-50%, 0);
  font-family: 'Space Mono', monospace;
  font-size: 0.9rem;
  font-weight: 400;
  color: #666;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0;
  z-index: 10;
  animation: fade-in 0.6s ease-out 2.6s forwards;
}

/* Copyright — bottom left */
.copyright {
  position: absolute;
  bottom: 1.5vh;
  left: 1.5vw;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  color: #999;
  z-index: 10;
}

/* Portrait / mobile adjustments */
@media (orientation: portrait) {
  .logo { width: 45%; }
  .slogan { font-size: 0.85rem; }
  .coming-soon { font-size: 0.75rem; }
  .copyright { left: 50%; transform: translateX(-50%); }
}

@keyframes blur-intensify {
  0% {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  100% {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
}