@import url(https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap);
/* Geist font — loaded globally so it's available inside Shadow DOM */


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Fleet Compatibility Wheel ──────────────────────────────────────────────── */

:host,
.cw-component {
  /* Shared base tokens */
  --base-win-bg: #ffffff;
}

/* ─── Outer responsive wrapper ───────────────────────────────────────────────── */
/* Fills 100% of the Webflow container width; aspect-ratio keeps it square.
   The inner cw-component is fixed at 512×512 and scaled down to fit via JS. */
.cw-outer {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  overflow: visible;
}

.cw-component {
  position: relative;
  flex-shrink: 0;
  font-family: 'Geist', sans-serif;
  /* overflow: visible so satellites at edge are never clipped */
  overflow: visible;
}

/* ─── Spokes SVG ─────────────────────────────────────────────────────────────── */
.cw-spokes-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.cw-spoke {
  stroke: rgba(196, 214, 228, 0.70);
  stroke-width: 1;
  fill: none;
}

.cw-spoke--diag {
  stroke: rgba(18, 135, 185, 0.28);
}

/* ─── Satellite circles ──────────────────────────────────────────────────────── */
.cw-sat {
  position: absolute;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 6px;
  box-sizing: border-box;
  cursor: default;
  /* Transition for hover scale */
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease;
  /* Default: hidden until animated in */
  opacity: 0;
  will-change: transform, opacity;
}

/* Extra bottom padding pushes icon+label upward */
.cw-sat--push-up {
  padding-bottom: 20px;
}

.cw-sat--push-up-sm {
  padding-bottom: 10px;
}


.cw-sat:hover {
  transform: scale(1.12) !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.12),
    0 2px 4px  rgba(0, 0, 0, 0.08);
}

.cw-sat-icon {
  display: block;
  /* Normalize all SVGs to the same visual scale regardless of natural pixel dimensions.
     All icon+label SVGs are 68px tall. max-height: 56px keeps SharePoint (90×68, the widest)
     height-constrained at 74.1px wide — just under the 75px limit — so every SVG scales
     by the same factor (56/68 = 0.824) and all text labels appear identically sized.
     If max-height were 57px+, SharePoint would hit max-width first (different scale). */
  max-height: 56px;
  max-width: 75px;
  width: auto;
  height: auto;
  flex-shrink: 0;
}

.cw-sat-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  color: #1a1a2e;
  letter-spacing: 0.02px;
  white-space: nowrap;
  line-height: 1.1;
  text-align: center;
}

/* ─── Center circle ──────────────────────────────────────────────────────────── */
.cw-center {
  position: absolute;
  width: 185px;
  height: 185px;
  border-radius: 50%;
  /* White → light teal gradient (top → bottom) */
  background: linear-gradient(to bottom, #ffffff 0%, #f0fdfa 100%);
  border: 2px solid #e2e8f0;
  box-shadow:
    0px  1px  2px rgba(99, 99, 99, 0.10),
    -1px 4px  4px rgba(99, 99, 99, 0.09),
    -1px 9px  6px rgba(99, 99, 99, 0.05),
    -2px 17px 7px rgba(99, 99, 99, 0.01),
    -4px 26px 7px rgba(99, 99, 99, 0.00);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 3;
  /* Default: hidden until animated in */
  opacity: 0;
  will-change: transform, opacity;
}

.cw-center-inner {
  width: 167px;
  height: 167px;
  border-radius: 50%;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(to bottom, #1287b9 0%, #63b249 100%) border-box;
  border: 4px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.cw-hoai-logo {
  display: block;
  object-fit: contain;
}

.cw-fleet-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #000000;
  letter-spacing: 2.25px;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

/* ─── Particle dots ──────────────────────────────────────────────────────────── */

/* Dots travel from cx/cy (start) by --cw-dot-dx/dy (delta) toward the satellite.
   Uses transform:translate instead of offset-path — works in all environments
   including Webflow's shadow DOM where offset-path is unreliable. */
@keyframes cw-dot-flow {
  0%   { transform: translate(0px, 0px);                                   opacity: 0;    }
  8%   { transform: translate(calc(var(--cw-dot-dx)*0.08), calc(var(--cw-dot-dy)*0.08)); opacity: 0.85; }
  82%  { transform: translate(calc(var(--cw-dot-dx)*0.82), calc(var(--cw-dot-dy)*0.82)); opacity: 0.85; }
  100% { transform: translate(var(--cw-dot-dx), var(--cw-dot-dy));         opacity: 0;    }
}

.cw-dot {
  /* Hidden by default — animation-fill-mode: both keeps first keyframe (opacity:0)
     applied during the delay period so dots never flash visible on load */
  opacity: 0;
  animation: cw-dot-flow 1.8s linear infinite both;
  /* Paused by default — states below switch it to running */
  animation-play-state: paused;
  pointer-events: none;
}

/* Dots run whenever the wheel is visible and animating */
.cw-state-animate .cw-dot,
.cw-state-done    .cw-dot,
.cw-state-instant .cw-dot {
  animation-play-state: running;
}

/* ─── Animation keyframes ────────────────────────────────────────────────────── */

/* Center: fades in from slightly below */
@keyframes cw-center-in {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0)   scale(1);
  }
}

/* Satellites: emerge from center and fly to their orbit positions */
@keyframes cw-sat-in {
  from {
    opacity: 0;
    transform: translate(var(--cw-ox), var(--cw-oy)) scale(0.25);
  }
  65% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

/* Spokes: draw in from center outward */
@keyframes cw-spoke-draw {
  from { stroke-dashoffset: 195; }
  to   { stroke-dashoffset: 0;   }
}

/* ─── State: hidden (default before in-view) ─────────────────────────────────── */
.cw-state-hidden .cw-center {
  opacity: 0;
  transform: translateY(22px) scale(0.92);
}
.cw-state-hidden .cw-sat {
  opacity: 0;
  transform: translate(var(--cw-ox), var(--cw-oy)) scale(0.25);
}

/* ─── State: animate (in-view, not paused) ───────────────────────────────────── */
.cw-state-animate .cw-center {
  animation: cw-center-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.cw-state-animate .cw-sat {
  animation: cw-sat-in 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) var(--cw-delay) both;
}

.cw-state-animate .cw-spoke {
  animation: cw-spoke-draw 0.38s ease var(--cw-spoke-delay) both;
}

/* ─── State: done (entrance finished — no active animation, hover transitions work) ── */
.cw-state-done .cw-center {
  opacity: 1;
  transform: none;
}

.cw-state-done .cw-sat {
  opacity: 1;
  transform: none;
}

.cw-state-done .cw-spoke {
  stroke-dashoffset: 0;
}

/* ─── State: instant (paused — show final state immediately) ─────────────────── */
.cw-state-instant .cw-center {
  opacity: 1 !important;
  transform: none !important;
}

.cw-state-instant .cw-sat {
  opacity: 1 !important;
  transform: none !important;
}

.cw-state-instant .cw-spoke {
  stroke-dashoffset: 0 !important;
}