/* ==============================================
   AMAE PREMIUM — style.css
   ============================================== */

/* BASE */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#f97316,#2563eb); border-radius: 3px; }

/* ==============================================
   NAVBAR — transparent → dark on scroll
   ============================================== */
#navbar {
    background: transparent;
    transition: background 0.45s ease, box-shadow 0.45s ease, transform 0.35s ease;
}

#navbar::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(10,15,30,0.55), transparent);
    pointer-events: none;
    z-index: -1;
}

#navbar.scrolled {
    background: rgba(10, 15, 30, 0.97) !important;
    backdrop-filter: blur(24px);
    box-shadow: 0 4px 40px rgba(0,0,0,0.35);
}

/* ==============================================
   REVOLUTION SLIDER
   ============================================== */
#rev-slider {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 620px;
    overflow: hidden;
}

/* Each slide occupies the full container */
.rs-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity 1.4s ease;
    overflow: hidden;
}
.rs-slide.rs-active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

/* Ken Burns background */
.rs-bg {
    position: absolute;
    inset: -8%;
    background-size: cover;
    background-position: center;
    transform: scale(1.12);
    will-change: transform;
}
.rs-slide.rs-active .rs-bg {
    animation: rsKenBurns 9s ease-out forwards;
}
@keyframes rsKenBurns {
    from { transform: scale(1.12); }
    to   { transform: scale(1.02); }
}

/* Overlays */
.rs-overlay-1 {
    position: absolute; inset: 0;
    background: linear-gradient(108deg, rgba(8,12,25,0.82) 0%, rgba(8,12,25,0.52) 55%, rgba(37,99,235,0.22) 100%);
}
.rs-overlay-2 {
    position: absolute; inset: 0;
    background: linear-gradient(108deg, rgba(8,12,25,0.88) 0%, rgba(37,99,235,0.50) 60%, rgba(8,12,25,0.20) 100%);
}
.rs-overlay-3 {
    position: absolute; inset: 0;
    background: linear-gradient(108deg, rgba(8,12,25,0.82) 0%, rgba(30,64,175,0.42) 55%, rgba(249,115,22,0.22) 100%);
}
.rs-overlay-4 {
    position: absolute; inset: 0;
    background: linear-gradient(108deg, rgba(8,12,25,0.86) 0%, rgba(8,12,25,0.60) 50%, rgba(30,64,175,0.30) 100%);
}
.rs-overlay-btm {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(to top, rgba(8,12,25,0.70), transparent);
}

/* Layer container */
.rs-layers {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 110px 5% 180px 8%;
    z-index: 10;
}

/* All layers hidden by default */
.rs-layer { opacity: 0; }

/* ---- Layer animation keyframes ---- */
@keyframes rsFromBottom {
    from { opacity: 0; transform: translateY(70px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes rsFromLeft {
    from { opacity: 0; transform: translateX(-55px); }
    to   { opacity: 1; transform: translateX(0);     }
}
@keyframes rsFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Slide navigation arrows --- */
.rs-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 30; cursor: pointer;
    width: 54px; height: 54px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid rgba(255,255,255,0.30);
    border-radius: 50%;
    color: #fff;
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,0.07);
    transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
}
.rs-arrow:hover {
    background: #f97316;
    border-color: #f97316;
    transform: translateY(-50%) scale(1.12);
    box-shadow: 0 8px 32px rgba(249,115,22,0.45);
}
.rs-arrow-prev { left: 26px; }
.rs-arrow-next { right: 26px; }

/* --- Bullets --- */
.rs-bullets {
    position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
    z-index: 30; display: flex; gap: 9px; align-items: center;
}
.rs-bullet {
    width: 9px; height: 9px; border-radius: 50%;
    background: rgba(255,255,255,0.32);
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.rs-bullet.rs-active {
    background: transparent;
    border-color: #f97316;
    width: 30px; border-radius: 4px;
    box-shadow: 0 0 14px rgba(249,115,22,0.55);
}

/* --- Slide counter --- */
.rs-counter {
    position: absolute; bottom: 24px; right: 52px;
    z-index: 30; display: flex; align-items: baseline; gap: 3px;
}
.rs-counter .rs-num {
    color: #f97316; font-size: 26px; font-weight: 800; line-height: 1;
}
.rs-counter .rs-total {
    color: rgba(255,255,255,0.40); font-size: 11px; letter-spacing: 2px;
}

/* --- Progress bar --- */
.rs-progress-track {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,0.12);
    z-index: 30;
    overflow: hidden;
}
.rs-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f97316, #fb923c);
    width: 0%;
}

/* --- Scroll down --- */
.rs-scroll-down {
    position: absolute; bottom: 26px; left: 36px;
    z-index: 30;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    color: rgba(255,255,255,0.45);
    font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
}
.rs-scroll-line {
    width: 1px; height: 36px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.50), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%,100% { opacity:0.5; transform:scaleY(1); }
    50%     { opacity:1;   transform:scaleY(0.55); }
}

/* Stats bar */
.rs-statsbar {
    position: absolute;
    bottom: 72px; left: 0; right: 0;
    z-index: 20;
}

/* ==============================================
   SECTION ANIMATIONS (scroll reveal)
   ============================================== */
.reveal, .animate-on-scroll {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity 0.85s ease, transform 0.85s ease;
}
.reveal.visible, .animate-on-scroll.visible { opacity:1; transform:none; }

.reveal-left {
    opacity: 0; transform: translateX(-40px);
    transition: opacity 0.85s ease, transform 0.85s ease;
}
.reveal-left.visible { opacity:1; transform:none; }

.reveal-right {
    opacity: 0; transform: translateX(40px);
    transition: opacity 0.85s ease, transform 0.85s ease;
}
.reveal-right.visible { opacity:1; transform:none; }

/* Stagger children */
.stagger-animation.visible > * {
    opacity: 0;
    animation: staggerUp 0.65s ease forwards;
}
.stagger-animation.visible > *:nth-child(1) { animation-delay:0.08s; }
.stagger-animation.visible > *:nth-child(2) { animation-delay:0.18s; }
.stagger-animation.visible > *:nth-child(3) { animation-delay:0.28s; }
.stagger-animation.visible > *:nth-child(4) { animation-delay:0.38s; }
.stagger-animation.visible > *:nth-child(5) { animation-delay:0.48s; }
.stagger-animation.visible > *:nth-child(6) { animation-delay:0.58s; }
@keyframes staggerUp {
    from { opacity:0; transform:translateY(28px); }
    to   { opacity:1; transform:none; }
}

/* ==============================================
   SECTION LABEL
   ============================================== */
.section-label {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    margin-bottom: 1rem;
}
.section-label::before {
    content:''; width:22px; height:2px;
    background: currentColor; display:inline-block;
}

/* ==============================================
   CARD PREMIUM
   ============================================== */
.card-premium {
    position: relative; overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s ease;
}
.card-premium::before {
    content:'';
    position:absolute; top:0; left:-100%; width:100%; height:100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
    transition: left 0.6s ease;
}
.card-premium:hover::before { left:100%; }
.card-premium:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 22px 55px rgba(0,0,0,0.16);
}

/* ==============================================
   BUTTON PREMIUM (ripple)
   ============================================== */
.btn-premium {
    position: relative; overflow: hidden;
    transition: all 0.3s ease;
}
.btn-premium::after {
    content:'';
    position:absolute; top:50%; left:50%;
    width:0; height:0; border-radius:50%;
    background: rgba(255,255,255,0.22);
    transform: translate(-50%,-50%);
    transition: width 0.55s ease, height 0.55s ease;
}
.btn-premium:hover::after { width:320px; height:320px; }

/* ==============================================
   SWIPER — Gallery
   ============================================== */
.gallerySwiper .swiper-button-next,
.gallerySwiper .swiper-button-prev {
    width:48px; height:48px; border-radius:50%;
    background:rgba(255,255,255,0.92);
    box-shadow:0 4px 20px rgba(0,0,0,0.18);
    color:#f97316;
}
.gallerySwiper .swiper-button-next::after,
.gallerySwiper .swiper-button-prev::after { font-size:15px; font-weight:800; }
.gallerySwiper .swiper-pagination-bullet { width:10px;height:10px;background:rgba(255,255,255,0.45);opacity:1; }
.gallerySwiper .swiper-pagination-bullet-active { background:#f97316;width:28px;border-radius:5px; }

/* ==============================================
   SWIPER — Testimonials
   ============================================== */
.testimonialsSwiper .swiper-slide { height:auto; }
.testimonialsSwiper .swiper-pagination-bullet { background:#d1d5db;opacity:1; }
.testimonialsSwiper .swiper-pagination-bullet-active { background:#f97316;width:28px;border-radius:5px; }

/* ==============================================
   GLASS
   ============================================== */
.glass {
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.14);
}
.glass-dark {
    background:rgba(10,15,30,0.55);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.10);
}

/* ==============================================
   GRADIENT TEXT
   ============================================== */
.gradient-text {
    background: linear-gradient(135deg,#f97316,#fb923c,#fbbf24);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* ==============================================
   COUNTER
   ============================================== */
.counter-animate { font-variant-numeric: tabular-nums; }

/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width: 768px) {
    .rs-layers { padding: 90px 5% 160px 6%; }
    .rs-arrow  { width:42px; height:42px; }
    .rs-arrow-prev { left:10px; }
    .rs-arrow-next { right:10px; }
    .rs-statsbar   { bottom:64px; }
    .rs-scroll-down { display:none; }
    .rs-counter { right:12px; }
}

/* Legacy compat */
@keyframes fade-in {
    from { opacity:0; transform:translateY(30px); }
    to   { opacity:1; transform:none; }
}