:root{
  --red-light: #ff4d4d;
  --red: #E31C24;
  --red-dark: #a8121a;
  --red-deep: #5c0c10;
  --ink: #1c1414;
  --white: #ffffff;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
  overflow:hidden;
  background: var(--red-deep);
}

.scene{
  position:relative;
  width:100vw; height:100vh;
  overflow:hidden;
  background: linear-gradient(160deg, #ff5a4d 0%, var(--red) 38%, var(--red-dark) 72%, var(--red-deep) 100%);
}

/* ============ PARALLAX LAYERS ============ */
.layer{ position:absolute; inset:0; pointer-events:none; will-change: transform; }

.layer-sky{
  background:
    radial-gradient(ellipse 60% 40% at 25% 10%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 15%, rgba(255,255,255,.10), transparent 60%);
}

.layer-glow{ border-radius:50%; filter: blur(6px); }
.glow1{
  width:480px; height:480px; top:-160px; left:-140px;
  background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.20), transparent 70%);
  border-radius:50%;
}
.glow2{
  width:520px; height:520px; bottom:-220px; right:-160px;
  background: radial-gradient(circle at 60% 50%, rgba(0,0,0,.22), transparent 70%);
  border-radius:50%;
}

.layer-dots{
  background-image: radial-gradient(rgba(255,255,255,.25) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  opacity:.35;
  mix-blend-mode: overlay;
}

.layer-skyline{
  bottom:0; top:auto; height:38%;
  background-repeat: repeat-x;
  background-position: bottom;
}
.layer-skyline.back{
  opacity:.35;
  background-image: linear-gradient(transparent, transparent);
}
.layer-skyline.back::before,
.layer-skyline.front::before{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:100%;
  background-repeat: repeat-x; background-position:bottom;
}
.layer-skyline.back::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='220' viewBox='0 0 600 220'%3E%3Cg fill='%23000000' fill-opacity='0.12'%3E%3Crect x='0' y='90' width='60' height='130'/%3E%3Crect x='70' y='60' width='50' height='160'/%3E%3Crect x='130' y='110' width='70' height='110'/%3E%3Crect x='210' y='40' width='55' height='180'/%3E%3Crect x='275' y='95' width='60' height='125'/%3E%3Crect x='345' y='70' width='50' height='150'/%3E%3Crect x='405' y='105' width='65' height='115'/%3E%3Crect x='480' y='55' width='55' height='165'/%3E%3Crect x='545' y='95' width='55' height='125'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 600px 220px;
}
.layer-skyline.front{
  height:30%;
}
.layer-skyline.front::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='170' viewBox='0 0 500 170'%3E%3Cg fill='%23000000' fill-opacity='0.20'%3E%3Crect x='0' y='60' width='45' height='110'/%3E%3Crect x='55' y='90' width='55' height='80'/%3E%3Crect x='120' y='40' width='40' height='130'/%3E%3Crect x='170' y='75' width='60' height='95'/%3E%3Crect x='240' y='100' width='45' height='70'/%3E%3Crect x='295' y='55' width='50' height='115'/%3E%3Crect x='355' y='85' width='60' height='85'/%3E%3Crect x='425' y='65' width='45' height='105'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 500px 170px;
}

.layer-particles{
  background-image:
    radial-gradient(rgba(255,255,255,.5) 2px, transparent 2.5px),
    radial-gradient(rgba(255,255,255,.35) 1.5px, transparent 2px);
  background-size: 340px 340px, 220px 220px;
  background-position: 20px 40px, 160px 200px;
  animation: driftParticles 40s linear infinite;
  opacity:.5;
}
@keyframes driftParticles{
  from{ background-position: 20px 40px, 160px 200px; }
  to{ background-position: 380px 440px, -60px -40px; }
}

/* ============ TOP BAR ============ */
.top-bar{
  position:relative; z-index:20;
  display:flex; justify-content:center;
  padding: 26px 20px 0;
}
.logo{
  color:#fff; font-weight:800; font-size:20px; letter-spacing:1px;
  text-shadow: 0 3px 12px rgba(0,0,0,.25);
}
.logo span{ font-weight:400; opacity:.9; }

/* ============ MAIN CONTENT ============ */
.content{
  position:relative; z-index:20;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding: 18px 24px 0;
  max-width: 640px;
  margin: 0 auto;
}

.badge-404{
  display:flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 30px;
  padding: 7px 16px;
  margin-top: 18px;
  font-size:12.5px; color: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
}
.badge-404 span{
  font-weight:800; background:#fff; color: var(--red);
  padding:2px 8px; border-radius: 16px; font-size:11.5px;
}
.badge-404 em{ font-style:normal; }

.title{
  color:#fff; font-size: 44px; font-weight:800; margin: 20px 0 10px;
  text-shadow: 0 6px 24px rgba(0,0,0,.25);
  letter-spacing: .5px;
}
.subtitle{
  color: rgba(255,255,255,.88); font-size:15.5px; line-height:1.6;
  margin: 0 0 26px; max-width:460px;
}

/* ============ COUNTDOWN ============ */
.countdown{
  display:flex; align-items:center; gap:10px;
  margin-bottom: 26px;
}
.cd-box{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  min-width: 70px;
  padding: 12px 8px 10px;
  display:flex; flex-direction:column; align-items:center;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.cd-num{
  color:#fff; font-size: 28px; font-weight:800; font-variant-numeric: tabular-nums;
  line-height:1;
}
.cd-label{
  color: rgba(255,255,255,.75); font-size:10.5px; margin-top:6px;
  text-transform:uppercase; letter-spacing:.5px;
}
.cd-sep{ color: rgba(255,255,255,.5); font-size:22px; font-weight:700; margin-bottom:16px; }

/* ============ NOTIFY FORM ============ */
.notify-form{
  display:flex; gap:8px; width:100%; max-width:380px; margin-bottom:8px;
}
.notify-form input{
  flex:1; padding: 13px 16px; border-radius: 14px; border:none;
  font-size:14px; font-family:inherit; outline:none;
  background: rgba(255,255,255,.95);
  color:#333;
}
.notify-form input::placeholder{ color:#9a9a9a; }
.notify-form button{
  background:#fff; color: var(--red); border:none; border-radius:14px;
  padding: 0 18px; font-weight:800; font-size:13.5px; white-space:nowrap;
  cursor:pointer; transition: transform .15s ease;
}
.notify-form button:active{ transform: scale(.94); }
.notify-msg{
  min-height: 20px; font-size:12.5px; color:#fff; margin-bottom:6px;
  opacity:0; transition: opacity .25s ease;
}
.notify-msg.show{ opacity:1; }

.home-link{
  color: rgba(255,255,255,.75); font-size:12.5px; text-decoration:none;
  margin-top:8px; border-bottom:1px solid rgba(255,255,255,.3);
  padding-bottom:2px; transition: color .15s ease;
}
.home-link:hover{ color:#fff; }

/* ============ CRANE ============ */
.crane-wrap{
  position:absolute;
  right: 2%;
  bottom: 0;
  width: 320px;
  height: 62%;
  z-index:10;
  pointer-events:none;
  opacity:.92;
}
.crane-svg{ width:100%; height:100%; display:block; }

.crane-mast, .crane-jib, .crane-base{ fill: rgba(20,10,10,.55); }
.crane-lattice{ stroke: rgba(255,255,255,.28); stroke-width:1.4; fill:none; }
.counterweight{ fill: rgba(0,0,0,.5); }
.crane-cable-thin{ stroke: rgba(255,255,255,.35); stroke-width:1; }
.crane-apex{ fill: rgba(20,10,10,.55); }
.hook-cable{ stroke: rgba(255,255,255,.5); stroke-width:1.4; }
.hook-block{ fill: rgba(20,10,10,.6); }
.hook-curl{ stroke: rgba(255,255,255,.5); stroke-width:1.4; fill:none; }
.trolley-box{ fill: rgba(20,10,10,.65); }

.warning-light{
  fill: #fff;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink{
  0%, 100%{ opacity:1; filter: drop-shadow(0 0 4px #fff); }
  50%{ opacity:.25; filter: none; }
}

.blk{ fill: rgba(20,10,10,.30); }
.blk2{ fill: rgba(20,10,10,.38); }
.win{ fill: rgba(255,220,150,.55); animation: flicker 5s ease-in-out infinite; }
.win:nth-child(odd){ animation-delay: 1.2s; }
.win:nth-child(3n){ animation-delay: 2.4s; }
@keyframes flicker{
  0%, 100%{ opacity:.55; }
  50%{ opacity:.9; }
}

/* Jib rotation, trolley travel and hook bob are driven together in JS
   (requestAnimationFrame) so the cable line always stays connected to the
   hook block exactly — see script.js for the crane animation loop. */
.crane-jib-group{ transform-origin: 257px 90px; }

/* ============ FOOTER ============ */
.bottom-footer{
  position:absolute; bottom:14px; left:0; right:0; z-index:20;
  text-align:center;
  color: rgba(255,255,255,.6); font-size:11px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 860px){
  .crane-wrap{ width:220px; opacity:.55; right:-10px; }
  .title{ font-size:34px; }
}

@media (max-width: 600px){
  .scene{ overflow-y:auto; }
  body{ overflow:auto; }
  .scene{ height:auto; min-height:100vh; }
  .crane-wrap{
    position:relative; width:100%; height:220px; right:auto; bottom:auto;
    margin-top: 10px; opacity:.65;
  }
  .crane-svg{ width:100%; height:100%; }
  .content{ padding-top:6px; }
  .title{ font-size:28px; margin-top:14px; }
  .subtitle{ font-size:13.5px; }
  .cd-box{ min-width:56px; padding:10px 4px 8px; }
  .cd-num{ font-size:21px; }
  .cd-label{ font-size:9px; }
  .cd-sep{ font-size:18px; margin-bottom:12px; }
  .countdown{ gap:6px; }
  .notify-form{ flex-direction:column; }
  .notify-form button{ padding:13px; }
  .bottom-footer{ position:relative; margin-top:26px; padding-bottom:20px; }
  .layer-skyline.back, .layer-skyline.front{ height:18%; }
}

@media (min-width: 601px) and (max-width: 860px){
  .title{ font-size:36px; }
}