/* ===========================
   Arjun Sharma Yoga - Main Styles
   =========================== */

/* CSS Variables */
:root{
    --saffron: #FF6B35;
    --pink: #EC4899;
    --violet: #7C3AED;
    --ink: #0B1220;
}

/* Base Styles */
.font-heading { font-family: 'Playfair Display', serif; }
.font-body { font-family: 'Poppins', sans-serif; }

html { 
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    -webkit-tap-highlight-color: transparent;
}

/* Background Systems */
.hero-gradient {
    background: radial-gradient(1200px 900px at 10% 20%, rgba(255,107,53,.65), transparent 65%),
                radial-gradient(900px 700px at 85% 30%, rgba(236,72,153,.55), transparent 60%),
                radial-gradient(1000px 800px at 60% 90%, rgba(124,58,237,.6), transparent 65%),
                linear-gradient(135deg, rgba(11,18,32,.35), rgba(11,18,32,.55));
}

.aurora {
    position: absolute;
    inset: -40px;
    filter: blur(28px);
    opacity: .85;
    background:
        radial-gradient(600px 400px at 15% 20%, rgba(255,107,53,.55), transparent 70%),
        radial-gradient(600px 450px at 80% 30%, rgba(236,72,153,.45), transparent 70%),
        radial-gradient(650px 450px at 55% 85%, rgba(124,58,237,.45), transparent 70%);
    animation: auroraMove 14s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes auroraMove{
    0%{ transform: translate3d(-12px, 10px, 0) scale(1.02); }
    100%{ transform: translate3d(12px, -10px, 0) scale(1.06); }
}

/* Motion Animations */
.floating { animation: float 6s ease-in-out infinite; }
@keyframes float { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-16px); } 
}

.pulse-slow { animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Text Effects */
.gradient-text {
    background: linear-gradient(135deg, var(--saffron), #F59E0B, var(--pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass Effects */
.glass {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(12px);
}

.glass-light{
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.65);
    backdrop-filter: blur(10px);
}

/* Card Styles */
.card-hover { 
    transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .4s ease, filter .35s ease;
    will-change: transform;
}

.card-hover:hover { 
    transform: translateY(-10px) scale(1.015); 
    box-shadow: 0 24px 54px rgba(0,0,0,0.18); 
    filter: saturate(1.05); 
}

.soft-shadow { box-shadow: 0 20px 60px rgba(16, 24, 40, 0.18); }

/* Review Cards */
.review-card { 
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    flex-shrink: 0;
}

.review-card:hover {
    transform: translateY(-8px);
}

/* Horizontal Scroll Container */
#reviewsScroll {
    will-change: transform;
    display: flex;
    align-items: stretch;
}

#reviewsGrid {
    -webkit-overflow-scrolling: touch;
    overflow: visible;
    position: relative;
}

/* Ensure cards don't get cut off */
#reviewsGrid > div {
    overflow: visible;
}

/* Decorative Elements */
.om-symbol { 
    font-size: 4rem; 
    opacity: 0.12; 
    position: absolute; 
}

.ring-glow{
    box-shadow: 0 0 0 6px rgba(255,255,255,.08), 0 0 60px rgba(255,107,53,.25), 0 0 90px rgba(236,72,153,.18);
}

/* Reveal Animation */
.reveal{ 
    opacity: 0; 
    transform: translateY(18px); 
    transition: opacity .8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform .8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.reveal.is-visible{ 
    opacity: 1; 
    transform: translateY(0); 
}

/* UI Components */
.chip{ 
    transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease; 
}

.chip:hover{ 
    transform: translateY(-1px); 
}

.chip[aria-pressed="true"]{ 
    background: rgba(255,255,255,.18); 
    border-color: rgba(255,255,255,.35); 
}

/* Navigation */
.navlink{ 
    position: relative; 
    transition: color 0.3s ease;
    padding-bottom: 6px;
}

.navlink::after{
    content:"";
    position:absolute;
    left:0; 
    right:0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--saffron), var(--pink));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s ease;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
}

.navlink.active::after{ 
    transform: scaleX(1); 
}

.navlink:hover::after {
    transform: scaleX(0.5);
}

.navlink.active:hover::after {
    transform: scaleX(1);
}

.navlink:hover{ 
    color: rgba(255, 167, 38, 1) !important; 
}

/* Navbar Scrolled State */
#navbar.is-scrolled{
    background: rgba(15, 23, 42, 0.92) !important;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

#navbar.is-scrolled .navlink{ 
    color: rgba(255,255,255,0.92); 
}

#navbar.is-scrolled a{ 
    -webkit-font-smoothing: antialiased; 
}

#navbar.is-scrolled #mobileMenu .glass{
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(255,255,255,0.14);
}

/* Focus States */
:focus-visible{ 
    outline: 3px solid rgba(255,107,53,.65); 
    outline-offset: 2px; 
    border-radius: 10px; 
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    .floating, .pulse-slow, .aurora{ animation: none !important; }
    .reveal{ transition: none; }
    #loader .breath-circle{ animation: none !important; }
}

/* ===== LOADING ANIMATION ===== */
#loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0B1220 0%, #1a1a2e 50%, #16213e 100%);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Breathing Circle */
.breath-circle {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.breath-circle::before,
.breath-circle::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    animation: breathe 5s ease-in-out infinite;
}

.breath-circle::before {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,107,53,0.3), rgba(236,72,153,0.3));
    animation-delay: 0s;
}

.breath-circle::after {
    width: 80%;
    height: 80%;
    background: linear-gradient(135deg, rgba(236,72,153,0.4), rgba(124,58,237,0.4));
    animation-delay: 0.5s;
}

.breath-circle .om {
    position: relative;
    z-index: 10;
    font-size: 3.5rem;
    color: white;
    animation: omPulse 5s ease-in-out infinite;
    text-shadow: 0 0 30px rgba(255,107,53,0.5), 0 0 60px rgba(236,72,153,0.3);
}

@keyframes breathe {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes omPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Loading Text */
.loader-text {
    margin-top: 2rem;
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    animation: fadeText 2s ease-in-out infinite;
}

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

/* Breathing Instruction */
.breath-text {
    margin-top: 0.5rem;
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
    font-style: italic;
}

.breath-text span {
    display: inline-block;
    animation: breatheText 5s ease-in-out infinite;
}

@keyframes breatheText {
    0%, 45% { opacity: 1; }
    50%, 95% { opacity: 0; }
    100% { opacity: 1; }
}

.breath-text span:last-child {
    animation: breatheTextAlt 5s ease-in-out infinite;
}

@keyframes breatheTextAlt {
    0%, 45% { opacity: 0; }
    50%, 95% { opacity: 1; }
    100% { opacity: 0; }
}

/* ===== ADMIN PANEL STYLES ===== */
.admin-tab {
    transition: all 0.3s ease;
    color: #64748b;
}

.admin-tab:hover {
    background: rgba(255, 107, 53, 0.1);
    color: #FF6B35;
}

.admin-tab.active {
    background: linear-gradient(135deg, #FF6B35, #EC4899);
    color: white;
}

#adminTrigger {
    transition: opacity 0.3s ease;
}

#adminTrigger:hover {
    opacity: 1 !important;
}