/* Aurora redesign layer: drifting colour, floating glass chips, scroll reveals, left-aligned reading.
   Loads after site.css and only overrides it. Every animation stops under prefers-reduced-motion. */
:root {
  --ease-fluid: cubic-bezier(0.16, 1, 0.3, 1);
  --grad: linear-gradient(135deg, #8b7bff, var(--accent) 50%, #5b3fd8);
  --pink: #e45bb8;
  --shadow-elev: 0 30px 80px -30px rgba(40, 30, 110, 0.45);
  --shadow-lift: 0 1px 2px rgba(24, 22, 52, 0.06), 0 22px 50px -18px rgba(109, 92, 246, 0.45);
}

/* Drifting colour mesh behind the whole page (gradients only, no blur filter, so it stays cheap) */
.aurora span { position: absolute; border-radius: 50%; animation: drift 22s ease-in-out infinite; }
.aurora span:nth-child(1) { width: 60vw; height: 60vw; left: 45%; top: -18vw; background: radial-gradient(circle, rgba(139, 123, 255, 0.30), transparent 62%); }
.aurora span:nth-child(2) { width: 46vw; height: 46vw; left: 66%; top: 8vw; background: radial-gradient(circle, rgba(228, 91, 184, 0.16), transparent 62%); animation-delay: -8s; }
.aurora span:nth-child(3) { width: 50vw; height: 50vw; left: -14%; top: 20vw; background: radial-gradient(circle, rgba(120, 150, 255, 0.18), transparent 62%); animation-delay: -15s; }
@keyframes drift { 33% { transform: translate(5vw, -3vw) scale(1.08); } 66% { transform: translate(-4vw, 3vw) scale(0.94); } }

/* Hero */
.hero { grid-template-columns: 1fr 1.12fr; padding-bottom: var(--sp-48); }
.grad-text { background: linear-gradient(90deg, #8b7bff, var(--accent) 25%, var(--pink) 50%, var(--accent) 75%, #8b7bff); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 6s linear infinite; }
@keyframes flow { to { background-position: 200% center; } }
.lede { max-width: 34em; }
.lede strong { color: var(--text-primary); }
.lede-plus { margin-top: var(--sp-6); font-size: var(--fs-2xl); font-weight: 600; }
.lede-plus a { color: var(--accent-text); text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 2px no-repeat; padding-bottom: 2px; }
.cta-row .btn-primary { animation: glow-pulse 3s ease-in-out infinite; }
@keyframes glow-pulse { 50% { box-shadow: 0 14px 34px -6px rgba(109, 92, 246, 0.7), 0 0 26px -4px rgba(228, 91, 184, 0.45); } }

.hero-visual { position: relative; }
.frame { display: block; width: 100%; padding: 6px; border: 0; border-radius: 22px; cursor: zoom-in; background: linear-gradient(135deg, rgba(139, 123, 255, 0.6), rgba(228, 91, 184, 0.35), rgba(109, 92, 246, 0.6)); box-shadow: var(--shadow-elev); }
.frame img { display: block; width: 100%; height: auto; border-radius: 17px; }
.frame-glow { position: absolute; inset: 10% 6%; background: var(--grad); opacity: 0.28; border-radius: 40px; z-index: -1; filter: blur(50px); }
.float { animation: float 6s ease-in-out infinite; }
.float.d1 { animation-delay: -2s; }
.float.d2 { animation-delay: -4s; }
@keyframes float { 50% { transform: translateY(-14px); } }
.chip { position: absolute; display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-6) var(--sp-8); border-radius: 14px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border: 1px solid var(--border); box-shadow: var(--shadow-md); font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); white-space: nowrap; pointer-events: none; }
.chip small { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); }
.chip-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-muted); color: var(--accent-text); font-size: 16px; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: ping 2s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(31, 184, 113, 0.5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(31, 184, 113, 0); } }
.c1 { left: -48px; top: 20%; }
.c2 { right: -24px; top: -22px; }
.c3 { left: 18%; bottom: -28px; }

/* Numbers band */
.stats { background: rgba(255, 255, 255, 0.55); border-block: 1px solid var(--border); padding: var(--sp-28) 0; }
.stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-16); }
.stat b { display: block; font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: var(--sp-4); font-size: var(--fs-lg); color: var(--text-secondary); }

/* Left-aligned reading. The closing line and the safety punchline stay centred on purpose. */
.section h2, .section-lede, .problem, .lifecycle, .plan-notes, .soon-note { text-align: left; }
.section-lede { margin-left: 0; max-width: 680px; }
.problem { max-width: var(--wrap); }
.problem-quote { max-width: 860px; }
.lifecycle { margin-left: 0; }
.kicker { font-size: var(--fs-md); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--sp-6); }

/* Community: the gradient band */
.community { text-align: left; max-width: none; padding: var(--sp-40); border: 0; background: var(--grad); color: #fff; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-12) var(--sp-40); align-items: center; }
.community > * { position: relative; }
.community::before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -180px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); animation: drift 16s ease-in-out infinite; }
.community .eyebrow { grid-column: 1; justify-self: start; color: #fff; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); }
.community h2, .community-lede { grid-column: 1; color: #fff; text-align: left; }
.community-lede { margin: 0; max-width: none; opacity: 0.94; }
.community-lede strong, .community-list li strong { color: #fff; }
.community-list { grid-column: 2; grid-row: 1 / span 3; margin: 0; max-width: none; }
.community-list li { color: rgba(255, 255, 255, 0.86); }
.community-list li::before { color: #fff; }
.community .btn { grid-column: 1; justify-self: start; background: #fff; color: var(--accent-text); box-shadow: 0 10px 30px -10px rgba(20, 10, 80, 0.5); }

/* The work keeps landing: three columns of finished jobs scrolling at different speeds */
.landed-cols { margin-top: var(--sp-20); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-10); height: 480px; overflow: hidden; mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.landed-col { display: grid; gap: var(--sp-8); align-content: start; animation: up 45s linear infinite; }
.landed-col:nth-child(2) { animation-duration: 60s; }
.landed-col:nth-child(3) { animation-duration: 80s; }
.landed-cols:hover .landed-col { animation-play-state: paused; }
@keyframes up { to { transform: translateY(-50%); } }
.landed { padding: var(--sp-8) var(--sp-10); display: grid; gap: var(--sp-2); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.landed small { color: var(--success); font-weight: 600; font-size: var(--fs-sm); }
.landed strong { font-size: var(--fs-xl); color: var(--text-primary); }
.landed p { color: var(--text-secondary); font-size: var(--fs-lg); }

/* Cards lift on hover */
.term, .rung, .case, .plan, .tour-row .shot-open, .landed { transition: transform 0.4s var(--ease-fluid), box-shadow 0.4s var(--ease-fluid), border-color 0.4s var(--ease-fluid); }
.term:hover, .rung:hover, .case:hover, .plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--border-accent); }
.tour-row .shot-open:hover { transform: translateY(-4px) scale(1.01); }
.term-shot img { transition: transform 0.8s var(--ease-fluid); }
.term:hover .term-shot img { transform: scale(1.04); }

/* Scroll reveal: hidden only once aurora.js is running */
.js-reveal .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-fluid), transform 0.8s var(--ease-fluid); }
.js-reveal .reveal.in { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .c1 { left: -6px; } .c2 { right: -4px; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .community { grid-template-columns: 1fr; padding: var(--sp-28) var(--sp-16); }
  .community-list { grid-column: 1; grid-row: auto; }
  .landed-cols { grid-template-columns: 1fr; height: 420px; }
  .landed-col:nth-child(n+2) { display: none; }
}
@media (max-width: 560px) { .chip { font-size: var(--fs-md); } .c3 { display: none; } .stat b { font-size: 38px; } }
@media (prefers-reduced-motion: reduce) {
  .aurora span, .grad-text, .cta-row .btn-primary, .float, .live, .community::before, .landed-col { animation: none; }
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .term, .rung, .case, .plan, .tour-row .shot-open, .landed, .term-shot img { transition: none; }
}