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

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

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

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

/* Sky */
.sky{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,#f8e6d8,#fff);
}

/* ================= BUILDINGS ================= */
.buildings{
  position:absolute;
  bottom:0;
  width:100%;
  display:flex;
  justify-content:space-around;
  align-items:flex-end;
}

.building{
  width:140px;
  background:#821818;
  position:relative;
  animation:buildUp 4s ease forwards;
  transform:scaleY(0);
  transform-origin:bottom;
}

.b1{ height:180px; animation-delay:.3s; }
.b2{ height:250px; animation-delay:.6s; }
.b3{ height:200px; animation-delay:.9s; }
.b4{ height:300px; animation-delay:1.2s; }

@keyframes buildUp{
  to{ transform:scaleY(1); }
}

/* Windows */
.building::before{
  content:"";
  position:absolute;
  top:15px;
  left:15px;
  right:15px;
  bottom:15px;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.2) 0px,
    rgba(255,255,255,0.2) 8px,
    transparent 8px,
    transparent 20px
  );
}

/* ================= CRANE ================= */
.crane{
  position:absolute;
  bottom:300px;
  left:50%;
  transform:translateX(-50%);
}

/* Tower */
.tower{
  width:14px;
  height:260px;
  background:#2c2c2c;
  margin:auto;
  position:relative;
}

/* Warning Light */
.warning-light{
  width:12px;
  height:12px;
  background:red;
  border-radius:50%;
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  animation:blink 1s infinite;
}

@keyframes blink{
  0%,50%,100%{ opacity:1; }
  25%,75%{ opacity:0.2; }
}

/* Arm */
.arm{
  width:340px;
  height:10px;
  background:#2c2c2c;
  position:absolute;
  top:20px;
  left:50%;
  transform-origin:left center;
  animation:craneSwing 10s ease-in-out infinite alternate;
}

/* Smooth Swing */
@keyframes craneSwing{
  0%{ transform:rotate(-45deg); }
  50%{ transform:rotate(0deg); }
  100%{ transform:rotate(45deg); }
}

/* Counterweight */
.counterweight{
  width:50px;
  height:25px;
  background:#444;
  position:absolute;
  left:-60px;
  top:-8px;
  border-radius:5px;
}

/* Pulley */
.pulley{
  width:20px;
  height:20px;
  border:4px solid #555;
  border-radius:50%;
  position:absolute;
  left:260px;
  top:-5px;
  animation:spin 3s linear infinite;
}

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

/* Rope */
.rope{
  width:3px;
  height:80px;
  background:#444;
  position:absolute;
  left:270px;
  top:15px;
  animation:ropeMove 4s ease-in-out infinite alternate;
}

/* Lifting Motion */
@keyframes ropeMove{
  from{ height:60px; }
  to{ height:120px; }
}

/* Concrete Block */
.block{
  width:40px;
  height:40px;
  background:#888;
  position:absolute;
  left:250px;
  top:95px;
  border-radius:4px;
  animation:blockMove 4s ease-in-out infinite alternate;
  box-shadow:inset -5px -5px 10px rgba(0,0,0,0.3);
}

@keyframes blockMove{
  from{ transform:translateY(0); }
  to{ transform:translateY(60px); }
}

/* ================= DUST ================= */
.dust{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.dust::before{
  content:"";
  position:absolute;
  width:200%;
  height:200%;
  background-image:radial-gradient(rgba(130,24,24,0.15) 2px, transparent 2px);
  background-size:50px 50px;
  animation:dustMove 60s linear infinite;
}

@keyframes dustMove{
  from{ transform:translate(0,0); }
  to{ transform:translate(-600px,-600px); }
}

/* ================= MSB BACKGROUND ================= */

.bg-title{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 200px;
  font-weight: 800;
  letter-spacing: 25px;
  z-index: -1;
  pointer-events: none;

  background: linear-gradient(
      120deg,
      #8b1e1e,
      #6b0f0f,
      #2e0505,
      #8b1e1e
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  opacity: 0.12;
  animation: metallicMove 6s ease infinite alternate;
}

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

/* ================= HERO ================= */

.hero{
  max-width:750px;
  margin: 60px auto 60px;
  padding:50px 40px;
  text-align:center;

  background:rgba(255,255,255,0.75);   /* white transparency */
  backdrop-filter:blur(0%);          /* glass effect */
  -webkit-backdrop-filter:blur(10px);  /* safari support */

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

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

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

.hero{
  padding:110px 20px 60px;
  text-align:center;
}
.hero h1{
  font-size:42px;
}
.hero p{
  max-width:720px;
  margin:auto;
  line-height:1.7;
  color:#680c0c;
}

/* ================= CONSTRUCTION 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(--primary);
  box-shadow:0 20px 40px rgba(0,0,0,.2);
  opacity:0;
  transform:translateY(60px);
  transition:.8s ease;
}

.step.show{
  opacity:1;
  transform:translateY(0);
}

.step span{
  font-size:24px;
  color:var(--primary);
  font-weight:700;
}

.step h3{
  margin:6px 0 8px;
}

/* Hover Zoom Effect */
.timeline:hover .step{
  transform: scale(0.92);
  opacity: 0.6;
}

.timeline .step:hover{
  transform: scale(1.05);
  opacity: 1;
  z-index: 10;
}

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

/* ================= MOBILE ================= */
@media(max-width:768px){
  .hero h1{
    font-size:32px;
  }
  .bg-title{
    font-size:100px;
    letter-spacing:12px;
  }
}

@keyframes craneSwing{
  0%{ transform:rotate(-50deg); }
  50%{ transform:rotate(0deg); }
  100%{ transform:rotate(50deg); }
}


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

  /* ===== GENERAL ===== */
  body {
    overflow-x: hidden;
  }

  /* ===== BACKGROUND TITLE ===== */
  .bg-title {
    font-size: 80px;
    letter-spacing: 8px;
    opacity: 0.08;
  }

  /* ===== HERO SECTION ===== */
  .hero {
    margin: 30px 15px;
    padding: 30px 20px;
  }

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

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

  /* ===== BUILDINGS ===== */
  .building {
    width: 70px;
  }

  .b1 { height: 100px; }
  .b2 { height: 140px; }
  .b3 { height: 120px; }
  .b4 { height: 160px; }

  /* ===== CRANE ===== */
  .crane {
    bottom: 180px;
    transform: translateX(-50%) scale(0.6);
  }

  .tower {
    height: 180px;
  }

  .arm {
    width: 220px;
  }

  .rope {
    height: 60px;
  }

  .block {
    width: 25px;
    height: 25px;
    left: 200px;
  }

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

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

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

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

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

  /* Disable heavy hover effect on mobile */
  .timeline:hover .step {
    transform: none;
    opacity: 1;
  }

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

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