/* ============================================================
   HERO AMBIENT BACKGROUND
   Inspired by k3studios.ae — adapted with LivingTech accent
   Pure CSS animations + optional GSAP for the mouse orb.
   ============================================================ */

/* The whole ambient layer sits inside .hero-section.
   z-stack inside the hero:
     z-0: background image/video
     z-1: this ambient layer
     z-1: gradient overlays (hero-gradient-overlay, etc.)
     z-2: hero content (already in your markup)
*/

/* ============================================================
   NEW LOGO — inline SVG (replaces background-image logo classes)
   .lt-logo-text fill switches with header mode via body class.
   .lt-logo-icon (yellow square) blinks on load (JS).
   .lt-logo-smile draws L→R after the blinks via clip-path (JS).
   ============================================================ */

   .lt-logo {
    display: block;
    width: 250px;
    height: auto;
    will-change: opacity;
}

/* ============================================================
   LOGO COLOR SYSTEM (smile is now a cut-out of the icon)
   Two parts only: text (wordmark) and icon (rounded square with
   smile hole). Whatever color the icon is, the smile hole shows
   the background BEHIND the SVG through transparency.

   - Dark contexts (white logo) → icon fills white, smile-shape
     reveals the dark background behind it (reads as dark smile)
   - Light contexts (black logo) → icon fills black, smile-shape
     reveals the light background behind it (reads as light smile)
   ============================================================ */

/* Default: dark mode (white logo on dark bg) */
.lt-logo .lt-logo-text path { fill: var(--color-white); }
.lt-logo .lt-logo-icon      { fill: var(--color-white); }

/* ── header-solid-light initial state — light bg, black logo ── */
.header-solid-light .site-header .lt-logo .lt-logo-text path { fill: var(--color-black); }
.header-solid-light .site-header .lt-logo .lt-logo-icon      { fill: var(--color-black); }

/* ── header-solid-light scrolled state — bg goes dark, logo flips white ── */
.header-solid-light .site-header.active .lt-logo .lt-logo-text path { fill: var(--color-white); }
.header-solid-light .site-header.active .lt-logo .lt-logo-icon      { fill: var(--color-white); }

/* ── Offcanvas — always light background, always black logo ── */
.nav-offcanvas .lt-logo .lt-logo-text path { fill: var(--color-black); }
.nav-offcanvas .lt-logo .lt-logo-icon      { fill: var(--color-black); }

/* ── Footer — always dark background, always white logo ── */
.site-footer .lt-logo .lt-logo-text path { fill: var(--color-white); }
.site-footer .lt-logo .lt-logo-icon      { fill: var(--color-white); }
/* Responsive — smaller on mobile to match previous logo size */
@media (max-width: 575.98px) {
    .lt-logo {
        width: 130px;
    }
}


.lt-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

/* Hide hero CTAs from the start — JS fades them in after typewriter completes.
   Using CSS (not inline JS) prevents the "flash visible → fade out" artifact
   that happens when the browser paints once before the JS runs. */
   [data-hero-cta],
   [data-hero-cta2] {
       opacity: 0;
       transform: translateY(8px);
       transition: opacity 0.5s ease, transform 0.5s ease;
   }
   
   /* When the typewriter finishes, JS adds .lt-cta-revealed which transitions
      the buttons in. Using a class instead of inline styles keeps the
      transition declaration in CSS where it belongs. */
   [data-hero-cta].lt-cta-revealed,
   [data-hero-cta2].lt-cta-revealed {
       opacity: 1;
       transform: translateY(0);
   }
   
   /* Reduced motion — show buttons immediately, skip the transition */
   @media (prefers-reduced-motion: reduce) {
       [data-hero-cta],
       [data-hero-cta2] {
           opacity: 1;
           transform: none;
           transition: none;
       }
   }


/* ============================================================
   MOUSE-FOLLOWING BLUR ORB
   ============================================================ */

.lt-hero-orb {
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(56, 20, 80, 0.35) 0%,
        rgba(58, 19, 73, 0.15) 35%,
        rgba(233, 147, 254, 0) 70%
    );
    filter: blur(50px);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.6s ease;
    will-change: transform, opacity;
    /* Start at hero center (overridden by JS once cursor moves) */
    top: 50%;
    left: 50%;
}


/* ============================================================
   VERTICAL PULSE TRACKS — 5 columns with traveling light
   ============================================================ */

.lt-hero-pulses {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 clamp(20px, 5vw, 60px);
}

.lt-hero-pulse-track {
    position: relative;
    width: 1px;
    height: 100%;
    overflow: hidden;
    /* Faint vertical guide line so the track is visible even when no pulse */
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 20%,
        rgba(255, 255, 255, 0.05) 80%,
        transparent 100%
    );
}

.lt-hero-pulse {
    position: absolute;
    left: 0;
    width: 1px;
    height: 60px;
    background: rgba(132, 54, 184, 0.55);
    border-radius: 1px;
    filter: blur(1px);
    opacity: 0;
    animation: ltHeroPulse 5s ease-in-out infinite;
}

.lt-hero-pulse-track:nth-child(1) .lt-hero-pulse { animation-delay: 0.5s; }
.lt-hero-pulse-track:nth-child(2) .lt-hero-pulse { animation-delay: 2s; }
.lt-hero-pulse-track:nth-child(3) .lt-hero-pulse { animation-delay: 1s; }
.lt-hero-pulse-track:nth-child(4) .lt-hero-pulse { animation-delay: 3s; }
.lt-hero-pulse-track:nth-child(5) .lt-hero-pulse { animation-delay: 1.5s; }

@keyframes ltHeroPulse {
    0%   { top: -15%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 110%; opacity: 0; }
}


/* ============================================================
   HORIZONTAL SCAN LINE
   ============================================================ */

.lt-hero-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(215, 147, 254, 0.08),
        transparent
    );
    opacity: 0;
    animation: ltHeroScan 10s linear infinite 1.5s;
}

@keyframes ltHeroScan {
    0%   { top: 0%; opacity: 0; }
    5%   { opacity: 0.4; }
    95%  { opacity: 0.4; }
    100% { top: 100%; opacity: 0; }
}


/* ============================================================
   FLOATING PARTICLES
   ============================================================ */

.lt-hero-particles {
    position: absolute;
    inset: 0;
}

.lt-hero-dot {
    position: absolute;
    top: -10px;
    background: rgba(224, 147, 254, 0.3);
    border-radius: 50%;
    opacity: 0;
    animation: ltHeroFloat linear infinite;
}

@keyframes ltHeroFloat {
    0%   { transform: translateX(0) scale(1); opacity: 0; }
    5%   { opacity: 0.8; }
    50%  { transform: translateX(-15px) scale(1.1); opacity: 0.4; }
    95%  { opacity: 0; }
    100% { transform: translateX(10px) scale(0.7); top: 110%; opacity: 0; }
}


/* ============================================================
   BREATHING RADIAL GLOWS
   ============================================================ */

.lt-hero-glow {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.lt-hero-glow-main {
    background: radial-gradient(
        ellipse at 50% 20%,
        rgba(206, 147, 254, 0.1) 0%,
        transparent 55%
    );
    animation: ltHeroGlowIn 2s ease 0.3s forwards,
               ltHeroBreathe 7s ease-in-out infinite 2s;
}

.lt-hero-glow-side {
    background: radial-gradient(
        ellipse at 80% 50%,
        rgba(211, 147, 254, 0.06) 0%,
        transparent 45%
    );
    animation: ltHeroGlowIn 2s ease 0.6s forwards,
               ltHeroGlowDrift 14s ease-in-out infinite 2.5s;
}

@keyframes ltHeroGlowIn {
    to { opacity: 1; }
}

@keyframes ltHeroBreathe {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.65; transform: scale(1.04); }
}

@keyframes ltHeroGlowDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-3%, 2%) scale(1.06); }
}


/* ============================================================
   ACCESSIBILITY / TOUCH
   ============================================================ */

@media (hover: none), (pointer: coarse) {
    .lt-hero-orb { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lt-hero-orb,
    .lt-hero-pulses,
    .lt-hero-scan,
    .lt-hero-particles,
    .lt-hero-glow {
        display: none !important;
    }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 991.98px) {
    .lt-hero-orb {
        width: 400px;
        height: 400px;
    }
}

@media (max-width: 575.98px) {
    .lt-hero-orb {
        width: 280px;
        height: 280px;
    }
}

/* ============================================================
   HERO TYPEWRITER — appends to animations.css
   Blinking cursor styling + FOUT prevention.
   ============================================================ */


/* Hide the headline and subhead until JS captures their text.
   `visibility: hidden` keeps the layout space reserved (no jump
   when text appears), while preventing the full text from
   flashing for a frame before JS clears it. */

[data-hero-headline] {
    visibility: hidden;
}

[data-hero-subhead] p {
    /* The wrapper is hidden via inline opacity:0 by JS; the
       paragraph itself just gets emptied. No visibility:hidden
       needed since the whole subhead container starts at opacity:0. */
}

/* The typing cursor — a thin vertical bar that blinks */

.lt-type-cursor {
    position: relative;
    display: inline-block;
    width: 0;          /* takes no flow width */
    overflow: visible;
}
.lt-type-cursor::after {
    content: "";
    position: absolute;
    left: 1px;
    bottom: 0;
    width: 2px;
    height: 1em;
    background: currentColor;
    animation: lt-cursor-blink 1s steps(2) infinite;
}
@keyframes lt-cursor-blink {
    0%, 50%   { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}


/* When the headline cursor renders, it inherits the headline's
   color (white on dark hero). The subhead cursor inherits the
   subhead's color. Both work naturally via `currentColor`. */


/* Reduced motion — skip the typing entirely, just show text */

@media (prefers-reduced-motion: reduce) {
    [data-hero-headline] {
        visibility: visible;
    }
    .lt-type-cursor {
        display: none;
    }
}

/* ============================================================
   HERO SCROLL INDICATOR
   Bottom-center scroll cue: "SCROLL" label + thin vertical line
   with a falling drop animation traveling down it.
   Only appears in the default hero mode.
   ============================================================ */

.lt-hero-scroll {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    pointer-events: none;
}

.lt-hero-scroll-label {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

.lt-hero-scroll-line {
    position: relative;
    width: 1px;
    height: 60px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0.05)
    );
    overflow: hidden;
}

/* The falling drop — a small bright segment that travels down the line */
.lt-hero-scroll-drop {
    position: absolute;
    top: -20%;
    left: 0;
    width: 1px;
    height: 30%;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--color-white)
    );
    animation: ltHeroScrollDrop 2.2s ease-in-out infinite;
}

@keyframes ltHeroScrollDrop {
    0%   { top: -30%; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Reduced motion — keep the indicator visible but stop the drop */
@media (prefers-reduced-motion: reduce) {
    .lt-hero-scroll-drop {
        animation: none;
        display: none;
    }
}

/* Responsive — slightly smaller on mobile */
@media (max-width: 575.98px) {
    .lt-hero-scroll {
        bottom: 1.5rem;
        gap: 0.75rem;
    }
    .lt-hero-scroll-line {
        height: 40px;
    }
    .lt-hero-scroll-label {
        font-size: 0.625rem;
        letter-spacing: 2.5px;
    }
}

/* Make sure the item has position:relative so the ::after
   anchors correctly (main.css already sets display:grid which
   doesn't establish a positioning context). */
.intro-section-item {
    position: relative;
}


/* Dark background variant */
.background-black .intro-section-item::after {
    background-color: var(--color-white);
}

.btn-fancy {
    position: relative;
    overflow: hidden;
    z-index: 1;
    /* Smooth color transitions */
    transition: color 0.3s ease;
    /* Override the existing .btn-intro hover transform that
       shifts the whole button — we want only the arrow to move */
    transform: none !important;
}

/* Pause the existing .btn-intro hover translateX since we
   handle motion internally now */
.btn-fancy:hover {
    transform: none !important;
}

/* ── Liquid fill: a black layer that rises from bottom ── */

.btn-fancy::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-black);
    z-index: -1;
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
    border-radius: inherit;
}

.btn-fancy:hover::before,
.btn-fancy:focus-visible::before {
    transform: translateY(0);
}

/* ── Text wipe: duplicate label via ::after ── */

/* The button needs an inner wrapper for the text so we can
   animate it independently of the arrow. We use a span with
   class `.btn-fancy-label` for this. */

.btn-fancy-label {
    position: relative;
    display: inline-block;
    overflow: hidden;
    /* Reserve vertical space so the duplicate can sit below */
    line-height: 1;
    vertical-align: middle;
}

/* The visible label content */
.btn-fancy-label > span {
    display: inline-block;
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

/* The duplicate (positioned below, slides up on hover) */
.btn-fancy-label::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    transform: translateY(110%);
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
    /* Inherit color from the button (will become white on hover) */
    color: var(--color-white);
}

/* On button hover: original text slides up out, duplicate slides up in */
.btn-fancy:hover .btn-fancy-label > span,
.btn-fancy:focus-visible .btn-fancy-label > span {
    transform: translateY(-110%);
}

.btn-fancy:hover .btn-fancy-label::after,
.btn-fancy:focus-visible .btn-fancy-label::after {
    transform: translateY(0);
}


/* ── Text color flip on hover (since fill turns black) ── */

.btn-fancy:hover,
.btn-fancy:focus-visible {
    color: var(--color-white);
}


/* ── Arrow shift on hover ── */

.btn-fancy .btn-right-arrow,
.btn-fancy .btn-right-arrow-white {
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1),
                background-image 0.3s ease 0.15s;
}

.btn-fancy:hover .btn-right-arrow,
.btn-fancy:focus-visible .btn-right-arrow {
    transform: translateX(6px);
    /* Swap to white arrow on hover (since fill is black now) */
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='17' viewBox='0 0 10 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.707031 0.707031L8.20703 8.20703L0.707031 15.707' stroke='%23FFFFFF' stroke-width='2'/%3E%3C/svg%3E%0A");
}


/* ── Reduced motion: instant color flip only, no slide ── */

@media (prefers-reduced-motion: reduce) {
    .btn-fancy::before,
    .btn-fancy-label > span,
    .btn-fancy-label::after,
    .btn-fancy .btn-right-arrow {
        transition: none;
    }
}