/* SO-17 homepage slider (Swiper-based, replaces rs-plugin Slider Revolution).
 * Markup: views/partials/_extras/slider.php
 * All rules scoped under .homepage-swiper so they don't leak onto other pages. */

/* #151719 fallback inherited from the original .slider-container — shows
 * during slide-bg image load / if it fails. */
.homepage-swiper-wrap {
    height: 100vh;
    background: #151719;
    overflow: hidden;
}
.homepage-swiper { height: 100%; }
/* fade-effect slides don't auto-fill — set an explicit height so
 * .slide-bg (object-fit:cover) has something to cover. */
.homepage-swiper .swiper-slide {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.homepage-swiper .slide-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 1;
}

/* Centered max-width container — mimics rs-plugin's gridwidth: [1410,1110,930,690]
 * across breakpoints. Element offsets below are relative to this container's
 * edges, not the viewport, so they stay reasonable on wide screens. */
.homepage-swiper .slide-grid {
    position: absolute;
    inset: 0;
    max-width: 1110px;
    margin: 0 auto;
    z-index: 2;
}
@media (min-width: 1422px) { .homepage-swiper .slide-grid { max-width: 1410px; } }
@media (max-width: 1182px) { .homepage-swiper .slide-grid { max-width: 930px;  } }
@media (max-width: 974px)  { .homepage-swiper .slide-grid { max-width: 690px;  } }

.homepage-swiper .slide-circle,
.homepage-swiper .slide-logo {
    position: absolute; top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    opacity: 0;
    max-height: 60vh;
}
.homepage-swiper .slide-circle-left  { left: 145px; }
.homepage-swiper .slide-circle-right { right: 145px; }
.homepage-swiper .slide-logo-left    { left: 270px; }
.homepage-swiper .slide-logo-right   { right: 270px; }

.homepage-swiper .slide-text {
    position: absolute; top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    color: #fff;
    width: 500px;
    max-width: calc(100% - 290px);
    opacity: 0;
}
.homepage-swiper .slide-text-left  { left: 145px;  text-align: left; }
.homepage-swiper .slide-text-right { right: 145px; text-align: left; }

.homepage-swiper .slide-title {
    color: #fff;
    font-weight: 800;
    font-size: 48px;
    line-height: 55px;
    margin: 0;
}
.homepage-swiper .slide-subtitle {
    color: #fff;
    font-weight: 300;
    font-size: 18px;
    line-height: 26px;
    margin-top: 36px;
}
.homepage-swiper .slide-cta {
    margin-top: 24px;
    padding: 16px 30px;
    font-size: 13px;
    line-height: 20px;
}

/* Staggered fade-ins on the active slide — mimics the original Slider Revolution
 * data-frames delays. animation-fill-mode: both (= backwards + forwards) keeps
 * each element in its `from` state during the delay (so e.g. the CTA stays
 * invisible until 3s instead of flashing visible-then-jumping-to-hidden), and
 * leaves it in its `to` state after the animation ends. */
.homepage-swiper .swiper-slide-active .slide-circle    { animation: hp-fade-from-right  2.0s 1.5s both ease-in-out; }
.homepage-swiper .swiper-slide-active .slide-logo      { animation: hp-logo-flash       4.0s 4.0s both ease-in-out; }
.homepage-swiper .swiper-slide-active .slide-text      { animation: hp-fade-in          0.4s 1.5s both ease-in-out; }
.homepage-swiper .swiper-slide-active .slide-title     { animation: hp-fade-from-side   0.4s 1.5s both ease-in-out; }
.homepage-swiper .swiper-slide-active .slide-cta       { animation: hp-fade-from-bottom 2.0s 3.0s both ease-in-out; }

/* Per-character subtitle stagger — JS in slider.php splits the subtitle into
 * <span> tags carrying --i. Each char delays by 50ms past the 2.3s base. */
.homepage-swiper .slide-subtitle span {
    opacity: 0;
    white-space: pre;
}
.homepage-swiper .swiper-slide-active .slide-subtitle span {
    animation: hp-fade-in 0.3s both ease-in-out;
    animation-delay: calc(2.3s + var(--i, 0) * 0.05s);
}

@keyframes hp-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes hp-fade-from-right {
    from { opacity: 0; transform: translateY(-50%) translateX(100%); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}
@keyframes hp-fade-from-side {
    from { opacity: 0; transform: translateX(50%); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes hp-fade-from-bottom {
    from { opacity: 0; transform: translateY(50px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Logo overlay: fade in around 4.5s, sit visible until ~7s, fade back out by
 * ~8s (leaves ~1s buffer before the slide auto-advances at 9s).
 * Duration is 4s starting at the 4s delay. */
@keyframes hp-logo-flash {
    0%   { opacity: 0; }   /* 4.0s — start, invisible */
    12%  { opacity: 1; }   /* 4.5s — fully visible */
    75%  { opacity: 1; }   /* 7.0s — still visible */
    100% { opacity: 0; }   /* 8.0s — faded back out */
}

/* Mobile: collapse decorative imagery, center the text, allow text scaling.
 * Explicit width: 90% (not max-width + auto) so the container actually
 * expands to fill the viewport — without this the abs-positioned text-align
 * center container collapses to its intrinsic content width and forces
 * everything (title, subtitle, button) onto multiple lines. */
@media (max-width: 991px) {
    .homepage-swiper .slide-text {
        left: 50% !important;
        right: auto !important;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center !important;
        width: 100%;
        max-width: 100%;
        padding: 0 16px;
    }
    .homepage-swiper .slide-title    { font-size: 32px; line-height: 38px; }
    .homepage-swiper .slide-subtitle {
        font-size: 16px; line-height: 24px;
        margin-top: 8px;
    }
    .homepage-swiper .slide-cta {
        margin-top: 18px;
        padding: 9px 18px;
        font-size: 11px;
        line-height: 16px;
    }
}
@media (max-width: 480px) {
    .homepage-swiper .slide-title    { font-size: 26px; line-height: 32px; }
    .homepage-swiper .slide-subtitle {
        font-size: 14px; line-height: 22px;
        margin-top: 6px;
    }
    .homepage-swiper .slide-cta {
        margin-top: 16px;
        padding: 8px 14px;
        font-size: 10px;
    }
}

/* Theme tweaks for pagination + arrows so they read against dark photo backgrounds.
 * #fa7506 is the DEUS brand orange (same as .btn-primary / the slide CTA). */

/* Pagination: white semi-transparent dots, active one solid brand orange. */
.homepage-swiper .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
    width: 10px;
    height: 10px;
    margin: 0 5px;
}
.homepage-swiper .swiper-pagination-bullet-active {
    background: #fa7506;
    opacity: 1;
}

/* Prev/next: white circles with a brand-orange arrow glyph (Swiper's ::after
 * icon, sized via --swiper-navigation-size). Hidden by default; fade in only
 * while the pointer is over the slider. */
.homepage-swiper .swiper-button-prev,
.homepage-swiper .swiper-button-next {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    color: #fa7506;
    --swiper-navigation-size: 20px;
    /* Swiper centres with margin-top: -(nav-size/2); override to half the
     * circle height so the 52px button stays vertically centred. */
    margin-top: -26px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, color 0.2s ease;
}
/* Reveal the arrows only while hovering the slider. */
.homepage-swiper:hover .swiper-button-prev,
.homepage-swiper:hover .swiper-button-next {
    opacity: 1;
    pointer-events: auto;
}
.homepage-swiper .swiper-button-prev:hover,
.homepage-swiper .swiper-button-next:hover {
    color: #d96600;
}