/* =====================================================
   iHQmail — Animations
   Floating Effects, Transitions, Scroll Animations
   ===================================================== */

/* ─────────────────────────────────────────────────────
   FLOATING KEYFRAMES — Antigravity Effect
   ───────────────────────────────────────────────────── */

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-10px) rotate(0.5deg);
    }

    50% {
        transform: translateY(-20px) rotate(0deg);
    }

    75% {
        transform: translateY(-10px) rotate(-0.5deg);
    }
}

@keyframes float-slow {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-30px);
    }
}

@keyframes float-subtle {

    0%,
    100% {
        transform: translateY(0) translateX(0);
    }

    33% {
        transform: translateY(-8px) translateX(4px);
    }

    66% {
        transform: translateY(-12px) translateX(-4px);
    }
}

/* ─────────────────────────────────────────────────────
   GLOW PULSE EFFECTS
   ───────────────────────────────────────────────────── */

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

@keyframes glow-border {

    0%,
    100% {
        box-shadow: 0 0 20px var(--color-cyan-glow);
    }

    50% {
        box-shadow: 0 0 40px var(--color-cyan-glow), 0 0 60px rgba(0, 240, 255, 0.2);
    }
}

/* ─────────────────────────────────────────────────────
   FADE IN ANIMATIONS
   ───────────────────────────────────────────────────── */

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ─────────────────────────────────────────────────────
   SCROLL-TRIGGERED ANIMATIONS
   ───────────────────────────────────────────────────── */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animations for children */
.stagger-children>* {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger-children.animated>*:nth-child(1) {
    transition-delay: 0.1s;
}

.stagger-children.animated>*:nth-child(2) {
    transition-delay: 0.2s;
}

.stagger-children.animated>*:nth-child(3) {
    transition-delay: 0.3s;
}

.stagger-children.animated>*:nth-child(4) {
    transition-delay: 0.4s;
}

.stagger-children.animated>*:nth-child(5) {
    transition-delay: 0.5s;
}

.stagger-children.animated>*:nth-child(6) {
    transition-delay: 0.6s;
}

.stagger-children.animated>* {
    opacity: 1;
    transform: translateY(0);
}

/* ─────────────────────────────────────────────────────
   SHIMMER EFFECT
   ───────────────────────────────────────────────────── */

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.shimmer {
    background: linear-gradient(90deg,
            var(--color-bg-elevated) 0%,
            var(--color-bg-tertiary) 50%,
            var(--color-bg-elevated) 100%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* ─────────────────────────────────────────────────────
   TYPING CURSOR
   ───────────────────────────────────────────────────── */

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--color-cyan-400);
    margin-left: 2px;
    animation: blink 1s infinite;
}

/* ─────────────────────────────────────────────────────
   ROTATING GLOW
   ───────────────────────────────────────────────────── */

@keyframes rotate-glow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.rotating-glow {
    position: relative;
}

.rotating-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 0deg,
            transparent 0%,
            var(--color-cyan-400) 10%,
            transparent 20%);
    border-radius: inherit;
    animation: rotate-glow 3s linear infinite;
    z-index: -1;
}

/* ─────────────────────────────────────────────────────
   PARTICLE EFFECT (CSS-only dots)
   ───────────────────────────────────────────────────── */

.particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--color-cyan-400);
    border-radius: 50%;
    opacity: 0.3;
}

.particle:nth-child(1) {
    top: 20%;
    left: 10%;
    animation: float-subtle 8s ease-in-out infinite;
}

.particle:nth-child(2) {
    top: 60%;
    left: 80%;
    animation: float-subtle 10s ease-in-out infinite 1s;
}

.particle:nth-child(3) {
    top: 80%;
    left: 30%;
    animation: float-subtle 7s ease-in-out infinite 2s;
}

.particle:nth-child(4) {
    top: 40%;
    left: 60%;
    animation: float-subtle 9s ease-in-out infinite 0.5s;
}

.particle:nth-child(5) {
    top: 10%;
    left: 70%;
    animation: float-subtle 11s ease-in-out infinite 1.5s;
}

/* ─────────────────────────────────────────────────────
   LINE DRAWING
   ───────────────────────────────────────────────────── */

@keyframes draw-line {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.draw-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw-line 2s ease forwards;
}

/* ─────────────────────────────────────────────────────
   HERO SPECIFIC ANIMATIONS
   ───────────────────────────────────────────────────── */

.hero-content {
    animation: fade-in-up 0.8s ease 0.2s both;
}

.hero-tag {
    animation: fade-in-down 0.6s ease 0.4s both;
}

.hero-title {
    animation: fade-in-up 0.8s ease 0.5s both;
}

.hero-description {
    animation: fade-in-up 0.8s ease 0.6s both;
}

.hero-actions {
    animation: fade-in-up 0.8s ease 0.7s both;
}

/* ─────────────────────────────────────────────────────
   HOVER MICRO-INTERACTIONS
   ───────────────────────────────────────────────────── */

.hover-lift {
    transition: transform var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

.hover-glow {
    transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
    box-shadow: var(--shadow-glow-cyan);
}

.hover-scale {
    transition: transform var(--transition-base);
}

.hover-scale:hover {
    transform: scale(1.05);
}