/* ============================================================
   BLARE — Landing enhancements
   Inspired by haikei.app blobs, motion-primitives.com motion,
   and ui.watermelon.sh glass / bento patterns.
   Remove this file + motion-enhance.js to revert visuals only.
   ============================================================ */

/* ---- Haikei-style ambient blobs ---- */
.haikei-blob {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  filter: blur(0);
}
.haikei-blob--hero-a {
  width: min(52vw, 520px);
  top: -8%;
  right: -12%;
  animation: blobFloatA 18s ease-in-out infinite;
}
.haikei-blob--hero-b {
  width: min(40vw, 380px);
  bottom: 6%;
  left: -10%;
  opacity: 0.4;
  animation: blobFloatB 22s ease-in-out infinite;
}
.haikei-blob--voice {
  width: min(60vw, 640px);
  top: -20%;
  right: -15%;
  opacity: 0.12;
  animation: blobFloatA 24s ease-in-out infinite reverse;
}
.haikei-blob--cta {
  width: min(45vw, 420px);
  bottom: -25%;
  left: -8%;
  opacity: 0.2;
  animation: blobFloatB 20s ease-in-out infinite;
}
@keyframes blobFloatA {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33% { transform: translate(2%, -3%) rotate(4deg) scale(1.04); }
  66% { transform: translate(-2%, 2%) rotate(-3deg) scale(0.98); }
}
@keyframes blobFloatB {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(3%, 4%) rotate(-5deg); }
}

/* ---- Motion-primitives: blur fade reveal ---- */
.reveal {
  filter: blur(10px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-spring),
    filter var(--dur-slow) var(--ease-out);
}
.reveal.is-visible { filter: blur(0); }

/* ---- Motion-primitives: text shimmer on hero accent ---- */
.hero h1 .accent {
  background: linear-gradient(
    105deg,
    var(--coral) 0%,
    var(--coral-deep) 35%,
    #ff9a6c 50%,
    var(--coral-deep) 65%,
    var(--coral) 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: textShimmer 5s linear infinite;
}
@keyframes textShimmer {
  to { background-position: 220% center; }
}

/* ---- Watermelon UI: glass demo composer ---- */
.demo {
  background: rgba(250, 245, 236, 0.55);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    var(--shadow-l),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 1px rgba(232, 92, 51, 0.06);
}
.demo::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(232, 92, 51, 0.35), transparent 40%, rgba(233, 161, 59, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---- Watermelon UI: dashboard preview frame ---- */
.preview-frame {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--mist);
  box-shadow: var(--shadow-l);
}
.preview-frame__glow {
  position: absolute;
  inset: -40% -20%;
  background: radial-gradient(ellipse at 50% 0%, rgba(232, 92, 51, 0.18), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.preview-frame img {
  position: relative;
  z-index: 1;
}

/* ---- Motion-primitives: infinite channel marquee ---- */
.channels {
  padding-block: 0;
  overflow: hidden;
}
.channels__marquee {
  position: relative;
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.channels__track {
  display: flex;
  width: max-content;
  animation: channelMarquee 42s linear infinite;
}
.channels__track:hover { animation-play-state: paused; }
.channels__set {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-inline: clamp(1rem, 3vw, 2rem);
  flex-shrink: 0;
}
@keyframes channelMarquee {
  to { transform: translateX(-50%); }
}

/* ---- Watermelon UI: bento feature grid ---- */
@media (min-width: 56rem) {
  #features [data-stagger] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  #features .feature {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.75rem;
    border: 1px solid var(--mist);
    border-radius: var(--radius-l);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: var(--shadow-s);
    transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med);
  }
  #features .feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-m);
  }
  #features .feature + .feature { border-top: 1px solid var(--mist); }
  #features .feature:nth-child(even) { grid-template-columns: 1fr; }
  #features .feature:nth-child(even) .feature__media { order: 0; }
  #features .feature__media {
    min-height: 11rem;
    background: linear-gradient(145deg, var(--cream-2), rgba(251, 227, 216, 0.35));
  }
}

/* ---- Motion-primitives: border beam on featured pricing ---- */
.pricing-card--featured {
  overflow: visible;
  border-color: transparent;
  background: var(--cream);
  box-shadow: var(--shadow-m);
  transform: translateY(-0.25rem);
}
.pricing-card--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  z-index: 0;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    var(--coral),
    var(--gold),
    transparent 25%,
    transparent 75%,
    var(--coral)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderBeam 4s linear infinite;
  pointer-events: none;
}
.pricing-card--featured > * {
  position: relative;
  z-index: 1;
}
@keyframes borderBeam {
  to { --beam-angle: 360deg; }
}
@property --beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ---- Watermelon UI: elevated steps cards ---- */
.steps .step {
  padding: 1.75rem 1.5rem 1.5rem;
  padding-top: 2.75rem;
  background: var(--cream-2);
  border: 1px solid var(--mist);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  transition: transform var(--dur-med) var(--ease-spring);
}
.steps .step:hover { transform: translateY(-3px); }

/* ---- Header glass upgrade (watermelon) ---- */
.site-header.is-scrolled {
  background: rgba(250, 245, 236, 0.78);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}

/* ---- Final CTA mesh overlay ---- */
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.15), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(38, 34, 31, 0.08), transparent 40%);
  pointer-events: none;
}

/* ============================================================
   Pass 2 — scroll progress, hero grid, trust pills, wave,
   channel badges, feature icons, timeline, spotlight, tilt
   ============================================================ */

/* ---- Scroll progress (motion-primitives) ---- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 10000;
  pointer-events: none;
  background: transparent;
}
.scroll-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--coral), var(--gold));
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 12px rgba(232, 92, 51, 0.45);
  transition: width 0.08s linear;
}

/* ---- Hero dot grid (haikei-style texture) ---- */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: radial-gradient(circle, rgba(38, 34, 31, 0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
}

/* ---- Hero trust pills ---- */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem 1.25rem;
  list-style: none;
  margin: -2rem auto 2.5rem;
  padding: 0;
}
.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--slate);
  padding: 0.4rem 0.85rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--mist);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero__trust-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
  flex-shrink: 0;
}

/* ---- Floating demo composer ---- */
.demo--float {
  animation: demoFloat 6s ease-in-out infinite;
}
@keyframes demoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ---- Haikei wave divider ---- */
.haikei-wave {
  line-height: 0;
  margin-top: -1px;
  background: var(--cream-2);
}
.haikei-wave svg {
  display: block;
  width: 100%;
  height: clamp(2.5rem, 6vw, 4rem);
}

/* ---- Channel live / soon badges ---- */
.channels__pill {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.channels__pill--live {
  background: rgba(46, 125, 50, 0.12);
  color: var(--green);
  border: 1px solid rgba(46, 125, 50, 0.25);
}
.channels__pill--soon {
  background: rgba(110, 103, 95, 0.08);
  color: var(--slate-soft);
  border: 1px solid var(--mist);
}
.channels__name--live {
  opacity: 1 !important;
  color: var(--ink);
}
.channels__name--soon {
  opacity: 0.45;
}

/* ---- Feature card icons ---- */
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  color: var(--coral-deep);
  background: var(--coral-tint);
  border: 1px solid rgba(232, 92, 51, 0.15);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
}

/* ---- Steps timeline connector ---- */
@media (min-width: 52rem) {
  .steps--timeline {
    position: relative;
  }
  .steps--timeline::before {
    content: "";
    position: absolute;
    top: 3.25rem;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--mist) 8%, var(--coral-tint) 50%, var(--mist) 92%, transparent);
    pointer-events: none;
  }
  .steps--timeline .step::after {
    content: "";
    position: absolute;
    top: 2.85rem;
    left: 1.5rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cream);
    border: 2px solid var(--coral);
    box-shadow: 0 0 0 4px var(--coral-tint);
    z-index: 1;
  }
}

/* ---- Pricing cursor spotlight ---- */
.pricing__grid--spotlight {
  position: relative;
  overflow: visible;
}
.pricing__grid--spotlight::before {
  content: "";
  position: absolute;
  inset: -2rem;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    420px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(232, 92, 51, 0.07),
    transparent 55%
  );
}
.pricing__grid--spotlight.is-spotlight-active::before {
  opacity: 1;
}
.pricing__grid--spotlight .pricing-card {
  position: relative;
  z-index: 1;
  transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med);
}
.pricing__grid--spotlight .pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-m);
}

/* ---- Preview frame 3D tilt container ---- */
.preview-frame--tilt {
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow var(--dur-med);
}
.preview-frame--tilt.is-tilting {
  box-shadow:
    var(--shadow-l),
    0 24px 48px rgba(38, 34, 31, 0.12);
}

/* ---- Blob parallax (JS sets --parallax-y in px; top/bottom avoids fighting keyframe transforms) ---- */
.haikei-blob--hero-a { top: calc(-8% + var(--parallax-y, 0px) * 0.35); }
.haikei-blob--hero-b { bottom: calc(6% - var(--parallax-y, 0px) * 0.25); }
.haikei-blob--voice { top: calc(-20% + var(--parallax-y, 0px) * 0.2); }
.haikei-blob--cta { bottom: calc(-25% - var(--parallax-y, 0px) * 0.15); }

@media (prefers-reduced-motion: reduce) {
  .haikei-blob,
  .channels__track,
  .hero h1 .accent,
  .pricing-card--featured::before,
  .demo--float {
    animation: none !important;
  }
  .reveal { filter: none; }
  .scroll-progress { display: none; }
  .haikei-blob--hero-a { top: -8%; }
  .haikei-blob--hero-b { bottom: 6%; }
  .haikei-blob--voice { top: -20%; }
  .haikei-blob--cta { bottom: -25%; }
}