/* CSS Custom Properties */
:root {
  --slide-duration: 6s;
  --slide-total-duration: 48s;
  --animation-fade-percent: 2%;
  --animation-hold-percent: 10.5%;
  --animation-fade-hold-percent: 12.5%;
  --animation-fade-out-percent: 14.5%;
}

/* Base */
body {
  font-family: 'Inter', sans-serif;
  background-color: #2F4F4F;
  color: #D0D9D5;
}

/* Fullscreen slideshow container */
.slideshow-container {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1; overflow: hidden;
  background-color: #374955;
}

/* Slide */
.slideshow-image {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  opacity: 0;
}

/* Animations per slide (using CSS custom properties) */
.slideshow-image:nth-child(1) { animation: transition-pan-first var(--slide-total-duration) infinite 0s; }
.slideshow-image:nth-child(2) { animation: transition-wipe-down var(--slide-total-duration) infinite calc(var(--slide-duration) * 1); }
.slideshow-image:nth-child(3) { animation: transition-zoom-in var(--slide-total-duration) infinite calc(var(--slide-duration) * 2); }
.slideshow-image:nth-child(4) { animation: transition-iris-in var(--slide-total-duration) infinite calc(var(--slide-duration) * 3); }
.slideshow-image:nth-child(5) { animation: transition-pan var(--slide-total-duration) infinite calc(var(--slide-duration) * 4); }
.slideshow-image:nth-child(6) { animation: transition-wipe-down var(--slide-total-duration) infinite calc(var(--slide-duration) * 5); }
.slideshow-image:nth-child(7) { animation: transition-zoom-in var(--slide-total-duration) infinite calc(var(--slide-duration) * 6); }
.slideshow-image:nth-child(8) { animation: transition-iris-in var(--slide-total-duration) infinite calc(var(--slide-duration) * 7); }

/* Backgrounds (note the ../Images/) - spaces encoded as %20 */
.slideshow-image:nth-child(1) { background-image: url('../Images/mount%20everest.jpg'); }
.slideshow-image:nth-child(2) { background-image: url('../Images/tokyo.jpg'); }
.slideshow-image:nth-child(3) { background-image: url('../Images/lake.jpg'); }
.slideshow-image:nth-child(4) { background-image: url('../Images/china%20great%20wall.jpg'); }
.slideshow-image:nth-child(5) { background-image: url('../Images/japan%20mount%20fuji.jpg'); }
.slideshow-image:nth-child(6) { background-image: url('../Images/hong%20kong.jpg'); }
.slideshow-image:nth-child(7) { background-image: url('../Images/waterfall.jpg'); }
.slideshow-image:nth-child(8) { background-image: url('../Images/flight.jpg'); }

/* Keyframes (optimized with more readable structure) */
@keyframes transition-pan-first {
  0%   { opacity: 1; transform: scale(1.1) translateX(-2%); }
  10.5%{ opacity: 1; transform: scale(1.1) translateX(2%); }
  12.5%{ opacity: 1; transform: scale(1.1) translateX(2%); }
  14.5%{ opacity: 0; transform: scale(1.1) translateX(2%); }
  100% { opacity: 0; }
}

@keyframes transition-pan {
  0%   { opacity: 0; transform: scale(1.1) translateX(-2%); }
  2%   { opacity: 1; transform: scale(1.1) translateX(-2%); }
  10.5%{ opacity: 1; transform: scale(1.1) translateX(2%); }
  12.5%{ opacity: 1; transform: scale(1.1) translateX(2%); }
  14.5%{ opacity: 0; transform: scale(1.1) translateX(2%); }
  100% { opacity: 0; }
}

@keyframes transition-wipe-down {
  0%   { opacity: 1; clip-path: inset(0 0 100% 0); transform: scale(1.05); }
  2%   { clip-path: inset(0 0 0 0); }
  10.5%{ opacity: 1; transform: scale(1); }
  12.5%{ opacity: 1; transform: scale(1); }
  14.5%{ opacity: 0; transform: scale(1); }
  100% { opacity: 0; }
}

@keyframes transition-zoom-in {
  0%   { opacity: 0; transform: scale(1.2); }
  2%   { opacity: 1; transform: scale(1); }
  10.5%{ opacity: 1; transform: scale(1); }
  12.5%{ opacity: 1; transform: scale(1); }
  15%  { opacity: 0; transform: scale(1); }
  100% { opacity: 0; }
}

@keyframes transition-iris-in {
  0%   { opacity: 1; clip-path: circle(0% at 50% 50%); transform: scale(1.1); }
  2.5% { clip-path: circle(75% at 50% 50%); }
  10.5%{ opacity: 1; transform: scale(1); }
  12.5%{ opacity: 1; transform: scale(1); }
  14.5%{ opacity: 0; transform: scale(1); }
  100% { opacity: 0; }
}

/* Glassmorphism */
.glass-container {
  background: rgba(208, 217, 213, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  transition: all 0.3s ease-in-out;
}
#auth-container.glass-container:hover,
#welcome-container.glass-container:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
}
.modal.glass-container:hover {
  transform: translate(-50%, -50%) translateY(-5px) scale(1.02);
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
}

.custom-input {
  background-color: rgba(60, 82, 98, 0.5);
  border-color: rgba(144, 169, 178, 0.5);
  color: #D0D9D5;
}
.custom-input::placeholder { color: rgba(208, 217, 213, 0.7); }

/* Modals & overlay */
#modal-overlay {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 300 !important; display: none;
}
.modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 350 !important; display: none;
}

/* Top notification */
#top-notification {
  display: none;
  position: fixed; top: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}