/* ============================================================
   ScotiaCapital — landing page motion layer
   1. Live logo (bigger + pulse glow + shine sweep)
   2. Live hero background (drifting aurora + gradient drift)
   3. Scroll reveal (fade / slide / zoom)
   4. Live marquee ticker
   5. Pointer-tracking card tilt
   All effects are decorative and disabled for
   prefers-reduced-motion users.
   ============================================================ */

/* ---------- 1. LIVE LOGO ---------- */

.header nav.navbar {
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.header .navbar-brand.sc-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    padding: 0;
    margin-bottom: 0;
    border-radius: 6px;
}

.header .navbar-brand.sc-logo .sc-logo-img {
    display: block;
    height: 92px;
    width: auto;
    max-width: 300px;
    object-fit: contain;
    object-position: left center;
    filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(255, 255, 255, .18));
    animation: sc-logo-pulse 4.5s ease-in-out infinite;
    transition: transform .35s ease;
}

.header .navbar-brand.sc-logo:hover .sc-logo-img {
    transform: scale(1.04);
}

@keyframes sc-logo-pulse {
    0%, 100% {
        filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(255, 255, 255, .18));
    }
    50% {
        filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(255, 255, 255, .55));
    }
}

.header .navbar-brand.sc-logo::after {
    content: "";
    position: absolute;
    top: -25%;
    bottom: -25%;
    left: -60%;
    width: 26%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .30) 45%, rgba(255, 255, 255, .34) 55%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: sc-logo-shine 7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sc-logo-shine {
    0%, 66% {
        left: -60%;
    }
    88%, 100% {
        left: 130%;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .header .navbar-brand.sc-logo .sc-logo-img {
        height: 80px;
        max-width: 262px;
    }
}

@media (max-width: 991.98px) {
    .header .navbar-brand.sc-logo .sc-logo-img {
        height: 66px;
        max-width: 240px;
    }
}

@media (max-width: 575.98px) {
    .header .navbar-brand.sc-logo .sc-logo-img {
        height: 54px;
        max-width: 200px;
    }
}

/* ---------- 2. LIVE HERO BACKGROUND ---------- */

.hero-section {
    position: relative;
    overflow: hidden;
}

.hero-section > .container,
.hero-equal-height > .container {
    position: relative;
    z-index: 2;
}

.hero-section::after,
.hero-equal-height::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(42% 46% at 18% 26%, rgba(37, 78, 141, .55) 0%, rgba(37, 78, 141, 0) 68%),
        radial-gradient(34% 40% at 84% 20%, rgba(60, 102, 173, .45) 0%, rgba(60, 102, 173, 0) 70%),
        radial-gradient(38% 44% at 72% 88%, rgba(232, 111, 133, .16) 0%, rgba(232, 111, 133, 0) 70%);
    background-repeat: no-repeat;
    background-size: 165% 165%;
    animation: sc-aurora 26s ease-in-out infinite alternate;
}

@keyframes sc-aurora {
    0% {
        background-position: 0% 0%, 100% 0%, 100% 100%;
        transform: scale(1);
    }
    50% {
        background-position: 24% 16%, 72% 22%, 58% 78%;
        transform: scale(1.04);
    }
    100% {
        background-position: 46% 30%, 38% 34%, 18% 58%;
        transform: scale(1.09);
    }
}

.gradient-overlay:before,
.gradient-overly-right-color:before,
.gradient-overly-left:before,
.gradient-overly-bottom:before,
.gradient-overly-top:before {
    background-size: 200% 200%;
    animation: sc-gradient-drift 20s ease-in-out infinite alternate;
}

@keyframes sc-gradient-drift {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* ---------- 3. SCROLL REVEAL ---------- */

html.sc-anim [data-sc-reveal] {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--sc-delay, 0ms);
}

html.sc-anim [data-sc-reveal="left"] {
    transform: translate3d(-44px, 0, 0);
}

html.sc-anim [data-sc-reveal="right"] {
    transform: translate3d(44px, 0, 0);
}

html.sc-anim [data-sc-reveal="zoom"] {
    transform: scale(.92);
}

html.sc-anim [data-sc-reveal].sc-visible {
    opacity: 1;
    transform: none;
}

/* ---------- 4. LIVE TICKER ---------- */

.sc-ticker {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #0A1830 0%, #10233F 45%, #1B3A6B 100%);
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sc-ticker:before,
.sc-ticker:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    z-index: 2;
    pointer-events: none;
}

.sc-ticker:before {
    left: 0;
    background: linear-gradient(90deg, #0A1830 0%, rgba(10, 24, 48, 0) 100%);
}

.sc-ticker:after {
    right: 0;
    background: linear-gradient(270deg, #1B3A6B 0%, rgba(27, 58, 107, 0) 100%);
}

.sc-ticker__track {
    display: flex;
    width: -webkit-max-content;
    width: max-content;
    animation: sc-marquee 42s linear infinite;
}

.sc-ticker:hover .sc-ticker__track,
.sc-ticker:focus-within .sc-ticker__track {
    animation-play-state: paused;
}

.sc-ticker__group {
    display: flex;
    align-items: center;
}

.sc-ticker__item {
    display: inline-flex;
    align-items: center;
    padding: 15px 28px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, .82);
}

.sc-ticker__item + .sc-ticker__item {
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.sc-ticker__item i {
    margin-right: 10px;
    font-size: 15px;
    color: #E86F85;
}

.sc-ticker__dot {
    width: 9px;
    height: 9px;
    margin-right: 12px;
    border-radius: 50%;
    background: #E86F85;
    animation: sc-pulse 2s ease-out infinite;
}

@keyframes sc-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes sc-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(232, 111, 133, .65);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(232, 111, 133, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(232, 111, 133, 0);
    }
}

/* ---------- 5. CARD TILT ---------- */

.sc-tilt.sc-tilt {
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
    will-change: transform;
}

.sc-tilt.sc-tilt.is-tilting {
    transition: transform .08s linear, box-shadow .35s ease;
}

/* ---------- ACCESSIBILITY / FALLBACKS ---------- */

@media (prefers-reduced-motion: reduce) {
    .header .navbar-brand.sc-logo .sc-logo-img,
    .header .navbar-brand.sc-logo::after,
    .hero-section::after,
    .hero-equal-height::after,
    .gradient-overlay:before,
    .gradient-overly-right-color:before,
    .gradient-overly-left:before,
    .gradient-overly-bottom:before,
    .gradient-overly-top:before,
    .sc-ticker__track,
    .sc-ticker__dot {
        animation: none !important;
    }

    .sc-ticker {
        overflow-x: auto;
    }
}

@media print {
    .sc-ticker,
    .header .navbar-brand.sc-logo::after {
        display: none !important;
    }

    .header .navbar-brand.sc-logo .sc-logo-img,
    .hero-section::after,
    .hero-equal-height::after {
        animation: none !important;
    }
}