/* Custom Scrollbars */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background-color: #F5F5F5;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.3);
    background-color: #b4b4b4;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #757575;
    }


/* This will create a custom scrollbar for WebKit browsers (Chrome, Safari, etc.) */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px; /* Width of the first scrollbar */
}

/* Style for the first scrollbar thumb */
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #b4b4b4;
}

.img-wrap {
    position: relative;
    display: inline-block;
    overflow: hidden;
/*    border-radius: 1rem;*/
    /*box-shadow: 0 10px 30px rgba(0,0,0,.12);*/
    contain: paint; /* small perf win */
}

/* lightweight skeleton */
.img-skeleton {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg,#ececf1 20%,#f7f7fb 40%,#ececf1 60%);
    background-size: 200% 100%;
    animation: shimmer 2.2s linear infinite;
}

@keyframes shimmer {
    to {
        background-position: -200% 0
    }
}

.img-skeleton.is-hidden {
    opacity: 0;
    transition: opacity .28s ease
}

/* image: ONLY opacity + transform (GPU-friendly) */
.img-reveal {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    opacity: 0;
    transform: translate3d(0,8px,0) scale(1.03);
    will-change: opacity,transform;
    transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1);
}

    .img-reveal.is-visible {
        opacity: 1;
        transform: translate3d(0,0,0) scale(1);
    }

/* wipe overlay: animates translate3d only */
.img-wipe {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 65%);
    transform: translate3d(-110%,0,0); /* start off-canvas */
    will-change: transform,opacity;
    opacity: .9;
}

    .img-wipe.play {
        animation: img-wipe-slide 1.2s cubic-bezier(.2,.7,.2,1) forwards, img-wipe-fade 1.2s ease forwards;
    }

@keyframes img-wipe-slide {
    to {
        transform: translate3d(110%,0,0)
    }
}

@keyframes img-wipe-fade {
    0% {
        opacity: .9
    }

    60% {
        opacity: .4
    }

    100% {
        opacity: 0
    }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce) {
    .img-skeleton {
        animation: none
    }

    .img-reveal {
        transition: none;
        opacity: 1;
        transform: none
    }

    .img-wipe {
        display: none
    }
}



/* Works for any panel you animate */
.reveal-panel {
    height: 0; /* start collapsed */
    overflow: hidden;
    transition: height 540ms cubic-bezier(.2,.7,.3,1);
    will-change: height;
}

    /* Optional fade for inner content */
    .reveal-panel > .transition-opacity {
        /*opacity: 0;*/
        transition: opacity 540ms ease-out;
    }

@media (prefers-reduced-motion: reduce) {
    .reveal-panel,
    .reveal-panel > .transition-opacity {
        transition: none !important;
    }
}



/*4 image panel css*/

/* parallax variant */
.hero--parallax .tile.in {
    animation: tileFade 420ms cubic-bezier(.22,.78,.25,1) both;
    animation-delay: calc(var(--i) * 90ms);
}

.hero--parallax .tile > img {
    transform: translateY(-10px) scale(1.03);
    transition: transform 800ms cubic-bezier(.22,.78,.25,1) calc(60ms + var(--i)*90ms);
}

.hero--parallax .tile.in > img {
    transform: translateY(0) scale(1.00);
}



/* Word animation for headers*/

/* Base hook */
.hx {
    display: inline-block;
    will-change: transform, opacity, filter, letter-spacing, background-size;
}

/* Variant A — “Marker Underline” (calm emphasis, no sweep) */
.hx--marker {
    position: relative;
    background: linear-gradient(currentColor, currentColor) left 100% / 0% 2px no-repeat; /* underline that grows */
    padding-bottom: .15em; /* room for the underline */
    opacity: 0;
    transform: translateY(.35em);
    filter: blur(1px);
    transition: opacity .45s cubic-bezier(.22,.78,.25,1), transform .45s cubic-bezier(.22,.78,.25,1), filter .45s cubic-bezier(.22,.78,.25,1), background-size .5s cubic-bezier(.22,.78,.25,1) .12s;
}

    .hx--marker.is-in {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
        background-size: 100% 2px; /* underline grows left→right but only under the text */
    }

/* Variant B — “Weight & Tracking Settle” (refined, typographic) */
.hx--weight {
    opacity: 0;
    transform: translateY(.35em);
    letter-spacing: .02em; /* start a hair expanded */
    filter: blur(.5px);
    transition: opacity .42s cubic-bezier(.22,.78,.25,1), transform .42s cubic-bezier(.22,.78,.25,1), letter-spacing .38s ease-out .1s, filter .42s cubic-bezier(.22,.78,.25,1);
    /* optional variable font weight glide if supported */
    font-variation-settings: "wght" 700;
}

    .hx--weight.is-in {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: 0;
        filter: blur(0);
        font-variation-settings: "wght" 720; /* subtle settle if your font supports it; ignored otherwise */
    }

/* Variant C — “Clip-Up Reveal” (crisp but understated) */
.hx--clip {
    opacity: 0;
    transform: translateY(.4em);
    filter: blur(1px);
    -webkit-mask: linear-gradient(#000 0 0) 0 100%/100% 0 no-repeat;
    mask: linear-gradient(#000 0 0) 0 100%/100% 0 no-repeat; /* starts masked from bottom */
    transition: opacity .40s cubic-bezier(.22,.78,.25,1), transform .40s cubic-bezier(.22,.78,.25,1), filter .40s cubic-bezier(.22,.78,.25,1), -webkit-mask-size .46s ease-out .08s, mask-size .46s ease-out .08s;
}

    .hx--clip.is-in {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%; /* reveals upward without any screen-wide motion */
    }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hx, .hx.is-in {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        letter-spacing: normal !important;
        -webkit-mask-size: 100% 100% !important;
        mask-size: 100% 100% !important;
    }
}


/* prevent scroll while blocking; Tailwind equivalent: overflow-hidden on html */
/*.page-locked, .page-locked body {
    overflow: hidden !important;
}*/


/*Stack words*/
/* Full-height stack container */
.stack-hero {
    display: inline-flex; /* keeps intrinsic width */
    flex-direction: column; /* stack lines vertically */
    align-items: flex-end; /* align right (matches your text-right) */
    justify-content: flex-end; /* lines sit at the bottom */
    height: 100%; /* fill the panel's height */
    overflow: hidden; /* clip the drop-in from above */
    line-height: 1.05;
    will-change: transform;
}

/* Each line starts above the container (distance set via --drop in px) */
.stack-line {
    display: block;
    transform: translateY(calc(-1 * var(--drop, 100%)));
    opacity: 0;
}

/* Animate in with stagger: bottom line first */
.stack-hero.is-in .stack-line {
    animation: stackDrop 1740ms cubic-bezier(.22,.78,.25,1) both;
}

    .stack-hero.is-in .stack-line:nth-child(3) {
        animation-delay: 200ms;
    }
    /* My Way.   */
    .stack-hero.is-in .stack-line:nth-child(2) {
        animation-delay: 300ms;
    }
    /* My Plans. */
    .stack-hero.is-in .stack-line:nth-child(1) {
        animation-delay: 400ms;
    }
/* My Life.  */

@keyframes stackDrop {
    0% {
        transform: translateY(calc(-1 * var(--drop, 100%)));
        opacity: 0;
        filter: blur(0.8px);
    }

    70% {
        transform: translateY(6%);
        opacity: 1;
        filter: blur(0.2px);
    }
    /* tiny settle */
    100% {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .stack-line,
    .stack-hero.is-in .stack-line {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
}



/* Nav links */
/* Active link underline pill */
/*.nav-link-active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.35rem;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #9f5cf7, #f69215);
}*/

/* Base underline (hidden, centered, scaleX(0)) */
.nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.35rem;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #9f5cf7, #f69215);
    transform-origin: center;
    transform: translateX(-50%) scaleX(0);
    opacity: 0;
    transition: transform 180ms ease-out, opacity 180ms ease-out;
}

/* On hover, grow from center out */
.nav-link:hover::after {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
}

/* Active link (via JS), keeps underline visible */
.nav-link-active::after {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
}


.user-dropdown {
    transform-origin: top right;
    transition: opacity 240ms ease-out, transform 240ms ease-out;
}

    .user-dropdown.is-open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .user-dropdown:not(.is-open) {
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
    }


/* Animate main story */
/* Vertical line: grow height from 0 → 22rem when visible */
.intro-line {
    height: 0;
    transition: height 700ms ease-out;
}





[data-animate-section="header-intro"].is-visible .intro-badge {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
}

/* Tagline words: staggered slide-in from the right */
[data-animate-section="header-intro"].is-visible .intro-tagline-word {
    opacity: 1;
    transform: translateX(0);
}

    /* Stagger with different delays */
    [data-animate-section="header-intro"].is-visible .intro-tagline-word:nth-of-type(1) {
        transition-delay: 150ms;
    }

    [data-animate-section="header-intro"].is-visible .intro-tagline-word:nth-of-type(2) {
        transition-delay: 320ms;
    }

    [data-animate-section="header-intro"].is-visible .intro-tagline-word:nth-of-type(3) {
        transition-delay: 490ms;
    }