/* RideClaim state-page motion + mobile lead dock */
html, body { overflow-x: clip; overscroll-behavior-x: none; }

.state-portal {
  --portal-copy-opacity: 1;
  --portal-copy-shift: 0px;
  --portal-scroll-opacity: .85;
  --portal-orange-opacity: 1;
  --portal-grid-opacity: .2;
  --portal-art-opacity: 1;
  position: relative;
  z-index: 20;
  height: 195svh;
  min-height: 980px;
  color: #fff;
  background: #ec3013; /* no-JS fallback */
  isolation: isolate;
  contain: paint;
}

.state-portal-ready .state-portal { background: transparent; }

.state-portal__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 580px;
  display: grid;
  place-items: center;
  overflow: hidden;
  contain: paint;
  background: transparent;
}

/* Orange is an overlay now, not the stage background. That matters: at the
   end of the scroll it can become transparent and reveal the *real* page
   already positioned directly underneath it. */
.state-portal__stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: var(--portal-orange-opacity);
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 190, 125, .52), transparent 26%),
    radial-gradient(circle at 18% 80%, rgba(120, 9, 0, .36), transparent 34%),
    linear-gradient(135deg, #ff5b26 0%, #ec3013 48%, #b81905 100%);
  will-change: opacity;
}

.state-portal__stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: var(--portal-grid-opacity);
  background-image:
    linear-gradient(rgba(255,255,255,.17) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.17) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at center, #000, transparent 72%);
  mask-image: radial-gradient(circle at center, #000, transparent 72%);
  will-change: opacity;
}

.state-portal__orb,
.state-portal__ring {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  will-change: transform, opacity;
}

.state-portal__orb {
  width: min(46vw, 520px);
  aspect-ratio: 1;
  right: -10%;
  top: -12%;
  border-radius: 50%;
  opacity: calc(.48 * var(--portal-orange-opacity));
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.44), rgba(255,184,107,.12) 42%, transparent 68%);
  animation: portal-drift 8s ease-in-out infinite alternate;
}

.state-portal__ring {
  width: min(70vw, 880px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  opacity: var(--portal-orange-opacity);
}

.state-portal__ring--one { left: -24%; bottom: -48%; }
.state-portal__ring--two { right: -34%; top: 8%; width: min(56vw, 680px); opacity: calc(.75 * var(--portal-orange-opacity)); }

/* A masked duplicate of the real header lives exactly where the solid white
   state begins. As the solid state fades, page content appears *inside* the
   silhouette. The duplicate fades away only when the real header underneath
   is aligned with it, making the handoff visually invisible. */
.state-portal__preview {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  background: var(--color-bg, #f3f2f2);
  opacity: 0;
  pointer-events: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  will-change: opacity, -webkit-mask-size, mask-size;
}

.state-portal__preview .state-content-intro {
  position: relative !important;
  z-index: auto !important;
  margin: 0 auto !important;
  transform: none !important;
  background:
    radial-gradient(circle at 94% 5%, rgba(236,48,19,.11), transparent 28%),
    var(--color-bg, #f3f2f2) !important;
}

.state-portal__preview a { pointer-events: none; }

.state-portal__art {
  position: relative;
  z-index: 4;
  width: min(76vw, 760px);
  height: min(67svh, 680px);
  opacity: var(--portal-art-opacity);
  pointer-events: none;
  will-change: opacity;
}

.state-portal__art svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.state-portal__shape { fill: var(--color-bg, #f3f2f2); }
.state-portal__trace {
  fill: none;
  stroke: rgba(255,255,255,.55);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.state-portal__copy {
  position: absolute;
  z-index: 6;
  left: clamp(20px, 5vw, 64px);
  bottom: clamp(34px, 6vw, 68px);
  max-width: min(520px, 74vw);
  opacity: var(--portal-copy-opacity);
  transform: translateY(var(--portal-copy-shift));
  will-change: opacity, transform;
}

.state-portal__eyebrow {
  display: block;
  margin-bottom: 10px;
  font: 800 11px/1.2 var(--font-heading);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.state-portal__name {
  display: block;
  font: 800 clamp(42px, 8vw, 108px)/.88 var(--font-heading);
  letter-spacing: -.07em;
}

.state-portal__scroll {
  position: absolute;
  z-index: 6;
  right: clamp(20px, 5vw, 64px);
  bottom: clamp(36px, 6vw, 70px);
  display: flex;
  align-items: center;
  gap: 10px;
  font: 800 10px/1 var(--font-heading);
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: var(--portal-scroll-opacity);
}

.state-portal__scroll::after {
  content: "";
  width: 42px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: portal-pulse 1.8s ease-in-out infinite;
}

.state-content-intro {
  position: relative;
  z-index: 2;
  background:
    radial-gradient(circle at 94% 5%, rgba(236,48,19,.11), transparent 28%),
    var(--color-bg);
}

/* The first real page section overlaps the last viewport of the portal.
   JS counter-translates it so it stays perfectly aligned under the pinned
   stage. At progress=1 the transform reaches zero and normal scrolling
   continues from the exact same visual position. */
.state-portal-ready .state-portal + .state-content-intro {
  margin-top: -100svh !important;
  will-change: transform;
}

/* Placeholder state pages preserve their original copy inside the shared
   content/sidebar grid. The whole grid bridges the last portal viewport. */
.state-portal-ready .state-portal + .state-page-layout--portal-bridge {
  margin-top: -100svh !important;
  position: relative;
  z-index: 2;
  background: var(--color-bg);
}
.state-page-layout--portal-bridge .state-content-intro {
  background: radial-gradient(circle at 94% 5%, rgba(236,48,19,.11), transparent 28%), var(--color-bg);
}

.state-main > section { position: relative; }

.state-main > section:nth-child(odd)::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -70px;
  top: 34px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
  border-radius: 50%;
  pointer-events: none;
  opacity: .75;
}

.state-form__close,
.mobile-case-cta,
.state-form-backdrop { display: none; }

@keyframes portal-drift {
  to { transform: translate3d(-7%, 9%, 0) scale(1.08); }
}

@keyframes portal-pulse {
  0%, 100% { transform: scaleX(.35); opacity: .45; }
  50% { transform: scaleX(1); opacity: 1; }
}

@media (max-width: 900px) {
  body.state-page { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  .state-portal { height: 225svh; min-height: 1180px; }
  .state-portal__stage { min-height: 520px; }
  .state-portal__art { width: 88vw; height: 57svh; }
  .state-portal__scroll { display: none; }
  .state-portal__name { font-size: clamp(42px, 14vw, 74px); }
  .state-portal__copy { max-width: calc(100vw - 40px); }

  .state-page-layout {
    display: block !important;
    padding: 0 !important;
  }

  /* Mobile lead drawer: full-screen and rises from the bottom. The fixed CTA
     remains the site's visual floor until a visitor deliberately opens the form. */
  .state-form {
    display: block !important;
    position: fixed !important;
    z-index: 1201;
    inset: 0 !important;
    width: 100%;
    height: 100svh;
    max-height: none;
    overflow-y: auto;
    box-sizing: border-box;
    margin: 0 !important;
    padding: calc(24px + env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)) !important;
    border: 0;
    border-top: 3px solid var(--color-accent);
    background: var(--color-bg) !important;
    box-shadow: 0 -24px 70px rgba(32,30,29,.24);
    transform: translateY(101%);
    visibility: hidden;
    transition: transform .58s cubic-bezier(.16,1,.3,1), visibility 0s linear .58s;
    overscroll-behavior: contain;
  }

  .state-form.is-open {
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0s;
  }

  .state-form__close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-divider);
    background: transparent;
    color: var(--color-text);
    font: 600 22px/1 var(--font-body);
    cursor: pointer;
  }

  .state-form h2 { padding-right: 42px; }

  .state-form-backdrop {
    display: block;
    position: fixed;
    z-index: 1200;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(22,18,17,.58);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility 0s linear .28s;
  }

  .state-form-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  /* Full-bleed dock: there is deliberately no gap at the sides or bottom.
     The dock becomes the visual floor of the site and reserves enough body
     padding that article text never disappears underneath it. */
  .mobile-case-cta {
    display: block;
    position: fixed;
    z-index: 1100;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    min-height: calc(72px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.22);
    border-radius: 0;
    padding: 16px max(20px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    color: #fff;
    background: linear-gradient(110deg, #d9250d, #ec3013 48%, #ff6532 100%);
    box-shadow: 0 -14px 38px rgba(72,14,5,.24);
    font: 800 16px/1.2 var(--font-heading);
    letter-spacing: -.01em;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(100%);
    transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .3s ease;
  }

  .mobile-case-cta.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  body.form-open { overflow: hidden; }
  body.form-open .mobile-case-cta { opacity: 0; transform: translateY(100%); }

  .state-main > section:nth-child(odd)::before { right: -110px; opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .state-portal { height: auto; min-height: 0; background: #ec3013; }
  .state-portal__stage { position: relative; height: 72svh; }
  .state-portal__preview { display: none; }
  .state-portal-ready .state-portal + .state-content-intro { margin-top: 0 !important; transform: none !important; }
  .state-portal-ready .state-portal + .state-page-layout--portal-bridge { margin-top: 0 !important; }
  .state-portal__copy { opacity: 1 !important; transform: none !important; }
  .state-portal__orb,
  .state-portal__scroll::after { animation: none; }
  .mobile-case-cta,
  .state-form,
  .state-form-backdrop { transition-duration: .01ms !important; }
}

/* Mobile drawers live above every animated/site layer. state-experience.js
   reparents the form to <body> at phone/tablet widths so these z-index values
   are not trapped by the portal-bridge stacking context. */
@media (max-width:900px) {
  .state-form { z-index: var(--rc-z-drawer,8001) !important; }
  .state-form-backdrop { z-index: var(--rc-z-backdrop,8000) !important; }
  .mobile-case-cta { z-index: var(--rc-z-cta,7000) !important; }
}