@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

* {
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

.liquid-gradient {
    background: linear-gradient(135deg, #f7eb15 0%, #ef108a 50%, #8b5cf6 100%);
    background-size: 200% 200%;
    animation: liquidShift 8s ease-in-out infinite;
}

@keyframes liquidShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.glass-morphism {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.liquid-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.7;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

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

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

.carousel-fade {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.smooth-scroll {
    scroll-behavior: smooth;
}

.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-blur {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

#navbar.scrolled .nav-blur {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#navbar.scrolled .logo-text {
    color: #facc15 !important;
    /* Tailwind yellow-400 */
}

/* ── Mobile Inverted Liquid Shapes ─────────────────────────────────────────── */
@media (max-width: 767px) {
    .liquid-shape:nth-child(1) {
        top: auto;
        bottom: 10px;
        left: 10px;
    }
    
    .liquid-shape:nth-child(2) {
        bottom: auto;
        top: 20px;
        right: 20px;
    }
    
    .liquid-shape:nth-child(3) {
        top: auto;
        bottom: 50%;
        left: 33%;
    }
}

/* ── iPhone Mockup Video ─────────────────────────────────────────────────── */
.phone-screen-container {
    /* Expanded percentage bounds to slightly increase the visible vertical crop area */
    top: 1%;
    left: 3.5%;
    width: 93%;
    height: 98%;

    /* Masks out the oversized video bounds so it doesn't bleed out past the phone corners */
    overflow: hidden;
    position: absolute;
    z-index: 0;

    /* Hardware acceleration to ensure sharp, anti-aliased edge masking */
    transform: translateZ(0);
    will-change: transform;

    /* Locks interactions */
    pointer-events: none;
    user-select: none;
}

.phone-video {
    position: absolute;
    /* Artificially inflates dimensions slightly and pulls video edges outward symmetrically to perfectly fill any gaps naturally */
    width: 100%;
    height: 120%;
    /* Shifts video upwards and leftward relative to the container by exactly half of the overflow to keep it perfectly centered */
    top: -4%;
    left: 0%;
    bottom: auto;

    object-fit: cover;
}

/* Dynamically scales the border-radius of the masking container so edges
   never poke out from underneath the rounded glass bezels at different screen sizes */
@media (max-width: 639px) {
    .phone-screen-container {
        border-radius: 1.8rem;
    }
}

@media (min-width: 640px) and (max-width: 767px) {
    .phone-screen-container {
        border-radius: 2.2rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .phone-screen-container {
        border-radius: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .phone-screen-container {
        border-radius: 2.8rem;
    }
}

/* ── iPhone Mockup Float Animation ───────────────────────────────────────── */
.phone-float-wrapper {
    /* 8s duration, infinite loop, ease-in-out curve for natural physical bounce */
    animation: phoneFloatAnim 8s ease-in-out infinite;

    /* Hardware acceleration on the wrapper itself */
    transform: translateZ(0);
    will-change: transform;
}

@keyframes phoneFloatAnim {

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

    50% {
        /* Very subtle vertical float (-15px) with a tiny sub-pixel rotation (0.5deg) */
        transform: translateY(-15px) rotateZ(0.5deg);
    }
}

/* Respect OS-level "Reduce Motion" accessibility settings */
@media (prefers-reduced-motion: reduce) {
    .phone-float-wrapper {
        animation: none;
    }
}

/* ── About Section Grid Animation ────────────────────────────────────────── */
.grid-drift-anim {
    /* 60s duration, infinite loop, alternate to seamlessly swing back and forth */
    animation: gridDrift 60s ease-in-out infinite alternate;

    /* Hardware acceleration on the grid wrapper */
    will-change: transform;
}

@keyframes gridDrift {
    0% {
        /* Scaled up 15% so edges don't show, panning slowly right/down */
        transform: scale(1.15) translate3d(2.5%, 2.5%, 0);
    }

    100% {
        /* Panning slowly left/up */
        transform: scale(1.15) translate3d(-2.5%, -2.5%, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .grid-drift-anim {
        animation: none;
        transform: scale(1.0);
    }
}