/* =============================================
   AARKAR Typing & Academic Solutions
   Shared Styles — Academic Prestige Design System
   ============================================= */

/* Material Symbols Outlined */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.fill-icon {
    font-variation-settings: 'FILL' 1;
}

/* Ambient Shadow */
.ambient-shadow {
    box-shadow: 0px 4px 20px rgba(0, 33, 71, 0.08);
}

/* Glassmorphism Card */
.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid #E6EEF5;
    box-shadow: 0px 4px 20px rgba(0, 33, 71, 0.08);
}

/* Custom input inset shadow */
.input-inset {
    box-shadow: inset 0 0 0 1px #c4c6cf;
}
.input-inset:focus-within {
    box-shadow: inset 0 0 0 2px #002147, 0 0 0 4px rgba(230, 238, 245, 0.5);
}

/* Dot pattern background */
.bg-pattern {
    background-image: radial-gradient(#dbe3ea 1px, transparent 1px);
    background-size: 20px 20px;
}

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

/* Selection */
::selection {
    background-color: #cca830;
    color: #4f3e00;
}

/* =============================================
   Scroll Reveal Animations
   ============================================= */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Stagger children animation delay */
.stagger-children > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children > *:nth-child(2) { transition-delay: 80ms; }
.stagger-children > *:nth-child(3) { transition-delay: 160ms; }
.stagger-children > *:nth-child(4) { transition-delay: 240ms; }
.stagger-children > *:nth-child(5) { transition-delay: 320ms; }
.stagger-children > *:nth-child(6) { transition-delay: 400ms; }
.stagger-children > *:nth-child(7) { transition-delay: 480ms; }
.stagger-children > *:nth-child(8) { transition-delay: 560ms; }

/* =============================================
   Gradient Text Accent
   ============================================= */
.gradient-text {
    background: linear-gradient(135deg, #002147 0%, #cca830 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =============================================
   Animated Card Glow on Hover
   ============================================= */
.glow-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glow-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(204, 168, 48, 0.06) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.glow-card:hover::after {
    opacity: 1;
}

.glow-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 33, 71, 0.12);
}

/* =============================================
   Animated Process Connector
   ============================================= */
.process-line {
    position: relative;
    overflow: hidden;
}

.process-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #002147, #cca830);
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-line.revealed::after {
    width: 100%;
}

/* =============================================
   Pulsing CTA Effect
   ============================================= */
.pulse-cta {
    position: relative;
}

.pulse-cta::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(0, 33, 71, 0.3), rgba(204, 168, 48, 0.3));
    animation: pulse-ring 2.5s ease-in-out infinite;
    z-index: -1;
    opacity: 0;
}

@keyframes pulse-ring {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.04); }
}

/* =============================================
   Floating Particles
   ============================================= */
.particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(204, 168, 48, 0.15);
    animation: float-particle linear infinite;
    pointer-events: none;
}

@keyframes float-particle {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

/* =============================================
   Counter Animation
   ============================================= */
.counter-value {
    font-variant-numeric: tabular-nums;
}

/* =============================================
   Typing Cursor
   ============================================= */
.typing-cursor::after {
    content: '|';
    animation: blink 1s step-end infinite;
    color: #cca830;
    font-weight: 300;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* =============================================
   Navbar Scroll Effect
   ============================================= */
nav.scrolled {
    background-color: rgba(251, 249, 248, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(0, 33, 71, 0.06);
}

/* =============================================
   Mobile Menu
   ============================================= */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}

#mobile-menu.open {
    max-height: 500px;
    opacity: 1;
}

#mobile-menu a {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid #c4c6cf;
    transition: background-color 0.2s;
}

#mobile-menu a:hover {
    background-color: #f0eded;
}

#mobile-menu a:last-child {
    border-bottom: none;
}

#mobile-menu a.active-mobile {
    color: #000a1e;
    font-weight: 700;
    border-left: 3px solid #cca830;
    background-color: #f6f3f2;
}

/* =============================================
   File Upload Drag & Drop
   ============================================= */
.file-upload-zone.drag-over {
    border-color: #002147;
    background-color: rgba(0, 33, 71, 0.05);
}

/* =============================================
   Page Transitions
   ============================================= */
main {
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   WhatsApp Sticky Animation
   ============================================= */
.whatsapp-sticky {
    animation: whatsapp-bounce 3s ease-in-out infinite;
}

@keyframes whatsapp-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* =============================================
   Icon Pop on Card Hover
   ============================================= */
.icon-spin-hover:hover .material-symbols-outlined {
    animation: icon-pop 0.4s ease;
}

@keyframes icon-pop {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.15) rotate(-8deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* =============================================
   Trust Strip Shimmer
   ============================================= */
.shimmer-strip {
    position: relative;
    overflow: hidden;
}

.shimmer-strip::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    animation: shimmer 4s ease-in-out infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* =============================================
   Responsive Adjustments
   ============================================= */
@media (max-width: 768px) {
    .text-display-lg {
        font-size: 32px !important;
        line-height: 40px !important;
    }

    .reveal, .reveal-left, .reveal-right {
        transform: translateY(20px) !important;
    }

    .reveal.revealed, .reveal-left.revealed, .reveal-right.revealed {
        transform: translateY(0) !important;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right, .reveal-scale {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .particle, .pulse-cta::before, .whatsapp-sticky, .shimmer-strip::after {
        animation: none !important;
    }
}

/* ============================
   ENHANCED ANIMATIONS v2
   ============================ */

/* Typing cursor effect */
.typing-cursor::after {
    content: '|';
    animation: blink 0.75s step-end infinite;
    color: #cca830;
    font-weight: 300;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Floating up entrance */
@keyframes floatUp {
    from { opacity:0; transform:translateY(40px); }
    to   { opacity:1; transform:translateY(0); }
}
.float-up { animation: floatUp 0.7s cubic-bezier(0.22,1,0.36,1) both; }
.float-up-delay-1 { animation-delay:0.1s; }
.float-up-delay-2 { animation-delay:0.2s; }
.float-up-delay-3 { animation-delay:0.3s; }

/* Pop scale entrance */
@keyframes popIn {
    0% { opacity:0; transform:scale(0.85); }
    70%{ opacity:1; transform:scale(1.04); }
    100%{ opacity:1; transform:scale(1); }
}
.pop-in { animation: popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both; }

/* Horizontal slide */
@keyframes slideInRight { from{opacity:0;transform:translateX(50px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInLeft  { from{opacity:0;transform:translateX(-50px)} to{opacity:1;transform:translateX(0)} }

/* Number counter animation targets */
.counter-value { display:inline-block; transition:all 0.1s; }

/* Animated underline on headings */
.animated-underline { position:relative; display:inline-block; }
.animated-underline::after {
    content:'';
    position:absolute; bottom:-4px; left:0; width:0; height:3px;
    background: linear-gradient(90deg,#002147,#cca830);
    border-radius:2px;
    transition:width 0.5s cubic-bezier(0.22,1,0.36,1);
}
.animated-underline.revealed::after { width:100%; }

/* Pulsing dot for "online/available" indicator */
@keyframes pulseGreen {
    0%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,0.5); }
    50%{ box-shadow:0 0 0 8px rgba(37,211,102,0); }
}
.online-pulse { animation: pulseGreen 2s ease-in-out infinite; }

/* Card hover tilt (subtle 3D) */
.tilt-card { transition:transform 0.3s ease, box-shadow 0.3s ease; transform-style:preserve-3d; }
.tilt-card:hover { transform:perspective(800px) rotateX(-2deg) rotateY(2deg) scale(1.01); }

/* Gradient border card */
.gradient-border { position:relative; border-radius:1rem; }
.gradient-border::before {
    content:''; position:absolute; inset:-2px; border-radius:1rem;
    background:linear-gradient(135deg,#002147,#cca830,#002147);
    z-index:-1; opacity:0; transition:opacity 0.3s;
}
.gradient-border:hover::before { opacity:1; }

/* Scroll progress bar at top */
#scroll-progress {
    position:fixed; top:0; left:0; height:3px; z-index:9999;
    background:linear-gradient(90deg,#002147,#cca830);
    transition:width 0.1s linear;
}

/* Ripple effect on buttons */
.ripple-btn { position:relative; overflow:hidden; }
.ripple-btn .ripple {
    position:absolute; border-radius:50%; transform:scale(0);
    animation:rippleAnim 0.6s linear; background:rgba(255,255,255,0.25);
}
@keyframes rippleAnim { to{ transform:scale(4); opacity:0; } }

/* Animated service icon ring */
@keyframes ringPulse {
    0%,100%{ box-shadow:0 0 0 0 rgba(0,33,71,0.15); }
    50%{ box-shadow:0 0 0 12px rgba(0,33,71,0); }
}
.icon-ring-hover:hover .icon-wrap { animation: ringPulse 1s ease; }

/* Typewriter for hero */
@keyframes typeReveal {
    from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}
}
.type-reveal { animation:typeReveal 1.2s steps(30,end) both; }

/* Sticky nav active indicator */
nav.scrolled a.active-link { color:#cca830!important; }

/* Form input focus glow */
.aarkar-input:focus { box-shadow:0 0 0 3px rgba(0,33,71,0.12)!important; }

/* Success checkmark bounce */
@keyframes successBounce {
    0%{transform:scale(0)} 60%{transform:scale(1.2)} 80%{transform:scale(0.9)} 100%{transform:scale(1)}
}
.success-check { animation:successBounce 0.6s cubic-bezier(0.34,1.56,0.64,1) both; }

/* Accessibility */
@media (prefers-reduced-motion:reduce) {
    .float-up,.pop-in,.type-reveal { animation:none!important; }
    .tilt-card:hover { transform:none!important; }
}