/* ─── Theme tokens: light ──────────────────────────────────────
   RGB channel format (space-separated) so Tailwind's / opacity
   modifier works: rgb(var(--c-bg) / 0.7)
   ─────────────────────────────────────────────────────────────*/
:root {
    --c-bg:         250 248 254;   /* #faf8fe */
    --c-surface:    250 248 254;   /* #faf8fe */
    --c-s-bright:   250 248 254;   /* #faf8fe */
    --c-s-cl:       244 243 248;   /* #f4f3f8 surface-container-low */
    --c-s-c:        239 237 243;   /* #efedf3 surface-container */
    --c-s-ch:       233 231 237;   /* #e9e7ed surface-container-high */
    --c-s-chh:      227 226 231;   /* #e3e2e7 surface-container-highest */
    --c-s-cl0:      255 255 255;   /* #ffffff surface-container-lowest */
    --c-s-dim:      219 217 223;   /* #dbd9df surface-dim */
    --c-s-v:        227 226 231;   /* #e3e2e7 surface-variant */
    --c-on-bg:       26  27  31;   /* #1a1b1f on-background */
    --c-on-s:        26  27  31;   /* #1a1b1f on-surface */
    --c-on-sv:       79  69  56;   /* #4f4538 on-surface-variant */
    --c-sec:         95  94  96;   /* #5f5e60 secondary */
    --c-sec-c:      229 225 228;   /* #e5e1e4 secondary-container */
    --c-sec-f:      229 225 228;   /* #e5e1e4 secondary-fixed */
    --c-sec-fd:     200 198 200;   /* #c8c6c8 secondary-fixed-dim */
    --c-ov:         211 196 179;   /* #d3c4b3 outline-variant */
    --c-ol:         129 117 102;   /* #817566 outline */
    --c-inv-s:       47  48  52;   /* #2f3034 inverse-surface */
    --c-inv-os:     241 240 246;   /* #f1f0f6 inverse-on-surface */
    --c-on-sec-c:   101 100 102;   /* #656466 on-secondary-container */
    --c-primary:    125  87  13;   /* #7d570d primary */
}

/* ─── Theme tokens: dark ───────────────────────────────────────*/
html.dark {
    --c-bg:          15  14  16;   /* #0f0e10 */
    --c-surface:     18  17  20;   /* #121114 */
    --c-s-bright:    57  54  60;   /* #39363c */
    --c-s-cl:        26  25  30;   /* #1a191e */
    --c-s-c:         30  28  34;   /* #1e1c22 */
    --c-s-ch:        37  34  40;   /* #252228 */
    --c-s-chh:       48  45  51;   /* #302d33 */
    --c-s-cl0:       10   9  12;   /* #0a090c */
    --c-s-dim:       20  18  24;   /* #141218 */
    --c-s-v:         74  66  69;   /* #4a4245 */
    --c-on-bg:      230 225 229;   /* #e6e1e5 */
    --c-on-s:       230 225 229;   /* #e6e1e5 */
    --c-on-sv:      205 196 204;   /* #cdc4cc */
    --c-sec:        203 197 201;   /* #cbc5c9 */
    --c-sec-c:       73  70  77;   /* #49464d */
    --c-sec-f:      229 225 228;   /* fixed — same in dark */
    --c-sec-fd:     200 198 200;   /* fixed — same in dark */
    --c-ov:          74  66  69;   /* #4a4245 */
    --c-ol:         157 144 152;   /* #9d9098 */
    --c-inv-s:      230 225 229;   /* #e6e1e5 */
    --c-inv-os:      49  47  50;   /* #312f32 */
    --c-on-sec-c:   203 197 201;   /* #cbc5c9 */
    --c-primary:    240 190 109;   /* #f0be6d (inverse-primary becomes active primary in dark) */
}

/* ─── Noise texture overlay ───────────────────────────────────*/
.noise-bg {
    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.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ─── Services marquee ─────────────────────────────────────────*/
@keyframes scrollMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee-content {
    animation: scrollMarquee 25s linear infinite;
}

/* ─── Decorative divider ───────────────────────────────────────*/
.sorensen-divider {
    position: relative;
    width: 100%;
    height: 1px;
    background-color: rgb(var(--c-ov));
}
.sorensen-divider::before,
.sorensen-divider::after {
    content: '';
    position: absolute;
    top: -2px;
    width: 5px;
    height: 5px;
    background-color: rgb(var(--c-ov));
    transform: rotate(45deg);
}
.sorensen-divider::before { left: 0; }
.sorensen-divider::after  { right: 0; }

/* ─── Material Symbols weight ─────────────────────────────────*/
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ─── Editorial form elements ─────────────────────────────────*/
.input-editorial {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgb(var(--c-sec-f));
    color: rgb(var(--c-on-s));
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 24px;
    padding: 1rem 0;
    transition: border-color 0.3s;
    outline: none;
    box-shadow: none;
}
.input-editorial:focus {
    border-bottom-color: rgb(var(--c-primary));
    box-shadow: none;
}
.label-editorial {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 600;
    text-transform: uppercase;
    color: rgb(var(--c-sec));
    margin-bottom: 4px;
    display: block;
}
.form-group {
    position: relative;
    margin-bottom: 2rem;
}
select.input-editorial {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%235f5e60%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem top 50%;
    background-size: 0.65rem auto;
    padding-right: 2rem;
}
input[type="checkbox"].editorial-checkbox {
    border-radius: 0;
    border-color: rgb(var(--c-sec-f));
    width: 1.25rem;
    height: 1.25rem;
    background: transparent;
    cursor: pointer;
}

/* ─── Contact page floating labels ────────────────────────────*/
.floating-label-group {
    position: relative;
}
.floating-label-group label {
    position: absolute;
    left: 0;
    top: 12px;
    font-size: 10px;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.1em;
    font-weight: 600;
    text-transform: uppercase;
    color: rgb(var(--c-sec));
    pointer-events: none;
    transition: top 0.2s ease, color 0.2s ease, font-size 0.2s ease;
}
.floating-label-group input:focus + label,
.floating-label-group input:not(:placeholder-shown) + label,
.floating-label-group textarea:focus + label,
.floating-label-group textarea:not(:placeholder-shown) + label,
.floating-label-group.focused label,
.floating-label-group.has-value label {
    top: -14px;
    font-size: 9px;
    color: #b68a3e;
}

/* ─── Representation athlete cards ────────────────────────────*/
.athlete-card:hover .corner-tag {
    opacity: 1;
    transform: scale(1);
}
.corner-tag {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.3s ease;
}

/* ─── Results cards ───────────────────────────────────────────*/
.result-card:hover .result-arrow {
    transform: translateX(4px);
}
.result-arrow {
    transition: transform 0.3s ease;
}

/* ─── Hero slider ─────────────────────────────────────────────*/
.hero-slider {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease, transform 1.5s ease;
    transform: scale(1.05);
}
.hero-slide.active {
    opacity: 1;
    transform: scale(1);
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(5,5,8,0.82) 0%,
        rgba(5,5,8,0.45) 55%,
        rgba(5,5,8,0.15) 100%
    );
}
.slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}
.slider-dot.active {
    background-color: #b68a3e;
    transform: scale(1.3);
}
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
}
.hero-slider:hover .slider-arrow { opacity: 1; }
.slider-arrow:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-50%) scale(1.05);
}
.slider-arrow.prev { left: 24px; }
.slider-arrow.next { right: 24px; }

/* ─── Scroll reveal animations ────────────────────────────────*/
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}
.scroll-reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}
.scroll-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ─── Parallax helpers ────────────────────────────────────────*/
.parallax-container {
    overflow: hidden;
    position: relative;
}
.parallax-inner {
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* ─── Floating label (alternate pattern used in some views) ───*/
.floating-label {
    position: absolute;
    top: 16px;
    left: 0;
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 600;
    text-transform: uppercase;
    color: rgb(var(--c-sec));
    pointer-events: none;
    transition: all 0.3s ease;
    font-family: Inter, sans-serif;
}
.floating-input:focus + .floating-label,
.floating-input.filled + .floating-label {
    top: -12px;
    font-size: 10px;
    color: rgb(var(--c-primary));
}
.floating-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgb(var(--c-sec-f));
    color: rgb(var(--c-on-s));
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 24px;
    padding: 1.5rem 0 0.75rem;
    transition: border-color 0.3s;
    outline: none;
    box-shadow: none;
}
.floating-input:focus {
    border-bottom-color: rgb(var(--c-primary));
    box-shadow: none;
}

/* ─── Mobile overrides ────────────────────────────────────────*/
@media (max-width: 768px) {
    .stat-huge-mobile {
        font-size: 48px !important;
        line-height: 48px !important;
    }
    .hero-slide {
        background-position: 70% center;
    }
}

/* ─── Testimonial Auto-Slider (no nav) ─── */
.testimonial-slider {
    display: grid;
}
.testimonial-slide {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}
.testimonial-slide.active {
    opacity: 1;
    pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
    .testimonial-slide { transition: none; }
}