/**
 * =========================================================
 * ideaGeek Brand Mark
 * About Page
 *
 * Animation source:
 * Existing ideaGeek maintenance-page logo animation.
 *
 * JavaScript controls when the animation starts.
 * CSS controls the animation itself.
 * =========================================================
 */


/* =========================================================
   BRAND MARK CONTAINER
   ========================================================= */

.ig-about-brand-mark {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}


/*
 * The SVG scales as a complete unit.
 *
 * We do not alter the SVG's internal geometry.
 */

.ig-about-brand-mark .ig-logo {
    display: block;
    width: 100%;
    height: auto;
}


/* =========================================================
   DEFAULT / STATIC STATE
   ========================================================= */

/*
 * Before JavaScript initializes the animation, the logo
 * remains completely visible.
 *
 * This provides a graceful fallback if JavaScript is
 * unavailable.
 */

.ig-about-brand-mark .ig-piece {
    opacity: 1;
    animation: none;
    transform-box: fill-box;
    transform-origin: center;
}

.ig-about-brand-mark .ig-final-overlay {
    opacity: 1;
    animation: none;
    pointer-events: none;
}


/* =========================================================
   ARMED STATE
   ========================================================= */

/*
 * JavaScript adds this class after confirming that the
 * animation can be controlled.
 *
 * At this point the construction pieces are hidden and
 * waiting for the viewport trigger.
 */

.ig-about-brand-mark--armed .ig-piece {
    opacity: 0;
    animation-fill-mode: both;
    animation-play-state: paused;
}


/* =========================================================
   PANEL ANIMATION
   ========================================================= */

.ig-about-brand-mark--armed .ig-piece:not(#ig-piece-rhombus) {
    animation-name: ig-about-piece-enter;
    animation-duration: 560ms;
    animation-timing-function: cubic-bezier(.22, .75, .25, 1);
}


/*
 * Existing panel sequence.
 *
 * These timings are intentionally unchanged from the
 * working maintenance-page implementation.
 */

.ig-about-brand-mark--armed #ig-piece-panel-01 {
    animation-delay: 800ms;
}

.ig-about-brand-mark--armed #ig-piece-panel-02 {
    animation-delay: 920ms;
}

.ig-about-brand-mark--armed #ig-piece-panel-03 {
    animation-delay: 1040ms;
}

.ig-about-brand-mark--armed #ig-piece-panel-04 {
    animation-delay: 1160ms;
}

.ig-about-brand-mark--armed #ig-piece-panel-05 {
    animation-delay: 1280ms;
}

.ig-about-brand-mark--armed #ig-piece-panel-06 {
    animation-delay: 1400ms;
}

.ig-about-brand-mark--armed #ig-piece-panel-07 {
    animation-delay: 1520ms;
}

.ig-about-brand-mark--armed #ig-piece-panel-08 {
    animation-delay: 1640ms;
}

.ig-about-brand-mark--armed #ig-piece-panel-09 {
    animation-delay: 1760ms;
}

.ig-about-brand-mark--armed #ig-piece-panel-10 {
    animation-delay: 1880ms;
}

.ig-about-brand-mark--armed #ig-piece-panel-11 {
    animation-delay: 2000ms;
}

.ig-about-brand-mark--armed #ig-piece-panel-12 {
    animation-delay: 2120ms;
}

.ig-about-brand-mark--armed #ig-piece-panel-13 {
    animation-delay: 2240ms;
}

.ig-about-brand-mark--armed #ig-piece-panel-14 {
    animation-delay: 2360ms;
}


/* =========================================================
   DETACHED RHOMBUS
   ========================================================= */

.ig-about-brand-mark--armed #ig-piece-rhombus {
    animation-name: ig-about-rhombus-enter;
    animation-duration: 900ms;
    animation-delay: 2720ms;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}


/* =========================================================
   FINAL DUPLICATE OVERLAY
   ========================================================= */

/*
 * The final overlay preserves the completed logo geometry
 * after the construction sequence.
 */

.ig-about-brand-mark--armed .ig-final-overlay {
    opacity: 0;
    animation: ig-about-final-overlay-enter 400ms ease-out 3.65s forwards;
    animation-play-state: paused;
}


/* =========================================================
   VIEWPORT-ACTIVATED STATE
   ========================================================= */

/*
 * JavaScript adds this class once the logo enters the
 * viewport.
 *
 * The animation itself remains entirely CSS-driven.
 */

.ig-about-brand-mark--visible .ig-piece {
    animation-play-state: running;
}

.ig-about-brand-mark--visible .ig-final-overlay {
    animation-play-state: running;
}


/* =========================================================
   PANEL ENTRANCE
   ========================================================= */

@keyframes ig-about-piece-enter {

    0% {
        opacity: 0;
        transform: translateY(3px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   RHOMBUS ENTRANCE
   ========================================================= */

@keyframes ig-about-rhombus-enter {

    0% {
        opacity: 0;
        transform: translateY(-6px);
    }

    65% {
        opacity: 1;
        transform: translateY(0);
    }

    82% {
        transform: translateY(-0.2px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   FINAL OVERLAY ENTRANCE
   ========================================================= */

@keyframes ig-about-final-overlay-enter {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ig-about-brand-mark .ig-piece {
        opacity: 1;
        animation: none;
        transform: none;
    }

    .ig-about-brand-mark .ig-final-overlay {
        opacity: 1;
        animation: none;
    }

}