/* =============================================================================
   KANY HALK — custom styles & animations
   (Tailwind handles layout/utility; this file adds motion & a few extras.)
   ========================================================================== */

:root {
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ------------------------------------------------------------------ *
 |  Scroll-reveal (activated by IntersectionObserver in main.js)
 * ------------------------------------------------------------------ */
[data-reveal] {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Directional / scale variants */
[data-reveal="left"]  { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="zoom"]  { transform: scale(0.9); }
[data-reveal].is-visible[data-reveal="left"],
[data-reveal].is-visible[data-reveal="right"],
[data-reveal].is-visible[data-reveal="zoom"] { transform: none; }

/* Stagger children after the parent becomes visible */
[data-stagger] > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-stagger].is-visible > * {
    opacity: 1;
    transform: none;
}
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 0.15s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 0.25s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 0.35s; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 0.45s; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 0.55s; }

/* ------------------------------------------------------------------ *
 |  Adaptive header colours
 |  Default (transparent over the hero) = white content.
 |  .is-solid (added on scroll by main.js) = dark content.
 * ------------------------------------------------------------------ */
#site-header .brand-logo,
#site-header .brand-name,
#site-header .brand-tagline,
#site-header .nav-link {
    transition: color 0.3s ease, filter 0.3s ease;
}

/* --- Default state: over the dark hero → make everything white --- */
#site-header:not(.is-solid) .brand-logo {
    /* turn the amber/gray PNG fully white */
    filter: brightness(0) invert(1);
}
#site-header:not(.is-solid) .brand-name    { color: #fff; }
#site-header:not(.is-solid) .brand-tagline { color: rgba(255, 255, 255, 0.85); }
#site-header:not(.is-solid) .nav-link      { color: rgba(255, 255, 255, 0.92); }
#site-header:not(.is-solid) .nav-link:hover{ color: var(--c-primary-light); }

/* --- Solid state: white bar on scroll → dark content --- */
#site-header.is-solid .brand-logo    { filter: none; }
#site-header.is-solid .brand-name    { color: var(--c-ink); }
#site-header.is-solid .brand-tagline { color: var(--c-primary-dark); }
#site-header.is-solid .nav-link      { color: var(--c-ink); }
#site-header.is-solid .nav-link:hover{ color: var(--c-primary); }

/* ------------------------------------------------------------------ *
 |  Nav underline effect
 * ------------------------------------------------------------------ */
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 2px;
    width: 0;
    background: currentColor;
    transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* ------------------------------------------------------------------ *
 |  Keyframe animations
 * ------------------------------------------------------------------ */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }

@keyframes floatSlow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-18px) rotate(3deg); }
}
.animate-float-slow { animation: floatSlow 7s ease-in-out infinite; }

@keyframes modalIn {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
.lang-modal-card { animation: modalIn 0.5s var(--ease-out-back) both; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
}
.animate-in { animation: fadeInUp 0.9s ease both; }
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }

/* Animated gradient blob backgrounds */
@keyframes blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(20px, -30px) scale(1.1); }
    66%      { transform: translate(-15px, 20px) scale(0.95); }
}
.animate-blob { animation: blob 14s ease-in-out infinite; }

/* ------------------------------------------------------------------ *
 |  Misc
 * ------------------------------------------------------------------ */
/* Slightly larger, comfortable line-height for Arabic */
html[dir="rtl"] body { line-height: 1.85; }

/* Mirror the hero background image in Arabic so the darker area sits
   under the right-aligned headline for better contrast */
html[dir="rtl"] .hero-bg { transform: scaleX(-1); }

/* Prevent horizontal scroll from decorative / reveal transforms.
   Set on html AND body so the actual scroll container clips too. */
html, body { overflow-x: hidden; max-width: 100%; }

/* Card hover lift */
.card-lift { transition: transform 0.35s ease, box-shadow 0.35s ease; }
.card-lift:hover { transform: translateY(-8px); }

/* ------------------------------------------------------------------ *
 |  Gallery preview crossfade slideshow
 * ------------------------------------------------------------------ */
.gallery-slide {
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1s ease, transform 6s ease;
}
.gallery-slide.active {
    opacity: 1;
    transform: scale(1); /* slow Ken-Burns drift while visible */
}

/* ------------------------------------------------------------------ *
 |  Lightbox
 * ------------------------------------------------------------------ */
#gallery-lightbox.is-open {
    display: block;
    animation: fadeInUp 0.35s ease both;
}
#lb-main { animation: modalIn 0.35s var(--ease-out-back) both; }
.lb-thumb { opacity: 0.55; }
.lb-thumb:hover { opacity: 0.85; }
.lb-thumb.active {
    opacity: 1;
    --tw-ring-color: var(--c-primary);
    box-shadow: 0 0 0 2px var(--c-primary);
}

/* Clear the fixed close button + respect notches / home indicators */
.lb-shell {
    padding-top: calc(env(safe-area-inset-top, 0px) + 3.75rem);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
}
.lb-safe-top { top: calc(env(safe-area-inset-top, 0px) + 0.75rem); }

/* Hide the thumbnail scrollbar (still swipeable/scrollable) */
.lb-thumbs { -ms-overflow-style: none; scrollbar-width: none; }
.lb-thumbs::-webkit-scrollbar { display: none; }

/* Lock background scroll when a modal/lightbox is open */
body.no-scroll { overflow: hidden; }
/* Prevent the lightbox from scrolling/bouncing on touch devices */
#gallery-lightbox { touch-action: pan-x; overscroll-behavior: contain; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}