/* Premium Cyber Glass enhancement layer. Keeps the existing layout intact. */
:root {
    --premium-cyan: #22f7ff;
    --premium-blue: #5d7cff;
    --premium-purple: #9d6cff;
    --premium-magenta: #ff3df2;
    --premium-ink: #f4fbff;
    --premium-muted: #b8c4e8;
    --premium-panel: rgba(9, 17, 42, 0.64);
    --premium-panel-strong: rgba(12, 20, 52, 0.84);
    --premium-border: rgba(130, 234, 255, 0.28);
    --premium-border-hot: rgba(255, 61, 242, 0.34);
    --premium-shadow: 0 30px 110px rgba(0, 0, 0, 0.44), 0 0 60px rgba(34, 247, 255, 0.12);
    --premium-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html.premium-ui {
    color-scheme: dark;
}

body.home-page {
    --mesh-x: 50%;
    --mesh-y: 22%;
    background:
        linear-gradient(120deg, rgba(34, 247, 255, 0.14), transparent 30%),
        linear-gradient(245deg, rgba(255, 61, 242, 0.16), transparent 34%),
        conic-gradient(from 210deg at var(--mesh-x) var(--mesh-y), rgba(34, 247, 255, 0.16), rgba(93, 124, 255, 0.12), rgba(157, 108, 255, 0.16), rgba(255, 61, 242, 0.13), rgba(34, 247, 255, 0.16)),
        linear-gradient(180deg, #02030d 0%, #070b24 46%, #12051d 100%);
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}

body.home-page::before {
    background:
        repeating-linear-gradient(90deg, transparent 0 64px, rgba(34, 247, 255, 0.07) 65px 66px),
        repeating-linear-gradient(0deg, transparent 0 64px, rgba(157, 108, 255, 0.055) 65px 66px),
        linear-gradient(115deg, transparent 0 18%, rgba(34, 247, 255, 0.1) 19%, transparent 20% 56%, rgba(255, 61, 242, 0.08) 57%, transparent 58%);
    background-size: 128px 128px, 128px 128px, 100% 100%;
    animation: premiumGridDrift 38s linear infinite;
}

body.home-page::after {
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, rgba(2, 3, 13, 0.08), rgba(2, 3, 13, 0.36));
    opacity: 0.72;
}

.ambient-grid {
    contain: layout paint style;
}

.ambient-grid::before,
.ambient-grid::after {
    height: 18%;
    background: linear-gradient(90deg, transparent, rgba(34, 247, 255, 0.22), rgba(93, 124, 255, 0.13), rgba(255, 61, 242, 0.15), transparent);
    filter: blur(16px);
    opacity: 0.78;
}

.ambient-grid::before {
    top: 12%;
}

.ambient-grid::after {
    bottom: 9%;
}

.ambient-grid .cyber-spark {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(237, 250, 255, 0.85), transparent);
    box-shadow: 0 0 12px rgba(34, 247, 255, 0.48);
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--r));
    will-change: transform, opacity;
}

.site-shell {
    isolation: isolate;
}

.main-stage {
    perspective: 1400px;
}

.site-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(105deg, transparent 0 20%, rgba(34, 247, 255, 0.055) 21%, transparent 22% 66%, rgba(255, 61, 242, 0.05) 67%, transparent 68%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 22%);
    transform: translate3d(0, var(--premium-parallax, 0), 0);
}

.site-header,
.content-panel,
.skill-block,
.project-card,
.pay-card,
.contact-card,
.music-consent-card,
.volume-popover,
.scroll-top,
.section-label span,
#toast-prompt {
    position: relative;
    border: 1px solid transparent;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)) padding-box,
        linear-gradient(135deg, rgba(34, 247, 255, 0.48), rgba(157, 108, 255, 0.18), rgba(255, 61, 242, 0.42)) border-box;
    box-shadow: var(--premium-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(26px) saturate(175%);
    -webkit-backdrop-filter: blur(26px) saturate(175%);
}

.content-panel,
.skill-block,
.project-card,
.pay-card,
.contact-card {
    overflow: hidden;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.content-panel::after,
.skill-block::after,
.project-card::after,
.pay-card::after,
.contact-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(110deg, transparent 0 24%, rgba(255, 255, 255, 0.08) 34%, transparent 44%),
        radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(34, 247, 255, 0.18), transparent 34%);
    opacity: 0;
    transform: translate3d(-8%, 0, 0);
    transition: opacity 360ms ease, transform 760ms var(--premium-ease);
}

.content-panel > *,
.skill-block > *,
.project-card > *,
.pay-card > *,
.contact-card > * {
    position: relative;
    z-index: 1;
}

.content-panel:hover::after,
.skill-block:hover::after,
.project-card:hover::after,
.pay-card:hover::after,
.contact-card:hover::after {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.site-header {
    position: sticky;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)) padding-box,
        linear-gradient(135deg, rgba(34, 247, 255, 0.34), rgba(157, 108, 255, 0.16), rgba(255, 61, 242, 0.3)) border-box;
    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.34), 0 0 44px rgba(34, 247, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.volume-popover {
    position: absolute;
}

.scroll-top,
#toast-prompt {
    position: fixed;
}

.music-consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1400;
    display: grid;
    place-items: end center;
    width: 100%;
    min-height: 0;
    padding: 0 24px calc(24px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
    transform: none;
}

.music-consent.is-visible {
    pointer-events: none;
}

.music-consent-card {
    width: min(680px, calc(100vw - 48px));
    max-height: calc(100vh - 32px);
    pointer-events: none;
}

.music-consent.is-visible .music-consent-card {
    pointer-events: auto;
}

.site-header.not-top {
    transform: translate3d(0, 0, 0);
    background:
        linear-gradient(145deg, rgba(15, 28, 70, 0.82), rgba(16, 12, 48, 0.72)) padding-box,
        linear-gradient(135deg, rgba(34, 247, 255, 0.55), rgba(157, 108, 255, 0.25), rgba(255, 61, 242, 0.5)) border-box;
    box-shadow: 0 22px 84px rgba(0, 0, 0, 0.46), 0 0 42px rgba(34, 247, 255, 0.16);
}

.brand-mark,
.project-card-icon,
.contact-card-icon,
.bank-icon,
.music-consent-icon {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(34, 247, 255, 0.26), rgba(93, 124, 255, 0.2) 48%, rgba(255, 61, 242, 0.24)),
        rgba(255, 255, 255, 0.06);
}

.brand-mark::after,
.project-card-icon::after,
.contact-card-icon::after,
.bank-icon::after,
.music-consent-icon::after {
    content: "";
    position: absolute;
    inset: -50%;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.34) 50%, transparent 65%);
    transform: translate3d(-45%, 0, 0);
    animation: premiumIconShine 5.8s var(--premium-ease) infinite;
    pointer-events: none;
}

.hero-title {
    text-shadow: 0 0 24px rgba(34, 247, 255, 0.08);
}

.hero-title .magic > .magic-text,
.magic-text,
.td-lock-screen .infos .web-title {
    background: linear-gradient(95deg, #ffffff 0%, var(--premium-cyan) 20%, var(--premium-blue) 42%, var(--premium-purple) 64%, var(--premium-magenta) 82%, #ffffff 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: premiumTextSweep 7.5s linear infinite;
}

.hero-lead {
    color: rgba(220, 229, 255, 0.8);
    text-shadow: 0 0 20px rgba(34, 247, 255, 0.06);
}

.hero-lead .hero-secret {
    position: relative;
    isolation: isolate;
    touch-action: manipulation;
    user-select: none;
    overflow: hidden;
    outline: none;
    transition:
        color 260ms ease,
        border-color 260ms ease,
        background 260ms ease,
        box-shadow 260ms ease,
        text-shadow 260ms ease;
}

.hero-lead .hero-secret::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(34, 247, 255, 0.18), rgba(255, 61, 242, 0.16)),
        repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, 0.12) 8px 9px);
    opacity: 0.72;
    transition: opacity 260ms ease, transform 320ms var(--premium-ease);
}

.hero-lead .hero-secret:not(.is-revealed) {
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    border-color: rgba(119, 232, 255, 0.28);
    text-shadow: 0 0 8px rgba(220, 229, 255, 0.86), 0 0 16px rgba(34, 247, 255, 0.34);
    background:
        linear-gradient(135deg, rgba(34, 247, 255, 0.12), rgba(255, 61, 242, 0.1)),
        rgba(255, 255, 255, 0.055) !important;
}

.hero-lead .hero-secret.is-revealed,
.hero-lead .hero-secret:focus-visible {
    color: var(--premium-ink) !important;
    -webkit-text-fill-color: var(--premium-ink);
    border-color: rgba(34, 247, 255, 0.5);
    text-shadow: 0 0 18px rgba(34, 247, 255, 0.26);
    background:
        linear-gradient(135deg, rgba(34, 247, 255, 0.16), rgba(255, 61, 242, 0.1)),
        rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 0 28px rgba(34, 247, 255, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hero-lead .hero-secret.is-revealed::after,
.hero-lead .hero-secret:focus-visible::after {
    opacity: 0;
    transform: scaleX(0.82);
}

.eyebrow {
    color: rgba(224, 232, 255, 0.76);
}

.eyebrow span {
    height: 1px;
    background: linear-gradient(90deg, var(--premium-cyan), var(--premium-magenta));
    box-shadow: 0 0 20px rgba(34, 247, 255, 0.6);
}

.primary-action,
.secondary-action,
.project-link,
.contact-card a,
.contact-actions a,
.bank-info button,
.music-consent-accept,
.music-consent-decline,
.theme-toggle,
.music-toggle,
.social-strip a,
.header-nav a {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    transition:
        transform 420ms var(--premium-ease),
        border-color 280ms ease,
        background 280ms ease,
        box-shadow 280ms ease,
        color 220ms ease,
        filter 280ms ease;
}

.primary-action,
.music-consent-accept,
.confirm-btn {
    background: linear-gradient(135deg, var(--premium-cyan), var(--premium-blue) 48%, var(--premium-magenta)) !important;
    box-shadow: 0 0 28px rgba(34, 247, 255, 0.34), 0 16px 48px rgba(255, 61, 242, 0.18);
}

.primary-action::before,
.secondary-action::before,
.project-link::before,
.contact-card a::before,
.contact-actions a::before,
.bank-info button::before,
.music-consent-accept::before,
.music-consent-decline::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.34) 48%, transparent 62% 100%);
    transform: translate3d(-125%, 0, 0);
    transition: transform 780ms var(--premium-ease);
}

.primary-action:hover::before,
.secondary-action:hover::before,
.project-link:hover::before,
.contact-card a:hover::before,
.contact-actions a:hover::before,
.bank-info button:hover::before,
.music-consent-accept:hover::before,
.music-consent-decline:hover::before {
    transform: translate3d(125%, 0, 0);
}

.primary-action:hover,
.secondary-action:hover,
.project-link:hover,
.contact-card a:hover,
.contact-actions a:hover,
.bank-info button:hover,
.social-strip a:hover {
    filter: saturate(1.12) brightness(1.06);
    box-shadow: 0 0 34px rgba(34, 247, 255, 0.3), 0 0 62px rgba(255, 61, 242, 0.2);
}

.header-nav a {
    color: rgba(220, 229, 255, 0.72);
}

.header-nav a:hover {
    color: var(--premium-ink);
    border-color: rgba(34, 247, 255, 0.44);
}

.header-nav a.is-active {
    color: #03111d;
    box-shadow: 0 0 26px rgba(34, 247, 255, 0.32), 0 12px 32px rgba(255, 61, 242, 0.18);
}

.motion-window {
    border-color: rgba(130, 234, 255, 0.34);
    box-shadow: 0 34px 120px rgba(0, 0, 0, 0.46), 0 0 70px rgba(34, 247, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.motion-window::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(120deg, transparent 0 32%, rgba(34, 247, 255, 0.14) 42%, transparent 54%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 20%);
    mix-blend-mode: screen;
    animation: premiumPanelSweep 8.5s var(--premium-ease) infinite;
}

.portrait-stage {
    filter: drop-shadow(0 0 34px rgba(34, 247, 255, 0.18));
}

.profile-avatar {
    border-width: 2px;
    box-shadow: 0 26px 76px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(34, 247, 255, 0.5), 0 0 58px rgba(255, 61, 242, 0.22);
}

.signal-board {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)) padding-box,
        linear-gradient(135deg, rgba(34, 247, 255, 0.48), rgba(255, 61, 242, 0.3)) border-box;
}

.signal-dot {
    background: var(--premium-cyan);
    box-shadow: 0 0 0 6px rgba(34, 247, 255, 0.14), 0 0 26px rgba(34, 247, 255, 0.82);
}

.marquee-track {
    background:
        linear-gradient(90deg, rgba(34, 247, 255, 0.1), rgba(93, 124, 255, 0.08), rgba(255, 61, 242, 0.1)),
        rgba(5, 10, 28, 0.42);
    backdrop-filter: blur(18px) saturate(155%);
    -webkit-backdrop-filter: blur(18px) saturate(155%);
}

.marquee-inner span {
    color: rgba(220, 229, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.82rem;
}

.section-label span {
    box-shadow: 0 0 24px rgba(34, 247, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.bio-panel h2,
.contact-heading h2,
.contact-band h2,
.project-card h3,
.contact-card h3,
.skill-block h3,
.bank-info strong {
    color: var(--premium-ink);
    text-shadow: 0 0 24px rgba(34, 247, 255, 0.1);
}

.bio-copy,
.contact-heading p,
.project-card p,
.contact-card p,
.bank-info span,
.metric-grid span,
.site-footer,
.music-consent-copy p {
    color: var(--premium-muted);
}

.skill-pill {
    min-height: 42px;
    border: 1px solid rgba(130, 234, 255, 0.18);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
        rgba(12, 20, 52, 0.52);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.skill-pill:hover {
    color: var(--premium-ink);
    border-color: rgba(34, 247, 255, 0.48);
    background:
        linear-gradient(145deg, rgba(34, 247, 255, 0.14), rgba(255, 61, 242, 0.08)),
        rgba(12, 20, 52, 0.68);
}

.skill-pill i {
    color: var(--premium-cyan);
    filter: drop-shadow(0 0 10px rgba(34, 247, 255, 0.46));
}

.metric-grid div {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(255, 255, 255, 0.04);
}

.pay-card,
.project-card,
.contact-card {
    transition:
        transform 420ms var(--premium-ease),
        border-color 280ms ease,
        box-shadow 280ms ease,
        background 280ms ease,
        filter 280ms ease;
}

.pay-card:hover,
.project-card:hover,
.contact-card:hover,
.skill-block:hover,
.content-panel:hover {
    border-color: rgba(34, 247, 255, 0.46);
    box-shadow: 0 34px 118px rgba(0, 0, 0, 0.48), 0 0 64px rgba(34, 247, 255, 0.16), 0 0 74px rgba(255, 61, 242, 0.1);
}

.project-card-icon i,
.contact-card-icon i,
.music-consent-icon i {
    filter: drop-shadow(0 0 14px rgba(34, 247, 255, 0.48));
}

.scroll-top {
    overflow: hidden;
}

.scroll-top::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(34, 247, 255, 0.16), rgba(255, 61, 242, 0.12));
    opacity: 0;
    transition: opacity 260ms ease;
}

.scroll-top:hover::before {
    opacity: 1;
}

.music-consent-card {
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.52), 0 0 54px rgba(34, 247, 255, 0.16);
}

.td-lock-screen .infos .logo-web-title {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.04)) padding-box,
        linear-gradient(135deg, rgba(34, 247, 255, 0.48), rgba(157, 108, 255, 0.18), rgba(255, 61, 242, 0.4)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 30px 120px rgba(0, 0, 0, 0.5), 0 0 64px rgba(34, 247, 255, 0.16);
}

.td-lock-screen .infos .web_desc {
    color: rgba(220, 229, 255, 0.84);
}

.td-lock-screen .medias .date {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)) padding-box,
        linear-gradient(135deg, rgba(34, 247, 255, 0.42), rgba(255, 61, 242, 0.28)) border-box;
    border: 1px solid transparent;
}

.premium-motion .reveal,
.premium-motion .scroll-panel,
.premium-motion .skill-pill {
    will-change: transform, opacity, filter;
}

.premium-motion .scroll-panel.premium-panel-ready.is-leaving {
    opacity: 1;
    filter: blur(0) saturate(1);
    clip-path: inset(0 0 0 0 round 8px);
    transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
}

@keyframes premiumGridDrift {
    from {
        background-position: 0 0, 0 0, 0 0;
    }
    to {
        background-position: 128px 128px, -128px 128px, 0 0;
    }
}

@keyframes premiumTextSweep {
    from {
        background-position: 0 50%;
    }
    to {
        background-position: 260% 50%;
    }
}

@keyframes premiumPanelSweep {
    0%,
    18% {
        transform: translate3d(-42%, 0, 0);
        opacity: 0;
    }
    35% {
        opacity: 0.85;
    }
    58%,
    100% {
        transform: translate3d(42%, 0, 0);
        opacity: 0;
    }
}

@keyframes premiumIconShine {
    0%,
    40% {
        transform: translate3d(-45%, 0, 0) rotate(0deg);
        opacity: 0;
    }
    54% {
        opacity: 0.7;
    }
    72%,
    100% {
        transform: translate3d(45%, 0, 0) rotate(0deg);
        opacity: 0;
    }
}

@media (max-width: 640px) {
    .site-header {
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)) padding-box,
            linear-gradient(135deg, rgba(34, 247, 255, 0.38), rgba(255, 61, 242, 0.32)) border-box;
    }

    .content-panel::after,
    .skill-block::after,
    .project-card::after,
    .pay-card::after,
    .contact-card::after {
        display: none;
    }

    .marquee-inner span {
        font-size: 0.76rem;
    }

    .music-consent {
        padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .music-consent-card {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .ambient-grid .cyber-spark {
        display: none;
    }

    .marquee-inner {
        animation-duration: var(--marquee-duration, 42s) !important;
        animation-iteration-count: infinite !important;
    }

    .content-panel::after,
    .skill-block::after,
    .project-card::after,
    .pay-card::after,
    .contact-card::after {
        display: none;
    }
}