/* ============================================================
   MS ICON Grid – Styles & Animations v2.0
   ============================================================ */

.ms-icon-grid {
    display: grid;
    width: 100%;
    box-sizing: border-box;
}

.ms-icon-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    --ms-speed: 1200ms;
    --ms-delay: 0ms;
}

/* Force all children to respect the parent text-align */
.ms-icon-box__icon,
.ms-icon-box__title,
.ms-icon-box__desc {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: inherit !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    hyphens: none;
}

.ms-icon-box__icon {
    line-height: 1;
    flex-shrink: 0;
}

.ms-icon-box__icon img,
.ms-icon-box__icon svg {
    display: block;
    max-width: 100%;
}

.ms-icon-box__title {
    margin: 0 0 8px;
    padding: 0;
    line-height: 1.3;
}

.ms-icon-box__desc {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* ── ANIMATION 1: Float (loop) ─────────────────────── */
@keyframes ms-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}
.ms-anim-float {
    animation: ms-float var(--ms-speed) ease-in-out var(--ms-delay) infinite;
}

/* ── ANIMATION 2: Pulse (loop) ─────────────────────── */
@keyframes ms-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.05); }
}
.ms-anim-pulse {
    animation: ms-pulse var(--ms-speed) ease-in-out var(--ms-delay) infinite;
}

/* ── ANIMATION 3: Shimmer (hover) ──────────────────── */
.ms-anim-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,0.5) 50%, transparent 75%);
    background-size: 300% 100%;
    background-position: 200% 0;
    opacity: 0;
    pointer-events: none;
}
.ms-anim-shimmer:hover::after {
    opacity: 1;
    background-position: -100% 0;
    transition: background-position var(--ms-speed) ease, opacity 0.2s;
}

/* ── ANIMATION 4: Tilt 3D (hover) ──────────────────── */
.ms-anim-tilt { transition: transform 0.35s ease; }
.ms-anim-tilt:hover {
    transform: perspective(600px) rotateX(6deg) rotateY(-6deg) scale(1.03);
}

/* ── ANIMATION 5: Bounce In (load) ─────────────────── */
@keyframes ms-bounce-in {
    0%   { opacity: 0; transform: scale(0.4) translateY(30px); }
    55%  { opacity: 1; transform: scale(1.06) translateY(-6px); }
    75%  { transform: scale(0.97) translateY(3px); }
    100% { transform: scale(1) translateY(0); }
}
.ms-anim-bounce-in {
    animation: ms-bounce-in var(--ms-speed) cubic-bezier(0.22,1,0.36,1) var(--ms-delay) both;
}

/* ── ANIMATION 6: Slide Up (load) ──────────────────── */
@keyframes ms-slide-up {
    0%   { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}
.ms-anim-slide-up {
    animation: ms-slide-up var(--ms-speed) cubic-bezier(0.16,1,0.3,1) var(--ms-delay) both;
}

/* ── ANIMATION 7: Glow (hover) ─────────────────────── */
.ms-anim-glow { transition: box-shadow 0.3s ease; }
.ms-anim-glow:hover {
    box-shadow: 0 0 24px 6px rgba(99,102,241,0.35), 0 0 60px 12px rgba(99,102,241,0.12);
}

/* ── ANIMATION 8: Flip (hover) ─────────────────────── */
@keyframes ms-flip {
    0%   { transform: perspective(600px) rotateY(0); }
    100% { transform: perspective(600px) rotateY(360deg); }
}
.ms-anim-flip:hover {
    animation: ms-flip var(--ms-speed) ease;
}

/* ── ANIMATION 9: Shake (hover) ────────────────────── */
@keyframes ms-shake {
    0%,100% { transform: translateX(0); }
    15%      { transform: translateX(-6px) rotate(-1deg); }
    30%      { transform: translateX(5px) rotate(1deg); }
    45%      { transform: translateX(-4px); }
    60%      { transform: translateX(3px); }
    75%      { transform: translateX(-2px); }
    90%      { transform: translateX(1px); }
}
.ms-anim-shake:hover {
    animation: ms-shake var(--ms-speed) ease;
}

/* ── ANIMATION 10: Zoom (hover) ────────────────────── */
.ms-anim-zoom { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.ms-anim-zoom:hover { transform: scale(1.07); }

/* ── Icon micro-bounce on hover ─────────────────────── */
@keyframes ms-icon-pop {
    0%,100% { transform: translateY(0) scale(1); }
    40%      { transform: translateY(-6px) scale(1.12); }
    70%      { transform: translateY(-2px) scale(1.05); }
}
.ms-icon-box:not(.ms-anim-float):not(.ms-anim-pulse):not(.ms-anim-flip):not(.ms-anim-shake):hover .ms-icon-box__icon {
    animation: ms-icon-pop 0.5s ease;
}