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

/* ================= THEME ================= */
:root{
  --card-bg: rgba(255,255,255,0.95);
  --text-dark:#1e1e1e;
  --gold:#c9a24d;
}

body.night{
  --card-bg: rgba(30,30,30,0.95);
  --text-dark:#f2f2f2;
}

/* ================= BODY ================= */
body{
  font-family:"Montserrat",sans-serif;
  color:#821818;
  overflow-x:hidden;
}

/* ================= IMAGE BACKGROUND ================= */
.image-bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.image-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Light overlay */
.image-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.55);
}

.image-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: bgZoom 20s ease-in-out infinite alternate;
}

@keyframes bgZoom{
  from{ transform: scale(1); }
  to{ transform: scale(1.1); }
}

/* ================= SLIDE MODE SWITCH ================= */
.mode-switch{
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-radius: 50px;
  background: linear-gradient(135deg,#2b0a02,#000);
  box-shadow: 0 0 30px rgba(255,80,60,.6);
  z-index: 100;
}

.mode-text{
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  letter-spacing: .5px;
}

/* SWITCH BASE */
.slide-switch{
  position: relative;
  width: 70px;
  height: 36px;
}

.slide-switch input{
  opacity: 0;
  width: 0;
  height: 0;
}

/* TRACK */
.slider{
  position: absolute;
  inset: 0;
  background: #3a0000;
  border-radius: 40px;
  transition: .4s ease;
  box-shadow: inset 0 0 12px rgba(255,0,0,.6);
}

/* CIRCLE */
.slider::before{
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  top: 4px;
  left: 4px;
  border-radius: 50%;
  background: radial-gradient(circle,#ff5a5a,#ff0000);
  transition: .4s ease;
  box-shadow: 0 0 18px rgba(255,0,0,.9);
}

/* ON (LIGHT MODE) */
.slide-switch input:checked + .slider{
  background: #ddd;
  box-shadow: inset 0 0 10px rgba(0,0,0,.3);
}

.slide-switch input:checked + .slider::before{
  transform: translateX(34px);
  background: radial-gradient(circle,#fff,#ccc);
  box-shadow: 0 0 18px rgba(255,255,255,.9);
}

/* ================= HERO ================= */
.hero{
  padding: 50px 30px;
  text-align: center;

  max-width: 800px;
  margin: 140px auto 60px;

  background: rgba(255, 255, 255, 0.85); /* transparent white */
  backdrop-filter: blur(0px);           /* glass blur */
  -webkit-backdrop-filter: blur(0px);

  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

.hero h1{
  font-size: 42px;
  margin-bottom: 15px;
}

.hero p{
  max-width: 700px;
  margin: auto;
  color: #680c0c;
  line-height: 1.7;
}

body.night .hero{
  background: rgba(30, 30, 30, 0.85);
  color: #f2f2f2;
}

/* ================= TIMELINE ================= */
.timeline{
  max-width:900px;
  margin:60px auto;
  padding:0 20px;
}
.step{
  background:var(--card-bg);
  color:var(--text-dark);
  padding:30px;
  border-radius:18px;
  margin-bottom:30px;
  border-left:6px solid var(--gold);
  box-shadow:0 20px 40px rgba(0,0,0,.3);
  opacity:0;
  transform:translateY(60px);
  transition:.8s ease;
}
.step.show{
  opacity:1;
  transform:translateY(0);
}
.step span{
  font-size:24px;
  color:var(--gold);
  font-weight:700;
}
.step h3{
  margin:6px 0 8px;
}
.step:hover{
  transform:translateY(-8px);
}

/* ================= BACK ================= */
.back{
  text-align:center;
  margin-bottom:60px;
}
.back a{
  color:#5a0f0f;
  text-decoration:none;
  font-weight:600;
}
.back a:hover{
  color:var(--gold);
}

/* ================= MOBILE ================= */
@media(max-width:768px){
  .hero h1{
    font-size:32px;
  }
}

/* ================= HOVER ZOOM EFFECT ================= */

/* smooth animation */
.step{
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* When hovering timeline → make all cards slightly small */
.timeline:hover .step{
  transform: scale(0.92);
  opacity: 0.6;
}

/* When hovering particular card → zoom in */
.timeline .step:hover{
  transform: scale(1.08);
  opacity: 1;
  z-index: 10;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}

/* ================= 3D VIEW BUTTON ================= */
.view3d-btn{
  text-align:center;
  margin-bottom:40px;
}

.view3d-btn button{
  padding:14px 34px;
  font-size:16px;
  font-weight:700;
  border:none;
  border-radius:50px;
  cursor:pointer;
  color:#fff;
  background: linear-gradient(135deg,#c41b1b,#5a0f0f);
  box-shadow:0 15px 30px rgba(0,0,0,.4);
  transition:.3s ease;
}

.view3d-btn button:hover{
  transform: scale(1.08);
}

/* ================= 3D MODAL ================= */
.modal3d{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.7);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:200;
}

.modal3d-content{
  background: var(--card-bg);
  padding:40px;
  border-radius:20px;
  text-align:center;
  position:relative;
  width:90%;
  max-width:400px;
  box-shadow:0 30px 60px rgba(0,0,0,.6);
}

.modal3d-content h2{
  margin-bottom:25px;
}

.options{
  display:flex;
  flex-direction:column;
  gap:15px;
}

.options button{
  padding:14px;
  font-size:16px;
  font-weight:600;
  border:none;
  border-radius:12px;
  cursor:pointer;
  background: linear-gradient(135deg,#d4a13a,#8c6b1f);
  color:#000;
  transition:.3s;
}

.options button:hover{
  transform: scale(1.05);
}

.close{
  position:absolute;
  top:15px;
  right:18px;
  cursor:pointer;
  font-size:18px;
}

/* ================= MOBILE FIX (≤768px) ================= */
@media (max-width: 768px) {

  /* ===== BACKGROUND ===== */
  .image-bg img{
    animation: none; /* disable zoom for performance */
  }

  .image-bg::after{
    background: rgba(0,0,0,0.65); /* better readability */
  }

  /* ===== MODE SWITCH ===== */
  .mode-switch{
    top: 10px;
    right: 10px;
    padding: 8px 12px;
    gap: 8px;
  }

  .mode-text{
    font-size: 10px;
  }

  .slide-switch{
    width: 55px;
    height: 28px;
  }

  .slider::before{
    width: 20px;
    height: 20px;
  }

  .slide-switch input:checked + .slider::before{
    transform: translateX(26px);
  }

  /* ===== HERO ===== */
  .hero{
    margin: 90px 15px 40px;
    padding: 25px 20px;
    border-radius: 15px;
  }

  .hero h1{
    font-size: 26px;
  }

  .hero p{
    font-size: 14px;
    line-height: 1.6;
  }

  /* ===== TIMELINE ===== */
  .timeline{
    margin: 30px auto;
    padding: 0 15px;
  }

  .step{
    padding: 20px;
    margin-bottom: 20px;
  }

  .step span{
    font-size: 18px;
  }

  .step h3{
    font-size: 18px;
  }

  .step p{
    font-size: 14px;
  }

  /* Disable hover zoom (important for mobile UX) */
  .timeline:hover .step{
    transform: none;
    opacity: 1;
  }

  .timeline .step:hover{
    transform: none;
  }

  /* ===== BACK BUTTON ===== */
  .back a{
    font-size: 14px;
  }

  /* ===== MODAL 3D ===== */
  .modal3d-content{
    padding: 25px;
  }

  .options button{
    font-size: 14px;
    padding: 12px;
  }
}