@font-face {
    font-family: 'NewValley';
    src: url('./new-valley.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Base and Typography tweaks */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Elegant Scrollbar (Jawa Colors) */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #001f40;
}

::-webkit-scrollbar-thumb {
    background: #004080;
    border-radius: 10px;
}

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



/* ThreeJS Canvas Container fixes */
#hero-section {
    position: relative;
    overflow: hidden;
}

#hero-section canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Subtle Film Grain / Noise Overlay for Hero (Optimized for raster instead of SVG) */
.bg-noise {
    /* Using a pre-generated lightweight PNG/WebP base64 noise map avoids heavy SVG <feTurbulence> CPU calculations */
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAGFBMVEUAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVWA7N/gAAAABXRSTlMNDxESFjk1w2sAAAC0SURBVDjLzZLBDYAwEAJ9tSBOYCj2X8ZIsECgCtz1a/f6T5X01mSjM5FjM2YyRjO5yBiP5C7jG5I7I6V785LzUvNy85bzFvO2c6fzpHOz86ZzrfOk86DzqHOr86zzrHOx86nzq/Ot86zzpnOnc6fzp3On85vzm/Oj86dzpnOmc6bzpnOm86bzpnOmc6ZzpnOmc6ZzpnOmc6ZzpnOmc6ZzpnOmc6ZzpnOmc6ZzpnOmc6Zz/N75BxJtX6Z0H2gHAAAAAElFTkSuQmCC");
    background-repeat: repeat;
    mix-blend-mode: overlay;
    transform: translateZ(0);
    /* Hardware accelerate */
}

/* Custom Animation utility */
@keyframes scrollDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

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

.animate-scroll-down {
    animation: scrollDown 2s infinite ease-in-out;
}

/* Soft transition utilities for GSAP hooks */
.gsap-fade-up {
    will-change: transform, opacity;
    transform: translateZ(0);
}

.gsap-service,
.gsap-step,
.gsap-step-content-left,
.gsap-step-content-right,
.gsap-step-dot,
.gsap-benefit {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* GPU Hardware Acceleration Helper */
.gpu-accelerate {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Optimized Hover Shadow (Prevents Repaint Pipeline) */
.gsap-benefit {
    position: relative;
    /* Maintain existing base styles in HTML via Tailwind */
}

/* Base Shadow */
.gsap-benefit::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 32px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: -1;
}

/* Activate shadow only on hover via opacity */
.gsap-benefit:hover::before {
    opacity: 1;
}

/* --- Shiny CTA Button --- */
@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --gradient-angle-offset {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --gradient-percent {
    syntax: "<percentage>";
    initial-value: 5%;
    inherits: false;
}

@property --gradient-shine {
    syntax: "<color>";
    initial-value: white;
    inherits: false;
}

.shiny-cta {
    --shiny-cta-bg: #000b1a; /* jawa-darkest */
    --shiny-cta-bg-subtle: #001f40; /* jawa-darker */
    --shiny-cta-fg: #ffffff;
    --shiny-cta-highlight: #d7ede2; /* jawa-mint */
    --shiny-cta-highlight-subtle: #b8dcc9; /* jawa-teal */
    --animation: gradient-angle linear infinite;
    --duration: 3s;
    --shadow-size: 2px;
    --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
    
    isolation: isolate;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    outline-offset: 4px;
    padding: 1.5rem 3rem; /* Increased size */
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem; /* Increased text size */
    letter-spacing: 0.1em; /* tracking-widest */
    text-transform: uppercase;
    font-weight: 700; /* font-bold */
    border: 1px solid transparent;
    border-radius: 360px;
    color: var(--shiny-cta-fg);
    background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
      conic-gradient(
        from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
        transparent,
        var(--shiny-cta-highlight) var(--gradient-percent),
        var(--gradient-shine) calc(var(--gradient-percent) * 2),
        var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
        transparent calc(var(--gradient-percent) * 4)
      ) border-box;
    box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);
    transition: var(--transition);
    transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine;
}

.shiny-cta::before,
.shiny-cta::after,
.shiny-cta span::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    z-index: -1;
}

.shiny-cta:active {
    translate: 0 1px;
}

/* Dots pattern */
.shiny-cta::before {
    --size: calc(100% - var(--shadow-size) * 3);
    --position: 2px;
    --space: calc(var(--position) * 2);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(
      circle at var(--position) var(--position),
      white calc(var(--position) / 4),
      transparent 0
    ) padding-box;
    background-size: var(--space) var(--space);
    background-repeat: space;
    mask-image: conic-gradient(
      from calc(var(--gradient-angle) + 45deg),
      black,
      transparent 10% 90%,
      black
    );
    border-radius: inherit;
    opacity: 0.4;
    z-index: -1;
}

/* Inner shimmer */
.shiny-cta::after {
    --animation: shimmer linear infinite;
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(
      -50deg,
      transparent,
      var(--shiny-cta-highlight),
      transparent
    );
    mask-image: radial-gradient(circle at bottom, transparent 40%, black);
    opacity: 0.6;
}

.shiny-cta span {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.shiny-cta span::before {
    --size: calc(100% + 1rem);
    width: var(--size);
    height: var(--size);
    box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
    opacity: 0;
    transition: opacity var(--transition);
    animation: calc(var(--duration) * 1.5) breathe linear infinite;
}

/* Animate */
.shiny-cta,
.shiny-cta::before,
.shiny-cta::after {
    animation: var(--animation) var(--duration),
      var(--animation) calc(var(--duration) / 0.4) reverse paused;
    animation-composition: add;
}

.shiny-cta:is(:hover, :focus-visible) {
    --gradient-percent: 20%;
    --gradient-angle-offset: 95deg;
    --gradient-shine: var(--shiny-cta-highlight-subtle);
}

.shiny-cta:is(:hover, :focus-visible),
.shiny-cta:is(:hover, :focus-visible)::before,
.shiny-cta:is(:hover, :focus-visible)::after {
    animation-play-state: running;
}

.shiny-cta:is(:hover, :focus-visible) span::before {
    opacity: 1;
}

@keyframes gradient-angle {
    to {
      --gradient-angle: 360deg;
    }
}

@keyframes shimmer {
    to {
      rotate: 360deg;
    }
}

/* --- RESPONSIVE RESET & LAYOUT GUARDS --- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video, iframe, canvas {
    max-width: 100%;
    height: auto;
}

/* Adaptive Grid Layout */
.adaptive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

@media (min-width: 768px) {
    .adaptive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}



/* Touch targets accessibility for viewports < 1024px (Mobile & iPad) */
@media (max-width: 1023px) {
    .audience-btn, 
    .type-btn, 
    .thumb-btn, 
    a.btn-swipe, 
    button.btn-swipe,
    a.btn-interactive, 
    button.btn-interactive,
    #mobile-menu-btn,
    .nav-link,
    #checkout-btn,
    .close-btn,
    #lightbox-modal button,
    .shiny-cta,
    .product-card a,
    .buy-btn {
        min-height: 48px !important;
        min-width: 48px !important;
    }
}

/* Safari Layout Engine containment for lazy-loaded assets */
.product-card img[loading="lazy"] {
    content-visibility: auto;
    contain-intrinsic-size: 100% 350px;
}



/* Override letter-spacing in RTL/Arabic layouts to prevent character disconnection */
[dir="rtl"] .glowing-badge,
[dir="rtl"] .shiny-cta {
    letter-spacing: normal !important;
}