/* =========================================================
   PAGE.CSS
   Page-content styling: logo carousel/strip, hero section
   animations, and feature cards. Load global.css first —
   these rules rely on the CSS variables defined there.
   ========================================================= */

/* ---------------------------------------------------------
   Logo strip / carousel
   (marketing "trusted by" style logo scroller — move to
   global.css instead if you reuse this in the footer)
   --------------------------------------------------------- */
.logo-strip {
   position: relative;
   width: 100%;
   padding: 0 var(--edge-margin);
   overflow: hidden;
 }

 /* fade edges so logos don't hard-cut at the margin */
 .logo-strip::before,
 .logo-strip::after {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   width: var(--fade-width);
   z-index: 2;
   pointer-events: none;
 }
 .logo-strip::before {
   left: var(--edge-margin);
   background: linear-gradient(to right, var(--bg) 0%, transparent 100%);
 }
 .logo-strip::after {
   right: var(--edge-margin);
   background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
 }

 .logo-track-wrap {
   overflow: hidden;
   width: 100%;
 }

 .logo-track {
   display: flex;
   align-items: center;
   width: max-content;
   gap: 5rem;
   animation: scroll-left 28s linear infinite;
 }

 .logo-strip:hover .logo-track {
   animation-play-state: paused;
 }

 .logo-item {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 32px;
 }

 .logo-item img,
 .logo-item svg {
   height: 100%;
   width: auto;
   display: block;
   filter: grayscale(100%) brightness(0.35);
   opacity: 0.55;
   transition: filter 0.25s ease, opacity 0.25s ease;
 }

 .logo-item:hover img,
 .logo-item:hover svg {
   filter: grayscale(0%);
   opacity: 1;
 }

 @keyframes scroll-left {
   from { transform: translateX(0); }
   to   { transform: translateX(-50%); }
 }

 @media (prefers-reduced-motion: reduce) {
   .logo-track { animation: none; }
   .logo-track-wrap { overflow-x: auto; }
 }

.small-logo {
 height: 100% !important;
 width: auto; /* Maintain aspect ratio */
}

/* ---------------------------------------------------------
   Hero section animations
   --------------------------------------------------------- */
.hero-fade {
   opacity: 0;
   transform: translateY(12px);
   animation: hero-fade-in 0.9s ease-out forwards;
}

.hero-fade-delay-1 {
   animation-delay: 0.15s;
}

.hero-fade-delay-2 {
   animation-delay: 0.3s;
}

.fade-button {
   transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.fade-button:hover {
   opacity: 0.92;
   transform: translateY(-1px);
}

.fade-button:active {
   transform: translateY(0);
}

@keyframes hero-fade-in {
   from {
       opacity: 0;
       transform: translateY(12px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

@media (prefers-reduced-motion: reduce) {
   .hero-fade {
       opacity: 1;
       transform: none;
       animation: none;
   }

   .fade-button {
       transition: none;
   }

   .fade-button:hover,
   .fade-button:active {
       opacity: 1;
       transform: none;
   }
}

/* ---------------------------------------------------------
   Feature cards
   --------------------------------------------------------- */
.feature-card {
   background-color: #ffffff;
   background-image: linear-gradient(135deg, rgba(91,46,255,0.06) 0%, rgba(91,46,255,0.02) 100%);
}

/* ---------------------------------------------------------
   Feature card / sticky responsive behavior
   NOTE: split out of the original mixed media query in the
   source file — the header-related rules from that same
   block now live in global.css.
   --------------------------------------------------------- */
@media (max-width: 767px) {
    /* Make feature cards expand vertically rather than fixed height */
    .group.h-52 { height: auto !important; min-height: 12rem; }

    /* Disable sticky cards on small screens to avoid overlap */
    .sticky { position: static !important; top: auto !important; }
}

    .panel-toggle-btn { color: #6b7280; }
    .panel-toggle-btn.active-cpanel { background-color: #5B2EFF; color: #fff; }
    .panel-toggle-btn.active-directadmin { background-color: #0d9488; color: #fff; }