/* Tailwind base injects */
@tailwind base;
@tailwind components;
@tailwind utilities;

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

::-webkit-scrollbar-track {
    background: #05050A;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #2D2D3B;
}

/* Base resets & Text rendering optimization */
html {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Selection color */
::selection {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
}

/* Initial state for ScrollTrigger elements before JS takes over */
.reveal-text {
    opacity: 0;
    visibility: hidden;
    /* We handle translation in JS to prevent initial jump */
    transform: translateY(30px);
}

/* Glow effect around the form */
.form-wrapper::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.01));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

/* Universal Glassmorphism Physics (Stitch-Level Index of Refraction) */
/* This replaces all disparate tailwind backdrop-blur properties to create unified material tension */
.glass-pane {
    background-color: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    box-shadow: 0 20px 80px -20px rgba(0, 0, 0, 0.8), inset 0 0 0 0.5px rgba(255, 255, 255, 0.05);
}

/* Background gradient animation */
.gradient-bg {
    background: radial-gradient(circle at 50% 50%, #0E0E14 0%, #05050A 100%);
    background-size: 200% 200%;
    animation: gradientMove 15s ease infinite alternate;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Interactive Fluid Glow Spotlight */
.glow-spotlight {
    position: fixed;
    top: 0;
    left: 0;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, rgba(59, 130, 246, 0.05) 30%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 1s ease;
}

/* Show glow after initial script load */
body.loaded .glow-spotlight {
    opacity: 1;
}

/* --- High-End SVG Animation Classes --- */
/* Hide ambient SVGs on mobile — copy stands alone, no visual collision */
@media (max-width: 768px) {
    .svg-complex {
        display: none !important;
    }
}

.svg-complex {
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.03));
}
.svg-spin-slow {
    animation: svgSpin 20s linear infinite;
    transform-origin: center;
}
.svg-spin-fast {
    animation: svgSpin 8s linear infinite;
    transform-origin: center;
}
.svg-spin-fast.reverse, .svg-spin-slow.reverse {
    animation-direction: reverse;
}
@keyframes svgSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.svg-pulse {
    animation: svgPulse 3s ease-in-out infinite alternate;
    transform-origin: center;
}
@keyframes svgPulse {
    0% { opacity: 0.2; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1.15); }
}
.svg-morph-pulse {
    animation: morphPulse 4s ease-in-out infinite alternate;
    transform-origin: center;
}
@keyframes morphPulse {
    0% { transform: scaleX(0.9) skewX(2deg); opacity: 0.4; }
    100% { transform: scaleX(1.15) skewX(-2deg); opacity: 1; }
}
.svg-vertical-bob {
    animation: verticalBob 4s ease-in-out infinite alternate;
}
@keyframes verticalBob {
    0% { transform: translateY(-8px); }
    100% { transform: translateY(8px); }
}
.svg-orbit-system {
    animation: svgSpin 45s linear infinite;
    transform-origin: center;
}
.svg-draw-continuous, .svg-draw-waveform {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: strokeDraw 4s ease-in-out infinite alternate;
}
@keyframes strokeDraw {
    0% { stroke-dashoffset: 200; }
    100% { stroke-dashoffset: 0; }
}

/* Custom Animated Cursor */
@media (pointer: fine) {
    * {
        cursor: none !important;
    }
}

.cursor-dot {
    width: 10px;
    height: 10px;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease;
}

/* Hide outline completely since we are using minimal dot */
.cursor-outline {
    display: none;
}

/* Expand minimal cursor on interactive elements */
.cursor-hover .cursor-dot {
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* Brand Logo Marquee */
.marquee-track {
    animation: marqueeTrack 80s linear infinite;
    /* Force GPU hardware acceleration to prevent Safari blanking glitch */
    will-change: transform;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
}
@keyframes marqueeTrack {
    0% { transform: translateX(0%) translateZ(0); }
    100% { transform: translateX(-50%) translateZ(0); }
}

/* Guarantee marquee logos always visible — never caught by GSAP autoAlpha */
.marquee-track img {
    opacity: 0.35;
    visibility: visible !important;
    transform: translateZ(0);
}
.marquee-track img:hover {
    opacity: 1;
    filter: none;
}

/* ═══════════════════════════════════════════
   EDITORIAL TYPOGRAPHY — SIZE CONTRAST SYSTEM
   Pattern: small muted setup → large bold statement
   ═══════════════════════════════════════════ */

/* Base container: governs mobile centering only */
.story-text {
    text-align: left;
}

@media (max-width: 767px) {
    .story-text {
        max-width: 17.5rem;
        margin-left: auto;
        margin-right: auto;
    }
}

/* SETUP LINE — small muted whisper above the statement
   ~55% the size of .t-display. No weight. Stepped back. */
.t-setup {
    font-size: clamp(1rem, 0.8125rem + 0.8125vw, 1.375rem);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0em;
    color: rgba(255, 255, 255, 0.38);
    text-wrap: balance;
}

/* DISPLAY LINE — hero statement. Large, white, tight.
   This is the line that matters. Everything else serves it. */
.t-display {
    font-size: clamp(1.6rem, 1rem + 2.5vw, 3rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #ffffff;
    text-wrap: balance;
}

/* BODY — medium weight narrative, the stat block voice */
.t-body {
    font-size: clamp(1rem, 0.75rem + 1.1vw, 1.6rem);
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.42);
    text-wrap: balance;
}

/* Bright emphasis — color + weight override, no size change */
.t-bright {
    color: #ffffff;
    font-weight: 500;
}

/* HEADLINE — the single max-drama moment (wedding cake only) */
.story-headline {
    font-size: clamp(2.2rem, 1.2rem + 4vw, 4.5rem);
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: -0.04em;
    color: #ffffff;
    text-wrap: balance;
}

/* ── Mobile +30% size boost ──────────────────────────────
   All min + mid clamp values ×1.3. Max cap preserved.
   Desktop is completely unaffected.
   ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .t-setup        { font-size: clamp(1.3rem, 1.056rem + 1.056vw, 1.375rem); }
    .t-display      { font-size: clamp(2.08rem, 1.3rem + 3.25vw, 3rem); }
    .t-body         { font-size: clamp(1.3rem, 0.975rem + 1.43vw, 1.6rem); }
    .story-headline { font-size: clamp(2.86rem, 1.56rem + 5.2vw, 4.5rem); }
}