@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.aafe-orbit-image-showcase-wrapper h1,
.aafe-orbit-image-showcase-wrapper h2,
.aafe-orbit-image-showcase-wrapper h3,
.aafe-orbit-image-showcase-wrapper h4,
.aafe-orbit-image-showcase-wrapper h5,
.aafe-orbit-image-showcase-wrapper h6 { font-family: 'Sora', sans-serif; }

.aafe-orbit-image-showcase-wrapper p,
.aafe-orbit-image-showcase-wrapper span,
.aafe-orbit-image-showcase-wrapper a,
.aafe-orbit-image-showcase-wrapper li,
.aafe-orbit-image-showcase__desc,
.aafe-orbit-image-showcase__feature-desc { font-family: 'Inter', sans-serif; }

/* ============================================================
   WRAPPER
   ============================================================ */
.aafe-orbit-image-showcase-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    background: #ffffff;
    box-sizing: border-box;

    /* CSS VARIABLES */
    --aafe-arc-radius:   450px;
    --aafe-cy-pct:       90%;
    --aafe-card-w:       160px;
    --aafe-card-h:       160px;
    --aafe-do-scale:     0;
    --aafe-scale-min:    0.6;
    --aafe-do-tilt:      0;
    --aafe-transition:   350ms;
    --aafe-hover-scale:  1.08;
    --aafe-rotate-delta: 0deg;
}

/* ============================================================
   ARC STAGE
   ============================================================ */
.aafe-orbit-image-showcase__arc-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ============================================================
   CARD WRAPPER — CSS-calc responsive positioning
   ============================================================ */
.aafe-orbit-image-showcase__card-wrap {
    position: absolute;
    pointer-events: auto;
    transform-origin: center center;
    will-change: transform;

    /* Active breakpoint vars (overridden by media queries) */
    --card-cos:  var(--c-cos-d);
    --card-sin:  var(--c-sin-d);
    --card-tilt: var(--c-tilt-d);
    --card-dist: var(--c-dist-d);
    --card-z:    var(--c-z-d);

    left: calc(50% + (var(--aafe-arc-radius) * var(--card-cos)) - (var(--aafe-card-w) / 2));
    top:  calc(var(--aafe-cy-pct) + (var(--aafe-arc-radius) * var(--card-sin)) - (var(--aafe-card-h) / 2));
    z-index: var(--card-z);

    --final-scale: calc(1 - ((1 - var(--aafe-scale-min)) * var(--card-dist) * var(--aafe-do-scale)));

    transform: rotate(calc(var(--card-tilt) * var(--aafe-do-tilt))) scale(var(--final-scale));
    transition: transform var(--aafe-transition) cubic-bezier(.25,.8,.25,1),
                box-shadow var(--aafe-transition) ease;
}

/* ============================================================
   CARD
   ============================================================ */
.aafe-orbit-image-showcase__card {
    width:         var(--aafe-card-w);
    height:        var(--aafe-card-h);
    border-radius: 22px;
    overflow:      hidden;
    background:    #e8e8e8;
    box-shadow:    0 6px 24px rgba(0,0,0,0.10);
    position:      relative;
    transition:    transform var(--aafe-transition) cubic-bezier(.25,.8,.25,1),
                   box-shadow var(--aafe-transition) ease;
    cursor:        default;
}



.aafe-orbit-image-showcase__card img {
    width:          100%;
    height:         100%;
    object-fit:     cover;
    display:        block;
    pointer-events: none;
    border-radius:  inherit;

    /* Image filter CSS vars */
    --aafe-filter-grayscale:  0%;
    --aafe-filter-brightness: 100%;
    --aafe-filter-blur:       0px;
    filter: grayscale(var(--aafe-filter-grayscale))
            brightness(var(--aafe-filter-brightness))
            blur(var(--aafe-filter-blur));
    transition: filter var(--aafe-transition) ease;
}





/* ============================================================
   ENTRANCE ANIMATIONS
   ============================================================ */
.aafe-entrance-fadeInUp   .aafe-orbit-image-showcase__main { animation: aafe-fadeInUp   var(--aafe-entrance-duration, 800ms) ease both; }
.aafe-entrance-fadeInDown .aafe-orbit-image-showcase__main { animation: aafe-fadeInDown var(--aafe-entrance-duration, 800ms) ease both; }
.aafe-entrance-fadeInLeft .aafe-orbit-image-showcase__main { animation: aafe-fadeInLeft var(--aafe-entrance-duration, 800ms) ease both; }
.aafe-entrance-fadeInRight.aafe-orbit-image-showcase__main { animation: aafe-fadeInRight var(--aafe-entrance-duration, 800ms) ease both; }
.aafe-entrance-zoomIn     .aafe-orbit-image-showcase__main { animation: aafe-zoomIn    var(--aafe-entrance-duration, 800ms) ease both; }

@keyframes aafe-fadeInUp    { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes aafe-fadeInDown  { from { opacity:0; transform:translateY(-40px);}to { opacity:1; transform:translateY(0); } }
@keyframes aafe-fadeInLeft  { from { opacity:0; transform:translateX(-50px);}to { opacity:1; transform:translateX(0);} }
@keyframes aafe-fadeInRight { from { opacity:0; transform:translateX(50px); }to { opacity:1; transform:translateX(0);} }
@keyframes aafe-zoomIn      { from { opacity:0; transform:scale(0.8);       }to { opacity:1; transform:scale(1);      } }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.aafe-orbit-image-showcase__main {
    position: relative;
    z-index:  20;
    width:    100%;
    display:  flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
}

.aafe-orbit-image-showcase__main-inner {
    max-width: 760px;
    margin:    0 auto;
    padding:   0 20px 52px;
}

/* ============================================================
   HEADING
   ============================================================ */
.aafe-orbit-image-showcase__heading {
    font-size:      52px;
    font-weight:    500;
    line-height:    1.12;
    color:          #111111;
    letter-spacing: -0.025em;
    margin:         0 0 14px;
}

/* ============================================================
   DESCRIPTION
   ============================================================ */
.aafe-orbit-image-showcase__desc {
    font-size:   15px;
    font-weight: 400;
    line-height: 1.65;
    color:       #777777;
    margin:      0 0 28px;
}

/* ============================================================
   BUTTON GROUP
   ============================================================ */
.aafe-orbit-image-showcase__btn-group {
    display:     inline-flex;
    align-items: center;
    gap:         12px;
    flex-wrap:   wrap;
    justify-content: center;
}

/* ── Primary Button ── */
.aafe-orbit-image-showcase__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    background-color: #1a1a24;
    color:            #ffffff;
    padding:          14px 30px;
    border-radius:    50px;
    font-size:        14px;
    font-weight:      500;
    font-family:     'Inter', sans-serif;
    text-decoration:  none;
    transition:       all var(--aafe-transition) ease;
    white-space:      nowrap;
    border:           2px solid transparent;
}
.aafe-orbit-image-showcase__btn:hover {
    background-color: #000000;
    color:            #ffffff;
}

/* ── Secondary Button ── */
.aafe-orbit-image-showcase__btn2 {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    background-color: transparent;
    color:            #1a1a24;
    padding:          13px 28px;
    border-radius:    50px;
    font-size:        14px;
    font-weight:      500;
    font-family:     'Inter', sans-serif;
    text-decoration:  none;
    transition:       all var(--aafe-transition) ease;
    white-space:      nowrap;
    border:           2px solid #1a1a24;
}
.aafe-orbit-image-showcase__btn2:hover {
    background-color: #1a1a24;
    color:            #ffffff;
}

/* Icon Wraps */
.aafe-orbit-image-showcase__btn-text,
.aafe-orbit-image-showcase__btn2-text { line-height: 1; }

.aafe-orbit-image-showcase__icon-wrap,
.aafe-orbit-image-showcase__icon-wrap2 {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    line-height:     1;
    font-size:       13px;
}
.aafe-orbit-image-showcase__icon-wrap svg,
.aafe-orbit-image-showcase__icon-wrap2 svg {
    width:  1em;
    height: 1em;
    fill:   currentColor;
}
.aafe-orbit-image-showcase__icon-wrap i,
.aafe-orbit-image-showcase__icon-wrap2 i { font-size: 1em; }

/* ============================================================
   FEATURES GRID
   ============================================================ */
.aafe-orbit-image-showcase__features {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    width:                 100%;
    max-width:             860px;
    margin:                0 auto;
}

.aafe-orbit-image-showcase__feature {
    text-align:   center;
    padding:      0 24px;
    border-right: 1px solid #e5e7eb;
    display:      flex;
    flex-direction: column;
    align-items:  center;
}
.aafe-orbit-image-showcase__feature:last-child { border-right: none; }

/* Feature Icon Wrap */
.aafe-orbit-image-showcase__feature-icon-wrap {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    border-radius:   12px;
    margin-bottom:   12px;
    background:      transparent;
}

.aafe-orbit-image-showcase__feature-icon {
    font-size:  28px;
    color:      #1a1a24;
    line-height: 1;
    display:    inline-flex;
}
.aafe-orbit-image-showcase__feature-icon svg {
    width:  1em;
    height: 1em;
    fill:   currentColor;
}
.aafe-orbit-image-showcase__feature-icon i { font-size: 1em; }

/* Feature Title */
.aafe-orbit-image-showcase__feature-title {
    font-family:  'Sora', sans-serif;
    font-size:    17px;
    font-weight:  600;
    color:        #111111;
    margin:       0 0 8px;
    line-height:  1.3;
}

/* Feature Description */
.aafe-orbit-image-showcase__feature-desc {
    font-size:   13px;
    color:       #888888;
    line-height: 1.55;
    margin:      0;
}



/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media (max-width: 1024px) {
    .aafe-orbit-image-showcase__card-wrap {
        --card-cos:  var(--c-cos-t);
        --card-sin:  var(--c-sin-t);
        --card-tilt: var(--c-tilt-t);
        --card-dist: var(--c-dist-t);
        --card-z:    var(--c-z-t);
    }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 767px) {
    .aafe-orbit-image-showcase__card-wrap {
        --card-cos:  var(--c-cos-m);
        --card-sin:  var(--c-sin-m);
        --card-tilt: var(--c-tilt-m);
        --card-dist: var(--c-dist-m);
        --card-z:    var(--c-z-m);
    }
    .aafe-orbit-image-showcase__main-inner { padding-bottom: 36px; }
}