/* ============================================================
   Sparr LP — page styles
   Ported from the Claude Design export "Sparr LP.dc.html".
   Element-level styling stays inline in index.html (matching the
   source) to avoid selector-specificity clashes; this file holds
   the keyframes, responsive rules, and the few component classes
   that replace the design-system runtime (Button / image-slot).
   ============================================================ */

html { scroll-behavior: smooth; }
body { margin: 0; padding: 0; background: #fff; }
* { box-sizing: border-box; }
[data-uc-track]::-webkit-scrollbar { display: none; }

/* ---------- keyframes ---------- */
@keyframes glowpulse { 0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(1)} 50%{opacity:.75;transform:translate(-50%,-50%) scale(1.12)} }
@keyframes blink   { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes floaty  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes ripple  { 0%{transform:translate(-50%,-50%) scale(.62);opacity:.6} 100%{transform:translate(-50%,-50%) scale(1.62);opacity:0} }
@keyframes sway1   { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(120px,80px) scale(1.32)} }
@keyframes sway2   { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-140px,-70px) scale(1.36)} }
@keyframes mpanel  { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* ---------- responsive ---------- */
@media (max-width:760px) { [data-flow-grid]{ grid-template-columns:1fr !important; gap:32px !important; } }

[data-hamburger] { display:none; }
@media (max-width:1024px) {
  [data-desktop-nav] { display:none !important; }
  [data-hamburger]   { display:grid !important; }
}
@media (min-width:1025px) {
  [data-mobile-panel] { display:none !important; }
}

@media (max-width:600px) {
  [data-hero-cta]        { flex-direction:column; align-items:stretch; }
  [data-hero-cta] > div  { width:100%; }
  [data-hero-cta] .btn   { width:100%; justify-content:center; }
  [data-hero-dl]         { text-align:center; }
  [data-cta-actions]     { flex-direction:column; align-items:stretch; }
  [data-cta-actions] a   { width:100%; justify-content:center; }
}

/* ---------- buttons (replaces design-system <Button>) ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sm-font-sans-jp); font-weight:800; text-decoration:none;
  border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform var(--sm-dur-fast) var(--sm-ease-out),
             box-shadow var(--sm-dur-base) var(--sm-ease-out),
             background var(--sm-dur-base) var(--sm-ease-out);
}
.btn:active { transform:translateY(1px); }
.btn-primary {
  color:#fff; background:#3b5dff; box-shadow:0 4px 14px rgba(59,93,255,.25);
}
.btn-primary:hover { background:var(--sm-primary-hover); box-shadow:var(--sm-shadow-glow-cool); }
.btn-ghost {
  color:#3b4a5a; background:#fff; border-color:#c3cad2;
}
.btn-ghost:hover { border-color:var(--sm-primary); color:var(--sm-primary); }

/* ---------- image placeholders (replaces <image-slot>) ----------
   No production photography yet — branded gradient fills keep the
   composition intentional. Swap any .img-ph for a real <img> later. */
.img-ph { position:relative; display:block; overflow:hidden; background:#1f2a37; }
.img-ph::after {
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(120% 90% at 18% 12%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(100% 80% at 100% 100%, rgba(0,0,0,.18), transparent 60%);
}
/* use-case carousel fills */
.img-ph.uc-1 { background:linear-gradient(150deg,#3b5dff 0%,#2a3f9e 100%); }
.img-ph.uc-2 { background:linear-gradient(150deg,#ff6a6a 0%,#ff3ea5 100%); }
.img-ph.uc-3 { background:linear-gradient(150deg,#2ac8ff 0%,#1aa6e0 100%); }
.img-ph.uc-4 { background:linear-gradient(150deg,#6d4bff 0%,#3b5dff 100%); }
.img-ph.uc-5 { background:linear-gradient(150deg,#ff3ea5 0%,#6d4bff 100%); }
/* flow panel fills (cool, light — text sits below, not over) */
.img-ph.flow { background:linear-gradient(150deg,#eaf1ff 0%,#f5ecfb 50%,#ffeef5 100%); }
.img-ph.flow::after {
  background-image:
    radial-gradient(60% 60% at 22% 26%, rgba(59,93,255,.16), transparent 60%),
    radial-gradient(60% 60% at 80% 80%, rgba(255,62,165,.14), transparent 60%);
}
.img-ph .img-ph-badge {
  position:absolute; z-index:1; left:24px; bottom:24px;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sm-font-latin); font-weight:800; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase;
  color:#3b4a5a; background:rgba(255,255,255,.82);
  padding:8px 14px; border-radius:999px; backdrop-filter:blur(4px);
}
.img-ph .img-ph-badge svg { width:15px; height:15px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; scroll-behavior:auto !important; }
}