/* Import premium fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Radley:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@700;800&display=swap');

/* Core Brand variables & base transitions */
:root {
    --color-charcoal: #050505;
    --color-charcoal-card: #111111;
    --color-gold: #C9A96E;
    --color-muted-gray: #888880;
    
    --color-cream: #F9F7F3;
    --color-slate-black: #000000;
    --color-warm-sand: #BCA57F;
}

/* Custom Scrollbar for premium feel */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-charcoal);
}
::-webkit-scrollbar-thumb {
    background: #222222;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold);
}

/* Base resets & selections */
html {
    scroll-behavior: smooth;
}

::selection {
    background-color: var(--color-gold);
    color: var(--color-charcoal);
}

.subbrand-selection ::selection {
    background-color: var(--color-warm-sand);
    color: var(--color-slate-black);
}

/* SVG Grain Noise Layer (Fixed Overlay) */
.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0.035;
    pointer-events: none;
    z-index: 9999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Custom Outlined Text for Syne font titles */
.text-outline-gold {
    -webkit-text-stroke: 1px var(--color-gold);
    color: transparent;
}
.text-outline-gray {
    -webkit-text-stroke: 1px rgba(136, 136, 128, 0.4);
    color: transparent;
}

/* Ticker Animation */
@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

.animate-ticker {
    display: inline-flex;
    white-space: nowrap;
    animation: ticker 25s linear infinite;
}

.animate-ticker:hover {
    animation-play-state: paused;
}

/* Sub-Brand NexLyr styling details */
.nexlyr-font-heading {
    font-family: 'Radley', serif;
}
.nexlyr-font-body {
    font-family: 'Inter', sans-serif;
}

/* Premium gradient overlays for project cards */
.project-card-overlay {
    background: linear-gradient(to top, rgba(5, 5, 5, 0.95) 0%, rgba(5, 5, 5, 0.4) 60%, transparent 100%);
}

.project-card:hover .project-card-overlay {
    background: linear-gradient(to top, rgba(201, 169, 110, 0.95) 0%, rgba(5, 5, 5, 0.7) 60%, transparent 100%);
}

/* Page transitions */
.fade-in {
    animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   HERO VIDEO: Nuke ALL browser-native media controls & overlays.
   Chrome / Edge / Safari inject these via pseudo-elements even when the
   `controls` attribute is absent. This removes every one of them.
───────────────────────────────────────────────────────────────────────────── */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-overlay-enclosure,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-volume-slider-container,
video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-rewind-button,
video::-webkit-media-controls-seek-back-button,
video::-webkit-media-controls-seek-forward-button,
video::-webkit-media-controls-closed-captions-button,
video::-webkit-media-controls-picture-in-picture-button,
video::-webkit-media-controls-wireless-playback-picker-button,
video::-webkit-media-controls-timeline-container,
video::-webkit-media-controls-container {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Lock down the hero video elements — no pointer interaction */
#hero-mp4-video,
#hero-yt-iframe {
    pointer-events: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}