/* ==========================================
   AL ZAHRA ANIMATIONS
========================================== */

/* ==========================================
   SCROLL REVEAL
   Elements glide in when they enter the screen.
   Only active once JavaScript has loaded.
========================================== */

.js .reveal{
    opacity:0;
    transform:translateY(36px);
    transition:
        opacity .9s var(--ease),
        transform .9s var(--ease),
        box-shadow .55s var(--ease),
        border-color .4s;
}

.js .reveal.in{
    opacity:1;
    transform:none;
}

.js .product-card.reveal.in:hover{
    transform:translateY(-8px);
}

/* ==========================================
   BUTTON SHINE
========================================== */

.btn::after,
.checkout-btn::after,
.newsletter-form button::after{
    content:"";
    position:absolute;
    top:0;
    left:-80%;
    width:50%;
    height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
    transform:skewX(-22deg);
    pointer-events:none;
}

.btn:hover::after,
.checkout-btn:hover::after,
.newsletter-form button:hover::after{
    left:130%;
    transition:left .8s var(--ease);
}

/* ==========================================
   KEYFRAMES
========================================== */

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(28px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

@keyframes pageFade{
    from{ opacity:0; }
    to{ opacity:1; }
}

@keyframes kenburns{
    from{ transform:scale(1); }
    to{ transform:scale(1.14) translate(-1.5%,-1.5%); }
}

@keyframes shimmer{
    to{ background-position:-220% 0; }
}

@keyframes skeleton{
    from{ background-position:120% 0,0 0; }
    to{ background-position:-80% 0,0 0; }
}

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

@keyframes twinkle{
    0%,100%{
        opacity:.15;
        transform:scale(.6) rotate(0);
    }
    50%{
        opacity:1;
        transform:scale(1.15) rotate(45deg);
    }
}

@keyframes sway{
    from{ transform:rotate(-1.6deg); }
    to{ transform:rotate(1.6deg); }
}

/* Appears, glides across the screen, then rests out of sight until its next turn */

@keyframes shootingStar{
    0%{
        opacity:0;
        transform:rotate(11deg) translateX(0);
    }
    3%{ opacity:.9; }
    40%{ opacity:.9; }
    46%{
        opacity:0;
        transform:rotate(11deg) translateX(calc(100vw + 380px));
    }
    100%{
        opacity:0;
        transform:rotate(11deg) translateX(calc(100vw + 380px));
    }
}

@keyframes scrollDot{
    0%{
        opacity:1;
        transform:translateY(0);
    }
    100%{
        opacity:0;
        transform:translateY(16px);
    }
}

@keyframes heartPop{
    0%{ transform:scale(1); }
    40%{ transform:scale(1.5); }
    70%{ transform:scale(.88); }
    100%{ transform:scale(1); }
}

@keyframes bump{
    0%{ transform:scale(1); }
    35%{ transform:scale(1.55); }
    100%{ transform:scale(1); }
}

/* ==========================================
   STARS
   A few small gold stars with tails drift across the page,
   behind everything, and a few more twinkle in place
========================================== */

.star-field{
    position:fixed;
    inset:0;
    z-index:-1;
    overflow:hidden;
    pointer-events:none;
}

.shooting-star{
    position:absolute;
    left:-190px;
    width:var(--tail,120px);
    height:1.5px;
    border-radius:2px;
    background:linear-gradient(90deg,transparent,rgba(190,143,74,.85));
    opacity:0;
    animation:shootingStar var(--time,19s) linear var(--delay,0s) infinite;
    will-change:transform,opacity;
}

/* The star at the head of the tail */

.shooting-star::after{
    content:"";
    position:absolute;
    top:50%;
    right:-6px;
    width:11px;
    height:11px;
    margin-top:-5.5px;
    background:radial-gradient(circle,#fff6de 0 20%,#dcb26a 45%,#b0803c 100%);
    clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}

.shooting-star:nth-child(1){ top:9%;  --time:19s; --delay:1s; }
.shooting-star:nth-child(2){ top:34%; --time:26s; --delay:7s;  --tail:90px; }
.shooting-star:nth-child(3){ top:-4%; --time:23s; --delay:13s; --tail:150px; }
.shooting-star:nth-child(4){ top:58%; --time:31s; --delay:4s;  --tail:100px; }
.shooting-star:nth-child(5){ top:21%; --time:28s; --delay:18s; --tail:130px; }
.shooting-star:nth-child(6){ top:74%; --time:34s; --delay:11s; --tail:80px; }

/* Stars that stay where they are and twinkle */

.star-field i{
    position:absolute;
    width:var(--size,9px);
    height:var(--size,9px);
    background:#c0924a;
    clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
    opacity:.15;
    animation:twinkle var(--time,4.4s) ease-in-out var(--delay,0s) infinite;
}

.star-field i:nth-of-type(1){ top:15%; left:5%; }
.star-field i:nth-of-type(2){ top:27%; left:93%; --size:12px; --delay:1.2s; }
.star-field i:nth-of-type(3){ top:46%; left:2.5%; --size:7px; --delay:2.1s; --time:5.2s; }
.star-field i:nth-of-type(4){ top:63%; left:96%; --delay:.6s; --time:3.8s; }
.star-field i:nth-of-type(5){ top:82%; left:7%; --size:11px; --delay:2.8s; }
.star-field i:nth-of-type(6){ top:90%; left:88%; --size:7px; --delay:1.7s; --time:5s; }
.star-field i:nth-of-type(7){ top:38%; left:49%; --size:6px; --delay:3.3s; }
.star-field i:nth-of-type(8){ top:72%; left:34%; --size:6px; --delay:.9s; --time:5.6s; }

/* Fewer on a phone, where the screen is small */

@media(max-width:768px){

    .shooting-star{
        --tail:80px;
    }

    .shooting-star:nth-child(n+5),
    .star-field i:nth-of-type(n+6){
        display:none;
    }

}

/* ==========================================
   PAGE LOAD
========================================== */

body{
    animation:pageFade .6s ease;
}

/* ==========================================
   REDUCED MOTION
   Respect people who turn animations off
========================================== */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    .js .reveal{
        opacity:1;
        transform:none;
    }

    .star-field{
        display:none;
    }

    .page-hero::before,
    .page-hero::after{
        animation:none;
    }

}