/*
Theme Name: Jose - Joseph Kusaga Portfolio
Theme URI: https://josephkusaga.com
Description: A luxury dark portfolio theme for Joseph Kusaga - Boss Joe. Featuring gold accents, premium typography, and cinematic animations.
Version: 1.0.0
Author: Boss Joe
Author URI: https://josephkusaga.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jose-theme
*/

/* ============================================
   WordPress Dark Background Overrides
   Prevents white flashes on mobile scroll/repaint
   ============================================ */
html,
body,
#page,
#content,
#primary,
#main,
.site,
.site-content,
.entry-content,
.wp-site-blocks,
main.site-main,
.wp-block-group,
.wp-block-html {
    background-color: #050508 !important;
}

/* ============================================
   Base Reset & Global
   ============================================ */
html {
    scroll-behavior: smooth;
    margin-top: 0 !important;
    padding-top: env(safe-area-inset-top) !important;
    background-color: #050508 !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
    /* Extend background into iPhone safe areas (notch, home indicator) */
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

/* WordPress admin bar override */
html.wp-toolbar {
    padding-top: 0 !important;
}

#wpadminbar {
    display: none !important;
}

@media (max-width: 768px) {
    html {
        scroll-behavior: auto;
    }

    .reveal {
        transition-delay: 0ms !important;
        transition-duration: 0.6s !important;
        transform: translateY(15px);
    }
}

/* ============================================
   Gold Text Utilities
   ============================================ */
.text-shimmer-gold {
    background: linear-gradient(to right, #8A7038 0%, #F9E6B5 50%, #8A7038 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmer 5s linear infinite;
}

.border-gradient-gold {
    border-image: linear-gradient(to bottom, #8A7038, #F9E6B5, #8A7038) 1;
}

.gold-foil-text {
    background-image: linear-gradient(to bottom right, #CFB06D, #E8D3A2, #B38E37, #F2E4B8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}

.text-gradient-gold {
    background-image: linear-gradient(135deg, #F3E5AB 0%, #D4AF37 50%, #AA8C2C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bg-gradient-gold {
    background-image: linear-gradient(135deg, #F3E5AB 0%, #D4AF37 50%, #AA8C2C 100%);
}

/* ============================================
   Hairline Borders
   ============================================ */
.hairline-b {
    border-bottom-width: 0.5px;
    border-color: rgba(212, 175, 55, 0.3);
}

.hairline-t {
    border-top-width: 0.5px;
    border-color: rgba(212, 175, 55, 0.3);
}

.hairline-l {
    border-left-width: 0.5px;
    border-color: rgba(212, 175, 55, 0.3);
}

/* ============================================
   Luxury Card
   ============================================ */
.luxury-card {
    background: linear-gradient(145deg, #0a1128, #050505);
    box-shadow: 5px 5px 15px #020202, -5px -5px 15px #121212;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.luxury-card:hover {
    transform: translateY(-5px) rotateX(2deg);
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.4);
}

/* ============================================
   Keyframe Animations
   ============================================ */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

@keyframes float-slow {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.animate-float-slow {
    animation: float-slow 8s ease-in-out infinite;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

.float {
    animation: float 6s ease-in-out infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-250px * 7));
    }
}

/* ============================================
   Scroll Reveal
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   Slider / Carousel
   ============================================ */
.slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slide-track {
    display: flex;
    width: calc(250px * 14);
    animation: scroll 40s linear infinite;
}

.slide-track:hover {
    animation-play-state: paused;
}

.slide {
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
}

.slide img {
    width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: contain;
    filter: grayscale(100%) opacity(70%) sepia(30%) hue-rotate(15deg);
    transition: all 0.5s ease;
}

.slide:hover img {
    filter: grayscale(0%) opacity(100%);
    transform: scale(1.1);
}

/* ============================================
   Custom Scrollbar
   ============================================ */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #050505;
}

::-webkit-scrollbar-thumb {
    background: #333;
}

::-webkit-scrollbar-thumb:hover {
    background: #D4AF37;
}

/* ============================================
   Mobile Touch Interactions
   On touch devices, :hover doesn't fire — use :active for tap feedback
   ============================================ */
@media (hover: none) and (pointer: coarse) {

    /* Empire media cards — background zoom + title highlight on tap */
    .group:active>div[class*="bg-cover"] {
        opacity: 0.5 !important;
        transform: scale(1.1);
    }

    .group:active h3 {
        color: #F9E6B5 !important;
    }

    /* Empire card gold divider expand on tap */
    .group:active .w-12.h-\[1px\].bg-gold {
        width: 6rem;
    }

    /* Luxury cards — lift + gold glow on tap */
    .luxury-card:active {
        transform: translateY(-5px) rotateX(2deg);
        box-shadow: 0 15px 30px rgba(212, 175, 55, 0.15);
        border-color: rgba(212, 175, 55, 0.4);
    }

    /* Innovation cards — lift on tap */
    .perspective-1000 .group:active>div,
    .group.perspective-1000:active>div {
        transform: translateY(-10px);
    }
}