/**
 * DECORATIONS.CSS - Golden Ambient Decorations
 * Prestige Sound - Centralized decoration styles
 *
 * Loaded globally on all public pages via layout.
 * Includes: floating particles, ambient glow, shimmer hover,
 * SVG ornaments, gold separator, gold sparkle, gold gradient text.
 */

/* ============================================================
   0. BODY AMBIENT — Luxury stage lighting (Apple/Rolex style)
   ============================================================ */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        /* Main gold spotlight — top center, like stage lighting */
        radial-gradient(ellipse 100% 60% at 50% -10%, rgba(201, 169, 98, 0.12) 0%, transparent 50%),
        /* Secondary warm glow — bottom right */
        radial-gradient(ellipse 60% 50% at 85% 90%, rgba(201, 169, 98, 0.06) 0%, transparent 50%),
        /* Cool depth — left side */
        radial-gradient(ellipse 50% 70% at 5% 50%, rgba(30, 35, 50, 0.4) 0%, transparent 50%),
        /* Vignette — darker edges for depth */
        radial-gradient(ellipse 70% 70% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
}

/* ============================================================
   1. FLOATING GOLD PARTICLES
   ============================================================ */
.gold-particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.gold-particle {
    position: absolute;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    opacity: var(--o);
    background: radial-gradient(circle at 30% 30%, rgba(255,244,214,0.9), rgba(var(--color-gold-rgb),0.6) 50%, transparent 72%);
    filter: drop-shadow(0 0 4px rgba(var(--color-gold-rgb),0.25));
    transform: translate3d(calc(var(--x) * 1vw), calc(var(--y) * 1vh), 0);
    animation: floatDust var(--dur) linear var(--del) infinite;
    will-change: transform;
}

@keyframes floatDust {
    0%   { transform: translate3d(calc(var(--x)*1vw), calc(var(--y)*1vh), 0) scale(1); }
    50%  { transform: translate3d(calc((var(--x)+var(--dx))*1vw), calc((var(--y)-45)*1vh), 0) scale(1.06); }
    100% { transform: translate3d(calc((var(--x)-var(--dx))*1vw), calc((var(--y)-100)*1vh), 0) scale(0.94); }
}

.gold-particle:nth-child(1)  { --x:8;  --y:115; --size:2px; --o:.10; --dur:20s; --del:-3s;  --dx:3; }
.gold-particle:nth-child(2)  { --x:18; --y:135; --size:3px; --o:.16; --dur:24s; --del:-10s; --dx:2; }
.gold-particle:nth-child(3)  { --x:28; --y:105; --size:4px; --o:.20; --dur:18s; --del:-1s;  --dx:4; }
.gold-particle:nth-child(4)  { --x:38; --y:150; --size:2px; --o:.08; --dur:22s; --del:-14s; --dx:3; }
.gold-particle:nth-child(5)  { --x:48; --y:125; --size:5px; --o:.22; --dur:19s; --del:-6s;  --dx:2; }
.gold-particle:nth-child(6)  { --x:58; --y:165; --size:3px; --o:.12; --dur:25s; --del:-16s; --dx:5; }
.gold-particle:nth-child(7)  { --x:68; --y:110; --size:4px; --o:.18; --dur:17s; --del:-8s;  --dx:3; }
.gold-particle:nth-child(8)  { --x:78; --y:145; --size:2px; --o:.10; --dur:23s; --del:-12s; --dx:4; }
.gold-particle:nth-child(9)  { --x:85; --y:120; --size:6px; --o:.25; --dur:16s; --del:-2s;  --dx:3; }
.gold-particle:nth-child(10) { --x:92; --y:155; --size:3px; --o:.14; --dur:21s; --del:-9s;  --dx:2; }
.gold-particle:nth-child(11) { --x:15; --y:170; --size:5px; --o:.20; --dur:22s; --del:-5s;  --dx:4; }
.gold-particle:nth-child(12) { --x:55; --y:180; --size:3px; --o:.15; --dur:19s; --del:-11s; --dx:3; }

/* ============================================================
   2. AMBIENT GLOW ORBS
   ============================================================ */
.ambient-glow {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.ambient-glow::before,
.ambient-glow::after {
    content: '';
    position: absolute;
    width: 50vmax;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    filter: blur(80px);
    background: radial-gradient(circle, rgba(var(--color-gold-rgb),0.15) 0%, rgba(var(--color-gold-rgb),0.05) 40%, transparent 70%);
    animation: pulseGlow var(--glow-dur, 7s) ease-in-out infinite;
}

.ambient-glow::before {
    top: -20%;
    left: -10%;
    opacity: 0.07;
    --glow-dur: 6.5s;
}

.ambient-glow::after {
    bottom: -25%;
    right: -10%;
    opacity: 0.05;
    --glow-dur: 8s;
    animation-delay: -3s;
}

@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: 0.05; }
    50%      { transform: scale(1.1); opacity: 0.12; }
}

/* ============================================================
   3. SHIMMER HOVER EFFECT
   ============================================================ */
.shimmer-hover {
    position: relative;
    overflow: hidden;
}

.shimmer-hover::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 42%, rgba(var(--color-gold-rgb),0.06) 50%, transparent 58%);
    transform: translateX(-60%) translateY(-60%);
    transition: none;
    pointer-events: none;
    will-change: transform;
}

.shimmer-hover:hover::after {
    animation: shimmerSlide 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes shimmerSlide {
    0%   { transform: translateX(-60%) translateY(-60%); }
    100% { transform: translateX(60%) translateY(60%); }
}

/* ============================================================
   4. SVG ORNAMENTS
   ============================================================ */
.ornament-diamond {
    display: block;
    margin: 12px auto 14px;
}

.ornament-divider {
    display: flex;
    justify-content: center;
    padding: 8px 0;
    background: var(--color-bg-primary);
}

.ornament-divider svg {
    max-width: 100%;
    height: auto;
}

.ornament-corners {
    position: relative;
}

.ornament-corners::before,
.ornament-corners::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border-color: rgba(var(--color-gold-rgb), 0.25);
    border-style: solid;
    pointer-events: none;
}

.ornament-corners::before {
    top: -1px;
    left: -1px;
    border-width: 1px 0 0 1px;
}

.ornament-corners::after {
    bottom: -1px;
    right: -1px;
    border-width: 0 1px 1px 0;
}

/* ============================================================
   5. SECTION HEADER ORNAMENT — Auto gold accent line
   ============================================================ */
.section-header .section-title {
    position: relative;
    padding-bottom: 18px;
}

.section-header .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--color-gold-rgb), 0.5) 20%,
        var(--color-gold) 50%,
        rgba(var(--color-gold-rgb), 0.5) 80%,
        transparent
    );
}

/* Skip the accent line when an ornament-diamond SVG follows the title */
.section-header .section-title:has(+ .ornament-diamond) {
    padding-bottom: 0;
}

.section-header .section-title:has(+ .ornament-diamond)::after {
    display: none;
}

/* Tech rider standalone titles (no wrapper header element) */
.rider-section__title {
    position: relative;
    padding-bottom: 18px;
}

.rider-section__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--color-gold-rgb), 0.5) 20%,
        var(--color-gold) 50%,
        rgba(var(--color-gold-rgb), 0.5) 80%,
        transparent
    );
}

/* ============================================================
   6. GOLD SEPARATOR (utility class)
   ============================================================ */
.gold-separator {
    height: 1px;
    border: none;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-gold-rgb), 0.1) 15%,
        rgba(var(--color-gold-rgb), 0.4) 50%,
        rgba(var(--color-gold-rgb), 0.1) 85%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: goldSeparatorShift 4s ease-in-out infinite;
}

@keyframes goldSeparatorShift {
    0%, 100% { background-position: 0% 0; }
    50%      { background-position: 100% 0; }
}

/* ============================================================
   7. GOLD SPARKLE (utility class)
   ============================================================ */
.gold-sparkle {
    position: relative;
}

.gold-sparkle::after {
    content: '';
    position: absolute;
    top: 0;
    right: -6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-gold);
    box-shadow: 0 0 6px rgba(var(--color-gold-rgb), 0.6);
    animation: sparkle 2.5s ease-in-out infinite;
    pointer-events: none;
}

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

/* ============================================================
   8. GOLD GRADIENT TEXT (utility class)
   ============================================================ */
.text-gold-gradient {
    background: linear-gradient(135deg,
        var(--color-gold-dark) 0%,
        var(--color-gold) 30%,
        var(--color-gold-light) 50%,
        var(--color-gold) 70%,
        var(--color-gold-dark) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldTextShimmer 4s linear infinite;
}

@keyframes goldTextShimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ============================================================
   9. RESPONSIVE — Mobile ornament sizing
   ============================================================ */
@media (max-width: 768px) {
    .ornament-divider svg {
        width: 200px;
    }
}

@media (max-width: 600px) {
    .ornament-divider {
        padding: 4px 0;
    }

    .ornament-divider svg {
        width: 240px;
    }

    .ornament-diamond {
        width: 60px;
    }

    .ornament-corners::before,
    .ornament-corners::after {
        width: 24px;
        height: 24px;
    }
}

/* ============================================================
   11. SECTION TOP LINE — Horizontal gradient divider
   ============================================================ */
.deco-top-line { position: relative; }
.deco-top-line::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--deco-line-h, 1px);
    background: linear-gradient(90deg, transparent, var(--deco-line-color, var(--aman-border)), transparent);
    pointer-events: none;
}

/* ============================================================
   12A. CTA GLOW — Radial glow overlay (full inset)
   ============================================================ */
.deco-cta-glow { position: relative; }
.deco-cta-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(201, 169, 98, var(--deco-glow-opacity, 0.1)) 0%, transparent var(--deco-glow-spread, 60%));
    pointer-events: none;
}

/* ============================================================
   12B. CTA ORB — Centered circle glow
   ============================================================ */
.deco-cta-orb { position: relative; }
.deco-cta-orb::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: var(--deco-orb-size, 800px);
    height: var(--deco-orb-size, 800px);
    background: radial-gradient(circle,
        rgba(201, 169, 98, var(--deco-orb-opacity, 0.03)) 0%, transparent 60%);
    pointer-events: none;
}

/* ============================================================
   12C. CTA VLINE — Vertical gold line at section top
   ============================================================ */
.deco-cta-vline { position: relative; }
.deco-cta-vline::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: var(--deco-vline-w, 1px);
    height: var(--deco-vline-h, 60px);
    background: linear-gradient(180deg, transparent, var(--deco-vline-color, var(--aman-gold)), transparent);
    pointer-events: none;
}

/* ============================================================
   13. PACKAGE CARD — Shine sweep + highlight top bar
   ============================================================ */
.package-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 98, 0.03), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.package-card:hover::before {
    left: 100%;
}

.package-card--highlight::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--aman-gold), transparent);
}

/* ============================================================
   14. TESTIMONIAL CARD — Decorative quote mark
   ============================================================ */
.testimonial-card::before {
    content: var(--deco-quote-char, '\201C');
    position: absolute;
    top: var(--deco-quote-top, 1.5rem);
    right: var(--deco-quote-right, 2rem);
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: var(--deco-quote-size, 4rem);
    color: var(--deco-quote-color, var(--aman-border, var(--color-border)));
    line-height: 1;
}

/* ============================================================
   15. VALLY QUOTE — Blockquote decorative quotes
   ============================================================ */
.vally-quote p::before,
.vally-quote p::after {
    content: '\201C';
    font-size: 60px;
    color: rgba(201, 169, 98, 0.3);
    position: absolute;
    font-family: Georgia, serif;
    line-height: 1;
}

.vally-quote p::before {
    top: -20px;
    left: 0;
}

.vally-quote p::after {
    bottom: -40px;
    right: 0;
}

/* ============================================================
   16A. IMAGE GRADIENT — Diagonal gold gradient overlay
   ============================================================ */
.deco-img-gradient { position: relative; overflow: hidden; }
.deco-img-gradient::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(var(--deco-img-angle, 135deg),
        rgba(201, 169, 98, var(--deco-img-opacity, 0.1)) 0%, transparent var(--deco-img-fade, 50%));
    pointer-events: none; z-index: 1;
}

/* ============================================================
   16B. IMAGE FRAME — Offset border frame behind image
   ============================================================ */
.deco-img-frame { position: relative; }
.deco-img-frame::before {
    content: '';
    position: absolute;
    top: var(--deco-frame-offset, -20px);
    right: var(--deco-frame-offset, -20px);
    width: 100%; height: 100%;
    border: 1px solid var(--deco-frame-color, var(--aman-border));
    border-radius: var(--deco-frame-radius, 2px);
    z-index: -1; pointer-events: none;
}

/* ============================================================
   17. BUTTON SHINE — Sweep effect on hover
   ============================================================ */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg);
}
.btn-shine:hover::before { animation: btnShine 0.6s ease forwards; }
@keyframes btnShine { to { left: 150%; } }

/* ============================================================
   18. VALLY ORNATE FRAME — Floral ornament corners
   ============================================================ */
.vally-ornate-frame { position: relative; padding: 30px; }

.vally-ornate-frame::before,
.vally-ornate-frame::after {
    content: '\2767';
    position: absolute;
    font-size: 24px;
    color: var(--vally-rose-gold, var(--aman-gold));
    opacity: 0.5;
}

.vally-ornate-frame::before { top: 0; left: 0; }
.vally-ornate-frame::after { bottom: 0; right: 0; transform: rotate(180deg); }

/* ============================================================
   19. VALLY DIVIDER — Line-icon-line
   ============================================================ */
.vally-divider::before,
.vally-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--aman-gold), transparent);
}

/* ============================================================
   RESPONSIVE — Decoration adjustments
   ============================================================ */
@media (max-width: 480px) {
    .testimonial-card::before {
        font-size: 3rem;
        top: 1rem;
        right: 1.5rem;
    }
}

/* ============================================================
   10. REDUCED MOTION — Accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .gold-particle {
        animation: none !important;
        display: none;
    }

    .ambient-glow::before,
    .ambient-glow::after {
        animation: none !important;
    }

    .shimmer-hover::after {
        display: none;
    }

    .gold-separator {
        animation: none;
    }

    .gold-sparkle::after {
        animation: none;
        opacity: 0.5;
    }

    .text-gold-gradient {
        animation: none;
        background-size: 100% auto;
    }

    .package-card::before {
        display: none;
    }

    .btn-shine::before {
        display: none;
    }
}