/* ==========================================================================
   Smart Financing Assistant — AI onboarding overlay
   Full-screen presentation mode launched from "Start Application".
   Palette is intentionally the dark glassmorphic treatment from the V0
   reference build, layered over the GEOSmart portal chrome.
   ========================================================================== */

.geosmart-ai {
  --gsai-blue: var(--geosmart-brand-blue);
  --gsai-blue-soft: color-mix(in srgb, var(--geosmart-brand-blue) 72%, #ffffff);
  --gsai-blue-bright: color-mix(in srgb, var(--geosmart-brand-blue) 48%, #ffffff);
  --gsai-cta: var(--geosmart-brand-blue);
  --gsai-cta-hover: var(--geosmart-brand-blue-hover);
  --gsai-ground: var(--geosmart-brand-blue);
  --gsai-card: rgba(16, 17, 20, 0.9);
  --gsai-card-solid: #181a1f;
  --gsai-well: #0a0b0d;
  --gsai-line: #262626;
  --gsai-text-muted: #a3a3a3;
  --gsai-text-dim: #737373;
  --gsai-green: #4ade80;
  --gsai-morph-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gsai-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* Cleared by JS to the live sticky chrome bottom; fallbacks match the
     portal's fixed header (72px) and desktop topbar (~90px). */
  --gsai-chrome-top: 72px;
  /* Shared inset for hero chrome: hint, return control, title + CTA. */
  --gsai-stage-pad: 40px;

  position: fixed;
  top: var(--gsai-chrome-top);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1250;
  display: none;
  overflow: hidden;
  background: var(--gsai-ground);
  font-family: "Inter", sans-serif;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

/* Keep the sticky chrome above the blue plane so the bar stays visible and
   its logo / primary nav can navigate while the overlay is open. */
html.geosmart-ai-onboarding-open .portal-topbar,
html.geosmart-ai-onboarding-open .header {
  z-index: 1260;
}

/* While the financing application overlay is open: dim blocked chrome controls
   and show not-allowed. Mobile: burger / search / notifications. Desktop adds
   the Apex user menu (search + notifications share these base rules). */
html.geosmart-ai-onboarding-open .header .header__burger,
html.geosmart-ai-onboarding-open .header .header__search,
html.geosmart-ai-onboarding-open .header .notifications__open {
  opacity: 0.38;
  cursor: not-allowed !important;
}

html.geosmart-ai-onboarding-open .header .header__burger:hover,
html.geosmart-ai-onboarding-open .header .header__burger:focus-visible,
html.geosmart-ai-onboarding-open .header .header__search:hover,
html.geosmart-ai-onboarding-open .header .header__search:focus-visible,
html.geosmart-ai-onboarding-open .header .notifications__open:hover,
html.geosmart-ai-onboarding-open .header .notifications__open:focus-visible {
  opacity: 0.38;
  cursor: not-allowed !important;
}

html.geosmart-ai-onboarding-open .header .header__burger *,
html.geosmart-ai-onboarding-open .header .header__search *,
html.geosmart-ai-onboarding-open .header .notifications__open * {
  cursor: not-allowed !important;
}

@media only screen and (min-width: 768px) {
  html.geosmart-ai-onboarding-open .topbar-user__toggle {
    opacity: 0.38;
    cursor: not-allowed !important;
  }

  html.geosmart-ai-onboarding-open .topbar-user__toggle:hover,
  html.geosmart-ai-onboarding-open .topbar-user__toggle:focus-visible {
    opacity: 0.38;
    cursor: not-allowed !important;
  }

  html.geosmart-ai-onboarding-open .topbar-user__toggle * {
    cursor: not-allowed !important;
  }

  /* Hide page content only while blue fades + Swup leave builds. Restored
     under Swup's cover before reveal so fade-in stays normal.
     Specificity must beat geosmart-swup-header-fade + portal-page-intro's
     `opacity: 1 !important` on .page__hello.h5 / .page__welcome.h2. */
  html.geosmart-swup-session.geosmart-ai-onboarding-nav-exit:not(.geosmart-swup-dashboard-sequenced-reveal):not(.geosmart-swup-applications-sequenced-reveal):not(.geosmart-swup-funding-sequenced-reveal):not(.geosmart-swup-notifications-sequenced-reveal):not(.geosmart-swup-marketing-sequenced-reveal) .page__row_head .page__hello,
  html.geosmart-swup-session.geosmart-ai-onboarding-nav-exit:not(.geosmart-swup-dashboard-sequenced-reveal):not(.geosmart-swup-applications-sequenced-reveal):not(.geosmart-swup-funding-sequenced-reveal):not(.geosmart-swup-notifications-sequenced-reveal):not(.geosmart-swup-marketing-sequenced-reveal) .page__row_head .page__hello.h5,
  html.geosmart-swup-session.geosmart-ai-onboarding-nav-exit:not(.geosmart-swup-dashboard-sequenced-reveal):not(.geosmart-swup-applications-sequenced-reveal):not(.geosmart-swup-funding-sequenced-reveal):not(.geosmart-swup-notifications-sequenced-reveal):not(.geosmart-swup-marketing-sequenced-reveal) .page__row_head .page__welcome,
  html.geosmart-swup-session.geosmart-ai-onboarding-nav-exit:not(.geosmart-swup-dashboard-sequenced-reveal):not(.geosmart-swup-applications-sequenced-reveal):not(.geosmart-swup-funding-sequenced-reveal):not(.geosmart-swup-notifications-sequenced-reveal):not(.geosmart-swup-marketing-sequenced-reveal) .page__row_head .page__welcome.h2,
  html.geosmart-swup-session.geosmart-ai-onboarding-nav-exit:not(.geosmart-swup-dashboard-sequenced-reveal):not(.geosmart-swup-applications-sequenced-reveal):not(.geosmart-swup-funding-sequenced-reveal):not(.geosmart-swup-notifications-sequenced-reveal):not(.geosmart-swup-marketing-sequenced-reveal) .page__row_head .page__welcome.page__welcome_sm.h2,
  html.geosmart-swup-session.geosmart-ai-onboarding-nav-exit:not(.geosmart-swup-dashboard-sequenced-reveal):not(.geosmart-swup-applications-sequenced-reveal):not(.geosmart-swup-funding-sequenced-reveal):not(.geosmart-swup-notifications-sequenced-reveal):not(.geosmart-swup-marketing-sequenced-reveal) .page__row_head #applications-page-head-action,
  html.geosmart-swup-session.geosmart-ai-onboarding-nav-exit:not(.geosmart-swup-dashboard-sequenced-reveal):not(.geosmart-swup-applications-sequenced-reveal):not(.geosmart-swup-funding-sequenced-reveal):not(.geosmart-swup-notifications-sequenced-reveal):not(.geosmart-swup-marketing-sequenced-reveal) .page__row_head #applications-page-head-reminders,
  html.geosmart-swup-session.geosmart-ai-onboarding-nav-exit:not(.geosmart-swup-dashboard-sequenced-reveal):not(.geosmart-swup-applications-sequenced-reveal):not(.geosmart-swup-funding-sequenced-reveal):not(.geosmart-swup-notifications-sequenced-reveal):not(.geosmart-swup-marketing-sequenced-reveal) .page__row_head #marketing-hub-pills,
  html.geosmart-swup-session.geosmart-ai-onboarding-nav-exit:not(.geosmart-swup-dashboard-sequenced-reveal):not(.geosmart-swup-applications-sequenced-reveal):not(.geosmart-swup-funding-sequenced-reveal):not(.geosmart-swup-notifications-sequenced-reveal):not(.geosmart-swup-marketing-sequenced-reveal) .notifications-page-layout__pills,
  html.geosmart-ai-onboarding-nav-exit #swup {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

.geosmart-ai.is-mounted {
  display: block;
}

.geosmart-ai.is-visible {
  opacity: 1;
}

.geosmart-ai *,
.geosmart-ai *::before,
.geosmart-ai *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Stage chrome text — hint + return control share size, case, and color
   -------------------------------------------------------------------------- */

.geosmart-ai__close,
.geosmart-ai__hint {
  color: rgba(255, 255, 255, 0.5);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.geosmart-ai__close {
  position: absolute;
  top: var(--gsai-stage-pad);
  right: var(--gsai-stage-pad);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.geosmart-ai__close:hover,
.geosmart-ai__close:focus-visible {
  color: #fff;
  outline: none;
}

.geosmart-ai__close svg {
  width: 12px;
  height: 12px;
}

.geosmart-ai__close-label {
  display: inline;
}

/* --------------------------------------------------------------------------
   Stage: hero (idle + collapsing) and the centered flow card
   -------------------------------------------------------------------------- */

.geosmart-ai__hero {
  position: absolute;
  inset: 0;
}

.geosmart-ai__sphere {
  position: absolute;
  inset: 0;
}

.geosmart-ai__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.geosmart-ai__hint {
  position: absolute;
  right: var(--gsai-stage-pad);
  bottom: var(--gsai-stage-pad);
  left: auto;
  top: auto;
  transform: none;
  text-align: right;
  pointer-events: none;
  /* Matches the HUD's fade so the two cross over as one movement. */
  transition: opacity 0.15s ease-out;
}

.geosmart-ai__hero-copy {
  position: absolute;
  bottom: var(--gsai-stage-pad);
  left: var(--gsai-stage-pad);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
  pointer-events: none;
}

.geosmart-ai.is-hero-in .geosmart-ai__hero-copy {
  opacity: 1;
  transform: translateY(0);
}

.geosmart-ai__headline {
  max-width: 36rem;
  margin: 0 0 32px;
  color: #fff;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.geosmart-ai__hero-cta {
  display: inline-block;
  pointer-events: auto;
}

/* Collapse phase: the hero copy and node labels clear out of the way. */
.geosmart-ai.is-collapsing .geosmart-ai__hero-copy {
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.geosmart-ai.is-collapsing .geosmart-ai__hint {
  opacity: 0;
}

/* The hint only has a job until a node is open, and on phones the HUD lands
   where the hint sits, so the two trade places as the HUD fades in and out. */
.geosmart-ai__sphere_hero.is-hud-open ~ .geosmart-ai__hint {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Sphere overlays: pulsing core, node dots, labels, HUD tooltip
   -------------------------------------------------------------------------- */

.geosmart-ai__core {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.geosmart-ai__core-inner {
  position: relative;
  display: block;
}

.geosmart-ai__core-ping {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  animation: gsaiPing 1.35s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.geosmart-ai__core-dot {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
  animation: gsaiCorePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.geosmart-ai__core.is-final-pulse .geosmart-ai__core-inner {
  animation: gsaiCoreBurst 0.25s ease-out forwards;
}

.geosmart-ai__core.is-final-pulse .geosmart-ai__core-ping {
  display: none;
}

@keyframes gsaiPing {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes gsaiCorePulse {
  50% {
    opacity: 0.5;
  }
}

@keyframes gsaiCoreBurst {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  55% {
    transform: scale(2.6);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.geosmart-ai__node {
  position: absolute;
  z-index: 2;
}

/* Invisible spoke hit target from the node back to the sphere core. */
.geosmart-ai__spoke-hit {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 32px;
  margin-top: -16px;
  transform-origin: 0 50%;
  pointer-events: auto;
  cursor: pointer;
  z-index: 0;
}

.geosmart-ai__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.15s ease, height 0.15s ease, box-shadow 0.15s ease;
  pointer-events: auto;
  cursor: pointer;
  z-index: 1;
}

/* Enlarge the dot's hit area without changing the visible marker. */
.geosmart-ai__dot::before {
  content: "";
  position: absolute;
  inset: -14px;
}

.geosmart-ai__node.is-active .geosmart-ai__dot {
  width: 12px;
  height: 12px;
  box-shadow: 0 0 16px 3px rgba(120, 170, 255, 0.9);
}

.geosmart-ai__label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--gsai-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: color 0.25s ease, opacity 0.25s ease, font-weight 0.25s ease,
    letter-spacing 0.25s ease, text-shadow 0.25s ease;
}

.geosmart-ai__label:hover {
  color: rgba(255, 255, 255, 0.9);
}

.geosmart-ai__node.is-active .geosmart-ai__label {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-shadow: 0 0 12px rgba(120, 170, 255, 1);
}

.geosmart-ai__node_top .geosmart-ai__label {
  transform: translate(-50%, calc(-100% - 16px));
  text-align: center;
}

.geosmart-ai__node_right .geosmart-ai__label {
  transform: translate(16px, -50%);
  text-align: left;
}

.geosmart-ai__node_bottom .geosmart-ai__label {
  transform: translate(-50%, 16px);
  text-align: center;
}

.geosmart-ai__node_left .geosmart-ai__label {
  transform: translate(calc(-100% - 16px), -50%);
  text-align: right;
}

.geosmart-ai.is-collapsing .geosmart-ai__label,
.geosmart-ai.is-collapsing .geosmart-ai__dot,
.geosmart-ai.is-collapsing .geosmart-ai__spoke-hit {
  opacity: 0;
  cursor: default;
  pointer-events: none;
}

/* The processing modal reuses the sphere, minus the interactive labels, so it
   reads as a clean animated field. */
.geosmart-ai__sphere_processing .geosmart-ai__label {
  display: none;
}

.geosmart-ai__hud {
  position: absolute;
  z-index: 20;
  min-width: 240px;
  padding: 20px;
  border: 1px solid rgba(0, 71, 255, 0.5);
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 30px rgba(0, 71, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  /* Content sizes itself; overall box is scaled +20% from original. */
  transform: translate(-50%, -50%) scale(1.14);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  pointer-events: none;
}

.geosmart-ai__hud.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2);
}

.geosmart-ai__hud-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.geosmart-ai__hud-title {
  color: #fff;
  font-family: var(--gsai-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.geosmart-ai__hud-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

.geosmart-ai__hud-badge_blue {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.geosmart-ai__hud-badge_green {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

.geosmart-ai__hud-badge_purple {
  background: rgba(168, 85, 247, 0.2);
  color: #d8b4fe;
}

.geosmart-ai__hud-badge_orange {
  background: rgba(249, 115, 22, 0.2);
  color: #fdba74;
}

.geosmart-ai__hud-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.geosmart-ai__hud-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}

.geosmart-ai__hud-list li + li {
  margin-top: 6px;
}

.geosmart-ai__hud-list li::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gsai-blue);
}

/* --------------------------------------------------------------------------
   Flow: the morphing card
   -------------------------------------------------------------------------- */

.geosmart-ai__flow {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

.geosmart-ai.is-flow .geosmart-ai__hero {
  display: none;
}

.geosmart-ai.is-flow .geosmart-ai__flow {
  display: flex;
}

.geosmart-ai__card {
  position: relative;
  width: 368px;
  height: 368px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(0, 71, 255, 0.4);
  border-radius: 184px;
  background: var(--gsai-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0.5;
  transition: width 0.5s var(--gsai-morph-ease), height 0.5s var(--gsai-morph-ease),
    border-radius 0.5s var(--gsai-morph-ease), opacity 0.5s var(--gsai-morph-ease),
    background-color 0.3s ease, border-color 0.3s ease;
}

.geosmart-ai__card.is-open {
  border-radius: 13px;
  opacity: 1;
}

/* Focused steps (processing, approval, signing) sit on an opaque card. */
.geosmart-ai__card.is-focused {
  border-color: var(--gsai-line);
  background: var(--gsai-card-solid);
}

.geosmart-ai__card.is-scrollable {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Panels are laid out in flow so the card can size itself to the step (and
   scroll when a step outgrows the viewport). Only the outgoing panel is
   pulled out of flow, for the duration of the cross-fade. */
.geosmart-ai__panel {
  position: relative;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.geosmart-ai__panel.is-active {
  display: block;
  opacity: 1;
}

/* Steps with a fixed card footprint fill it and position their own content. */
.geosmart-ai__panel_fill.is-active {
  position: absolute;
  inset: 0;
}

.geosmart-ai__panel.is-leaving {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
}

/* Offscreen height probe used before each morph. Must stay last so it wins
   over .is-active. */
.geosmart-ai__panel.is-measuring {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  height: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Step 1 — permissions
   -------------------------------------------------------------------------- */

.geosmart-ai__step-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 40px;
  text-align: center;
}

.geosmart-ai__scan-badge {
  position: relative;
  margin-bottom: 24px;
}

.geosmart-ai__scan-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: rgba(0, 71, 255, 0.3);
  filter: blur(20px);
}

.geosmart-ai__scan-badge-face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(0, 71, 255, 0.5);
  border-radius: 16px;
  background: rgba(0, 71, 255, 0.1);
  color: var(--gsai-blue-soft);
}

.geosmart-ai__scan-badge-face svg {
  width: 34px;
  height: 34px;
}

.geosmart-ai__title {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.geosmart-ai__title_sm {
  font-size: 20px;
}

.geosmart-ai__lede {
  max-width: 24rem;
  margin: 12px 0 0;
  color: var(--gsai-text-muted);
  font-size: 14px;
  line-height: 1.65;
}

.geosmart-ai__lede em {
  font-style: italic;
  font-weight: inherit;
}

.geosmart-ai__lede_wide {
  max-width: none;
  margin-top: 8px;
}

.geosmart-ai__step-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 32px;
}

/* --------------------------------------------------------------------------
   Buttons — portal CTA geometry (50px / 10px inset / 30px icon box) with
   Smart Financing colours (blue primary, white hero split).
   -------------------------------------------------------------------------- */

.geosmart-ai__btn,
.geosmart-ai__split {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  gap: 12px;
  width: auto;
  min-width: 0;
  max-width: max-content;
  height: 50px;
  padding: 10px 10px 10px 20px;
  border: 0;
  border-radius: 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.geosmart-ai__btn {
  background: var(--gsai-cta);
  color: #ffffff;
}

.geosmart-ai__btn:hover,
.geosmart-ai__btn:focus-visible {
  background: var(--gsai-cta-hover);
  outline: none;
}

.geosmart-ai__split {
  background: #ffffff;
  color: var(--gsai-cta);
}

.geosmart-ai__split:hover,
.geosmart-ai__split:focus-visible {
  background: #f0f4ff;
  outline: none;
}

.geosmart-ai__btn-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  text-align: left;
}

.geosmart-ai__btn-label svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.geosmart-ai__btn-icon {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  overflow: hidden;
}

.geosmart-ai__btn .geosmart-ai__btn-icon {
  background: #ffffff;
  color: var(--gsai-cta);
}

.geosmart-ai__split .geosmart-ai__btn-icon {
  background: var(--gsai-cta);
  color: #ffffff;
}

.geosmart-ai__btn-arrow {
  display: block;
  width: 18px;
  height: 18px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.geosmart-ai__btn-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translate(-140%, 140%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.geosmart-ai__btn:hover .geosmart-ai__btn-arrow,
.geosmart-ai__split:hover .geosmart-ai__btn-arrow {
  transform: translate(140%, -140%);
}

.geosmart-ai__btn:hover .geosmart-ai__btn-icon::after,
.geosmart-ai__split:hover .geosmart-ai__btn-icon::after {
  transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .geosmart-ai__btn-arrow,
  .geosmart-ai__btn-icon::after {
    transition: none;
  }

  .geosmart-ai__btn:hover .geosmart-ai__btn-arrow,
  .geosmart-ai__split:hover .geosmart-ai__btn-arrow {
    transform: none;
  }

  .geosmart-ai__btn-icon::after {
    display: none;
  }
}

.geosmart-ai__btn_block {
  width: 100%;
  max-width: none;
  justify-content: space-between;
}

.geosmart-ai__btn_block .geosmart-ai__btn-label {
  flex: 1 1 auto;
}

.geosmart-ai__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gsai-text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.geosmart-ai__link:hover,
.geosmart-ai__link:focus-visible {
  color: #fff;
  outline: none;
}

.geosmart-ai__link_plain {
  text-decoration: none;
}

.geosmart-ai__ghost-btn {
  height: 50px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #d4d4d4;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
}

.geosmart-ai__ghost-btn:hover,
.geosmart-ai__ghost-btn:focus-visible {
  color: #fff;
  outline: none;
}

.geosmart-ai__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--gsai-text-muted);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.geosmart-ai__icon-btn:hover,
.geosmart-ai__icon-btn:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  outline: none;
}

.geosmart-ai__icon-btn svg {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   Step 2 — document scan simulation
   -------------------------------------------------------------------------- */

.geosmart-ai__scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.geosmart-ai__scan-pic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  filter: blur(3px);
  transform: scale(1.1);
}

.geosmart-ai__scan-shade {
  position: absolute;
  inset: 0;
  background: rgba(10, 11, 13, 0.6);
}

.geosmart-ai__laser {
  position: absolute;
  left: 0;
  right: 0;
  height: 64px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 71, 255, 0.35),
    rgba(120, 170, 255, 0.9),
    rgba(0, 71, 255, 0.35),
    transparent
  );
  animation: gsaiLaser 3.5s ease-in-out infinite;
  pointer-events: none;
}

.geosmart-ai__laser::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gsai-blue-bright);
  box-shadow: 0 0 12px 2px rgba(120, 170, 255, 0.9);
}

@keyframes gsaiLaser {
  0% {
    top: 0;
    transform: translateY(-50%);
  }
  50% {
    top: 100%;
    transform: translateY(-50%);
  }
  100% {
    top: 0;
    transform: translateY(-50%);
  }
}

.geosmart-ai__reticles {
  position: absolute;
  inset: 24px;
  pointer-events: none;
}

.geosmart-ai__reticle {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--gsai-blue-soft);
  border-style: solid;
  border-width: 0;
}

.geosmart-ai__reticle_tl {
  top: 0;
  left: 0;
  border-top-width: 2px;
  border-left-width: 2px;
}

.geosmart-ai__reticle_tr {
  top: 0;
  right: 0;
  border-top-width: 2px;
  border-right-width: 2px;
}

.geosmart-ai__reticle_bl {
  bottom: 0;
  left: 0;
  border-bottom-width: 2px;
  border-left-width: 2px;
}

.geosmart-ai__reticle_br {
  bottom: 0;
  right: 0;
  border-bottom-width: 2px;
  border-right-width: 2px;
}

.geosmart-ai__scan-status {
  position: absolute;
  top: 20px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Centring by transform still leaves this box only the half of the frame to the
     right of left: 50% to size against, so on a phone the label wrapped despite
     having room. Hold the pill to its single line. */
  min-width: max-content;
  padding: 6px 16px;
  border: 1px solid rgba(0, 71, 255, 0.4);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transform: translateX(-50%);
}

.geosmart-ai__scan-status svg {
  width: 13px;
  height: 13px;
  color: var(--gsai-blue-soft);
}

.geosmart-ai__scan-status span {
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.025em;
}

/* --------------------------------------------------------------------------
   Step 3 — review extracted details
   -------------------------------------------------------------------------- */

.geosmart-ai__review {
  display: flex;
  flex-direction: column;
  padding: 48px;
}

.geosmart-ai__groups {
  margin-top: 60px;
}

.geosmart-ai__group + .geosmart-ai__group {
  margin-top: 60px;
}

.geosmart-ai__group-label {
  margin-bottom: 24px;
  color: var(--gsai-blue-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.geosmart-ai__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.geosmart-ai__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.geosmart-ai__field_wide {
  grid-column: span 2;
}

.geosmart-ai__field-label {
  color: var(--gsai-text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.geosmart-ai__field-wrap {
  position: relative;
}

.geosmart-ai__input {
  width: 100%;
  height: 56px;
  padding: 0 44px 0 16px;
  border: 1px solid var(--gsai-line);
  border-radius: 8px;
  background: var(--gsai-well);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.geosmart-ai__input::placeholder {
  color: #737373;
}

.geosmart-ai__input:focus {
  border-color: var(--gsai-blue);
  box-shadow: 0 0 0 1px var(--gsai-blue);
}

select.geosmart-ai__input {
  background: rgba(10, 11, 13, 0.5);
  cursor: pointer;
}

.geosmart-ai__field-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  display: inline-flex;
  color: var(--gsai-text-dim);
  transform: translateY(-50%);
  pointer-events: none;
}

.geosmart-ai__field-icon svg {
  width: 13px;
  height: 13px;
}

.geosmart-ai__field-caret {
  position: absolute;
  top: 50%;
  right: 16px;
  display: inline-flex;
  color: var(--gsai-text-dim);
  transform: translateY(-50%);
  pointer-events: none;
}

.geosmart-ai__field-caret svg {
  width: 18px;
  height: 18px;
}

.geosmart-ai__verified {
  position: absolute;
  top: 50%;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.2);
  color: var(--gsai-green);
  transform: translateY(-50%);
  pointer-events: none;
}

.geosmart-ai__verified svg {
  width: 13px;
  height: 13px;
}

.geosmart-ai__field-helper {
  margin: 8px 0 0;
  color: rgba(96, 165, 250, 0.7);
  font-size: 12px;
}

.geosmart-ai__review-foot {
  margin-top: auto;
  padding-top: 40px;
}

.geosmart-ai__disclaimer {
  margin: 0 0 16px;
  color: var(--gsai-text-dim);
  font-size: 12px;
  line-height: 1.65;
  text-align: center;
}

.geosmart-ai__center-row {
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Processing + approval
   -------------------------------------------------------------------------- */

.geosmart-ai__processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px;
}

.geosmart-ai__processing-sphere {
  position: relative;
  width: 224px;
  height: 224px;
}

.geosmart-ai__status {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  margin-top: 16px;
}

.geosmart-ai__status-text {
  margin: 0;
  color: var(--gsai-text-muted);
  font-size: 16px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.geosmart-ai__status-text.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.geosmart-ai__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px;
  text-align: center;
}

.geosmart-ai__seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.15);
  color: var(--gsai-green);
  transform: scale(0.6);
  opacity: 0;
}

.geosmart-ai__seal svg {
  width: 32px;
  height: 32px;
}

.geosmart-ai__seal_lg {
  width: 80px;
  height: 80px;
}

.geosmart-ai__seal_lg svg {
  width: 44px;
  height: 44px;
}

.geosmart-ai__panel.is-active .geosmart-ai__seal {
  animation: gsaiSealIn 0.4s var(--gsai-morph-ease) 0.1s forwards;
}

@keyframes gsaiSealIn {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.geosmart-ai__result-copy {
  max-width: 20rem;
  margin: 12px 0 0;
  color: var(--gsai-text-muted);
  font-size: 16px;
  line-height: 1.65;
}

.geosmart-ai__result-copy_wide {
  max-width: 24rem;
}

.geosmart-ai__result-copy strong {
  color: #fff;
  font-weight: 600;
}

.geosmart-ai__result-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.geosmart-ai__spinner {
  width: 40px;
  height: 40px;
  color: var(--gsai-blue-soft);
  animation: gsaiSpin 1s linear infinite;
}

@keyframes gsaiSpin {
  to {
    transform: rotate(360deg);
  }
}

.geosmart-ai__executing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px;
  text-align: center;
}

.geosmart-ai__executing p {
  margin: 20px 0 0;
  color: #d4d4d4;
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   Closing documents + signature
   -------------------------------------------------------------------------- */

.geosmart-ai__sign {
  display: flex;
  flex-direction: column;
  padding: 32px;
}

.geosmart-ai__sign-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.geosmart-ai__paper {
  height: 400px;
  padding: 24px;
  overflow-y: auto;
  border-radius: 6px;
  background: #fff;
  color: #171717;
}

.geosmart-ai__paper-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-align: center;
  text-transform: uppercase;
}

.geosmart-ai__paper-meta {
  margin: 4px 0 20px;
  color: #737373;
  font-size: 11px;
  text-align: center;
}

.geosmart-ai__clause {
  margin-bottom: 24px;
}

.geosmart-ai__clause-title {
  margin: 0 0 8px;
  color: #404040;
  font-size: 12px;
  font-weight: 600;
}

.geosmart-ai__redact {
  height: 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: #e5e5e5;
}

.geosmart-ai__clause-copy {
  margin: 8px 0 0;
  color: #525252;
  font-size: 11px;
  line-height: 1.65;
}

.geosmart-ai__sign-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #d4d4d4;
}

.geosmart-ai__sign-note {
  margin: 0 0 12px;
  color: #737373;
  font-size: 11px;
}

.geosmart-ai__sign-cta {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 10px 16px 10px 20px;
  border: 0;
  border-radius: 16px;
  background: #fde047;
  color: #171717;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.geosmart-ai__sign-cta:hover,
.geosmart-ai__sign-cta:focus-visible {
  background: #facc15;
  outline: none;
}

.geosmart-ai__sign-cta-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.geosmart-ai__sign-cta-main svg {
  width: 18px;
  height: 18px;
  animation: gsaiBounce 1s infinite;
}

.geosmart-ai__sign-cta-name {
  color: #404040;
  font-size: 11px;
  font-weight: 500;
}

@keyframes gsaiBounce {
  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.geosmart-ai__pad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 8px;
}

.geosmart-ai__pad-label {
  color: var(--gsai-text-dim);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.geosmart-ai__pad {
  position: relative;
  height: 192px;
  border: 2px dashed #404040;
  border-radius: 8px;
  background: var(--gsai-well);
  overflow: hidden;
}

.geosmart-ai__pad-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.geosmart-ai__pad-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #525252;
  font-size: 14px;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease;
  pointer-events: none;
  user-select: none;
}

.geosmart-ai__pad.is-drawn .geosmart-ai__pad-hint {
  opacity: 0;
}

.geosmart-ai__pad-baseline {
  position: absolute;
  bottom: 32px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.geosmart-ai__pad-baseline span:first-child {
  color: var(--gsai-text-dim);
  font-weight: 600;
}

.geosmart-ai__pad-rule {
  flex: 1;
  height: 1px;
  background: #525252;
}

.geosmart-ai__pad-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .geosmart-ai {
    --gsai-chrome-top: var(--geosmart-chrome-bar-height, 90px);
    --gsai-stage-pad: 40px;
  }

  /* Desktop: hover-node hint sits bottom-right with the shared stage pad;
     Return to Pipeline stays top-right. */
  .geosmart-ai__hint {
    top: auto;
    left: auto;
    right: var(--gsai-stage-pad);
    bottom: var(--gsai-stage-pad);
    transform: none;
    text-align: right;
  }
}

@media (max-width: 1023px) {
  .geosmart-ai {
    --gsai-stage-pad: 24px;
  }

  .geosmart-ai__hero-copy {
    right: var(--gsai-stage-pad);
  }

  /* Below ~1100px a caption set beside its dot can no longer clear the stage
     gutter without collapsing the sphere, so centre the side captions over
     their nodes the way the top one already sits. */
  .geosmart-ai__node_right .geosmart-ai__label,
  .geosmart-ai__node_left .geosmart-ai__label {
    transform: translate(-50%, calc(-100% - 16px));
    text-align: center;
  }

  .geosmart-ai__review {
    padding: 32px;
  }
}

@media (max-width: 767px) {
  .geosmart-ai__flow {
    padding: 0 16px;
  }

  .geosmart-ai__close {
    left: auto;
    right: var(--gsai-stage-pad);
  }

  .geosmart-ai__close-label {
    display: none;
  }

  .geosmart-ai__close svg {
    width: 20px;
    height: 20px;
  }

  .geosmart-ai__hint {
    font-size: 11px;
    letter-spacing: 0.18em;
  }

  /* The bottom-right corner belongs to the headline and CTA on phones, so the
     hint moves up and centres over the sphere. JS replaces the fallback top with
     the exact midpoint between the return control and the top node caption. */
  .geosmart-ai__hint {
    top: calc(var(--gsai-stage-pad) + 32px);
    right: 0;
    bottom: auto;
    left: 0;
    padding: 0 var(--gsai-stage-pad);
    line-height: 1.4;
    text-align: center;
  }

  .geosmart-ai {
    --gsai-stage-pad: 20px;
    /* Read by the sphere layout: the HUD sits at this offset down the stage on
       phones instead of on the sphere core. */
    --gsai-hud-top: 79px;
  }

  .geosmart-ai__hero-copy {
    right: var(--gsai-stage-pad);
  }

  .geosmart-ai__headline {
    margin-bottom: 24px;
  }

  .geosmart-ai__fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .geosmart-ai__field_wide {
    grid-column: auto;
  }

  .geosmart-ai__review {
    padding: 28px 20px;
  }

  /* Read by the card sizing: the review step is shorter on phones and scrolls
     the remainder. */
  .geosmart-ai [data-ai-panel="review"],
  .geosmart-ai [data-ai-panel="sign-review"] {
    --gsai-step-height: 570px;
  }

  .geosmart-ai__groups {
    margin-top: 36px;
  }

  .geosmart-ai__group + .geosmart-ai__group {
    margin-top: 36px;
  }

  .geosmart-ai__review-foot {
    padding-top: 28px;
  }

  .geosmart-ai__step-center {
    padding: 0 24px;
  }

  .geosmart-ai__processing,
  .geosmart-ai__result {
    padding: 36px 24px;
  }

  .geosmart-ai__processing-sphere {
    width: 180px;
    height: 180px;
  }

  .geosmart-ai__sign {
    padding: 22px 18px;
  }

  /* Fill the taller sign-review card so the contract scroll area grows with it. */
  .geosmart-ai [data-ai-panel="sign-review"].is-active {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
  }

  .geosmart-ai [data-ai-panel="sign-review"] .geosmart-ai__sign {
    flex: 1;
    min-height: 0;
  }

  .geosmart-ai__paper {
    height: 300px;
    padding: 18px;
  }

  .geosmart-ai [data-ai-panel="sign-review"] .geosmart-ai__paper {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }

  .geosmart-ai__btn,
  .geosmart-ai__split {
    max-width: 100%;
  }

  .geosmart-ai__step-actions .geosmart-ai__btn {
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }

  /* Every caption is two words, so breaking them over two lines roughly halves
     the horizontal reach the radius has to fit inside the stage gutter — the
     sphere keeps its full phone size instead of shrinking to make room for the
     type. min-content is what forces the break: the box collapses to the wider
     of the two words. Captions scale with the 10% smaller mobile sphere. */
  .geosmart-ai__label {
    width: min-content;
    white-space: normal;
    font-size: 11.7px;
    line-height: 1.3;
    letter-spacing: 0.14em;
  }

  .geosmart-ai__node_top .geosmart-ai__label,
  .geosmart-ai__node_right .geosmart-ai__label,
  .geosmart-ai__node_left .geosmart-ai__label {
    transform: translate(-50%, calc(-100% - 14.4px));
  }

  .geosmart-ai__node_bottom .geosmart-ai__label {
    transform: translate(-50%, 14.4px);
  }

  /* Holding the tracking on tap keeps an active caption from growing past the
     gutter the radius was measured against. */
  .geosmart-ai__node.is-active .geosmart-ai__label {
    letter-spacing: 0.14em;
  }

  /* Wider spoke / node hit targets for thumb taps. */
  .geosmart-ai__spoke-hit {
    height: 44px;
    margin-top: -22px;
  }

  .geosmart-ai__dot::before {
    inset: -18px;
  }

  .geosmart-ai__hud {
    min-width: 0;
    width: min(280px, calc(100vw - 48px));
    padding: 16px;
    /* The phone HUD lands at ~74% of the desktop size. Scaling the whole box keeps
       its proportions and the resting-to-visible pop intact, where trimming
       padding and type would not. */
    transform: translate(-50%, -50%) scale(0.843);
  }

  .geosmart-ai__hud.is-visible {
    transform: translate(-50%, -50%) scale(0.887);
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — hold the composition, drop the movement
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .geosmart-ai,
  .geosmart-ai * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .geosmart-ai__laser {
    display: none;
  }

  .geosmart-ai__seal {
    transform: scale(1);
    opacity: 1;
  }
}