/* Gear Loader — SVG cog animation for tour card loading */

.gear-loader {
    text-align: center;
    padding: 12px 0;
}

/* ── All card loaders (sponsored + non-sponsored) use flex layout ── */
.line-card[data-category].expanded .line-card-details {
    position: relative;
    min-height: 200px;
}

/* ── HEIGHT CHAIN: card → content → details fill available space ── */
.line-card[data-category].expanded:has(.gear-loader) {
    display: flex;
    flex-direction: column;
}

.line-card[data-category].expanded:has(.gear-loader) > .content {
    flex: 1;
    min-height: 0;
}

.line-card[data-category].expanded:has(.gear-loader) .line-card-details {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Both sponsored and non-sponsored loaders fill the details area */
.line-card[data-category].expanded .gear-loader {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 8px;
    border-radius: 8px;
    /* Soft dark backdrop on ALL cards — the default for non-sponsored */
    background: radial-gradient(
        ellipse 100% 120% at 50% 50%,
        rgba(22, 22, 28, 0.60) 0%,
        rgba(22, 22, 28, 0.40) 30%,
        rgba(22, 22, 28, 0.18) 55%,
        rgba(22, 22, 28, 0.05) 78%,
        transparent 100%
    );
}

/* Sponsored gets a richer, slightly deeper backdrop */
.line-card[data-category].expanded .gear-loader--sponsored {
    background: radial-gradient(
        ellipse 100% 120% at 50% 50%,
        rgba(22, 22, 28, 0.82) 0%,
        rgba(22, 22, 28, 0.62) 30%,
        rgba(22, 22, 28, 0.30) 55%,
        rgba(22, 22, 28, 0.08) 78%,
        transparent 100%
    );
}

/* ── Sponsor logo: centred above cogs ── */
.sponsor-logo-area {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: sponsorFadeIn 0.7s ease-out;
}

.sponsor-logo-img {
    max-width: 320px;
    max-height: 200px;
    width: auto;
    height: auto;
    filter: drop-shadow(0 0 16px rgba(201, 168, 76, 0.4));
    animation: sponsorPulse 3s ease-in-out infinite;
}

/* ── Ad placeholder for non-sponsored cards ── */
.ad-placeholder-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    animation: sponsorFadeIn 0.7s ease-out;
}

.ad-placeholder-area .ad-icon {
    font-size: 28px;
    margin-bottom: 10px;
    animation: adIconFloat 3s ease-in-out infinite;
}

.ad-placeholder-area .ad-headline {
    font-family: 'Anton SC', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
    animation: adTextPulse 4s ease-in-out infinite;
}

.ad-placeholder-area .ad-subtext {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.20);
    letter-spacing: 1px;
    animation: adTextPulse 4s ease-in-out infinite 0.5s;
}

@keyframes adIconFloat {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50%      { transform: translateY(-6px); opacity: 0.7; }
}

@keyframes adTextPulse {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.6; }
}

/* ── Cogs + label: pinned to bottom ── */
.gear-loader-bottom {
    text-align: center;
    flex-shrink: 0;
}

/* Cogs: use actual CSS width/height so layout is correct (SVG has viewBox for scaling).
 * transform: scale() only scales visually — layout would still reserve 120px height,
 * pushing the label off-screen. Width/height with viewBox scales both visually and layout. */
.gear-loader-bottom svg {
    display: block;
    margin: 0 auto;
    width: 105px;   /* half of 210px intrinsic width */
    height: 60px;   /* half of 120px intrinsic height */
}

.gear-loader-bottom .gear-loader-bar {
    width: 90px;
    height: 3px;
    margin: 6px auto 0;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.gear-loader-bottom .gear-loader-label {
    font-family: 'Anton SC', sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 2px;
}

@keyframes sponsorFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes sponsorPulse {
    0%, 100% { filter: drop-shadow(0 0 16px rgba(201, 168, 76, 0.4)); }
    50%      { filter: drop-shadow(0 0 26px rgba(201, 168, 76, 0.65)); }
}

.gear-loader svg {
    display: inline-block;
    max-width: 100%;
}

/* Loading progress bar below cogs */
.gear-loader-bar {
    width: 90px;
    height: 3px;
    margin: 6px auto 0;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.gear-loader-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #e94560, #ffb830, #00d2ff);
    background-size: 200% 100%;
    animation: glBarPulse 2.5s ease-in-out infinite, glBarShimmer 1.5s linear infinite;
}

@keyframes glBarPulse {
    0%   { width: 0; }
    50%  { width: 100%; }
    100% { width: 0; }
}

@keyframes glBarShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* CSS cog rotation — reliable on all browsers including iOS Safari.
 * Used by the audio tours page (insertSkeletons) and any inline gear SVG.
 * transform-box:fill-box makes transform-origin relative to each gear's own bbox. */
.gear-rotate-cw,
.gear-rotate-ccw {
    transform-box: fill-box;
    transform-origin: center;
}
.gear-rotate-cw  { animation: gearRotateCW  linear infinite; }
.gear-rotate-ccw { animation: gearRotateCCW linear infinite; }

@keyframes gearRotateCW  { from { transform: rotate(0deg); } to { transform: rotate(360deg);  } }
@keyframes gearRotateCCW { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* Label */
.gear-loader-label {
    font-family: 'Anton SC', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 6px;
}

/* ── Audio Player page: full-screen loading overlay ── */
.audioplayer-loader-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    /* Solid near-black background — no transparent edges, nothing bleeds through */
    background: #0e0e12;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Logo sits in the vertical center; cogs are absolute at the bottom */
    justify-content: center;
    padding: 0;
    transition: opacity 0.4s ease;
}

.audioplayer-loader-overlay.audioplayer-loader-fadeout {
    opacity: 0;
    pointer-events: none;
}

/* Sponsor logo — centered, large */
.audioplayer-loader-overlay .sponsor-logo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: sponsorFadeIn 0.7s ease-out;
    padding: 0 24px;
}

/* Make the logo fill most of the screen width and sit well above center */
.audioplayer-loader-overlay .sponsor-logo-img {
    width: min(94vw, 580px);
    max-width: none;
    max-height: none;
    height: auto;
    margin-bottom: 18vh;
}

/* Cogs + bar + label: absolute, pinned to the bottom of the screen */
.audioplayer-loader-bottom {
    position: absolute;
    bottom: max(40px, env(safe-area-inset-bottom, 40px));
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}