/* =========================================================
   MapSpective · hero
   Layout, headline reveal, feature row, illustration motion
   Everything animated is gated on `.js` + `.is-ready`
   ========================================================= */

.hero {
  position: relative;
  min-height: 100svh;
  padding: 0 var(--pad);
  display: flex;
  flex-direction: column;
}

.hero__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: clamp(1.5rem, 3.6vw, 3.4rem);
}

.hero__main {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3.5rem);
}

/* ---------- Copy ---------- */
.hero__title {
  font-weight: 800;
  font-size: clamp(2.9rem, 6.1vw, 6.2rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
  margin-left: -0.04em;
}
.hero__title .line {
  display: block; overflow: hidden;
  padding-bottom: 0.16em; margin-bottom: -0.16em;
}
.hero__title .line > span { display: block; }

.hero__sub {
  margin-top: clamp(1.4rem, 2.4vw, 2.2rem);
  max-width: 36rem;
  font-weight: 300;
  font-size: clamp(1.15rem, 1.95vw, 1.85rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--muted);
}
.hero__sub strong { font-weight: 600; color: #3b4254; }

.hero .signup { margin-top: clamp(1.8rem, 3.2vw, 3rem); }

/* ---------- Illustration ---------- */
.hero-art { position: relative; width: 100%; }
.art { width: 100%; height: auto; overflow: visible; }

.parallax {
  transform: translate(calc(var(--mx, 0) * var(--k, 0) * 1px), calc(var(--my, 0) * var(--k, 0) * 1px));
  transition: transform 0.6s var(--ease);
}

.art__sheet { filter: drop-shadow(0 6px 14px rgba(60, 50, 20, 0.12)); }

/* workflow lines */
.edge { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.edge--dash { stroke-dasharray: 5 10; }
.pulse { fill: #fff; stroke: var(--ink); stroke-width: 2.4; }
.port { fill: #fff; stroke: var(--ink); stroke-width: 2.6; }

/* idle float on the big nodes */
.bob { animation: bob 5.5s ease-in-out infinite; animation-delay: var(--b, 0s); }
@keyframes bob { 50% { transform: translateY(-7px); } }

.ripple { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ripple 3.2s var(--ease) infinite 2.4s; }
@keyframes ripple { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.9); opacity: 0; } }

/* peeling window */
.peel-float { transform-box: view-box; transform-origin: 40px 450px; animation: peelFloat 8s ease-in-out infinite; }
@keyframes peelFloat {
  0%, 100% { transform: rotate(0) translateY(0); }
  50% { transform: rotate(-1.1deg) translateY(-6px); }
}

.ui-bar { transform-box: fill-box; transform-origin: left center; animation: barPulse 4.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.6s); }
@keyframes barPulse { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.82); } }
.ui-sq { transform-box: fill-box; transform-origin: center; animation: sqPulse 4.6s ease-in-out infinite 0.3s; }
@keyframes sqPulse { 50% { transform: scale(0.94); } }
.ui-sheen { animation: sheen 6s ease-in-out infinite 2.5s; }
@keyframes sheen { 0% { transform: translateX(-60px); } 50%, 100% { transform: translateX(300px); } }

/* ---------- Features ---------- */
.features {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: clamp(1.5rem, 3vw, 2.4rem) 0 clamp(2rem, 3.4vw, 3rem);
}
.feature { padding: 0 clamp(1rem, 2.6vw, 2.8rem); }
.feature:first-child { padding-left: 0; }
.feature + .feature { border-left: 1px solid var(--line); }

.feature__dot {
  position: relative; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--c);
  margin-bottom: 1.5rem; box-shadow: 0 10px 22px -12px var(--c);
}
.feature__dot svg {
  width: 1.45rem; height: 1.45rem; fill: none; stroke: var(--ic, #fff); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.6s var(--spring);
}
.feature:hover .feature__dot svg { transform: rotate(-8deg) scale(1.12); }
.feature__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c);
  animation: ring 3.4s var(--ease) infinite; animation-delay: calc(var(--i) * 0.9s);
}
@keyframes ring { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(1.7); opacity: 0; } }

.feature__title { font-weight: 700; font-size: clamp(1.4rem, 2.15vw, 2.05rem); letter-spacing: -0.045em; line-height: 1.1; }
.feature p {
  margin-top: 0.8rem; max-width: 22rem;
  font-weight: 300; font-size: clamp(1rem, 1.5vw, 1.4rem); line-height: 1.4; letter-spacing: -0.015em; color: var(--muted);
}

/* ---------- Footer line ---------- */
.hero__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.3rem 0 1.6rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.78rem; color: var(--muted);
}
.hero__foot a { padding-left: 1.4rem; border-left: 1px solid var(--line); transition: color 0.2s; }
.hero__foot a:hover { color: var(--blue); }

/* =========================================================
   Entrance choreography (only when JS is available)
   ========================================================= */
.js .hero__title .line > span { transform: translateY(112%); }
.js .logo, .js .status, .js .hero__sub, .js .signup, .js .feature, .js .hero__foot { opacity: 0; }
.js .logo { transform: translateY(-14px); }
.js .status { transform: translateY(-14px); }
.js .hero__sub, .js .signup { transform: translateY(22px); }
.js .feature { transform: translateY(26px); }

.js .parallax, .js .edge:not(.edge--dash), .js .node { will-change: transform; }

.js .edge:not(.edge--dash) { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.js .edge--dash, .js .pulse, .js .port { opacity: 0; }
.js .node { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.js .peel-in { opacity: 0; transform-box: view-box; transform-origin: 610px 20px; transform: translate(70px, -50px) rotate(7deg); }

.is-ready .logo, .is-ready .status, .is-ready .hero__sub, .is-ready .signup, .is-ready .feature, .is-ready .hero__foot {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.is-ready .logo { transition-delay: 0.05s; }
.is-ready .status { transition-delay: 0.2s; }
.is-ready .hero__title .line > span { transform: none; transition: transform 1.1s var(--ease); }
.is-ready .hero__title .line:nth-child(1) > span { transition-delay: 0.15s; }
.is-ready .hero__title .line:nth-child(2) > span { transition-delay: 0.3s; }
.is-ready .hero__sub { transition-delay: 0.55s; }
.is-ready .signup { transition-delay: 0.7s; }
.is-ready .feature { transition-delay: calc(1.1s + var(--i) * 0.14s); }
.is-ready .hero__foot { transition-delay: 1.6s; }

.is-ready .peel-in { opacity: 1; transform: none; transition: opacity 0.8s var(--ease) 0.2s, transform 1.5s var(--ease) 0.2s; }

.is-ready .edge:not(.edge--dash) { animation: draw 1s var(--ease) var(--d, 1s) forwards; }
.is-ready .edge--dash { animation: fadeIn 0.6s linear var(--d, 1s) forwards, march 1.1s linear infinite; }
.is-ready .node { animation: pop 0.8s var(--spring) var(--d, 1s) forwards; }
.is-ready .pulse { animation: fadeIn 0.01s linear var(--s, 2.6s) forwards; }
.is-ready .port { animation: fadeIn 0.4s linear var(--d, 1.6s) forwards; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes march { to { stroke-dashoffset: -30; } }
@keyframes pop { to { transform: scale(1); } }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero__main { grid-template-columns: 1fr; }
  .hero-art { max-width: 38rem; margin: 0 auto; order: -1; }
  .hero__title { font-size: clamp(2.8rem, 11vw, 5rem); }
  .features { grid-template-columns: 1fr; gap: 1.8rem; }
  .feature, .feature:first-child { padding: 0; }
  .feature + .feature { border-left: 0; border-top: 1px solid var(--line); padding-top: 1.8rem; }
  .logo__word { font-size: 1.7rem; }
  .logo__mark { width: 2.7rem; }
  .status { font-size: 0.75rem; letter-spacing: 0.14em; }
}
@media (max-width: 560px) {
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .hero__foot a { padding-left: 0; border-left: 0; }
}

/* ---------- window UI details ---------- */
.ui-caret { animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ui-typed { transform-box: fill-box; transform-origin: left center; animation: typed 5.6s var(--ease) infinite; }
@keyframes typed { 0%, 8% { transform: scaleX(0.05); } 40%, 100% { transform: scaleX(1); } }
.ui-badge { transform-box: fill-box; transform-origin: center; animation: badge 5.6s var(--spring) infinite; }
@keyframes badge { 0%, 62% { transform: scale(0); } 70%, 100% { transform: scale(1); } }
.ui-chart rect { transform-box: fill-box; transform-origin: center bottom; animation: chartBar 5.6s var(--ease) infinite; animation-delay: calc(var(--i) * 0.12s); }
@keyframes chartBar { 0%, 50% { transform: scaleY(0.35); } 62%, 100% { transform: scaleY(1); } }

/* cursor: glides to the button, clicks, glides back */
.ui-cursor { animation: uiCursor 5.6s var(--ease) infinite; }
@keyframes uiCursor {
  0%, 10% { transform: translate(60px, 34px); }
  40% { transform: translate(0, 0); }
  44% { transform: translate(0, 0) scale(0.9); }
  48%, 66% { transform: translate(0, 0); }
  92%, 100% { transform: translate(60px, 34px); }
}
.ui-cursor path { transform-box: fill-box; transform-origin: 0 0; }
.ui-click { transform-box: fill-box; transform-origin: center; opacity: 0; animation: uiClick 5.6s var(--ease) infinite; }
@keyframes uiClick { 0%, 42% { opacity: 0; transform: scale(0.4); } 44% { opacity: 0.9; transform: scale(0.6); } 60%, 100% { opacity: 0; transform: scale(1.8); } }
/* the button lights up on click */
.ui-bar[style*="--i:1"] { animation: barPulse 4.6s ease-in-out infinite 0.6s, uiPress 5.6s var(--ease) infinite; }
@keyframes uiPress { 0%, 42%, 64%, 100% { fill-opacity: 0.3; } 46%, 58% { fill-opacity: 0.75; } }

@media (prefers-reduced-motion: reduce) {
  .ui-typed, .ui-badge, .ui-chart rect { animation: none; transform: none; }
  .ui-cursor { animation: none; transform: translate(0, 0); }
}