/* =====================================================================
   SEA LAND – ANIMATIONS LIBRARY
   Scroll-triggered via IntersectionObserver (.is-visible class)
   ===================================================================== */

/* Base: elements start hidden until .is-visible is added by JS */
[data-animate] {
    opacity: 0;
    transition-duration: .7s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-property: opacity, transform;
    will-change: opacity, transform;
}

[data-animate].is-visible {
    opacity: 1;
    transform: none !important;
}

/* --- Entrance animations --- */
[data-animate="fade-up"]    { transform: translateY(40px); }
[data-animate="fade-down"]  { transform: translateY(-40px); }
[data-animate="fade-left"]  { transform: translateX(-50px); }
[data-animate="fade-right"] { transform: translateX(50px); }
[data-animate="zoom-in"]    { transform: scale(.85); }
[data-animate="zoom-out"]   { transform: scale(1.15); }
[data-animate="flip-x"]     { transform: rotateX(30deg); }
[data-animate="flip-y"]     { transform: rotateY(30deg); }

/* Staggered children: each child gets a delay via --i CSS var */
[data-animate-stagger] > * {
    opacity: 0;
    transform: translateY(30px);
    transition-duration: .6s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-property: opacity, transform;
}

[data-animate-stagger].is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
[data-animate-stagger].is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .1s; }
[data-animate-stagger].is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .2s; }
[data-animate-stagger].is-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: .3s; }
[data-animate-stagger].is-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: .4s; }
[data-animate-stagger].is-visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: .5s; }
[data-animate-stagger].is-visible > *:nth-child(7) { opacity: 1; transform: none; transition-delay: .6s; }
[data-animate-stagger].is-visible > *:nth-child(8) { opacity: 1; transform: none; transition-delay: .7s; }

/* Delay modifiers */
[data-delay="100"] { transition-delay: .1s !important; }
[data-delay="200"] { transition-delay: .2s !important; }
[data-delay="300"] { transition-delay: .3s !important; }
[data-delay="400"] { transition-delay: .4s !important; }
[data-delay="500"] { transition-delay: .5s !important; }
[data-delay="600"] { transition-delay: .6s !important; }

/* =====================================================================
   HERO SECTION ANIMATIONS
   ===================================================================== */

/* Typewriter cursor */
.sl-typewriter::after {
    content: '|';
    animation: sl-blink 1s step-end infinite;
    color: var(--sl-primary);
    margin-left: 2px;
}

@keyframes sl-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Hero text entrance */
.sl-hero__title {
    animation: sl-heroTitle .9s cubic-bezier(.4, 0, .2, 1) forwards;
}

.sl-hero__subtitle {
    animation: sl-heroTitle .9s .2s cubic-bezier(.4, 0, .2, 1) both;
}

.sl-hero__actions {
    animation: sl-heroTitle .9s .4s cubic-bezier(.4, 0, .2, 1) both;
}

.sl-hero__scroll {
    animation: sl-heroTitle .9s .6s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes sl-heroTitle {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Floating badge in hero */
.sl-float-badge {
    animation: sl-float 3s ease-in-out infinite;
}

@keyframes sl-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}

/* Rotating ring */
.sl-rotate-ring {
    animation: sl-spin 12s linear infinite;
}

@keyframes sl-spin {
    to { transform: rotate(360deg); }
}

/* =====================================================================
   NAVBAR ANIMATIONS
   ===================================================================== */

/* Sticky navbar shrink */
.sl-header {
    transition: all .4s cubic-bezier(.4, 0, .2, 1);
}

.sl-header.scrolled {
    box-shadow: 0 4px 30px rgba(0,0,0,.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Nav link hover underline */
.sl-nav__link {
    position: relative;
}

.sl-nav__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--sl-primary);
    transition: width .3s cubic-bezier(.4, 0, .2, 1);
    border-radius: var(--sl-radius-full);
}

.sl-nav__link:hover::after,
.sl-nav__link.active::after {
    width: 100%;
}

/* Mobile menu slide */
.sl-mobile-menu {
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.sl-mobile-menu.open {
    transform: translateX(0);
}

/* Hamburger icon morph */
.sl-hamburger .line {
    transition: var(--sl-transition);
    transform-origin: center;
}

.sl-hamburger.active .line-1 {
    transform: rotate(45deg) translate(5px, 5px);
}

.sl-hamburger.active .line-2 {
    opacity: 0;
    transform: scaleX(0);
}

.sl-hamburger.active .line-3 {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* =====================================================================
   CARD HOVER EFFECTS
   ===================================================================== */

/* Service/fleet card */
.sl-fleet-card {
    transition: var(--sl-transition);
    position: relative;
    overflow: hidden;
}

.sl-fleet-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 40%,
        rgba(204,30,36,.05) 100%
    );
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 0;
}

.sl-fleet-card:hover { transform: translateY(-8px); }
.sl-fleet-card:hover::before { opacity: 1; }

.sl-fleet-card__icon {
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.sl-fleet-card:hover .sl-fleet-card__icon {
    transform: scale(1.1) rotate(-5deg);
}

/* =====================================================================
   COUNTER ANIMATION
   ===================================================================== */
.sl-counter__number {
    font-variant-numeric: tabular-nums;
    display: inline-block;
    transition: color .3s ease;
}

/* =====================================================================
   PROGRESS / LOADING BAR
   ===================================================================== */
.sl-progress-bar {
    height: 4px;
    background: var(--sl-gray-light);
    border-radius: var(--sl-radius-full);
    overflow: hidden;
}

.sl-progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sl-primary), var(--sl-secondary));
    border-radius: var(--sl-radius-full);
    width: 0;
    transition: width 1.5s cubic-bezier(.4, 0, .2, 1);
}

[data-animate="progress"].is-visible .sl-progress-bar__fill {
    width: var(--target-width, 0%);
}

/* =====================================================================
   PARALLAX OVERLAY (JS-driven)
   ===================================================================== */
.sl-parallax {
    will-change: transform;
    backface-visibility: hidden;
}

/* =====================================================================
   TESTIMONIAL SLIDER
   ===================================================================== */
.sl-testimonial-track {
    display: flex;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.sl-testimonial-slide {
    flex: 0 0 100%;
    animation: sl-fadeTestimonial .4s ease;
}

@keyframes sl-fadeTestimonial {
    from { opacity: .3; transform: scale(.97); }
    to   { opacity: 1;  transform: scale(1); }
}

/* =====================================================================
   STEP INDICATOR
   ===================================================================== */
.sl-step__number {
    transition: var(--sl-transition);
}

.sl-step:hover .sl-step__number {
    transform: scale(1.1);
    background: var(--sl-primary);
    color: var(--sl-white);
}

/* =====================================================================
   ICON ANIMATIONS
   ===================================================================== */
.sl-icon-bounce:hover {
    animation: sl-bounce .5s ease;
}

@keyframes sl-bounce {
    0%, 100% { transform: translateY(0); }
    40%       { transform: translateY(-12px); }
    70%       { transform: translateY(-6px); }
}

.sl-icon-shake:hover {
    animation: sl-shake .4s ease;
}

@keyframes sl-shake {
    0%, 100% { transform: rotate(0); }
    25%       { transform: rotate(-15deg); }
    75%       { transform: rotate(15deg); }
}

/* =====================================================================
   GRADIENT TEXT
   ===================================================================== */
.sl-gradient-text {
    background: linear-gradient(135deg, var(--sl-primary), var(--sl-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline;
}

/* =====================================================================
   GLOW EFFECTS
   ===================================================================== */
.sl-glow-primary {
    box-shadow: 0 0 20px rgba(204,30,36,.3);
}

.sl-glow-primary:hover {
    box-shadow: 0 0 40px rgba(204,30,36,.5);
    transition: box-shadow .3s ease;
}

/* =====================================================================
   SCROLL INDICATOR
   ===================================================================== */
.sl-scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    animation: sl-scrollBounce 2s ease-in-out infinite;
}

@keyframes sl-scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50%       { transform: translateY(8px); opacity: .5; }
}

/* =====================================================================
   REDUCE MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    [data-animate],
    [data-animate-stagger] > * {
        animation: none !important;
        transition: none !important;
    }
    [data-animate]  { opacity: 1; transform: none; }
    [data-animate-stagger] > * { opacity: 1; transform: none; }
}