/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Flash message animations */
@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-1rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-down {
  animation: fade-in-down 0.3s ease-out;
}

/* Landing page scroll animations — section-level only, no stagger */
[data-animate] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-animate].animate-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-dot-field {
  background-image: radial-gradient(circle, rgba(255 255 255 / 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
}

.hero-dot-signal {
  background-image: radial-gradient(circle, rgba(74 222 128 / 0.5) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: radial-gradient(ellipse 340px 300px at 65% 38%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 340px 300px at 65% 38%, black 0%, transparent 70%);
}

.hero-signal-cluster {
  background: radial-gradient(
    ellipse 360px 320px at 65% 38%,
    rgba(74 222 128 / 0.06) 0%,
    rgba(74 222 128 / 0.02) 40%,
    transparent 70%
  );
  animation: cluster-pulse 4s ease-in-out infinite;
}

@keyframes cluster-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.hero-ghost-signal {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.hero-ghost-text {
  font-size: clamp(16rem, 30vw, 28rem);
  font-weight: 800;
  line-height: 0.85;
  color: rgba(255 255 255 / 0.10);
  letter-spacing: -0.04em;
  transform: translate(8%, -5%) rotate(-3deg);
  white-space: nowrap;
}

.hero-signal-line {
  width: 3rem;
  height: 2px;
  background-color: rgb(74 222 128);
  opacity: 0.6;
}

@media (max-width: 639px) {
  .hero-signal-line {
    width: 2rem;
  }
}

/* ── How It Works section ────────────────────────────────────── */

/* Card entrance stagger when parent becomes visible */
.animate-visible .hiw-card-1 { animation: hiw-card-in 0.5s ease-out 0.1s both; }
.animate-visible .hiw-card-2 { animation: hiw-card-in 0.5s ease-out 0.3s both; }
.animate-visible .hiw-card-3 { animation: hiw-card-in 0.5s ease-out 0.5s both; }

@keyframes hiw-card-in {
  0% {
    opacity: 0;
    transform: translateY(1.5rem) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Connector lines between cards via pseudo-elements (desktop only) */
@media (min-width: 768px) {
  .hiw-card-1::after,
  .hiw-card-2::after {
    content: '';
    position: absolute;
    top: 3.75rem; /* vertically centered on the icon pill */
    left: 100%;
    width: 2.5rem; /* matches md:gap-10 */
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
  }

  .hiw-card-1::after {
    background: linear-gradient(to right, rgb(34 211 238 / 0.5), rgb(139 92 246 / 0.5));
  }
  .hiw-card-2::after {
    background: linear-gradient(to right, rgb(139 92 246 / 0.5), rgb(52 211 153 / 0.5));
  }

  .animate-visible .hiw-card-1::after {
    animation: hiw-draw 0.4s ease-out 0.45s both;
  }
  .animate-visible .hiw-card-2::after {
    animation: hiw-draw 0.4s ease-out 0.65s both;
  }
}

@keyframes hiw-draw {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* Overline tracking animation */
.animate-visible .hiw-overline {
  animation: hiw-overline-in 0.6s ease-out 0s both;
}

@keyframes hiw-overline-in {
  0% {
    opacity: 0;
    letter-spacing: 0.6em;
  }
  100% {
    opacity: 1;
    letter-spacing: 0.3em;
  }
}

/* Mobile flow arrows */
.hiw-mobile-arrow svg {
  animation: hiw-bounce 2s ease-in-out infinite;
}

@keyframes hiw-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Card hover glow */
.hiw-card-1:hover > div { box-shadow: 0 0 30px -5px rgba(34 211 238 / 0.08); }
.hiw-card-2:hover > div { box-shadow: 0 0 30px -5px rgba(139 92 246 / 0.08); }
.hiw-card-3:hover > div { box-shadow: 0 0 30px -5px rgba(52 211 153 / 0.08); }

/* Subtle divider between hero and hiw since both dark */
.hiw-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255 255 255 / 0.06) 50%, transparent);
}

/* ── Features section ────────────────────────────────────── */

/* Card entrance stagger */
.animate-visible .feat-card-1 { animation: feat-card-in 0.5s ease-out 0.1s both; }
.animate-visible .feat-card-2 { animation: feat-card-in 0.5s ease-out 0.25s both; }
.animate-visible .feat-card-3 { animation: feat-card-in 0.5s ease-out 0.4s both; }

@keyframes feat-card-in {
  0% { opacity: 0; transform: translateY(1.5rem) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Organic card shapes */
.feat-shape-1 { border-radius: 2rem 4rem 2rem 3.5rem / 3.5rem 2rem 4rem 2rem; }
.feat-shape-2 { border-radius: 3.5rem 2rem 3rem 2rem / 2rem 3rem 2rem 4rem; }
.feat-shape-3 { border-radius: 3rem 3rem 1.5rem 4rem / 4rem 2rem 3rem 2rem; }

/* Hover shadow intensification */
.feat-card-1:hover .feat-shape-1 {
  box-shadow: 0 20px 50px -12px rgba(6 182 212 / 0.25), 0 8px 20px -8px rgba(6 182 212 / 0.15);
}
.feat-card-2:hover .feat-shape-2 {
  box-shadow: 0 20px 50px -12px rgba(139 92 246 / 0.25), 0 8px 20px -8px rgba(139 92 246 / 0.15);
}
.feat-card-3:hover .feat-shape-3 {
  box-shadow: 0 20px 50px -12px rgba(52 211 153 / 0.25), 0 8px 20px -8px rgba(52 211 153 / 0.15);
}

/* Background blob floating animations */
@keyframes feat-float-1 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(12px,-8px) scale(1.03); } }
@keyframes feat-float-2 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-10px,12px) scale(1.05); } }
@keyframes feat-float-3 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(8px,6px); } }

.feat-blob-1 { animation: feat-float-1 8s ease-in-out infinite; }
.feat-blob-2 { animation: feat-float-2 10s ease-in-out infinite; }
.feat-blob-3 { animation: feat-float-3 12s ease-in-out infinite; }

/* ── HIW → Features pixel dissolution transition ─────────────── */

/* Band sizing: explicit height + centered on zero-height wrapper */
.hiw-feat-dark-band,
.hiw-feat-white-band {
  top: -60px;
  height: 120px;
}

@media (min-width: 640px) {
  .hiw-feat-dark-band,
  .hiw-feat-white-band {
    top: -80px;
    height: 160px;
  }
}

@media (min-width: 768px) {
  .hiw-feat-dark-band,
  .hiw-feat-white-band {
    top: -100px;
    height: 200px;
  }
}

/* Dark band: top-right → bottom-left, pixel dissolution */
.hiw-feat-dark-band {
  background-color: rgb(17 24 39); /* gray-900 */
  -webkit-mask-image:
    repeating-conic-gradient(#000 0% 25%, transparent 0% 50%),
    linear-gradient(205deg, black 20%, black 40%, transparent 65%),
    linear-gradient(to bottom, transparent, black 40%, black);
  -webkit-mask-size: 14px 14px, 100% 100%, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat, no-repeat;
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    repeating-conic-gradient(#000 0% 25%, transparent 0% 50%),
    linear-gradient(205deg, black 20%, black 40%, transparent 65%),
    linear-gradient(to bottom, transparent, black 40%, black);
  mask-size: 14px 14px, 100% 100%, 100% 100%;
  mask-repeat: repeat, no-repeat, no-repeat;
  mask-composite: intersect, intersect;
}

/* White band: bottom-left → top-right, pixel dissolution */
.hiw-feat-white-band {
  background-color: white;
  -webkit-mask-image:
    repeating-conic-gradient(#000 0% 25%, transparent 0% 50%),
    linear-gradient(25deg, black 20%, black 40%, transparent 65%),
    linear-gradient(to top, transparent, black 40%, black);
  -webkit-mask-size: 14px 14px, 100% 100%, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat, no-repeat;
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    repeating-conic-gradient(#000 0% 25%, transparent 0% 50%),
    linear-gradient(25deg, black 20%, black 40%, transparent 65%),
    linear-gradient(to top, transparent, black 40%, black);
  mask-size: 14px 14px, 100% 100%, 100% 100%;
  mask-repeat: repeat, no-repeat, no-repeat;
  mask-composite: intersect, intersect;
}

/* Mobile: smaller pixel blocks for smaller transition area */
@media (max-width: 639px) {
  .hiw-feat-dark-band {
    -webkit-mask-size: 10px 10px, 100% 100%, 100% 100%;
    mask-size: 10px 10px, 100% 100%, 100% 100%;
  }
  .hiw-feat-white-band {
    -webkit-mask-size: 10px 10px, 100% 100%, 100% 100%;
    mask-size: 10px 10px, 100% 100%, 100% 100%;
  }
}

/* ── About / Trust — Chat section ────────────────────────── */

/* Background blob drift */
@keyframes about-float-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(15px, -10px) scale(1.04); } }
@keyframes about-float-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-12px, 14px) scale(1.06); } }
@keyframes about-float-3 { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(calc(-50% + 10px), calc(-50% + 8px)) scale(1.03); } }

.about-blob-1 { animation: about-float-1 9s ease-in-out infinite; }
.about-blob-2 { animation: about-float-2 11s ease-in-out infinite; }
.about-blob-3 { animation: about-float-3 13s ease-in-out infinite; }

/* Illustration entrance */
.animate-visible .about-illustration {
  animation: about-illus-in 0.6s ease-out 0.1s both;
}

@keyframes about-illus-in {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

/* Floating question marks */
@keyframes about-qmark-bob-1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes about-qmark-bob-2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes about-qmark-bob-3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.about-qmark-1 { animation: about-qmark-bob-1 2.8s ease-in-out infinite; }
.about-qmark-2 { animation: about-qmark-bob-2 3.2s ease-in-out 0.4s infinite; }
.about-qmark-3 { animation: about-qmark-bob-3 3.5s ease-in-out 0.8s infinite; }

/* Scratching arm oscillation */
@keyframes about-scratch {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-6deg); }
  60% { transform: rotate(4deg); }
}

.about-scratch-arm {
  animation: about-scratch 2.5s ease-in-out infinite;
}

/* Chat bubble entrances — left slides from left, right from right */
@keyframes about-slide-left {
  0% { opacity: 0; transform: translateX(-24px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes about-slide-right {
  0% { opacity: 0; transform: translateX(24px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Bubbles hidden until parent is visible */
.about-bubble { opacity: 0; }

/* Staggered entrance: 0.4s apart, starting at 0.3s */
.animate-visible .about-bubble-1 { animation: about-slide-left  0.4s ease-out 0.3s both; }
.animate-visible .about-bubble-2 { animation: about-slide-right 0.4s ease-out 0.7s both; }
.animate-visible .about-bubble-3 { animation: about-slide-left  0.4s ease-out 1.1s both; }
.animate-visible .about-bubble-4 { animation: about-slide-right 0.4s ease-out 1.5s both; }
.animate-visible .about-bubble-5 { animation: about-slide-left  0.4s ease-out 1.9s both; }
.animate-visible .about-bubble-6 { animation: about-slide-right 0.4s ease-out 2.3s both; }

/* ── Final CTA — Cubist Clarity ──────────────────────────── */

/* Background glow blob drifting */
@keyframes cta-glow-drift {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  33% { transform: translate(calc(-50% + 30px), calc(-50% - 20px)) scale(1.08); }
  66% { transform: translate(calc(-50% - 20px), calc(-50% + 15px)) scale(0.95); }
}

.cta-glow-blob { animation: cta-glow-drift 10s ease-in-out infinite; }

/* Chaos side: drifting translucent planes */
@keyframes cta-plane-drift-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(8px, -6px) rotate(3deg); }
}
@keyframes cta-plane-drift-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-10px, 8px) rotate(-4deg); }
}
@keyframes cta-plane-drift-3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(6px, 10px) rotate(2deg); }
}

.cta-plane-1 { animation: cta-plane-drift-1 8s ease-in-out infinite; }
.cta-plane-2 { animation: cta-plane-drift-2 10s ease-in-out infinite; }
.cta-plane-3 { animation: cta-plane-drift-3 12s ease-in-out infinite; }

/* Chart fragment flicker */
@keyframes cta-frag-flicker {
  0%, 100% { opacity: 0.5; }
  30% { opacity: 0.8; }
  60% { opacity: 0.3; }
  80% { opacity: 0.7; }
}

.cta-frag-1 { animation: cta-frag-flicker 4s ease-in-out infinite; }
.cta-frag-2 { animation: cta-frag-flicker 5s ease-in-out 1s infinite; }
.cta-frag-3 { animation: cta-frag-flicker 4.5s ease-in-out 0.5s infinite; }

/* Scattered data dots wandering */
@keyframes cta-dot-wander {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(3px, -4px); }
  50% { transform: translate(-2px, 5px); }
  75% { transform: translate(4px, 2px); }
}

.cta-dots-wander { animation: cta-dot-wander 15s ease-in-out infinite; }

/* Convergence line pulse */
@keyframes cta-converge-pulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.4; }
}

.cta-converge { animation: cta-converge-pulse 5s ease-in-out infinite; }

/* Crystal prism breathing */
@keyframes cta-crystal-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.cta-crystal { animation: cta-crystal-breathe 6s ease-in-out infinite; }

/* Facet shimmer — staggered */
@keyframes cta-facet-shimmer {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.5; }
}

.cta-facet-1 { animation: cta-facet-shimmer 4s ease-in-out infinite; }
.cta-facet-2 { animation: cta-facet-shimmer 4s ease-in-out 1.3s infinite; }
.cta-facet-3 { animation: cta-facet-shimmer 4s ease-in-out 2.6s infinite; }

/* Pulse rings expanding — staggered */
@keyframes cta-pulse-expand {
  0% { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

.cta-ring-1 { animation: cta-pulse-expand 3s ease-out infinite; }
.cta-ring-2 { animation: cta-pulse-expand 3s ease-out 1s infinite; }
.cta-ring-3 { animation: cta-pulse-expand 3s ease-out 2s infinite; }

/* Checkmark stroke draw on scroll */
@keyframes cta-check-draw {
  0% { stroke-dashoffset: 28; }
  100% { stroke-dashoffset: 0; }
}

.cta-check {
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
}

.animate-visible .cta-check {
  animation: cta-check-draw 0.8s ease-out 0.6s both;
}

/* Cubist eye pupil looking around */
@keyframes cta-eye-look {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(1.5px, -1px); }
  40% { transform: translate(-1px, 1.5px); }
  60% { transform: translate(1px, 0.5px); }
  80% { transform: translate(-0.5px, -1.5px); }
}

.cta-eye-pupil { animation: cta-eye-look 6s ease-in-out infinite; }

/* Slow rotating accent */
@keyframes cta-accent-spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.cta-accent-spin { animation: cta-accent-spin-slow 30s linear infinite; }

/* Bobbing accent */
@keyframes cta-accent-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.cta-accent-bob-1 { animation: cta-accent-bob 4s ease-in-out infinite; }
.cta-accent-bob-2 { animation: cta-accent-bob 5s ease-in-out 0.5s infinite; }

/* Art assemble entrance on scroll */
@keyframes cta-art-assemble {
  0% { opacity: 0; transform: scale(0.85); filter: blur(8px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

.cta-art-container { opacity: 0; }

.animate-visible .cta-art-container {
  animation: cta-art-assemble 1s ease-out 0.2s both;
}

/* Signal line draw */
@keyframes cta-line-draw {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

.animate-visible .cta-signal-line {
  animation: cta-line-draw 0.6s ease-out 0.3s both;
  transform-origin: left;
}

/* Overline entrance (reuses hiw pattern) */
.animate-visible .cta-overline {
  animation: hiw-overline-in 0.6s ease-out 0s both;
}

/* Top divider */
.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255 255 255 / 0.06) 50%, transparent);
}

html {
  scroll-behavior: smooth;
}