/* ============================================
   CERT CLUSTER — shared component
   A central SafeContractor badge with five satellite cert circles
   evenly distributed on a 5-point clock face. Used on the safety
   page hero and the home page hero.
   ============================================ */

.cert-cluster {
    position: relative;
    /* Responsive square — fills parent width up to 600px, height
       follows via aspect-ratio so descendants using percentage
       coords resolve against the actual rendered size. */
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1 / 1;
    will-change: transform;
}

/* Center badge — Safe Contractor (largest).
   All position/size values converted from fixed 600px-grid pixels
   to percentages of the cluster, so the cluster can scale to any
   width and the center + satellites stay correctly positioned. */
.cert-cluster__center {
    position: absolute;
    top: 31.67%;
    left: 31.67%;
    width: 36.67%;
    height: 36.67%;
    padding: 4.67%;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.5px solid var(--color-gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    z-index: 2;
    box-shadow: 0 6px 20px rgba(12, 27, 42, 0.12), 0 2px 6px rgba(12, 27, 42, 0.08);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.cert-cluster__center:hover {
    transform: scale(1.06);
    box-shadow: 0 12px 36px rgba(50, 48, 47, 0.22), 0 4px 10px rgba(12, 27, 42, 0.12);
}

.cert-cluster__center-logo {
    width: 72%;
    height: auto;
    max-height: 72%;
    object-fit: contain;
}

/* Satellite circles */
.cert-cluster__satellite {
    position: absolute;
    padding: 3%;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.5px solid var(--color-gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    box-shadow: 0 6px 20px rgba(12, 27, 42, 0.12), 0 2px 6px rgba(12, 27, 42, 0.08);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.cert-cluster__satellite:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 36px rgba(12, 27, 42, 0.22), 0 4px 10px rgba(12, 27, 42, 0.12);
}

.cert-cluster__satellite-logo {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

/* Five satellites evenly distributed at radius 200 around (300, 300).
   Order: ISN, Avetta, POST, eRail, ComplyWorks (clockwise from 12).
   All values converted from the original 600px-grid pixels to
   percentages of the cluster width/height so the satellites scale
   with the cluster at any parent width. */
.cert-cluster__satellite--isn         { top: 3%;     left: 36.33%; width: 27.5%;  height: 27.5%; }
.cert-cluster__satellite--avetta      { top: 26.33%; left: 68.33%; width: 26.67%; height: 26.67%; }
.cert-cluster__satellite--post        { top: 64.5%;  left: 57.17%; width: 25%;    height: 25%; }
.cert-cluster__satellite--erail       { top: 64.17%; left: 17.5%;  width: 25.83%; height: 25.83%; }
.cert-cluster__satellite--complyworks { top: 27.17%; left: 5.83%;  width: 25%;    height: 25%; }

/* ---- Compact variant — used on the home hero where space is tighter.
   Same percentage system; only the max-width changes. ---- */
.cert-cluster--compact {
    max-width: 480px;
}

/* ===== Orbit animation (all viewports) =====
   The satellites slowly orbit the SafeContractor center while each
   individual cert logo stays upright. Mechanism is two synced
   linear animations:
     (1) the .cert-cluster__satellites wrapper rotates 360° around
         the cluster's center — this carries each absolutely-
         positioned satellite (top/left coords) around the orbit;
     (2) each .cert-cluster__satellite counter-rotates -360° around
         its own center at the same rate — so the satellite's
         orientation never changes even though its position is being
         circled.
   We animate the independent `rotate:` CSS property (not
   `transform: rotate(...)`) so the existing hover scale on
   satellites still composes cleanly. The wrapper is given
   position: absolute + inset: 0 so its rotation origin lines up
   with the cluster's geometric center (300, 300 in the 600×600
   box) regardless of viewport size.
   Applies to the regular cluster (safety page hero); the
   .cert-cluster--compact variant on the homepage is excluded so
   that hero stays still. */
.cert-cluster:not(.cert-cluster--compact) .cert-cluster__satellites {
    position: absolute;
    inset: 0;
    animation: cert-cluster-orbit 28s linear infinite;
    will-change: rotate;
}

.cert-cluster:not(.cert-cluster--compact) .cert-cluster__satellite {
    animation: cert-cluster-orbit-counter 28s linear infinite;
    will-change: rotate;
}

/* ---- Responsive scaling ----
   No longer needed: the cluster's width/height/aspect-ratio +
   percentage-based satellite positions scale the whole component
   fluidly with its parent. Old transform: scale + negative
   margin-bottom dance removed. */

/* Keyframes live outside the media queries so they're defined once
   and referenced by the @media-scoped animation declarations above.
   Linear timing keeps the orbit physically correct (constant angular
   velocity); 28s for a full revolution is gentle background motion,
   not distracting. */
@keyframes cert-cluster-orbit {
    from { rotate: 0deg; }
    to   { rotate: 360deg; }
}

@keyframes cert-cluster-orbit-counter {
    from { rotate: 0deg; }
    to   { rotate: -360deg; }
}

/* Respect reduced-motion preference — disable the orbit entirely
   for users who've opted out of background animation. */
@media (prefers-reduced-motion: reduce) {
    .cert-cluster__satellites,
    .cert-cluster__satellite {
        animation: none !important;
    }
}