/* ============================================================
   Under Construction
   ============================================================ */

:root {
  --bg:       #ffffff;
  --ink:      #1e293b;
  --ink-soft: #64748b;
  --steel:    #b45309;
  --steel-bg: #fde68a;
  --cloud:    #e0f2fe;
  --cloud-ln: #7dd3fc;
  --ease:     cubic-bezier(.22, 1, .36, 1);
  --loop:     4s;
}

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

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- Illustration ---------- */

.art {
  width: min(520px, 88vw);
  margin-bottom: .5rem;
}

.art svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.steel line {
  stroke: var(--steel);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.cloud {
  fill: var(--cloud);
  stroke: var(--cloud-ln);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

/* ---------- Motion (one 4s loop, all of it seamless) ---------- */

#sun {
  transform-box: view-box;
  transform-origin: 110px 86px;
  animation: pulse var(--loop) ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

.driftA, .driftB, .driftC, .driftD, .driftE {
  transform-box: view-box;
  animation-duration: var(--loop);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.driftA { animation-name: driftA; }
.driftB { animation-name: driftB; }
.driftC { animation-name: driftC; }
.driftD { animation-name: driftD; }
.driftE { animation-name: driftE; }

@keyframes driftA { 0%, 100% { transform: translateX(0); }  50% { transform: translateX(14px); } }
@keyframes driftB { 0%, 100% { transform: translateX(0); }  50% { transform: translateX(-12px); } }
@keyframes driftC { 0%, 100% { transform: translateX(0); }  50% { transform: translateX(10px); } }
@keyframes driftD { 0%, 100% { transform: translateX(0); }  50% { transform: translateX(-14px); } }
@keyframes driftE { 0%, 100% { transform: translateX(0); }  50% { transform: translateX(8px); } }

/* the load hangs from the trolley, so it swings about that point */
#swing {
  transform-box: view-box;
  transform-origin: 260px 148px;
  animation: sway var(--loop) ease-in-out infinite;
}

@keyframes sway {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(1.2deg); }
  75%      { transform: rotate(-1.2deg); }
}

/* cable pays out as the panel descends: 88px -> 100px */
#cable {
  transform-box: view-box;
  transform-origin: 260px 148px;
  animation: payout var(--loop) ease-in-out infinite;
}

@keyframes payout {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.1364); }
}

#load {
  animation: hoist var(--loop) ease-in-out infinite;
}

@keyframes hoist {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(12px); }
}

/* ---------- Type ---------- */

.headline {
  font-size: clamp(1.75rem, 6.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  line-height: 1.15;
  background: linear-gradient(95deg, #0ea5e9, #7c3aed 55%, #db2777);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sub {
  margin-top: .55rem;
  font-size: clamp(.88rem, 2.6vw, 1.03rem);
  font-weight: 400;
  color: var(--ink-soft);
}

/* ---------- Reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}