/* =================================================================
   Steps & Stuff - Under construction placeholder (standalone)
   Slick, brand-specific animation. No generic construction graphics.
   ================================================================= */

:root {
  --navy:    #15375f;
  --navy-900:#0d2543;
  --blue:    #3d86c6;
  --blue-100:#d3ebf9;
  --sun:     #f4c13c;
  --sun-600: #e0a31a;
  --green:   #6ba24f;
  --cream:   #fbf6ea;
  --ink:     #1c2a3a;
  --muted:   #5a6a7b;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--ink);
  background: radial-gradient(120% 120% at 50% -10%, #eaf4fb 0%, var(--cream) 52%, #f6edd8 100%);
  overflow-x: hidden;
  position: relative;
}

/* Floating watercolor washes in the background */
.wash {
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  z-index: 0;
  pointer-events: none;
  animation: drift 16s ease-in-out infinite;
}
.wash.sun   { width: 420px; height: 420px; top: -120px; right: -80px; background: rgba(244,193,60,.55); animation-delay: -2s; }
.wash.blue  { width: 480px; height: 480px; bottom: -160px; left: -120px; background: rgba(61,134,198,.42); animation-delay: -6s; }
.wash.green { width: 340px; height: 340px; top: 40%; left: 60%; background: rgba(107,162,79,.3); animation-delay: -10s; }
@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(20px,-26px) scale(1.08); }
}

main.con {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 22px 24px;
}

/* The only graphic: the brand mark, gently floating in */
.con-logo {
  width: min(440px, 80vw);
  filter: drop-shadow(0 22px 40px rgba(13,37,67,.22));
  animation: rise 1s cubic-bezier(.2,.8,.25,1) both, bob 6s ease-in-out 1.1s infinite;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(28px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}

.con-eyebrow {
  margin-top: 30px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: .76rem;
  color: var(--sun-600);
  opacity: 0;
  animation: fade .8s ease .5s forwards;
}
.con h1 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.1;
  margin: 12px 0 10px;
  max-width: 16ch;
  opacity: 0;
  animation: fade .8s ease .65s forwards;
}
.con p.sub {
  color: var(--muted);
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  max-width: 46ch;
  margin: 0 auto;
  opacity: 0;
  animation: fade .8s ease .8s forwards;
}
@keyframes fade { to { opacity: 1; } }

/* -------------------------------------------------------------
   Unique progress indicator: "The Trail"
   A winding watercolor trail that fills as launch approaches,
   with a footstep marker walking along it.
   ------------------------------------------------------------- */
.trail {
  width: min(560px, 90vw);
  margin-top: 42px;
  opacity: 0;
  animation: fade 1s ease 1s forwards;
}
.trail-track { position: relative; }
.trail-svg { width: 100%; height: auto; display: block; overflow: visible; }

.trail-bg {
  fill: none;
  stroke: rgba(21,55,95,.14);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 2 18;
}
.trail-fill {
  fill: none;
  stroke: url(#trailGrad);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: walk 3s cubic-bezier(.5,.1,.3,1) 1.2s forwards;
  filter: drop-shadow(0 4px 8px rgba(224,163,26,.35));
}
@keyframes walk { to { stroke-dashoffset: 254; } } /* ~59% filled */

/* footstep marker travels the same curve (SVG-native, scales perfectly) */
.marker-g .m-pin {
  fill: #fff;
  stroke: var(--sun);
  stroke-width: 2.5;
  filter: drop-shadow(0 4px 8px rgba(13,37,67,.22));
}
.marker-g .m-dot { fill: var(--sun-600); }
.marker-g .m-pulse {
  fill: none;
  stroke: rgba(244,193,60,.6);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(.55); opacity: .85; }
  100% { transform: scale(1.7); opacity: 0; }
}

.trail-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 18px;
}
.trail-meta .pct {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--navy);
}
.trail-meta .lbl {
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.con-note {
  margin-top: 30px;
  color: var(--muted);
  font-size: .94rem;
  opacity: 0;
  animation: fade .9s ease 1.3s forwards;
}
.con-note b { color: var(--navy); font-weight: 700; }

/* footer */
.con-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 22px 18px 28px;
  color: var(--muted);
  font-size: .9rem;
}
.con-footer a { color: var(--navy); font-weight: 600; text-decoration: none; }
.con-footer a:hover { color: var(--blue); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .con-logo, .con-eyebrow, .con h1, .con p.sub, .trail, .con-note { animation: none; opacity: 1; }
  .trail-fill { stroke-dashoffset: 254; animation: none; }
  .marker-g .m-pulse, .wash { animation: none; }
}