/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Oswald:wght@500;600;700&display=swap');

/* Base styles that extend Tailwind */
html { 
    scroll-behavior: smooth; 
}

body { 
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

h1, h2, h3, .heading { 
    font-family: 'Oswald', ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.025em;
}

h2 { 
    text-transform: uppercase;
    font-size: 1.5rem;
    line-height: 2rem;
}

@media (min-width: 768px) {
    h2 {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
}

p { 
    line-height: 1.625; 
}

/* Reveal-on-scroll animation */
@keyframes tar-reveal-up {
    from { 
        opacity: 0; 
        transform: translateY(16px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.reveal { 
    opacity: 0; 
    transform: translateY(16px); 
}

.reveal.is-visible { 
    animation: tar-reveal-up 180ms ease-out forwards; 
}

@media (prefers-reduced-motion: reduce) {
    .reveal, 
    .reveal.is-visible { 
        opacity: 1; 
        transform: none; 
        animation: none; 
    }
}

/* Micro-interactions */
.card-hover { 
    transition: transform 150ms ease-out;
}

.card-hover:hover { 
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Kinetic nav link underline */
.link-kinetic { 
    position: relative;
    display: inline-block;
}

.link-kinetic::after {
    content: "";
    position: absolute;
    left: 0; 
    bottom: -2px; 
    height: 2px; 
    width: 0;
    background: linear-gradient(90deg, #D7322A, #EE565B);
    transition: width 160ms ease-out;
}

.link-kinetic:hover::after, 
.link-kinetic:focus-visible::after { 
    width: 100%; 
}

/* Alternating section bands */
.band, 
.band-light, 
.band-bright { 
    position: relative; 
    overflow: hidden; 
}

.band > *, 
.band-light > *, 
.band-bright > * { 
    position: relative; 
    z-index: 1; 
}

/* Ensure content appears above overlay */
#about .relative.z-10 {
    position: relative;
    z-index: 10;
}

.band-bright::before { 
    content: ""; 
    position: absolute; 
    inset: 0; 
    z-index: 0; 
    pointer-events: none; 
    background: radial-gradient(1600px 700px at -15% -20%, #FF8A5C 0%, rgba(255,138,92,0.0) 45%), 
                radial-gradient(1400px 900px at 120% 130%, #FFB07B 0%, rgba(255,176,123,0.0) 50%), 
                linear-gradient(135deg, #FF7F50 0%, #C91F19 50%, #FFA04D 100%); 
}

.band-bright::after { 
    content: ""; 
    position: absolute; 
    inset: 0; 
    z-index: 0; 
    pointer-events: none; 
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="2400" height="560" viewBox="0 0 2400 560"><g fill="none" stroke="%23FFFFFF"><g transform="rotate(-3 1200 280)" stroke-opacity=".9" stroke-width=".55"><path d="M0 40 C280 10 1120 120 2400 70"/><path d="M0 70 C420 120 1320 20 2400 110"/><path d="M0 98 C360 160 1500 60 2400 145"/><path d="M0 126 C320 220 1680 90 2400 175"/></g><g transform="rotate(2 1200 280)" stroke-opacity=".7" stroke-width=".5"><path d="M0 160 C500 60 1380 210 2400 205"/><path d="M0 190 C300 320 1700 120 2400 235"/><path d="M0 218 C760 140 1100 300 2400 265"/><path d="M0 245 C260 380 2000 210 2400 295"/></g><g transform="rotate(-5 1200 280)" stroke-opacity=".55" stroke-width=".45"><path d="M0 280 C840 100 1500 340 2400 325"/><path d="M0 305 C300 420 1900 260 2400 350"/><path d="M0 330 C620 210 1200 420 2400 370"/><path d="M0 352 C220 500 2100 290 2400 395"/></g><g transform="rotate(1 1200 280)" stroke-opacity=".4" stroke-width=".4"><path d="M0 380 C460 520 1300 310 2400 420"/><path d="M0 405 C900 300 1100 470 2400 445"/><path d="M0 430 C260 520 1900 360 2400 470"/><path d="M0 452 C780 340 1500 500 2400 490"/></g></g></svg>'); 
    background-size: 2400px 560px; 
    background-position: 0 0; 
    background-repeat: repeat; 
}

.band-light::before { 
    content: ""; 
    position: absolute; 
    inset: 0; 
    z-index: 0; 
    pointer-events: none; 
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1200" viewBox="0 0 1600 1200"><g fill="none" stroke="rgba(11,11,11,0.26)" stroke-width="1.2"><g transform="rotate(-18 800 600)"><ellipse cx="800" cy="600" rx="780" ry="420"/><ellipse cx="800" cy="600" rx="700" ry="380"/><ellipse cx="800" cy="600" rx="620" ry="340"/></g><g transform="rotate(6 800 600)"><ellipse cx="800" cy="600" rx="500" ry="260"/><ellipse cx="800" cy="600" rx="430" ry="230"/><ellipse cx="800" cy="600" rx="360" ry="200"/></g><g transform="rotate(-8 800 600)"><ellipse cx="800" cy="600" rx="280" ry="150"/><ellipse cx="800" cy="600" rx="220" ry="120"/></g></g></svg>'); 
    background-size: 1600px 1200px; 
    background-repeat: repeat; 
    background-position: center; 
}



@media (prefers-reduced-motion: reduce) {
    .band-bright::after { 
        animation: none; 
    }
}

/* Gallery scrollbar hiding */
#scroller::-webkit-scrollbar {
    display: none;
}

/* Clear float utility */
.clear-both {
    clear: both;
}



/* Custom rotations for workout tags */
.workout-rotate-1 { transform: rotate(-6deg); }
.workout-rotate-2 { transform: rotate(3deg); }
.workout-rotate-3 { transform: rotate(-3deg); }
.workout-rotate-4 { transform: rotate(2deg); }
.workout-rotate-5 { transform: rotate(-8deg); }
.workout-rotate-6 { transform: rotate(6deg); }
.workout-rotate-7 { transform: rotate(-4deg); }
.workout-rotate-8 { transform: rotate(1deg); }
.workout-rotate-9 { transform: rotate(-5deg); }
.workout-rotate-10 { transform: rotate(2deg); }
.workout-rotate-11 { transform: rotate(-7deg); }
.workout-rotate-12 { transform: rotate(2deg); }
.workout-rotate-13 { transform: rotate(-5deg); }
.workout-rotate-14 { transform: rotate(1deg); }
.workout-rotate-15 { transform: rotate(-3deg); }
.workout-rotate-16 { transform: rotate(3deg); }
.workout-rotate-17 { transform: rotate(-2deg); }
.workout-rotate-18 { transform: rotate(2deg); }
.workout-rotate-19 { transform: rotate(-6deg); }
.workout-rotate-20 { transform: rotate(1deg); }
.workout-rotate-21 { transform: rotate(-2deg); }

/* Responsive utilities for coaches section */
@media (max-width: 767px) {
    .coaches-mobile {
        display: block;
    }
    .coaches-desktop {
        display: none;
    }
}

@media (min-width: 768px) {
    .coaches-mobile {
        display: none;
    }
    .coaches-desktop {
        display: block;
    }
}

/* Wordmark styling for dark backgrounds */
.wordmark-invert {
    filter: brightness(0) invert(1);
}

/* Responsive wordmark sizing - consistent between header and footer */
.wordmark-header,
.wordmark-footer {
    height: 1.5rem; /* 24px */
}

@media (min-width: 640px) {
    .wordmark-header,
    .wordmark-footer {
        height: 1.75rem; /* 28px */
    }
}

@media (min-width: 768px) {
    .wordmark-header,
    .wordmark-footer {
        height: 2rem; /* 32px */
    }
}

/* Print styles */
@media print {
    .band-bright::before,
    .band-bright::after,
    .band-light::before {
        display: none;
    }
}

/* Make text white in bright/red sections for better readability */
.band-bright h2,
.band-bright h3,
.band-bright h4,
.band-bright h5,
.band-bright h6,
.band-bright p,
.band-bright li,
.band-bright span,
.band-bright div {
    color: white;
}

/* Ensure links in bright sections are also white */
.band-bright a {
    color: white;
}

.band-bright a:hover {
    color: #f3f4f6; /* Light gray on hover */
}

/* Gallery button overrides for bright sections */
.band-bright #prev-btn,
.band-bright #next-btn {
    background-color: white !important;
    color: #0B0B0B !important;
    border: none !important;
    outline: none !important;
}

.band-bright #prev-btn:focus,
.band-bright #next-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.band-bright .gallery-plus-btn {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #0B0B0B !important;
}

/* Gallery pagination dots styling */
#dots button {
    border: 1px solid #000000 !important;
    transition: all 200ms ease-out;
}

#dots button:hover {
    transform: scale(1.1);
}

/* Ensure dots are visible in bright sections */
.band-bright #dots button {
    border: 1px solid #000000 !important;
}

/* Footer mobile adjustments - spacing only */
@media (max-width: 479px) {
    footer .flex {
        white-space: nowrap;
    }
    
    footer a {
        text-decoration: none;
        white-space: nowrap;
    }
}