/* custom.css for The Shravasadhaka */

/* Base fade-up animations */
.fade-up {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Marquee ticker animation */
@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ticker-track {
    display: inline-flex;
    white-space: nowrap;
    animation: ticker 30s linear infinite;
}

/* Premium Hover effects */
.hover-gold-shift {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-gold-shift:hover {
    border-color: #C9A96E;
    transform: translateY(-6px);
    box-shadow: 0 10px 30px -10px rgba(201, 169, 110, 0.15);
}

/* Button & Link Hover Animations */
a, button {
    transition: all 0.3s ease;
}

.bg-brand-gold:hover {
    background-color: #F5F0E8 !important;
    color: #0A0A0A !important;
    box-shadow: 0 0 20px rgba(201, 169, 110, 0.8);
    transform: scale(1.02);
}

/* Nav Link Underline Sweep */
nav a {
    position: relative;
}
nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #C9A96E;
    transition: width 0.3s ease;
}
nav a:hover::after {
    width: 100%;
}

/* Portfolio custom cinematic hover */
.portfolio-card {
    position: relative;
    overflow: hidden;
}

.portfolio-card img {
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

.portfolio-card:hover img {
    transform: scale(1.08);
}

.portfolio-overlay {
    background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.4) 50%, rgba(10,10,10,0) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.portfolio-card:hover .portfolio-overlay {
    opacity: 1;
}

/* Team Card hover */
.group:hover .group-hover\:scale-105 {
    transform: scale(1.08) rotate(1deg);
    filter: contrast(1.1);
}

/* Form inputs styling override */
input, textarea, select {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus, textarea:focus, select:focus {
    outline: none !important;
    border-color: #C9A96E !important;
    box-shadow: 0 0 0 2px rgba(201, 169, 110, 0.3) !important;
}

/* Specific elements pulsing / glowing on hover */
.rounded-full.border-brand-gold:hover {
    box-shadow: 0 0 15px rgba(201, 169, 110, 0.4);
    background-color: #C9A96E;
    color: #0A0A0A;
}

/* Subtle image brightness pop */
img {
    transition: filter 0.4s ease, transform 0.6s ease;
}
img:hover {
    filter: brightness(1.05);
}

/* --- Custom Cursor --- */
@media (pointer: fine) {
    body, a, button, input, textarea, select, .cursor-pointer, .portfolio-card, .hover-gold-shift {
        cursor: none !important;
    }

    .custom-cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 8px;
        height: 8px;
        background-color: #C9A96E;
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        margin-left: -4px;
        margin-top: -4px;
        transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease, opacity 0.3s ease;
    }

    .custom-cursor-follower {
        position: fixed;
        top: 0;
        left: 0;
        width: 40px;
        height: 40px;
        border: 1px solid rgba(201, 169, 110, 0.5);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9998;
        margin-left: -20px;
        margin-top: -20px;
        transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
    }

    .custom-cursor.cursor-hover {
        background-color: transparent;
    }

    .custom-cursor-follower.cursor-hover {
        width: 60px;
        height: 60px;
        margin-left: -30px;
        margin-top: -30px;
        background-color: rgba(201, 169, 110, 0.1);
        border-color: #C9A96E;
        backdrop-filter: blur(2px);
    }

    .custom-cursor-follower.cursor-view {
        width: 80px;
        height: 80px;
        margin-left: -40px;
        margin-top: -40px;
        background-color: #C9A96E;
        border-color: #C9A96E;
        backdrop-filter: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .custom-cursor-follower.cursor-view::after {
        content: "VIEW";
        color: #0A0A0A;
        font-family: 'Syne', sans-serif;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1px;
    }

    /* Hide cursor completely if leaving window */
    .custom-cursor.hidden, 
    .custom-cursor-follower.hidden {
        opacity: 0;
    }
}

/* ============================================
   RESPONSIVE FIXES — MOBILE FIRST
   ============================================ */

/* Global: prevent horizontal overflow on all pages */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Fluid hero typography using clamp() */
.hero-title-fluid {
    font-size: clamp(2.25rem, 8vw, 6rem);
    line-height: 1.05;
}

/* ---- MOBILE (max-width: 768px) ---- */
@media (max-width: 768px) {

    /* --- Global --- */
    section {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* --- Home Hero --- */
    .font-display.text-5xl,
    .font-display.text-6xl,
    .font-display.text-7xl,
    .font-display.text-8xl {
        font-size: clamp(2rem, 10vw, 3.5rem) !important;
        line-height: 1.1 !important;
    }

    /* --- Hero subtext --- */
    .text-2xl.text-brand-muted,
    .text-xl.text-brand-muted {
        font-size: 1rem !important;
    }

    /* --- Hero CTA buttons — stack them cleanly --- */
    .flex-wrap.gap-6 {
        flex-direction: column;
        align-items: center;
        gap: 1rem !important;
    }

    /* --- Marquee — tighter on mobile --- */
    .ticker-track {
        font-size: 0.7rem;
    }

    /* --- Section headings --- */
    h2.text-5xl, h2.text-6xl, h2.text-4xl {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    }
    h3.text-4xl, h3.text-3xl {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }

    /* --- Portfolio grid: single column --- */
    .grid.grid-cols-3,
    .grid.grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* --- Team grid: single column --- */
    .grid.lg\:grid-cols-4,
    .grid.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- Contact form: reduce padding --- */
    .p-8.md\:p-12 {
        padding: 1.5rem !important;
    }

    /* --- Services accordion text overflow --- */
    .accordion-header-text {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    /* --- Footer grid: single column --- */
    .grid.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* --- NexLyr CTA block on homepage --- */
    .nexlyr-cta-section {
        padding: 3rem 1.25rem !important;
    }

    /* --- About page intro text --- */
    .text-2xl.font-light {
        font-size: 1.1rem !important;
        line-height: 1.7 !important;
    }

    /* --- Process steps: reduce gap --- */
    .space-y-16 {
        gap: 2.5rem !important;
    }

    /* --- Join page role cards --- */
    .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* --- Max-width containers on mobile --- */
    .max-w-7xl, .max-w-6xl, .max-w-5xl {
        max-width: 100% !important;
    }

    /* --- Testimonial cards: single col --- */
    .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* --- Prevent large py on mobile --- */
    .py-32 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    .py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    .py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

    /* --- Contact page info grid --- */
    .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* --- Admin toolbar: hide label on mobile --- */
    .text-brand-gold.font-display.text-xs.tracking-widest.pl-3.pr-2 {
        display: none !important;
    }
}

/* ---- SMALL MOBILE (max-width: 480px) ---- */
@media (max-width: 480px) {
    /* Hero h1 even more compact */
    h1.font-display {
        font-size: clamp(1.75rem, 9vw, 2.75rem) !important;
        letter-spacing: -0.02em !important;
    }

    /* Reduce hero padding */
    section.min-h-screen {
        padding-top: 6rem !important;
        padding-bottom: 3rem !important;
    }

    /* Team grid: single col on very small */
    .grid.lg\:grid-cols-4,
    .grid.md\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Portfolio masonry: single col */
    .columns-2, .columns-3 {
        columns: 1 !important;
    }

    /* Reduce button padding on tiny screens */
    .px-10.py-5 {
        padding: 0.875rem 1.75rem !important;
        font-size: 0.7rem !important;
    }
}