* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', sans-serif; }

/* Background */
body {
    height: 100vh;
    background: linear-gradient(-45deg, #0f2027, #203a43, #2c5364, #1a2a3c);
    background-size: 400% 400%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    overflow:hidden;
    animation: gradientShift 15s ease infinite;
}

/* Transition out */
body.transitioning {
  opacity: 0;
  transform: scale(1.028);
  filter: blur(5px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1), filter 1s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes gradientShift {
    0% { background-position:0% 50%; }
    50% { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}

/* Floating items */
.floating-items {
    position:absolute;
    width:100%;
    height:100%;
    pointer-events:none;
}

.floating-item {
    position:absolute;
    opacity:0.15;
    font-size:26px;
    animation: rotateScale 20s infinite ease-in-out alternate;
}

.floating-item.left { left:5%; }
.floating-item.right { right:5%; }

@keyframes floatDown {
    0% { top:-10%; }
    100% { top:100%; }
}

@keyframes floatUp {
    0% { top:110%; }
    100% { top:-10%; }
}

@keyframes rotateScale {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(5deg) scale(1.05); }
    100% { transform: rotate(-5deg) scale(1); }
}

/* Container */
.container {
    backdrop-filter: blur(25px);
    background: rgba(255,255,255,0.08);
    border-radius: 25px;
    padding: 50px 35px;
    width: 90%;
    max-width: 400px;
    text-align:center;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}

.hidden { display:none; }

/* Text animations */
@keyframes fadeSlideUp {
    from { opacity:0; transform:translateY(25px); }
    to { opacity:1; transform:translateY(0); }
}

.app-title { animation: fadeSlideUp 0.8s ease forwards 0.2s; opacity:0; font-size:0.85rem; }
.time { animation: fadeSlideUp 0.8s ease forwards 0.5s; opacity:0; font-size:3.5rem; }
.date { animation: fadeSlideUp 0.8s ease forwards 0.6s; opacity:0; margin-bottom: 18px; }
.main-greeting { animation: fadeSlideUp 0.8s ease forwards 0.8s; opacity:0; margin-bottom: 18px; }
.subtext { animation: fadeSlideUp 0.8s ease forwards 1s; opacity:0; }
.status { animation: fadeSlideUp 0.8s ease forwards 1.2s; opacity:0; }

/* Input */
input {
    margin-top:20px;
    padding:12px;
    width:100%;
    border-radius:12px;
    border:none;
}

/* Enter button */
.enter-btn {
  margin-top: 80px;
  padding: 12px 0;
  width: 150px;
  background: rgba(255,255,255,0.3);
  color: white;
  border:none;
  border-radius:30px;
  font-weight:bold;
  cursor:pointer;
  animation: fadeSlideUp 0.8s ease forwards 1.4s, pulseWave 4s infinite;
  position:relative;
}

/* Button press */
.enter-btn:active {
    transform: scale(0.95);
}

/* Pulse */
.enter-btn::before {
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:150px; height:50px;
  border-radius:30px;
  background: rgba(255,255,255,0.2);
  transform: translate(-50%, -50%);
  animation: pulseWave 4s infinite;
}

@keyframes pulseWave {
    0% { transform: translate(-50%, -50%) scale(1); opacity:0.5; }
    50% { transform: translate(-50%, -50%) scale(1.6); opacity:0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity:0.5; }
}

/* Loader overlay */
#loaderOverlay {
  position: fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 99999;
}

body.transitioning #loaderOverlay {
  opacity: 1 !important;
  pointer-events: all;
}

/* Active state */
#loaderOverlay.active {
  opacity:1;
  pointer-events:all;
}

/* Spinner */
.spinner {
  width:44px;
  height:44px;
  border:3px solid rgba(255,255,255,0.22);
  border-top:3px solid rgba(255,255,255,0.82);
  border-radius:50%;
  box-shadow: 0 0 18px rgba(255,255,255,0.16);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Overlay Reveal */
#revealOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(120deg, #203a43 0%, #2c5364 100%);
  opacity: 0.92;
  pointer-events: none;
  z-index: 100000;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.7s cubic-bezier(.4,2,.6,1);
}

#revealOverlay.active {
  transform: scaleY(1);
  pointer-events: all;
}