:root{
  --forest:#061f14;
  --forest2:#0d3021;
  --black:#060706;
  --panel:#10120f;
  --gold:#d8a600;
  --yellow:#ffd447;
  --cream:#fff6dd;
  --white:#ffffff;
  --red:#ff3b35;
  --orange:#ff7a2f;
}

*{
  box-sizing:border-box;
}

html{
  min-height:100%;
}

body{
  margin:0;
  min-height:100svh;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--cream);
  overflow:hidden;

  background:
    radial-gradient(circle at 50% 105%, rgba(255,122,47,.18), transparent 34%),
    radial-gradient(circle at 50% -10%, rgba(216,166,0,.12), transparent 32%),
    linear-gradient(135deg, #04150d 0%, #071b12 42%, #090909 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      135deg,
      rgba(255,212,71,.03) 0 25%,
      transparent 25% 50%,
      rgba(255,212,71,.03) 50% 75%,
      transparent 75%
    );
  background-size:92px 92px;
  opacity:.65;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at center, transparent 0 34%, rgba(0,0,0,.46) 78%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.32));
}

.redevelopment-page{
  position:relative;
  z-index:2;
  min-height:calc(100svh - 72px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    clamp(14px, 3vh, 34px)
    clamp(14px, 3vw, 42px);
}

.redevelopment-card{
  width:min(760px, 92vw);
  max-height:calc(100svh - 120px);
  overflow:hidden;
  position:relative;
  isolation:isolate;

  padding:
    clamp(26px, 4.2vh, 54px)
    clamp(18px, 4vw, 54px);

  border-radius:clamp(22px, 3vw, 34px);
  text-align:center;

  background:
    linear-gradient(180deg, rgba(17,18,15,.98), rgba(6,7,6,.99)) padding-box,
    linear-gradient(
      135deg,
      rgba(255,212,71,1),
      rgba(255,212,71,.22) 36%,
      rgba(255,212,71,.85)
    ) border-box;

  border:3px solid transparent;

  box-shadow:
    0 34px 90px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.08),
    0 0 54px rgba(255,212,71,.14),
    inset 0 0 72px rgba(255,212,71,.045);

  opacity:0;
  transform:translateY(18px) scale(.98);
  transition:
    opacity .7s ease,
    transform .7s ease;
}

.redevelopment-card.loaded{
  opacity:1;
  transform:translateY(0) scale(1);
}

.redevelopment-card::before{
  content:"";
  position:absolute;
  inset:14px;
  z-index:1;
  border-radius:22px;
  border:1px solid rgba(255,212,71,.28);
  pointer-events:none;
}

.redevelopment-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,212,71,.11), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(255,122,47,.09), transparent 34%),
    linear-gradient(
      135deg,
      rgba(255,212,71,.04) 0 25%,
      transparent 25% 50%,
      rgba(255,212,71,.04) 50% 75%,
      transparent 75%
    );
  background-size:auto, auto, 72px 72px;
}

.redevelopment-card > *{
  position:relative;
  z-index:2;
}

.beacon-row{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:clamp(18px, 3vh, 28px);
  padding:9px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,212,71,.14);
  color:var(--yellow);
  font-size:clamp(.58rem, 1.15vw, .74rem);
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.beacon{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--red);
  box-shadow:
    0 0 0 6px rgba(255,59,53,.12),
    0 0 18px var(--red);
  animation:beaconPulse 1.35s infinite;
}

.caution-bar{
  width:min(380px, 74%);
  height:7px;
  border-radius:999px;
  margin:0 auto clamp(24px, 4vh, 34px);
  background:
    repeating-linear-gradient(
      135deg,
      var(--yellow) 0 22px,
      var(--yellow) 22px 38px,
      var(--black) 38px 60px,
      var(--black) 60px 76px
    );
  animation:cautionMove 9s linear infinite;
  box-shadow:0 0 22px rgba(255,212,71,.16);
}

.caution-bar.reverse{
  margin:clamp(24px, 4vh, 34px) auto 0;
  animation-direction:reverse;
}

h1{
  margin:0;
  color:var(--white);
  font-size:clamp(2.4rem, 6.6vw, 5.8rem);
  line-height:.86;
  font-weight:1000;
  letter-spacing:-.06em;
  text-transform:uppercase;
  text-shadow:
    0 4px 0 rgba(0,0,0,.82),
    0 14px 30px rgba(0,0,0,.34);
}

h1 span{
  display:block;
  margin-top:clamp(10px, 2vh, 16px);
  color:var(--yellow);
  font-size:.48em;
  line-height:.96;
  letter-spacing:.015em;
  text-shadow:
    0 3px 0 rgba(0,0,0,.75),
    0 0 20px rgba(255,212,71,.16);
}

.site-name{
  margin:clamp(18px, 3vh, 26px) 0 0;
  color:rgba(255,246,221,.92);
  font-size:clamp(.7rem, 1.5vw, 1rem);
  font-weight:1000;
  letter-spacing:clamp(.16em, .9vw, .38em);
  text-transform:uppercase;
}

.progress-box{
  width:min(500px, 100%);
  margin:clamp(22px, 3.4vh, 30px) auto 0;
  padding:clamp(12px, 2vh, 16px);
  border-radius:16px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,212,71,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 16px 36px rgba(0,0,0,.18);
}

.progress-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:12px;
  color:var(--cream);
  font-size:.74rem;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.progress-label span{
  color:var(--yellow);
}

.progress-track{
  height:14px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.13);
}

.progress-fill{
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--orange), var(--yellow));
  box-shadow:0 0 18px rgba(255,212,71,.28);
  transition:width 1.6s ease;
  animation:fillGlow 2s ease-in-out infinite;
}

.progress-fill.loaded{
  width:72%;
}

.status-line{
  margin:clamp(20px, 3vh, 26px) 0 0;
  color:rgba(255,246,221,.78);
  font-size:clamp(.82rem, 1.4vw, 1rem);
  font-weight:800;
  transition:
    opacity .35s ease,
    transform .35s ease;
}

.status-line.fade-out{
  opacity:0;
  transform:translateY(8px);
}

.site-footer{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  padding:18px 24px;
  background:#030503;
  border-top:1px solid rgba(255,212,71,.14);
  color:rgba(255,246,221,.62);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.site-footer strong{
  color:var(--yellow);
}

.redevelopment-card{
  transform:
    perspective(1100px)
    rotateX(var(--tiltX, 0deg))
    rotateY(var(--tiltY, 0deg))
    translateY(18px)
    scale(.98);
}

.redevelopment-card.loaded{
  transform:
    perspective(1100px)
    rotateX(var(--tiltX, 0deg))
    rotateY(var(--tiltY, 0deg))
    translateY(0)
    scale(1);
}

.corner-light{
  position:absolute;
  z-index:3;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--red);
  box-shadow:
    0 0 0 7px rgba(255,59,53,.11),
    0 0 22px rgba(255,59,53,.95);
  animation:warningBlink 1.35s infinite;
}

.corner-light.top-left{
  top:24px;
  left:24px;
}

.corner-light.top-right{
  top:24px;
  right:24px;
  animation-delay:.65s;
}

.spark-layer{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}

.spark{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:
    0 0 10px rgba(255,212,71,.9),
    0 0 22px rgba(255,122,47,.42);
  opacity:0;
  animation:sparkFloat 2s ease-out forwards;
}

.progress-track{
  position:relative;
}

.progress-track::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-120%);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.45),
      transparent
    );
  animation:progressShine 2.6s ease-in-out infinite;
}

h1{
  animation:titleSettle .8s ease both;
}

.site-name{
  animation:titleSettle 1s ease .15s both;
}

@keyframes warningBlink{
  0%,100%{
    opacity:.45;
    transform:scale(.88);
  }

  50%{
    opacity:1;
    transform:scale(1.16);
  }
}

@keyframes sparkFloat{
  0%{
    opacity:0;
    transform:translateY(10px) scale(.4);
  }

  20%{
    opacity:1;
  }

  100%{
    opacity:0;
    transform:translateY(-42px) scale(1.15);
  }
}

@keyframes progressShine{
  0%,40%{
    transform:translateX(-120%);
  }

  100%{
    transform:translateX(120%);
  }
}

@keyframes titleSettle{
  from{
    opacity:0;
    transform:translateY(12px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media(max-width:760px){
  .redevelopment-card,
  .redevelopment-card.loaded{
    transform:none;
  }

  .corner-light{
    width:10px;
    height:10px;
  }

  .corner-light.top-left{
    top:18px;
    left:18px;
  }

  .corner-light.top-right{
    top:18px;
    right:18px;
  }
}

@keyframes beaconPulse{
  0%,100%{
    opacity:.72;
    transform:scale(1);
  }

  50%{
    opacity:1;
    transform:scale(1.28);
  }
}

@keyframes cautionMove{
  from{
    background-position:0 0;
  }

  to{
    background-position:152px 0;
  }
}

@keyframes fillGlow{
  0%,100%{
    filter:brightness(1);
  }

  50%{
    filter:brightness(1.2);
  }
}

@media(max-width:640px){
  body{
    overflow:auto;
  }

  .redevelopment-page{
    min-height:calc(100svh - 92px);
    padding:14px;
  }

  .redevelopment-card{
    width:100%;
    max-height:none;
    border-radius:22px;
    padding:28px 16px;
  }

  .redevelopment-card::before{
    inset:10px;
    border-radius:16px;
  }

  .progress-label{
    font-size:.66rem;
  }

  .site-footer{
    min-height:92px;
    flex-direction:column;
    gap:6px;
    text-align:center;
  }
}

@media(max-height:760px) and (min-width:641px){
  .redevelopment-card{
    width:min(680px, 88vw);
    padding:24px 44px;
  }

  .caution-bar{
    margin-bottom:20px;
  }

  .caution-bar.reverse{
    margin-top:20px;
  }

  .beacon-row{
    margin-bottom:18px;
  }

  h1{
    font-size:clamp(2.3rem, 5.4vw, 4.8rem);
  }

  .progress-box{
    margin-top:20px;
  }

  .status-line{
    margin-top:18px;
  }
}