/* Custom Styles for Chadbourne Collegiate Consulting */

/* Base overrides if needed */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hide default scrollbar completely for specific elements */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Custom scrollbar for the page */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #F8F9FA;
}
::-webkit-scrollbar-thumb {
    background: #0A192F;
    border-radius: 4px;
}

/* ────────────────────────────────────────────────────────
   Loading Overlay
──────────────────────────────────────────────────────── */

/* Lock scroll while the cloud curtain is showing */
body.is-loading {
    overflow: hidden;
}

/* GPU-accelerate cloud images for buttery slide animation */
#cloud-top, #cloud-bottom {
    will-change: transform;
}

/* Powder-snow particles — created in JS, animated by GSAP, removed on complete */
.logo-particle {
    position: fixed;
    border-radius: 50%;
    background: #ffffff;
    pointer-events: none;
    z-index: 55;
    will-change: transform, opacity;
}

/* Prevent logo from accidentally blocking pointer events during animation */
#loading-logo-wrap {
    pointer-events: none;
}

/* ────────────────────────────────────────────────────────
   Hero Videos
──────────────────────────────────────────────────────── */

#video-intro, #video-loop {
    display: block;
}

/* ────────────────────────────────────────────────────────
   Video Gradient Overlay
   Darkens the bright mountain area so white text reads cleanly.
   Adjust stops/direction to match your Figma gradient.
──────────────────────────────────────────────────────── */
#video-gradient {
    opacity: 0; /* GSAP fades this in together with the hero text */
    transition: background 0.6s ease;
    /* Diagonal overlay targeting the bright mountain on the right.
       Matches Figma gradient: sharp transition, ~25% max opacity,
       runs from top-right corner diagonally toward bottom-left. */
    background: linear-gradient(
        to top left,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.25) 25%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.00) 62%
    );
}

/* ────────────────────────────────────────────────────────
   Header initial state — GSAP fades it in during cloud reveal
   Scoped to .page-index so sub-pages start fully visible
──────────────────────────────────────────────────────── */
.page-index #site-header {
    opacity: 0;
}

/* ────────────────────────────────────────────────────────
   Utilities for GSAP — Hero elements
   opacity:0 as CSS fallback; GSAP set() also sets x:110vw
──────────────────────────────────────────────────────── */
.hero-badge, .hero-title, .hero-text, .hero-buttons {
    opacity: 0; /* GSAP set() adds x:110vw on top of this */
}

.section-header {
    opacity: 0;
}

.step-item {
    opacity: 0;
}

.package-card {
    opacity: 0;
}

.about-image, .about-text {
    opacity: 0;
}

/* ────────────────────────────────────────────────────────
   Scroll Pill — appears after hero animation, fades on scroll
   GSAP controls opacity and y; CSS just sets initial hidden state.
──────────────────────────────────────────────────────── */
#scroll-pill {
    opacity: 0;
    will-change: opacity, transform;
}



/* ────────────────────────────────────────────────────────
   Package Cards — Image / Breaking-Frame Layout
──────────────────────────────────────────────────────── */

/* Custom card base styles */
.package-card {
    position: relative;
    opacity: 0; /* GSAP animates in */
    background: #00408B;
}

#podium-package {
    overflow: visible; /* so athlete PNG can overflow below the solid border */
}

#competitors-package, #second-ascent-package {
    overflow: hidden; /* contain athletes inside the 1px border */
}

/* Podium image: spills out of the bottom frame */
.pkg-podium-img {
    position: absolute;
    bottom: -4%; /* Reduced to 4% breakout downwards */
    left: 15%;   /* Shifted to keep the scaled skier in frame */
    width: 260%; /* Re-scaled to massive proportions requested */
    height: auto;
    object-fit: contain;
    object-position: bottom center;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Athlete PNG for side cards: contained */
.pkg-athlete-small {
    position: absolute;
    top: 130px;   /* Anchored directly below the text blocks to prevent overlap */
    left: -5%;
    width: 110%;
    height: auto;
    z-index: 10;  /* Foregrond above the fade */
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover Effects for Package Cards */
.package-card {
    transition: box-shadow 0.5s ease, border-color 0.5s ease;
    cursor: pointer;
}

.package-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.8) !important;
}

.package-card:hover .pkg-athlete-small,
.package-card:hover .pkg-podium-img {
    transform: scale(1.06);
}

.package-card:hover .pkg-view-more {
    opacity: 1;
    transform: translateY(0);
}

.pkg-view-more {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.1s;
    display: inline-flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-top: 16px;
}

/* ────────────────────────────────────────────────────────
   Testimonial Carousel — mittlere Karte bei 3 sichtbaren Slides
   immer farbig (kein Hover nötig)
──────────────────────────────────────────────────────── */

/* Standardmäßig alle Bilder grau */
.testimonial-img {
    filter: grayscale(100%);
    transition: filter 0.7s ease;
}

/* Mittlere Karte: farbig */
.swiper-slide.is-center .testimonial-img {
    filter: grayscale(0%);
}

/* ────────────────────────────────────────────────────────
   FAQ Cards — brand accent border on hover / open state
   Left border starts transparent; slides to brand color on
   interaction, giving a clean premium visual cue.
──────────────────────────────────────────────────────── */
.faq-item {
    border-left: 3px solid transparent;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item:hover {
    border-left-color: rgba(7, 83, 163, 0.30);
    box-shadow: 0 4px 20px rgba(10, 25, 47, 0.08);
}
.faq-item.is-open {
    border-left-color: rgba(7, 83, 163, 0.65);
    box-shadow: 0 4px 24px rgba(10, 25, 47, 0.11);
}

/* ────────────────────────────────────────────────────────
   Sticky Header Modes
──────────────────────────────────────────────────────── */

#site-header.is-light {
    color: #0A192F; /* navy */
}

#site-header.is-light #header-cta {
    background-color: #0753A3;
    color: #ffffff;
}
#site-header.is-light #header-cta:hover {
    background-color: #0A192F;
}

#site-header.is-scrolled #header-bg {
    background-color: rgba(255, 255, 255, 0.6); /* semi-opaque white on scroll */
    border-color: rgba(0,0,0,0.08);
}

#site-header.is-scrolled:not(.is-light) #header-bg {
    background-color: rgba(10, 25, 47, 0.3); /* highly transparent navy */
    border-color: rgba(255,255,255,0.05);
}