/* ==========================================
   PROFESIONALES PAGE CSS
   Page-unique styles only
   ========================================== */

/* Text gradient utility (iOS-compatible) */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Typing dots variant (shared uses .typing-dot, page uses .dot) */
.dot {
    width: 6px;
    height: 6px;
    background-color: #9ca3af;
    border-radius: 50%;
    display: inline-block;
    animation: typing 1.4s infinite ease-in-out both;
}
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }

/* ==========================================
   TYPEWRITER EFFECT - PREVENT LAYOUT SHIFT
   Keep height fixed while text changes length
   ========================================== */

/* Desktop: normal behavior */
#typewriter-section > p {
    line-height: inherit;
}

/* Mobile: prevent layout shift */
@media (max-width: 768px) {
    #typewriter-section {
        /* Prevent section from shrinking/expanding on mobile */
        min-height: 200px;
        /* iOS fix: ensure background renders */
        background-color: white;
        -webkit-appearance: none;
        appearance: none;
        /* Force hardware acceleration on iOS */
        -webkit-transform: translateZ(0);
        transform: translateZ(0); /* Force hardware acceleration on non-iOS browsers */
        will-change: contents;
    }

    #typewriter-section > p {
        /* Fixed line-height to prevent vertical shift when word wraps */
        line-height: 1.3;
        /* Minimum height to accommodate all possible text configurations */
        min-height: 7em;
        /* Prevent vertical centering shift */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

#typewriter-word {
    display: inline-block;
    /* min-width prevents collapse when empty */
    min-width: 0.5em;
    /* Prevent word wrapping within the animated text */
    white-space: nowrap;
    /* Prevent visual glitches from text reflow */
    vertical-align: baseline;
    /* Safari gradient — must be on same element as text content */
    background: linear-gradient(to right, #2563eb, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ==========================================
   MOBILE ANIMATION CONTAINERS
   Show animations on mobile below text
   ========================================== */
@media (max-width: 1023px) {
    /* Animation containers - show on mobile (only .anim-col, not header) */
    .anim-col.hidden.lg\:flex {
        display: flex !important;
        position: relative !important;
        width: 100% !important;
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
        padding: 0 !important;
        margin-top: 1.5rem !important;
        transform: scale(0.55) !important;
        transform-origin: top center !important;
        overflow: visible !important;
    }
    
    /* Remove sticky on mobile */
    .anim-col.sticky {
        position: relative !important;
    }
    
    /* Allow animation containers to overflow */
    .embedded-anim-container {
        overflow: visible !important;
    }
    
    .stage-scaler {
        overflow: visible !important;
    }
}