/**
 * SIMS Component Library
 * Reusable SIMS-styled component classes for MiroTalk SFU.
 *
 * Depends on: sims-tokens.css (must be loaded first)
 * All values use var(--token, fallback) for graceful degradation.
 *
 * Requirements: 9.1, 9.2, 9.3, 9.4, 9.5, 9.6, 9.7, 9.8
 */

/* =========================================================
   Keyframe Definitions
   ========================================================= */

/**
 * fadeInUp — element fades in while moving upward
 * Used by: .sims-animate-fadeInUp
 * Validates: Requirement 9.6
 */
@keyframes sims-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/**
 * fadeInRight — element fades in while moving from left to right
 * Used by: .sims-animate-fadeInRight
 * Validates: Requirement 9.6
 */
@keyframes sims-fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/**
 * pulse — element gently scales up and back
 * Used by: .sims-animate-pulse
 * Validates: Requirement 9.6
 */
@keyframes sims-pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/**
 * shine — shimmer/highlight sweep effect
 * Used by: .sims-animate-shine
 * Validates: Requirement 9.6
 */
@keyframes sims-shine {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* =========================================================
   Primary Button — .sims-btn-primary
   SIMS CTA button: amber background, sharp corners, Poppins 600
   Validates: Requirement 9.1, 9.7
   ========================================================= */

.sims-btn-primary {
    display: inline-block;
    background: var(--c-amber, #faa31b);
    color: var(--c-white, #ffffff);
    padding: 1vw 2.5vw;
    font-family: var(--font-base, 'Poppins', sans-serif);
    font-size: var(--f-16, 0.9vw);
    font-weight: 600;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
    transition: background 0.3s ease, color 0.3s ease;
    outline: none;
}

.sims-btn-primary:hover,
.sims-btn-primary:focus-visible {
    background: var(--c-primary, #044e27);
    color: var(--c-white, #ffffff);
}

.sims-btn-primary:focus-visible {
    outline: 2px solid var(--c-primary, #044e27);
    outline-offset: 2px;
}

/* =========================================================
   Secondary Button — .sims-btn-secondary
   SIMS outline button: white background, green border
   Validates: Requirement 9.2, 9.7
   ========================================================= */

.sims-btn-secondary {
    display: inline-block;
    background: var(--c-white, #ffffff);
    color: var(--c-primary, #044e27);
    padding: 1vw 2.5vw;
    font-family: var(--font-base, 'Poppins', sans-serif);
    font-size: var(--f-16, 0.9vw);
    font-weight: 600;
    border: 1px solid var(--c-primary, #044e27);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    outline: none;
}

.sims-btn-secondary:hover,
.sims-btn-secondary:focus-visible {
    background: var(--c-primary, #044e27);
    color: var(--c-white, #ffffff);
    border-color: var(--c-primary, #044e27);
}

.sims-btn-secondary:focus-visible {
    outline: 2px solid var(--c-primary, #044e27);
    outline-offset: 2px;
}

/* =========================================================
   Card — .sims-card
   SIMS card: white background, 8px radius, hover lift effect
   Validates: Requirement 9.3, 9.7
   ========================================================= */

.sims-card {
    background: var(--c-white, #ffffff);
    box-shadow: 0 5px 0.78vw rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sims-card:hover {
    transform: translateY(-0.26vw);
    box-shadow: 0 10px 1.56vw rgba(0, 0, 0, 0.15);
}

/* =========================================================
   Tag / Badge — .sims-tag
   SIMS pill badge: green tint background, 20px radius
   Validates: Requirement 9.4, 9.7
   ========================================================= */

.sims-tag {
    display: inline-block;
    background: rgba(4, 78, 39, 0.1);
    color: var(--c-primary, #044e27);
    border-radius: 20px;
    padding: 0.4vw 1vw;
    font-family: var(--font-base, 'Poppins', sans-serif);
    font-size: var(--f-14, 0.8vw);
    font-weight: 500;
    line-height: 1.4;
    cursor: default;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.sims-tag:hover {
    background: var(--c-primary, #044e27);
    color: var(--c-white, #ffffff);
    transform: scale(1.05);
}

/* =========================================================
   Form Input — .sims-input
   SIMS input field: 1px border, green focus, Poppins font
   Validates: Requirement 9.5, 9.7
   ========================================================= */

.sims-input {
    display: block;
    width: 100%;
    height: 3.5vw;
    padding: 0 1vw;
    font-family: var(--font-base, 'Poppins', sans-serif);
    font-size: var(--f-16, 0.9vw);
    color: var(--c-body-text, #333333);
    background: var(--c-white, #ffffff);
    border: 1px solid #dddddd;
    border-radius: 0.21vw;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.sims-input::placeholder {
    color: #999999;
}

.sims-input:focus {
    border-color: var(--c-primary, #044e27);
    box-shadow: 0 0 0 2px rgba(4, 78, 39, 0.15);
}

.sims-input:focus-visible {
    outline: 2px solid var(--c-primary, #044e27);
    outline-offset: 2px;
}

/* =========================================================
   Animation Classes
   Apply keyframe animations to any element
   Validates: Requirement 9.6
   ========================================================= */

/**
 * .sims-animate-fadeInUp
 * Fades element in from below (opacity 0 + translateY(20px) → opacity 1 + translateY(0))
 */
.sims-animate-fadeInUp {
    animation: sims-fadeInUp 0.6s ease forwards;
}

/**
 * .sims-animate-fadeInRight
 * Fades element in from the left (opacity 0 + translateX(-20px) → opacity 1 + translateX(0))
 */
.sims-animate-fadeInRight {
    animation: sims-fadeInRight 0.6s ease forwards;
}

/**
 * .sims-animate-pulse
 * Gently pulses element scale (scale(1) → scale(1.1) → scale(1)), loops infinitely
 */
.sims-animate-pulse {
    animation: sims-pulse 1.5s ease-in-out infinite;
}

/**
 * .sims-animate-shine
 * Shimmer/highlight sweep effect using gradient background
 */
.sims-animate-shine {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
    );
    background-size: 200% auto;
    animation: sims-shine 1.8s linear infinite;
}

/* =========================================================
   Responsive overrides — @media (max-width: 992px)
   Adjust vw-based values to readable sizes on mobile
   ========================================================= */

@media (max-width: 992px) {
    .sims-btn-primary,
    .sims-btn-secondary {
        padding: 12px 24px;
        font-size: 14px;
    }

    .sims-tag {
        padding: 4px 12px;
        font-size: 12px;
    }

    .sims-input {
        height: 48px;
        padding: 0 12px;
        font-size: 16px; /* minimum 16px to prevent iOS auto-zoom */
        border-radius: 3px;
    }

    .sims-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }
}