/* Srushtee Styling Academy — Custom Styles */

/* Fonts */
body { font-family: 'Inter', sans-serif; }
.font-display { font-family: 'Playfair Display', serif; }

/* ---- Animations ---- */
@keyframes fadeSlideIn {
    0%   { opacity: 0; transform: translateY(24px); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%       { transform: translateY(-10px) rotate(1deg); }
}
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
@keyframes pulse-ring {
    0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(111,78,55,0.4); }
    70%  { transform: scale(1);    box-shadow: 0 0 0 12px rgba(111,78,55,0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(111,78,55,0); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.animate-on-scroll          { opacity: 0; }
.animate-on-scroll.animate  { animation: fadeSlideIn 0.7s ease-out forwards; }
.animate-float              { animation: float 5s ease-in-out infinite; }
.loading-spinner            { animation: spin 1s linear infinite; }

/* ---- Marquee ---- */
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 22s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }

/* ---- Glass Panel ---- */
.glass-panel {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid rgba(0,0,0,0.07);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* ---- Grain Overlay ---- */
.grain-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 9999;
    opacity: 0.035;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Shimmer CTA ---- */
.btn-shimmer {
    background: linear-gradient(110deg, #6f4e37 40%, #a0714f 50%, #6f4e37 60%);
    background-size: 200% auto;
    animation: shimmer 3s linear infinite;
}
.btn-shimmer:hover { animation-play-state: paused; filter: brightness(1.08); }

/* ---- Pulse CTA ---- */
.btn-pulse { animation: pulse-ring 2.5s ease-in-out infinite; }

/* ---- Accordion ---- */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.3s ease;
}
.accordion-content.open { max-height: 600px; }
.accordion-icon { transition: transform 0.3s ease; }
.accordion-icon.open { transform: rotate(180deg); }

/* ---- Cards ---- */
.module-card {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    border: 1px solid #e5e7eb;
}
.module-card:hover {
    box-shadow: 0 8px 30px -8px rgba(111,78,55,0.15);
    transform: translateY(-1px);
}
.benefit-card {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.benefit-card:hover {
    box-shadow: 0 12px 40px -10px rgba(111,78,55,0.18);
    transform: translateY(-3px);
}

/* ---- Testimonial ---- */
.testimonial-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(111,78,55,0.2);
}

/* ---- Price Card ---- */
.price-card {
    background: linear-gradient(135deg, #faf8f5 0%, #f5ede5 100%);
    border: 2px solid rgba(111,78,55,0.2);
    box-shadow: 0 30px 60px -15px rgba(111,78,55,0.2);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #fafafa; }
::-webkit-scrollbar-thumb { background: #d4c4b8; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #8b6045; }

/* ---- Focus ---- */
:focus-visible { outline: 2px solid #8b6045; outline-offset: 2px; }

/* ---- Utility ---- */
.text-balance { text-wrap: balance; }
html { scroll-behavior: smooth; }

/* ---- Batch radio cards ---- */
.batch-card input[type="radio"]:checked ~ .batch-inner {
    border-color: #6f4e37;
    background: linear-gradient(135deg, #faf8f5, #fff);
    box-shadow: 0 0 0 3px rgba(111,78,55,0.15);
}

/* ---- Form inputs ---- */
.form-input {
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus {
    border-color: #6f4e37;
    box-shadow: 0 0 0 3px rgba(111,78,55,0.12);
    outline: none;
}