/* ====================================================
   BE FAMOUS — PREMIUM MOTION GRAPHICS
   ==================================================== */

/* ────────────────────────────────
   1. HERO VISUAL UPGRADE
──────────────────────────────── */

/* Morphing blob behind hero */
.hero-blob {
    position: absolute;
    border-radius: 61% 39% 52% 48% / 44% 56% 44% 56%;
    animation: blob-morph 12s ease-in-out infinite;
    pointer-events: none;
    filter: blur(0px);
}
.hero-blob-1 {
    width: 480px; height: 480px;
    top: -80px; right: -120px;
    background: radial-gradient(circle at 40% 40%, rgba(201,168,76,0.08) 0%, transparent 70%);
    animation-duration: 14s;
}
.hero-blob-2 {
    width: 320px; height: 320px;
    bottom: 5%; left: 5%;
    background: radial-gradient(circle, rgba(201,168,76,0.05) 0%, transparent 70%);
    animation-duration: 18s;
    animation-delay: -6s;
}
@keyframes blob-morph {
    0%,100% { border-radius: 61% 39% 52% 48% / 44% 56% 44% 56%; transform: translate(0,0) rotate(0deg); }
    25%      { border-radius: 42% 58% 37% 63% / 56% 44% 56% 44%; transform: translate(20px,-30px) rotate(8deg); }
    50%      { border-radius: 70% 30% 65% 35% / 35% 65% 35% 65%; transform: translate(-15px,20px) rotate(-5deg); }
    75%      { border-radius: 38% 62% 48% 52% / 62% 38% 62% 38%; transform: translate(25px,10px) rotate(10deg); }
}

/* Floating achievement card in hero */
.hero-float-card {
    position: absolute;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(201,168,76,0.15);
    backdrop-filter: blur(16px);
    border-radius: 16px;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    pointer-events: none;
    z-index: 2;
}
.hero-float-card .hfc-icon {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    flex-shrink: 0;
}
.hero-float-card .hfc-text strong {
    display: block;
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}
.hero-float-card .hfc-text span {
    font-size: 0.75rem;
    color: var(--ash);
    font-weight: 500;
}
.hero-float-card-1 {
    top: 18%; right: 3%;
    animation: float-card-1 6s ease-in-out infinite;
}
.hero-float-card-2 {
    bottom: 22%; right: 5%;
    animation: float-card-2 7s ease-in-out infinite;
    animation-delay: -2s;
}
@keyframes float-card-1 {
    0%,100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-16px) rotate(1deg); }
}
@keyframes float-card-2 {
    0%,100% { transform: translateY(0) rotate(1deg); }
    50%      { transform: translateY(-12px) rotate(-1deg); }
}

/* Enhanced particle glow */
.hero-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: float-particle 20s linear infinite;
}
.hero-particle.sm { background: var(--gold-400); }
.hero-particle.md { background: transparent; border: 1px solid rgba(201,168,76,0.3); }
.hero-particle.lg { background: radial-gradient(circle, var(--gold-300) 0%, transparent 70%); }

/* Animated scan line across hero */
.hero-scanline {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.25) 30%, rgba(201,168,76,0.6) 50%, rgba(201,168,76,0.25) 70%, transparent 100%);
    animation: scanline 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}
@keyframes scanline {
    0%   { top: 0%; opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 0.5; }
    100% { top: 100%; opacity: 0; }
}

/* ────────────────────────────────
   2. HERO TITLE ENTRANCE
──────────────────────────────── */
.hero-title {
    clip-path: inset(0 100% 0 0);
    animation: title-reveal 1.2s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;
}
@keyframes title-reveal {
    to { clip-path: inset(0 0% 0 0); }
}

.hero-desc {
    opacity: 0;
    transform: translateY(20px);
    animation: fade-up-in 0.8s ease-out 0.9s forwards;
}
.hero-actions {
    opacity: 0;
    transform: translateY(20px);
    animation: fade-up-in 0.8s ease-out 1.1s forwards;
}
.hero-stats {
    opacity: 0;
    transform: translateY(20px);
    animation: fade-up-in 0.8s ease-out 1.3s forwards;
}
@keyframes fade-up-in {
    to { opacity: 1; transform: translateY(0); }
}

/* ────────────────────────────────
   3. SECTION TITLE SHIMMER
──────────────────────────────── */
.section-title {
    position: relative;
}
.gold-gradient-text {
    background: linear-gradient(
        90deg,
        var(--gold-400) 0%,
        var(--gold-600) 25%,
        #fff5cc 50%,
        var(--gold-600) 75%,
        var(--gold-400) 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gold-shimmer 4s linear infinite;
}
@keyframes gold-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* ────────────────────────────────
   4. SERVICE CARDS — GLOW + BORDER TRACE
──────────────────────────────── */
.service-card {
    position: relative;
    overflow: hidden;
}
.service-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--angle, 0deg),
        transparent 0deg,
        rgba(201,168,76,0.6) 60deg,
        transparent 120deg
    );
    opacity: 0;
    transition: opacity 0.4s;
    z-index: -1;
    animation: border-rotate 4s linear infinite paused;
}
.service-card:hover::before {
    opacity: 1;
    animation-play-state: running;
}
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes border-rotate {
    to { --angle: 360deg; }
}

/* Card glow spot that follows cursor (set via JS) */
.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        300px circle at var(--mx, 50%) var(--my, 50%),
        rgba(201,168,76,0.06) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 0;
}
.service-card:hover::after { opacity: 1; }

/* ────────────────────────────────
   5. ABOUT SECTION — ANIMATED COUNTER RINGS
──────────────────────────────── */
.about-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px;
    background: var(--cream);
    border-radius: var(--radius-md);
    border: 1px solid var(--stone);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}
.about-stat::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform: scaleX(0);
    transition: transform 0.6s ease;
}
.about-stat:hover::after { transform: scaleX(1); }
.about-stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.about-stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--gold);
    font-family: var(--font-display);
}
.about-stat-label {
    font-size: 0.82rem;
    color: var(--ash);
    font-weight: 600;
    text-align: center;
}

/* ────────────────────────────────
   6. WHY US — STEP LINES ANIMATION
──────────────────────────────── */
.why-card {
    position: relative;
    overflow: hidden;
}
.why-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom, var(--gold), transparent);
    transition: height 0.6s ease;
}
.why-card:hover::before { height: 100%; }

/* Why card number glow */
.why-number {
    position: relative;
    z-index: 1;
}
.why-number::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,168,76,0.15) 0%, transparent 70%);
    transform: scale(0);
    transition: transform 0.4s ease;
}
.why-card:hover .why-number::after { transform: scale(1); }

/* ────────────────────────────────
   7. STATS SECTION — PROGRESS LINES
──────────────────────────────── */
.stat-item {
    position: relative;
}
.stat-item::after {
    content: '';
    position: absolute;
    bottom: 0; left: 20%; right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,0.2), transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.8s ease;
}
.stat-item.revealed::after { transform: scaleX(1); }

/* Animated fill bar under stat number */
.stat-bar {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    width: 0%;
    transition: width 1.5s cubic-bezier(0.16,1,0.3,1);
}
.stat-item.revealed .stat-bar { width: 100%; }

/* ────────────────────────────────
   8. SCROLL REVEAL — SMOOTHER VARIANTS
──────────────────────────────── */
[data-reveal] {
    transition:
        opacity   0.8s cubic-bezier(0.16,1,0.3,1),
        transform 0.8s cubic-bezier(0.16,1,0.3,1),
        filter    0.8s cubic-bezier(0.16,1,0.3,1);
    filter: blur(4px);
}
[data-reveal].revealed { filter: blur(0px); }

/* Delay helpers */
[data-reveal][data-delay="1"] { transition-delay: 0.1s; }
[data-reveal][data-delay="2"] { transition-delay: 0.2s; }
[data-reveal][data-delay="3"] { transition-delay: 0.3s; }
[data-reveal][data-delay="4"] { transition-delay: 0.4s; }
[data-reveal][data-delay="5"] { transition-delay: 0.5s; }

/* ────────────────────────────────
   9. FLOATING GOLDEN ORBS (section bg)
──────────────────────────────── */
.orb-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.06;
    animation: orb-float 20s ease-in-out infinite;
}
.orb-1 {
    width: 400px; height: 400px;
    background: var(--gold);
    top: -100px; right: -100px;
    animation-duration: 18s;
}
.orb-2 {
    width: 300px; height: 300px;
    background: var(--gold-300);
    bottom: -80px; left: -80px;
    animation-duration: 24s;
    animation-delay: -8s;
}
.orb-3 {
    width: 200px; height: 200px;
    background: var(--gold);
    top: 50%; left: 40%;
    animation-duration: 15s;
    animation-delay: -4s;
}
@keyframes orb-float {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(40px,-50px) scale(1.1); }
    66%      { transform: translate(-30px,30px) scale(0.9); }
}

/* ────────────────────────────────
   10. CUSTOM CURSOR GLOW (desktop)
──────────────────────────────── */
.cursor-glow {
    position: fixed;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s;
    opacity: 0;
}
body:hover .cursor-glow { opacity: 1; }

/* ────────────────────────────────
   11. SECTION ENTRY LINE (decorative)
──────────────────────────────── */
.section-line-enter {
    position: relative;
}
.section-line-enter::before {
    content: '';
    position: absolute;
    top: 0; right: 50%; left: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transition: left 1s ease, right 1s ease;
    opacity: 0.3;
}
.section-line-enter.line-revealed::before {
    left: 0; right: 0;
}

/* ────────────────────────────────
   12. TESTIMONIAL CARD ANIMATION
──────────────────────────────── */
.testimonial-card {
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
                box-shadow 0.4s ease;
}
.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(201,168,76,0.12);
}

/* ────────────────────────────────
   13. NEWS CARD IMAGE ZOOM
──────────────────────────────── */
.news-card .news-img img,
.news-card .news-thumbnail img {
    transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.news-card:hover .news-img img,
.news-card:hover .news-thumbnail img {
    transform: scale(1.06);
}

/* ────────────────────────────────
   14. FOOTER SOCIAL ICON BOUNCE
──────────────────────────────── */
.footer-social a {
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
                background 0.3s ease,
                color 0.3s ease;
}
.footer-social a:hover {
    transform: translateY(-4px) scale(1.1);
}

/* ────────────────────────────────
   15. WHATSAPP FLOAT PULSE RING
──────────────────────────────── */
.whatsapp-float::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #25D366;
    opacity: 0;
    animation: whatsapp-ring 2.5s ease-out infinite;
}
@keyframes whatsapp-ring {
    0%   { transform: scale(0.9); opacity: 0.7; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* ────────────────────────────────
   16. HERO STATS DIVIDER ANIMATE
──────────────────────────────── */
.hero-stats {
    position: relative;
}
.hero-stats::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent);
    animation: fade-up-in 1s ease-out 1.5s both;
}

/* ────────────────────────────────
   17. MOBILE FIXES
──────────────────────────────── */
@media (max-width: 768px) {
    .hero-float-card { display: none; }
    .hero-blob-1 { width: 260px; height: 260px; }
    .hero-blob-2 { display: none; }
    .cursor-glow { display: none; }
    .hero-title { animation: none; clip-path: none; opacity: 1; }
    .hero-desc, .hero-actions, .hero-stats { animation-duration: 0.5s; }
    [data-reveal] { filter: none; }
}