/* ==========================================================================
   ALOMICO — custom styles layered on top of Tailwind CSS
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-feature-settings: "kern" 1, "liga" 1;
}

/* Fine-tuned line clamping used by feature cards */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbb27a;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #c08c2c;
}

/* Sticky header shadow once page is scrolled */
#site-header.is-scrolled {
    box-shadow: 0 10px 30px -15px rgba(15, 23, 42, 0.15);
}

/* Simple fade/slide-in for elements marked [data-reveal] */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile menu open state handled via JS toggling .hidden, this just adds a transition */
#mobile-menu {
    transition: max-height .3s ease;
}

/* Testimonial slider track */
#testimonial-track {
    will-change: transform;
}
#testimonial-dots button.is-active {
    background-color: #c08c2c;
    width: 22px;
    border-radius: 999px;
}

/* Lightbox */
#lightbox {
    backdrop-filter: blur(6px);
}

/* Number counter starts hidden-ish for a subtle pop */
[data-counter] {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Hero slider
   ========================================================================== */

/* Slide crossfade + Ken Burns zoom on the image itself */
.hero-slide {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.1s ease-in-out;
}
.hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}
.hero-slide img {
    transform: scale(1);
    transition: transform 7s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.hero-slide.is-active img {
    transform: scale(1.09);
}

/* Slide text: fade + rise in when active */
.hero-text {
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}
.hero-text.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    z-index: 1;
}

/* Story-style progress bars (replaces plain dots) */
#hero-dots {
    display: flex;
    gap: 8px;
}
#hero-dots button {
    position: relative;
    height: 3px;
    width: 40px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    padding: 0;
    border: 0;
    cursor: pointer;
}
#hero-dots button .hero-dot-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    border-radius: 999px;
    background: #d4a344;
}
#hero-dots button.is-active .hero-dot-fill {
    animation: heroDotFill var(--hero-autoplay, 6000ms) linear forwards;
}
#hero-dots button.is-done .hero-dot-fill {
    width: 100%;
}
@keyframes heroDotFill {
    from { width: 0%; }
    to   { width: 100%; }
}
/* Pause the fill animation while autoplay is paused (hover / focus) */
#hero-slider.is-paused #hero-dots button.is-active .hero-dot-fill {
    animation-play-state: paused;
}

/* Trust badge cards (ISO / Saudi Made) used on light-background sections */
.trust-badge {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.trust-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.12);
}

/* Glassmorphism arrow buttons */
.hero-arrow {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Certification slide: no photo — a deep gradient + faint grid + soft gold
   glow keeps all visual focus on the badges themselves. */
.hero-cert-bg {
    background:
        radial-gradient(60% 55% at 78% 30%, rgba(212, 163, 68, 0.16) 0%, rgba(212, 163, 68, 0) 70%),
        radial-gradient(45% 50% at 15% 85%, rgba(192, 140, 44, 0.12) 0%, rgba(192, 140, 44, 0) 70%),
        linear-gradient(135deg, #0f1520 0%, #182235 55%, #0f1520 100%);
}
.hero-cert-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(85% 85% at 70% 35%, #000 0%, transparent 75%);
    mask-image: radial-gradient(85% 85% at 70% 35%, #000 0%, transparent 75%);
}

/* Certification badge cards: staggered entrance + gentle continuous float */
.hero-badge-card {
    opacity: 0;
    transform: translateY(22px) scale(0.92);
    animation: heroBadgeFloat 3.6s ease-in-out infinite;
    animation-delay: var(--badge-delay, 0ms);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-text.is-active .hero-badge-card {
    animation:
        heroBadgeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        heroBadgeFloat 3.6s ease-in-out 0.6s infinite;
    animation-delay: var(--badge-delay, 0ms), calc(var(--badge-delay, 0ms) + 600ms);
}
.hero-badge-card:hover {
    transform: translateY(-4px) scale(1.04) !important;
    box-shadow: 0 16px 30px -10px rgba(0, 0, 0, 0.35);
    animation-play-state: paused;
}
@keyframes heroBadgeIn {
    from { opacity: 0; transform: translateY(22px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroBadgeFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}
/* Respect users who've asked for less motion */
@media (prefers-reduced-motion: reduce) {
    .hero-slide img,
    .hero-badge-card,
    .hero-text {
        animation: none !important;
        transition: none !important;
    }
    .hero-text.is-active .hero-badge-card {
        opacity: 1;
        transform: none;
    }
}


/* Focus visibility for accessibility without harming the design */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #c08c2c;
    outline-offset: 2px;
}