/* Home page banner slider, in the style of Card Rush and Hareruya:
   the current banner in the middle, the ones before and after peeking in at the sides.
   Banners are 1920x400 pictures; other sizes fit inside with a blurred copy behind them. */

.ctg-hero {
    position: relative;
    margin: 0 0 24px;
    --ctg-hero-slide: 100%;
    --ctg-hero-gap: 0px;
}
.ctg-hero.is-multi { --ctg-hero-slide: 92%; --ctg-hero-gap: 8px; }
@media (min-width: 640px)  { .ctg-hero.is-multi { --ctg-hero-slide: 84%; --ctg-hero-gap: 12px; } }
@media (min-width: 1024px) { .ctg-hero.is-multi { --ctg-hero-slide: 72%; --ctg-hero-gap: 16px; } }

.ctg-hero-viewport { overflow: hidden; touch-action: pan-y; }
.ctg-hero-track {
    display: flex; gap: var(--ctg-hero-gap);
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ctg-hero-track.is-jumping, .ctg-hero-track.is-dragging { transition: none; }

html body .ctg-hero-slide {
    position: relative; display: block; flex: 0 0 var(--ctg-hero-slide);
    aspect-ratio: 1920 / 400; overflow: hidden;
    border-radius: var(--ctg-radius, 6px);
    border: 1px solid var(--ctg-line, rgba(255, 255, 255, 0.08));
    background: var(--ctg-surface-solid, #172036);
    opacity: 0.4; transform: scale(0.94);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    user-select: none; -webkit-user-drag: none;
}
html body .ctg-hero:not(.is-multi) .ctg-hero-slide, html body .ctg-hero-slide.is-active { opacity: 1; transform: none; }
.ctg-hero.is-multi .ctg-hero-slide:not(.is-active) { cursor: pointer; }
.ctg-hero.is-multi .ctg-hero-slide:not(.is-active):hover { opacity: 0.6; }

.ctg-hero-bg {
    position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px);
    object-fit: cover; filter: blur(14px) brightness(0.55); pointer-events: none;
}
.ctg-hero-img {
    position: relative; width: 100%; height: 100%; display: block;
    object-fit: contain; pointer-events: none;
}

/* Arrows sit on the peeking banners at the sides */
html body .ctg-hero-arrow {
    position: absolute; top: calc(50% - 14px); transform: translateY(-50%); z-index: 2;
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--ctg-line-strong, rgba(255, 255, 255, 0.18));
    background: rgba(15, 22, 38, 0.82); color: var(--ctg-text, #f4f4f5); cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
html body .ctg-hero-arrow:hover, html body .ctg-hero-arrow:focus-visible { background: var(--ctg-accent, #7dd3fc); color: var(--ctg-on-accent, #0b1220); border-color: transparent; }
.ctg-hero-arrow.is-prev { left: calc((100% - var(--ctg-hero-slide)) / 2 - 20px); }
.ctg-hero-arrow.is-next { right: calc((100% - var(--ctg-hero-slide)) / 2 - 20px); }
@media (max-width: 639px) { html body .ctg-hero-arrow { display: none; } }

/* Dots under the banner; the current one fills up until the next banner slides in */
.ctg-hero-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
html body .ctg-hero-dot {
    width: 28px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer;
    display: inline-flex; align-items: center;
}
.ctg-hero-dot span {
    position: relative; display: block; width: 100%; height: 4px; overflow: hidden;
    border-radius: 2px; background: var(--ctg-line-strong, rgba(255, 255, 255, 0.18));
}
.ctg-hero-dot:hover span { background: var(--ctg-dim, #8b8b94); }
.ctg-hero-dot span::after {
    content: ''; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left;
    background: var(--ctg-accent, #7dd3fc);
}
.ctg-hero-dot.is-active span::after { transform: scaleX(1); }
.ctg-hero.is-playing .ctg-hero-dot.is-active span::after { animation: ctg-hero-fill var(--ctg-hero-interval, 5000ms) linear; }
.ctg-hero.is-paused .ctg-hero-dot.is-active span::after { animation-play-state: paused; }
@keyframes ctg-hero-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html body .ctg-hero-dot:focus-visible { outline: 2px solid var(--ctg-accent, #7dd3fc); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
    .ctg-hero-track, html body .ctg-hero-slide { transition: none; }
}