/* vars */
:root{
  --bg1: #0a0f25;
  --bg2: #0c1a3a;
  --accent: #4facfe;
  --gold: #f6d365;
  --muted: #9fb0ce;
  --light: #f7fbff;
  --card-bg: rgba(255,255,255,0.05);
  --glass: rgba(255,255,255,0.08);
  --shadow: 0 25px 80px rgba(0,0,0,0.7);
  --slide-w: 1280px;
  --slide-h: 720px;
}

/* light theme vars */
body.light {
  --bg1: #f6f9ff;
  --bg2: #e6eefc;
  --accent: #1e40af;
  --gold: #e5b95c;
  --muted: #475569;
  --light: #0b1220;
  --card-bg: rgba(255,255,255,0.07);
  --glass: rgba(0,0,0,0.05);
  --shadow: 0 25px 80px rgba(0,0,0,0.1);
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  font-family: 'Inter', system-ui, -apple-system,'Segoe UI', Roboto, Arial;
  color:var(--light);
  background: linear-gradient(160deg,var(--bg1),var(--bg2));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition: all .45s ease;
}

/* container */
.screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
.stage{
  width:min(98vw,var(--slide-w));
  height:min(92vh,var(--slide-h));
  border-radius:22px;
  overflow:hidden;
  position:relative;
  box-shadow:var(--shadow);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.08);
  display:flex;
  flex-direction:column;
}

/* slides */
.slides{
  flex:1;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.slide{
  position:absolute;
  inset:0;
  padding:36px;
  display:grid;
  grid-template-columns:1fr 420px;
  gap:28px;
  align-items:center;
  opacity:0;
  transform:translateY(40px) scale(0.95);
  transition: all 0.8s cubic-bezier(.2,.9,.2,1);
  pointer-events:none;
}
.slide.active{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.left{padding-right:6px}

/* headings with gradient animation */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.title{
  font-size:48px;
  font-weight:900;
  line-height:1.1;
  margin-bottom:14px;
  background: linear-gradient(270deg, var(--gold), var(--accent), #f9f9f9);
  background-size: 600% 600%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 8s ease infinite;
  text-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.subtitle{
  font-size:20px;
  color:var(--muted);
  line-height:1.6;
  margin-bottom:14px;
  text-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.paragraph{
  margin-top:16px;
  font-size:18px;
  color:var(--muted);
  line-height:1.8;
  max-width:820px;
}

/* card + hover parallax */
.card{
  width:420px;
  min-height:420px;
  border-radius:20px;
  padding:24px;
  background: var(--card-bg);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  box-shadow:0 28px 70px rgba(0,0,0,0.6);
  transition: all 0.4s ease;
}
.card:hover{
  transform: translateY(-10px) scale(1.05);
  box-shadow:0 32px 90px rgba(0,0,0,0.75);
}
.portrait{
  width:220px;
  height:220px;
  border-radius:50%;
  object-fit:cover;
  border:6px solid rgba(255,255,255,0.08);
  box-shadow:0 20px 60px rgba(0,0,0,0.7);
  background:linear-gradient(135deg, #eaf4ff, #fff);
  transition: transform 0.5s ease;
}
.portrait:hover{
  transform: scale(1.1) rotate(4deg);
}
.pname{
  margin-top:20px;
  font-weight:900;
  font-size:26px;
  color:var(--light);
  text-align:center;
}
.pdesc{
  margin-top:12px;
  color:var(--muted);
  text-align:center;
  line-height:1.5;
  padding:0 6px;
}

/* controls + neon glow */
.controls{
  position:absolute;
  left:18px;
  right:18px;
  bottom:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  z-index:80;
}
.btn{
  background:var(--glass);
  border:1px solid rgba(255,255,255,0.1);
  padding:14px 18px;
  border-radius:16px;
  color:var(--light);
  font-weight:800;
  cursor:pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  box-shadow:0 0 15px rgba(79,172,254,0.5);
}
.btn:hover{
  transform:translateY(-6px) scale(1.08);
  box-shadow:0 0 25px rgba(79,172,254,0.9);
}

/* dots with glow */
.dotbar{display:flex;gap:12px;align-items:center}
.dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background: rgba(255,255,255,0.15);
  cursor:pointer;
  transition: all 0.3s;
}
.dot.active{
  background:var(--accent);
  box-shadow:0 0 15px var(--accent), 0 0 30px var(--gold);
  transform:scale(1.3);
}

/* meta */
.meta{
  position:absolute;
  right:18px;
  top:18px;
  text-align:right;
  color:var(--muted);
  font-size:14px;
  font-weight:600;
}

/* progress bar neon */
.progress-wrap{
  width:280px;
  height:10px;
  background:rgba(255,255,255,0.05);
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
}
.progress{
  height:100%;
  width:0%;
  background: linear-gradient(90deg,var(--accent),var(--gold),var(--accent));
  transition:width 0.25s linear;
  border-radius:999px;
  box-shadow:0 0 15px var(--accent), 0 0 30px var(--gold);
}


/* focus */
.btn:focus, .dot:focus, .file-label:focus{
  outline:2px dashed rgba(255,255,255,0.2);
  outline-offset:4px;
}
/* dots with glow (default dark) */
.dotbar{display:flex;gap:12px;align-items:center}
.dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background: rgba(255,255,255,0.15); /* dark theme background */
  cursor:pointer;
  transition: all 0.3s;
}
.dot.active{
  background:var(--accent);
  box-shadow:0 0 15px var(--accent), 0 0 30px var(--gold);
  transform:scale(1.3);
}

/* light theme dots */
body.light .dot{
  background: rgba(0,0,0,0.15); /* light theme uchun kontrastli qora */
}
body.light .dot.active{
  background: var(--accent);
  box-shadow:0 0 15px var(--accent), 0 0 30px var(--gold);
}
/* ===== Enhanced slide animation ===== */
.slide {
  position:absolute;
  inset:0;
  padding:36px;
  display:grid;
  grid-template-columns:1fr 420px;
  gap:28px;
  align-items:center;
  opacity:0;
  transform:translateY(50px) scale(0.9) rotateX(5deg) perspective(1200px);
  transition: all 0.9s cubic-bezier(.25,.8,.25,1);
  pointer-events:none;
  z-index:0;
}

/* Active slide with pop effect */
.slide.active {
  opacity:1;
  transform:translateY(0) scale(1) rotateX(0deg) perspective(1200px);
  pointer-events:auto;
  z-index:1;
  transition: all 0.9s cubic-bezier(.25,.8,.25,1);
}

/* Exit slides with 3D tilt */
.slide.exit-left {
  opacity:0;
  transform:translateX(-100%) scale(0.9) rotateY(-15deg);
  pointer-events:none;
  z-index:0;
}
.slide.exit-right {
  opacity:0;
  transform:translateX(100%) scale(0.9) rotateY(15deg);
  pointer-events:none;
  z-index:0;
}

/* Card parallax + depth hover */
.card{
  transition: all 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;
}
.card:hover{
  transform: translateY(-15px) scale(1.08) rotateX(3deg);
  box-shadow:0 35px 90px rgba(0,0,0,0.8);
}

/* Slide text stagger animation */
.slide .title,
.slide .subtitle,
.slide .paragraph{
  opacity:0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(.25,.8,.25,1);
}
.slide.active .title{
  transition-delay:0.2s;
  opacity:1;
  transform:translateY(0);
}
.slide.active .subtitle{
  transition-delay:0.4s;
  opacity:1;
  transform:translateY(0);
}
.slide.active .paragraph{
  transition-delay:0.6s;
  opacity:1;
  transform:translateY(0);
}

/* Dotbar neon pulse animation */
@keyframes dotPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 15px var(--accent), 0 0 30px var(--gold);}
  50% { transform: scale(1.5); box-shadow: 0 0 25px var(--accent), 0 0 40px var(--gold);}
}
.dot.active {
  animation: dotPulse 1.2s infinite ease-in-out;
}

/* Optional: add slight slide rotation on hover */
.slide:hover {
  transform: translateY(-5px) scale(1.01) rotateX(1deg);
}