/* BBS TECH — Motion design premium (GSAP) */

html.tech-motion-on .tech-reveal {
    opacity: 0;
    transform: none;
    transition: none;
}

html.tech-motion-on .tech-reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Barre de progression scroll */
#tech-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, transparent, var(--gold), var(--gold2), transparent);
    z-index: 100001;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(201, 169, 110, 0.45);
}

/* Couche parallax — seuil BBS Core */
#tech-parallax-bg {
    position: fixed;
    inset: -8% 0 0 0;
    background: url('img/hero-bbs-core.png') no-repeat center center;
    background-size: cover;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}

/* body mountain kept — see bbs-theme.css */

/* Hero motion */
.tech-hero-motion .hero-intro-item {
    overflow: hidden;
}

.tech-hero-motion .hero-intro-inner {
    display: inline-block;
    will-change: transform, opacity;
}

/* Compose : beat 2 lisible (ligne après titre) */
.hero--compose.tech-hero-motion .htagline.hero-intro-item {
    margin-top: 18px;
}

.hero--compose.tech-hero-motion .tech-hero-gold-line {
    left: 0;
    bottom: auto;
    top: auto;
    margin-top: 8px;
    position: relative;
}

.tech-char {
    display: inline-block;
    will-change: transform, opacity;
}

.tech-char-space {
    display: inline-block;
    width: 0.28em;
}

.htitle .tech-char {
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    color: inherit;
}

.htitle .it .tech-char {
    font-style: italic;
    color: var(--gold2);
}

/* Ligne dor?e anim?e hero */
.tech-hero-gold-line {
    position: absolute;
    left: 64px;
    bottom: 72px;
    height: 1px;
    width: 0;
    background: linear-gradient(90deg, var(--gold), transparent);
    z-index: 2;
    pointer-events: none;
}

/* Shimmer case study */
.tech-case-spotlight {
    position: relative;
    overflow: hidden;
}

.tech-case-spotlight::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(201, 169, 110, 0.07) 50%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 1;
}

html.tech-motion-on .tech-case-spotlight.tech-shimmer-play::after {
    animation: tech-shimmer-sweep 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes tech-shimmer-sweep {
    to { left: 120%; }
}

/* Cartes ÿ glow au hover (compl?te le tilt JS) */
html.tech-motion-on .tech-work-card--text,
html.tech-motion-on .tech-create-card,
html.tech-motion-on .tech-step,
html.tech-motion-on .tech-case-spotlight {
    transform-style: preserve-3d;
    transition: box-shadow 0.4s ease;
}

html.tech-motion-on .tech-work-card--text:hover,
html.tech-motion-on .tech-create-card:hover {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(201, 169, 110, 0.2);
}

/* Boutons magn?tiques */
.btn-noble,
.lpill.gold {
    position: relative;
    overflow: hidden;
}

.btn-noble .tech-btn-shine,
.lpill.gold .tech-btn-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 255, 255, 0.12) 50%,
        transparent 65%
    );
    transform: translateX(-120%);
    pointer-events: none;
}

html.tech-motion-on .btn-noble:hover .tech-btn-shine,
html.tech-motion-on .lpill.gold:hover .tech-btn-shine {
    transition: transform 0.6s ease;
    transform: translateX(120%);
}

/* Titles clip reveal */
.tech-title-reveal {
    overflow: hidden;
    display: block;
}

.tech-title-reveal-inner {
    display: block;
    will-change: transform;
}

/* Stats pulse apr?s compteur */
.tech-stat-value.is-counted {
    animation: tech-stat-pulse 0.6s ease;
}

@keyframes tech-stat-pulse {
    0% { transform: scale(1); color: var(--gold2); }
    50% { transform: scale(1.08); color: var(--gold3); }
    100% { transform: scale(1); color: var(--gold2); }
}

/* Marquee item hover */
html.tech-motion-on .marquee-item {
    transition: color 0.3s ease, letter-spacing 0.3s ease;
}

html.tech-motion-on .marquee-track:hover .marquee-item {
    color: var(--ink3);
}

html.tech-motion-on .marquee-item:hover {
    color: var(--gold2);
    letter-spacing: 0.24em;
}

/* Voile GSAP ÿ ?tat initial */
#bbs-veil.tech-veil-gsap .veil-logo {
    opacity: 0;
    transform: scale(0.92);
    transition: none;
}

#bbs-veil.tech-veil-gsap .veil-sub {
    opacity: 0;
    transform: translateY(8px);
    transition: none;
}

#bbs-veil.tech-veil-gsap .veil-line {
    width: 0;
    transition: none;
}

/* S.I.M.O.H. dans le voile d’ouverture — invisible jusqu’à la chorégraphie */
#bbs-veil .simoh-letters--veil {
    width: min(920px, 92vw);
    margin-top: 28px;
    gap: 10px;
}

#bbs-veil .simoh-letters--veil .simoh-letter {
    padding: 12px 10px 12px;
    min-height: 0;
    background: rgba(8, 9, 11, 0.45);
    opacity: 0;
}

#bbs-veil .simoh-letters--veil .simoh-letter-glyph,
#bbs-veil .simoh-letters--veil .simoh-letter-word,
#bbs-veil .simoh-letters--veil .simoh-letter-desc {
    opacity: 0;
}

#bbs-veil .simoh-letters--veil .simoh-letter-glyph {
    font-size: 1.35rem;
    margin-bottom: 4px;
}

#bbs-veil .simoh-letters--veil .simoh-letter-word {
    font-size: 0.68rem;
    margin-bottom: 6px;
}

#bbs-veil .simoh-letters--veil .simoh-letter-desc {
    font-size: 0.72rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 720px) {
    #bbs-veil .simoh-letters--veil {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        margin-top: 20px;
    }
    #bbs-veil .simoh-letters--veil .simoh-letter {
        padding: 8px 4px;
        border-color: rgba(201, 169, 110, 0.28);
    }
    #bbs-veil .simoh-letters--veil .simoh-letter-desc {
        display: none;
    }
    #bbs-veil .simoh-letters--veil .simoh-letter-word {
        font-size: 0.55rem;
        letter-spacing: 0.06em;
        margin-bottom: 0;
    }
    #bbs-veil .simoh-letters--veil .simoh-letter-glyph {
        font-size: 1.1rem;
    }
}

/* Curseur luxe ÿ r?activ? */
@media (hover: hover) and (pointer: fine) {
    html.tech-motion-on #bbs-cdot,
    html.tech-motion-on #bbs-cring {
        display: block !important;
    }
}

/* Stagger grids ÿ ?tat initial g?r? par GSAP */
html.tech-motion-on .tech-stagger > * {
    opacity: 0;
    transform: translateY(32px);
    transition: none;
}

/* Stats bar — toujours visible, jamais masqu?e par stagger */
html.tech-motion-on .tech-stats-bar,
html.tech-motion-on .tech-stats-bar .tech-stat {
    opacity: 1 !important;
    transform: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    #tech-scroll-progress,
    #tech-parallax-bg,
    .tech-hero-gold-line {
        display: none !important;
    }

    html.tech-motion-on .tech-reveal,
    html.tech-motion-on .tech-stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }

    html.tech-motion-on body {
        background-image: url('img/hero-bbs-core.png');
        background-size: cover;
        background-position: center;
    }

    .tech-case-spotlight::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .tech-hero-gold-line {
        left: 24px;
        bottom: 48px;
    }
}