/* Hero background follows active slide (JS sets --hero-*) */

@property --hero-top {
  syntax: '<color>';
  inherits: true;
  initial-value: #020617;
}

@property --hero-mid {
  syntax: '<color>';
  inherits: true;
  initial-value: #115e59;
}

@property --hero-bot {
  syntax: '<color>';
  inherits: true;
  initial-value: #f8fafc;
}

.hero-section-themed {
  background: linear-gradient(to bottom, var(--hero-top), var(--hero-mid), var(--hero-bot));
  transition:
    --hero-top 0.75s ease,
    --hero-mid 0.75s ease,
    --hero-bot 0.75s ease;
}

.hero-topwash {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--hero-mid) 42%, transparent),
    transparent
  );
}

@media (prefers-reduced-motion: reduce) {
  .hero-section-themed {
    transition: none;
  }
}

/* Hero carousel — single visible slide (no stacked text) */

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-slide.is-active .slide-inner {
  animation: fadeSlideIn 0.5s ease-out forwards;
}

/* Before JS runs: only .is-active is visible (prevents overlapping text) */
.slider-3d-stage .hero-slide:not(.is-active) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.slider-3d-root {
  isolation: isolate;
  min-height: 0;
}

/* Grid cell fills row height next to the form (tall column) */
.hero-slider-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.slider-3d-stage {
  position: relative;
}

.hero-slide {
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
  will-change: opacity;
}

.hero-slide.is-active {
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: opacity 0.25s ease;
  }

  .hero-slide.is-active .slide-inner {
    animation: none;
  }
}

.hero-slide-media {
  transform: scale(1.03);
  transition: transform 6s ease-out;
}

.hero-slide.is-active .hero-slide-media {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide-media {
    transform: none !important;
    transition: none;
  }
}

/* Glass form card */
.hero-form-glass {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.slider-dot {
  transition:
    width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease,
    box-shadow 0.25s ease;
}

/* —— Mobile layout (public pages) —— */

html {
  -webkit-text-size-adjust: 100%;
}

.site-header-inner {
  row-gap: 0.5rem;
}

.site-nav {
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100%;
}

@media (max-width: 1023px) {
  .hero-section-themed {
    padding-bottom: 1.5rem;
  }

  .hero-slider-col {
    min-height: auto;
  }

  .hero-slider-col .slider-3d-root {
    min-height: 15rem;
  }

  #steps {
    margin-top: -2rem;
  }
}

@media (max-width: 639px) {
  .hero-slider-col .slider-3d-root {
    min-height: 12.5rem;
  }

  .hero-slide .slide-inner {
    padding-bottom: 5.25rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .hero-slide .slide-inner h1,
  .hero-slide .slide-inner h2 {
    font-size: 1.35rem;
    line-height: 1.25;
  }

  .hero-form-glass {
    padding: 1.25rem;
    border-radius: 1.25rem;
  }

  .hero-slider-col .slider-3d-stage {
    border-radius: 1rem;
  }

  #preview iframe#pdfFrame {
    min-height: 16rem;
    height: 55vh;
  }

  #installPrompt {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}