/* ============================================================
   PRAMUKH UNISEX SALON — Global Scroll Animations
   Targets existing class names on Blog, Video, Gallery,
   Services (details), ContactUs and shared sections so every
   page gets motion without editing the views.
   Triggered by IntersectionObserver toggling `.in-view`.
   ============================================================ */

/* Respect users that prefer no motion */
@media (prefers-reduced-motion: reduce) {
    .anim, .anim-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}

/* ---------- Base hidden state ---------- */
.anim {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}
.anim.in-view { opacity: 1; transform: none; }

/* Variants — applied via data-anim attr OR helper class */
.anim-fade            { transform: none; }
.anim-up              { transform: translateY(40px); }
.anim-down            { transform: translateY(-40px); }
.anim-left            { transform: translateX(-50px); }
.anim-right           { transform: translateX(50px); }
.anim-zoom            { transform: scale(.85); }
.anim-rotate          { transform: rotate(-6deg) translateY(30px); }

.anim-fade.in-view,
.anim-up.in-view,
.anim-down.in-view,
.anim-left.in-view,
.anim-right.in-view,
.anim-zoom.in-view,
.anim-rotate.in-view { transform: none; opacity: 1; }

/* ---------- Stagger children ---------- */
.anim-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.anim-stagger.in-view > *           { opacity: 1; transform: none; }
.anim-stagger.in-view > *:nth-child(1) { transition-delay: .05s; }
.anim-stagger.in-view > *:nth-child(2) { transition-delay: .12s; }
.anim-stagger.in-view > *:nth-child(3) { transition-delay: .19s; }
.anim-stagger.in-view > *:nth-child(4) { transition-delay: .26s; }
.anim-stagger.in-view > *:nth-child(5) { transition-delay: .33s; }
.anim-stagger.in-view > *:nth-child(6) { transition-delay: .40s; }
.anim-stagger.in-view > *:nth-child(7) { transition-delay: .47s; }
.anim-stagger.in-view > *:nth-child(8) { transition-delay: .54s; }
.anim-stagger.in-view > *:nth-child(9) { transition-delay: .61s; }
.anim-stagger.in-view > *:nth-child(n+10) { transition-delay: .68s; }

/* ============================================================
   AUTO-TARGET existing site classes (no view edits needed)
   Initial hidden state — JS adds `.in-view` when scrolled to.
   ============================================================ */

/* Page header — every page */
.page-header h1,
.page-header .breadcrumb {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.page-header.in-view h1            { opacity: 1; transform: none; transition-delay: .1s; }
.page-header.in-view .breadcrumb   { opacity: 1; transform: none; transition-delay: .25s; }

/* Section titles (used on Video/Gallery/Services/Contact) */
.section-title {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.section-title.in-view { opacity: 1; transform: none; }

/* Blog cards */
.blog-card {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.blog-card.in-view { opacity: 1; transform: none; }
.blog-card:hover   { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.blog-card .blog-image { transition: transform .6s ease; }
.blog-card:hover .blog-image { transform: scale(1.06); }
.blog-tag { transition: transform .25s ease, background-color .25s ease; }
.blog-tag:hover { transform: translateY(-2px); }

/* Video cards */
.video-section .row > [class*="col-"] {
    opacity: 0;
    transform: translateY(40px) scale(.96);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.video-section .row.in-view > [class*="col-"] { opacity: 1; transform: none; }
.video-section .row.in-view > [class*="col-"]:nth-child(1) { transition-delay: .05s; }
.video-section .row.in-view > [class*="col-"]:nth-child(2) { transition-delay: .15s; }
.video-section .row.in-view > [class*="col-"]:nth-child(3) { transition-delay: .25s; }
.video-section .row.in-view > [class*="col-"]:nth-child(4) { transition-delay: .35s; }
.video-section .row.in-view > [class*="col-"]:nth-child(5) { transition-delay: .45s; }
.video-section .row.in-view > [class*="col-"]:nth-child(6) { transition-delay: .55s; }
.video-card { transition: transform .35s ease, box-shadow .35s ease; }
.video-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.2); }

/* Gallery items */
.gallery-item {
    opacity: 0;
    transform: translateY(40px) scale(.94);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.gallery-item.in-view { opacity: 1; transform: none; }
.gallery-item img { transition: transform .55s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item .gallery-caption { transition: transform .4s ease, opacity .4s ease; }

/* Event filter buttons fade-in */
.event-filter button {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity .5s ease, transform .5s ease, background-color .3s ease, color .3s ease;
}
.event-filter.in-view button { opacity: 1; transform: none; }
.event-filter.in-view button:nth-child(1) { transition-delay: .05s; }
.event-filter.in-view button:nth-child(2) { transition-delay: .12s; }
.event-filter.in-view button:nth-child(3) { transition-delay: .19s; }
.event-filter.in-view button:nth-child(4) { transition-delay: .26s; }
.event-filter.in-view button:nth-child(5) { transition-delay: .33s; }
.event-filter.in-view button:nth-child(6) { transition-delay: .40s; }
.event-filter button:hover { transform: translateY(-2px); }

/* Services Details page */
.services-sidebar {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.services-sidebar.in-view { opacity: 1; transform: none; }
.service-details {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.service-details.in-view { opacity: 1; transform: none; }
.service-menu-item { transition: transform .3s ease, background-color .3s ease, color .3s ease; }
.service-menu-item:hover { transform: translateX(6px); }
.service-features .feature-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity .6s ease, transform .6s ease;
}
.service-details.in-view .service-features .feature-item { opacity: 1; transform: none; }
.service-details.in-view .feature-item:nth-child(1) { transition-delay: .25s; }
.service-details.in-view .feature-item:nth-child(2) { transition-delay: .35s; }
.service-details.in-view .feature-item:nth-child(3) { transition-delay: .45s; }
.service-details.in-view .feature-item:nth-child(4) { transition-delay: .55s; }
.expert-help {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.expert-help.in-view { opacity: 1; transform: none; }
.expert-help .phone-number { transition: transform .3s ease; }
.expert-help:hover .phone-number { transform: scale(1.05); }

/* Contact Us page */
.contact-box {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.contact-row.in-view .contact-box { opacity: 1; transform: none; }
.contact-row.in-view .contact-box:nth-child(1) { transition-delay: .05s; }
.contact-row.in-view .contact-box:nth-child(2) { transition-delay: .18s; }
.contact-row.in-view .contact-box:nth-child(3) { transition-delay: .31s; }
.contact-box:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.15); }
.contact-box .icon { transition: transform .5s ease; }
.contact-box:hover .icon { transform: rotateY(360deg); }

#contactForm .form-group {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .7s ease, transform .7s ease;
}
#contactForm.in-view .form-group { opacity: 1; transform: none; }
#contactForm.in-view .form-group:nth-child(1) { transition-delay: .05s; }
#contactForm.in-view .form-group:nth-child(2) { transition-delay: .15s; }
#contactForm.in-view .form-group:nth-child(3) { transition-delay: .25s; }
#contactForm.in-view .form-group:nth-child(4) { transition-delay: .35s; }
#contactForm.in-view .form-group:nth-child(5) { transition-delay: .45s; }
#contactForm .row { display: flex; flex-wrap: wrap; }
#contactForm .form-input:focus { transform: translateY(-1px); }
#contactForm .btn { transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease; }
#contactForm .btn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(193,127,52,.35); }

/* ============================================================
   Decorative keyframes available globally
   ============================================================ */
@keyframes floatY { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes pulseGlow { 0%,100%{box-shadow:0 0 0 0 rgba(193,127,52,.45);} 50%{box-shadow:0 0 0 14px rgba(193,127,52,0);} }
@keyframes shimmer { 0%{background-position:-400px 0;} 100%{background-position:400px 0;} }

.float-anim   { animation: floatY 4s ease-in-out infinite; }
.pulse-anim   { animation: pulseGlow 2.4s ease-in-out infinite; }

/* ---------- Active nav link (orange + underline) ---------- */
.nav-links a.active {
    color: var(--accent) !important;
    font-weight: 600;
}
.nav-links a.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    width: 100% !important;
    background: var(--accent);
    border-radius: 2px;
}

/* Loading shimmer for indicators while AJAX runs */
.loading-indicator {
    background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(193,127,52,.18) 50%, rgba(255,255,255,.04) 100%);
    background-size: 800px 100%;
    animation: shimmer 1.6s linear infinite;
    padding: 18px;
    border-radius: 8px;
    text-align: center;
}