/* ================= Base ================= */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --ink: #0f172a;
  --ink-soft: #334155;
  --accent: #f59e0b;
  --accent-dark: #b45309;
  --hazard: #facc15;
  --card: rgba(255, 255, 255, .72);
}

html, body { margin: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, #74bfe6 0%, #b8e1f2 55%, #fde9cf 100%);
  overflow-x: hidden;
}

.sr-only, .hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ================= Content ================= */
.content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 16px 8px;
  text-align: center;
}

.tape {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px;
  background: repeating-linear-gradient(45deg, #111827 0 12px, var(--hazard) 12px 24px);
  transform: rotate(-2deg);
  box-shadow: 0 4px 10px rgba(15, 23, 42, .18);
}
.tape span {
  display: block;
  padding: 4px 14px;
  background: var(--hazard);
  font: 800 .8rem/1 "Bricolage Grotesque", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.brand {
  margin: 0 0 6px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .85rem;
  color: var(--accent-dark);
}

h1 {
  margin: 0 0 12px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}

.tagline {
  margin: 0 auto 26px;
  max-width: 560px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ================= Countdown ================= */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 460px;
  margin: 0 auto 22px;
}
.cd-box {
  padding: 12px 4px 10px;
  background: var(--card);
  border-radius: 14px;
  border-bottom: 4px solid var(--accent);
  backdrop-filter: blur(4px);
}
.cd-num {
  display: block;
  font: 800 clamp(1.6rem, 5vw, 2.3rem)/1 "Bricolage Grotesque", sans-serif;
  font-variant-numeric: tabular-nums;
}
.cd-label {
  display: block;
  margin-top: 4px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
}
.cd-live { display: none; grid-column: 1 / -1; margin: 0; font-weight: 600; }
.countdown.is-live .cd-box { display: none; }
.countdown.is-live .cd-live { display: block; }

/* ================= Progress ================= */
.progress {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 460px;
  margin: 0 auto 24px;
}
.progress-track {
  flex: 1;
  height: 14px;
  background: rgba(255, 255, 255, .6);
  border-radius: 99px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, .15);
}
.progress-bar {
  height: 100%;
  border-radius: 99px;
  background: repeating-linear-gradient(45deg, #111827 0 10px, var(--hazard) 10px 20px);
  background-size: 28.28px 28.28px;
  animation: hazard-slide 1s linear infinite;
}
.progress-label { font-weight: 600; font-size: .9rem; white-space: nowrap; }

/* ================= Form ================= */
.notify {
  display: flex;
  gap: 8px;
  max-width: 460px;
  margin: 0 auto;
}
.notify input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  font: inherit;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
}
.notify input[type="email"]:focus { border-color: var(--accent); }
.notify button {
  padding: 14px 22px;
  font: 600 1rem "Inter", sans-serif;
  color: #111827;
  background: var(--accent);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--accent-dark);
  transition: transform .1s, box-shadow .1s, background .2s;
}
.notify button:hover { background: #fbbf24; }
.notify button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-dark); }

.flash {
  max-width: 460px;
  margin: 12px auto 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .95rem;
}
.flash-success { background: #dcfce7; color: #14532d; }
.flash-error   { background: #fee2e2; color: #7f1d1d; }

.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 20px;
}
.social a {
  color: var(--ink);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
}
.social a:hover { color: var(--accent-dark); }

/* ================= Scene ================= */
.scene-wrap {
  position: relative;
  flex: 1 0 auto;
  /* tall enough to show full cranes: scene ratio 1200x500, capped so it never dominates */
  height: max(280px, 41.67vw);
  margin-top: 16px;
}
.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.footer {
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  z-index: 1;
  text-align: center;
  font-size: .75rem;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* every animated SVG part rotates/scales around its own box */
.scene g, .scene rect, .scene line { transform-box: fill-box; }

/* Sun & clouds */
.sun-rays { transform-origin: center; animation: spin 30s linear infinite; }
.cloud   { animation: drift 70s linear infinite; }
.cloud-1 { animation-delay: -10s; }
.cloud-2 { animation-duration: 95s; animation-delay: -60s; }
.cloud-3 { animation-duration: 120s; animation-delay: -30s; }

/* Beacons */
.beacon { animation: blink 1.4s steps(1) infinite; }
.beacon-late { animation-delay: -.7s; }

/* Crane 1: lift beam from ground, swing over, set it on the frame */
.c1-trolley { animation: c1-move 14s ease-in-out infinite; }
.c1-cable   { transform-origin: top; animation: c1-cable 14s ease-in-out infinite; }
.c1-load    { animation: c1-load 14s ease-in-out infinite; }

/* Crane 2: hoist bricks up, travel, lower, repeat */
.c2-trolley { animation: c2-move 12s ease-in-out infinite; }
.c2-cable   { transform-origin: top; animation: c2-cable 12s ease-in-out infinite; }
.c2-load    { animation: c2-load 12s ease-in-out infinite; }

.sway      { transform-origin: 50% 0; animation: sway 3s ease-in-out infinite alternate; }
.sway-late { animation-delay: -1.5s; }

/* Painter */
.gondola    { animation: gondola 16s ease-in-out infinite; }
.paint      { transform-origin: left; animation: paint 16s ease-in-out infinite; }
.roller-arm { transform-origin: left bottom; animation: roll .8s ease-in-out infinite alternate; }

/* Roof worker */
.hammer-arm { transform-origin: left bottom; animation: hammer .6s ease-in infinite; }
.sparks     { opacity: 0; animation: sparks .6s linear infinite; }

/* Wheelbarrow walker */
.walker      { animation: walk 18s linear infinite; }
.walker-flip { transform-origin: center; animation: flip 18s steps(1, end) infinite; }
.leg         { transform-origin: top; animation: step .5s ease-in-out infinite alternate; }
.leg-a       { transform: rotate(18deg); }
.leg-b       { animation-delay: -.5s; }

/* ================= Keyframes ================= */
@keyframes hazard-slide { to { background-position: 28.28px 0; } }
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes drift { from { transform: translateX(-200px); } to { transform: translateX(1400px); } }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: .15; } }

@keyframes c1-move {
  0%, 15%  { transform: translateX(0); }
  40%, 60% { transform: translateX(190px); }
  85%, 100% { transform: translateX(0); }
}
@keyframes c1-load {
  0%, 5%   { transform: translateY(300px); }
  15%, 40% { transform: translateY(0); }
  50%, 55% { transform: translateY(20px); }
  60%, 85% { transform: translateY(0); }
  95%, 100% { transform: translateY(300px); }
}
@keyframes c1-cable {
  0%, 5%   { transform: scaleY(.97); }
  15%, 40% { transform: scaleY(.088); }
  50%, 55% { transform: scaleY(.147); }
  60%, 85% { transform: scaleY(.088); }
  95%, 100% { transform: scaleY(.97); }
}

@keyframes c2-move {
  0%, 15%  { transform: translateX(0); }
  35%, 70% { transform: translateX(80px); }
  90%, 100% { transform: translateX(0); }
}
@keyframes c2-load {
  0%       { transform: translateY(272px); }
  15%, 35% { transform: translateY(0); }
  50%, 60% { transform: translateY(272px); }
  70%, 90% { transform: translateY(0); }
  100%     { transform: translateY(272px); }
}
@keyframes c2-cable {
  0%       { transform: scaleY(.962); }
  15%, 35% { transform: scaleY(.101); }
  50%, 60% { transform: scaleY(.962); }
  70%, 90% { transform: scaleY(.101); }
  100%     { transform: scaleY(.962); }
}

@keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }

@keyframes gondola {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(220px); }
  100% { transform: translateX(0); }
}
@keyframes paint {
  0%      { transform: scaleX(.2); opacity: 1; }
  50%     { transform: scaleX(.98); opacity: 1; }
  88%     { transform: scaleX(.98); opacity: 1; }
  100%    { transform: scaleX(.98); opacity: 0; }
}
@keyframes roll { from { transform: rotate(-25deg); } to { transform: rotate(20deg); } }

@keyframes hammer {
  0%   { transform: rotate(-35deg); }
  45%  { transform: rotate(-40deg); }
  60%  { transform: rotate(22deg); }
  100% { transform: rotate(-35deg); }
}
@keyframes sparks {
  0%, 58% { opacity: 0; transform: scale(.4); }
  62%     { opacity: 1; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(1.4); }
}

@keyframes walk {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(260px); }
  100% { transform: translateX(0); }
}
@keyframes flip {
  0%   { transform: scaleX(1); }
  50%  { transform: scaleX(-1); }
  100% { transform: scaleX(-1); }
}
@keyframes step { from { transform: rotate(18deg); } to { transform: rotate(-18deg); } }

/* ================= Responsive & accessibility ================= */
@media (max-width: 520px) {
  .content { padding-top: 28px; }
  .notify { flex-direction: column; }
  .countdown { gap: 6px; }
  .scene-wrap { height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-play-state: paused !important; }
}