/* ============================================================
   D.A STUDIO — PERFORMANCE & PREMIUM ANIMATIONS
   Drop-in enhancement layer. Never overrides brand tokens.
   Add <link rel="stylesheet" href="da-performance.css"> to
   every page, AFTER style.css.
   ============================================================ */

/* ── 1. PAGE TRANSITION OVERLAY ──────────────────────────────
   A thin charcoal curtain sweeps across on page-leave.
   Works purely with CSS classes toggled by da-preloader.js.
   ──────────────────────────────────────────────────────────── */
#da-curtain {
    position: fixed;
    inset: 0;
    background: var(--color-charcoal, #312D27);
    z-index: 9999;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.52s cubic-bezier(0.77, 0, 0.175, 1);
    will-change: transform;
}

/* Curtain in — covers screen before navigating away */
#da-curtain.da-curtain-in {
    transform: scaleX(1);
    transform-origin: left center;
    pointer-events: all;
}

/* Curtain out — reveals new page */
#da-curtain.da-curtain-out {
    transform: scaleX(0);
    transform-origin: right center;
}


/* ── 2. SPLASH / PRELOADER ───────────────────────────────────
   Full-screen DA logo spinner shown on first paint.
   Removed as soon as window fires 'load'.
   ──────────────────────────────────────────────────────────── */
#da-splash {
    position: fixed;
    inset: 0;
    background: var(--color-charcoal, #312D27);
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

#da-splash.da-splash-hide {
    opacity: 0;
    transform: scale(1.04);
    pointer-events: none;
}

/* Rings container */
.da-splash-rings {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.da-splash-ring-outer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 241, 141, 0.22);
    border-top-color: rgba(255, 241, 141, 0.9);
    animation: daSplashSpin 2.4s linear infinite;
}

.da-splash-ring-inner {
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255, 241, 141, 0.10);
    border-bottom-color: rgba(255, 241, 141, 0.55);
    animation: daSplashSpin 1.5s linear infinite reverse;
}

@keyframes daSplashSpin {
    to { transform: rotate(360deg); }
}

/* The logo inside the rings —
   transparent_logo.png is dark/black on transparent.
   On the charcoal splash bg it reads as a dark silhouette
   which is elegant; no filter needed.
   We slightly brighten it so it's readable against #312D27. */
.da-splash-logo {
    position: relative;
    z-index: 1;
    width: 90px;
    height: 90px;
    object-fit: contain;
    animation: daSplashLogoBreath 3s ease-in-out infinite;
    /* Invert so the dark logo becomes light/white — correct on dark bg */
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

@keyframes daSplashLogoBreath {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%       { opacity: 1;    transform: scale(1.06); }
}

/* Loading text beneath */
.da-splash-label {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255, 241, 141, 0.5);
    animation: daSplashLabelPulse 2s ease-in-out infinite;
}

@keyframes daSplashLabelPulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 1; }
}

/* Progress bar under splash */
.da-splash-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 241, 141, 0.9) 40%,
        rgba(255, 241, 141, 0.9) 60%,
        transparent 100%
    );
    width: 35%;
    animation: daSplashBarSlide 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes daSplashBarSlide {
    0%   { left: -40%; }
    100% { left: 110%; }
}


/* ── 3. NAV SCROLL BEHAVIOUR ─────────────────────────────────
   Nav shrinks and adds depth on scroll.
   Class `.nav-scrolled` toggled by da-preloader.js.
   ──────────────────────────────────────────────────────────── */
nav {
    transition: height 0.3s var(--ease-standard, cubic-bezier(0.16,1,0.3,1)),
                box-shadow 0.3s ease,
                background-color 0.3s ease !important;
}

nav.nav-scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.18) !important;
}

nav.nav-scrolled .logo img {
    height: 54px !important;
    transition: height 0.3s var(--ease-standard, cubic-bezier(0.16,1,0.3,1));
}


/* ── 4. HERO LOGO — ANIMATED SPIN + ENTRY ────────────────────
   The PNG logo in the index hero gets a refined spin-on-entry.
   Class `.da-hero-logo` added by index.html.
   ──────────────────────────────────────────────────────────── */
.da-hero-logo {
    /* No filter — keep the logo exactly as-is (dark/black).
       The hero has a 0.48 dark overlay so the black logo reads
       well and matches the screenshot the client approved.
       Only animate opacity + transform, never colour. */
    animation: daHeroLogoEntry 1.2s cubic-bezier(0.16, 1, 0.3, 1) both,
               daHeroLogoFloat 6s ease-in-out 1.2s infinite;
}

@keyframes daHeroLogoEntry {
    from {
        opacity: 0;
        transform: scale(0.75) rotate(-12deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes daHeroLogoFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33%       { transform: translateY(-8px) rotate(0.8deg); }
    66%       { transform: translateY(-4px) rotate(-0.4deg); }
}

/* Hero tagline fade-in with delay */
.da-hero-tagline {
    animation: daFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

@keyframes daFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ── 5. NAV LINK HOVER — UNDERLINE SLIDE ─────────────────────
   Replaces the simple colour change with an elegant underline.
   ──────────────────────────────────────────────────────────── */
.nav-links a {
    position: relative;
    overflow: visible;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    right: 50%;
    height: 1px;
    background: var(--color-gold, #FFF18D);
    transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    left: 0;
    right: 0;
}


/* ── 6. CTA BUTTON — SHIMMER ON HOVER ───────────────────────
   Adds a subtle shimmer sweep to all .cta-button elements.
   ──────────────────────────────────────────────────────────── */
.cta-button {
    overflow: hidden;
}

.cta-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.22),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.55s ease;
    pointer-events: none;
}

.cta-button:hover::after {
    left: 125%;
}


/* ── 7. FLOATING ENQUIRE BUTTON ─────────────────────────────
   Pulse ring + smooth entry; doesn't change colours.
   ──────────────────────────────────────────────────────────── */
#floatingEnquire {
    /* Entry animation — slides up from below */
    animation: daFloatEntry 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.5s both;
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 900;
    /* Pulse ring */
    box-shadow: 0 0 0 0 rgba(255, 241, 141, 0.5);
}

#floatingEnquire:hover {
    animation: none;   /* Stop pulse on hover */
    transform: translateY(-3px) scale(1.04);
}

@keyframes daFloatEntry {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ── 8. PORTFOLIO CARD — HOVER IMAGE ZOOM ───────────────────
   Subtle scale on the image inside .portfolio-image.
   ──────────────────────────────────────────────────────────── */
.portfolio-card {
    overflow: hidden;
}

.portfolio-image {
    overflow: hidden;
}

.portfolio-image img {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.75s ease !important;
    will-change: transform;
}

.portfolio-card:hover .portfolio-image img {
    transform: scale(1.06);
}


/* ── 9. SECTION DIVIDERS — ANIMATED GOLD LINE ───────────────
   .section-divider gets a width-reveal animation on scroll.
   ──────────────────────────────────────────────────────────── */
.section-divider {
    height: 1px;
    background: var(--color-gold, #FFF18D);
    width: 0;
    transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.is-revealed .section-divider,
.section-divider.is-revealed {
    width: 60px;
}


/* ── 10. HERO BANNER OVERLAY — SUBTLE PARALLAX HINT ─────────
   The dark overlay gets a very slight scale for depth on load.
   ──────────────────────────────────────────────────────────── */
.index-hero-img {
    animation: daHeroPan 18s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes daHeroPan {
    from { transform: scale(1.04) translateX(0); }
    to   { transform: scale(1.04) translateX(-1.5%); }
}


/* ── 11. TESTIMONIAL CARD — QUOTE MARK DECORATION ───────────
   Adds a large decorative quote mark without touching HTML.
   ──────────────────────────────────────────────────────────── */
.testimonial-card {
    position: relative;
    overflow: hidden;
}

.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: -10px;
    left: 16px;
    font-family: 'Crimson Pro', serif;
    font-size: 96px;
    line-height: 1;
    color: var(--color-gold, #FFF18D);
    opacity: 0.12;
    pointer-events: none;
    user-select: none;
}


/* ── 12. VIEW-MORE LINK — ARROW SLIDE ────────────────────────
   The "Explore →" link in portfolio cards.
   ──────────────────────────────────────────────────────────── */
.view-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.25s ease, color 0.2s ease;
}

.view-more:hover {
    gap: 12px;
}


/* ── 13. PROJECT ITEM CARD — REVEAL STAGGER ─────────────────
   Each .project-item in the grid staggers in nicely.
   ──────────────────────────────────────────────────────────── */
.project-item:nth-child(1) { transition-delay: 0s; }
.project-item:nth-child(2) { transition-delay: 0.08s; }
.project-item:nth-child(3) { transition-delay: 0.16s; }


/* ── 14. POPUP HERO — TITLE ENTRY ────────────────────────────
   The large title in project_popup hero slides in from below.
   ──────────────────────────────────────────────────────────── */
.pp-hero-content {
    animation: daFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

/* ── 15. SCROLL-INDICATOR — MOUSE ICON ──────────────────────
   .scroll-down element in projects hero.
   ──────────────────────────────────────────────────────────── */
.scroll-down span {
    display: block;
    width: 22px;
    height: 34px;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    position: relative;
    margin: 0 auto;
}

.scroll-down span::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 7px;
    background: #fff;
    border-radius: 2px;
    animation: daScrollDot 2s ease-in-out infinite;
}

@keyframes daScrollDot {
    0%, 100% { top: 5px; opacity: 1; }
    70%       { top: 16px; opacity: 0.1; }
}


/* ── 16. PERFORMANCE CONTAINMENT ────────────────────────────
   Applied to below-fold sections to defer layout/paint.
   Already in popup_styles.css for popup page; this covers all.
   ──────────────────────────────────────────────────────────── */
.footer,
footer {
    content-visibility: auto;
    contain-intrinsic-size: 0 280px;
}


/* ── 17. GPU HINT FOR CAROUSEL TRACKS ───────────────────────
   Pre-promote to compositor layer for zero-jank slide transitions.
   ──────────────────────────────────────────────────────────── */
.carousel-track,
.pp-hero-track,
.pp-carousel-track {
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}


/* ── 18. SMOOTH IMAGE FADE-IN ────────────────────────────────
   All lazy images that DON'T use da-img-wrap get a base fade.
   da-img-wrap images are handled by image_loader.css already.
   ──────────────────────────────────────────────────────────── */
img[loading="lazy"]:not(.da-monogram-logo) {
    opacity: 0;
    transition: opacity 0.6s ease;
}

img[loading="lazy"].da-img-loaded:not(.da-monogram-logo) {
    opacity: 1;
}


/* ── 19. BELOW-THE-FOLD RENDER DEFER ───────────────────────
   Reduce initial paint cost by deferring sections until needed.
   ──────────────────────────────────────────────────────────── */
.intro-section,
.portfolio-section,
.da-reviews-section,
.footer,
footer,
.projects-container {
    content-visibility: auto;
    contain-intrinsic-size: 0 280px;
}

/* ── 20. GPU HINTS FOR HERO + MARQUEE ───────────────────────
   Promote animated layers to the compositor.
   ──────────────────────────────────────────────────────────── */
.da-hero-banner,
.da-hero-bg,
.da-marquee-track,
.carousel-track,
.pp-hero-track,
.pp-carousel-track {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}