/**
 * ExpertOnCampus - Main Stylesheet
 * Custom CSS for the ExpertOnCampus landing page
 */

/* ============================================
   ANIMATIONS
   ============================================ */

/* Slide up animation */
@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slide-up 0.8s ease-out forwards;
    opacity: 0;
}

/* Float animation for phone mockups */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Floating animations for hero background */
@keyframes float-slow {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

@keyframes float-medium {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(-15px) translateX(10px);
    }
}

@keyframes float-fast {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-25px) scale(1.05);
    }
}

/* Team image pulse animation */
@keyframes pulse-border {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(1, 183, 194, 0.4);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(1, 183, 194, 0);
    }
}

/* ============================================
   COMPONENTS
   ============================================ */

/* iPhone Frame */
.iphone-frame {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.iphone-frame:hover {
    animation: float 3s ease-in-out infinite;
}

/* Float animation classes */
.animate-float-slow {
    animation: float-slow 8s ease-in-out infinite;
}

.animate-float-medium {
    animation: float-medium 6s ease-in-out infinite;
}

.animate-float-fast {
    animation: float-fast 5s ease-in-out infinite;
}

/* Team image animations */
.team-image-animate {
    animation: pulse-border 3s ease-in-out infinite;
}

.team-image-animate:hover {
    animation: none;
}

/* ============================================
   LAYOUT & SCROLLING
   ============================================ */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Scroll offset for anchor links to account for sticky header */
section[id] {
    scroll-margin-top: 120px;
}

/* ============================================
   COOKIE CONSENT
   ============================================ */

#cookie-consent {
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}

#cookie-consent.show {
    transform: translateY(0);
}

/* ============================================
   LEGAL CONTENT
   ============================================ */

.legal-content h3 {
    scroll-margin-top: 20px;
}

.legal-content p,
.legal-content ul {
    line-height: 1.7;
}

/* ============================================
   HANGING SIGN - WE'RE HIRING
   ============================================ */

/* Swing animation like door sign */
@keyframes swing {
    0%, 100% {
        transform: rotate(-3deg);
    }
    50% {
        transform: rotate(3deg);
    }
}

@keyframes swing-settle {
    0% {
        transform: rotate(-8deg);
    }
    20% {
        transform: rotate(6deg);
    }
    40% {
        transform: rotate(-4deg);
    }
    60% {
        transform: rotate(3deg);
    }
    80% {
        transform: rotate(-2deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.hanging-sign-container {
    position: relative;
    height: 50px;
    display: flex;
    align-items: flex-start;
}

.hanging-sign {
    position: relative;
    transform-origin: top center;
    animation: swing 3s ease-in-out infinite;
}

.hanging-sign:hover {
    animation: swing-settle 1s ease-out forwards;
}

.sign-rope {
    width: 2px;
    height: 8px;
    background: linear-gradient(to bottom, #666, #333);
    margin: 0 auto;
    border-radius: 1px;
}

.sign-board {
    display: block;
    background: linear-gradient(135deg, #01B7C2 0%, #019aa3 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.2s ease;
}

.sign-board::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #444;
    border-radius: 50%;
    border: 2px solid #666;
}

.sign-board:hover {
    background: linear-gradient(135deg, #019aa3 0%, #017a80 100%);
    transform: scale(1.05);
    box-shadow: 
        0 6px 12px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sign-board span {
    display: block;
    white-space: nowrap;
}

/* ============================================
   GOOGLE ADS CONTAINERS
   ============================================ */

.ad-container {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-container ins.adsbygoogle {
    max-width: 100%;
}

/* Hide empty ad containers (when ads don't load) */
.ad-container ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

/* Responsive phone mockups */
@media (max-width: 768px) {
    .iphone-frame {
        transform: scale(0.7);
    }
}