/* ============================================================
   File: 01-intro-loader.css
   Full-screen intro / preloader animation (bubbles, logo entrance, loading text).
   ============================================================ */




/* =========================================
   FUTURE CLEAN - INTRO LOADER
========================================= */

.fx-intro {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 999999;

    display: grid;
    place-items: center;

    overflow: hidden;

    /* GREEN BACKGROUND */
    background:
        radial-gradient(
            ellipse at center,
            #0d3b32 0%,
            #052017 80%
        );

    pointer-events: all;

    opacity: 1;

    transition:
        opacity 0.7s ease;
}


/* =========================================
   LOADER HIDDEN STATE
========================================= */

.fx-intro.done {
    opacity: 0;
    pointer-events: none;
}


/* =========================================
   WHITE TRANSITION VEIL
========================================= */

.fx-intro-veil {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            #ffffff 50%
        );

    transform: translateY(0);

    transition:
        transform 1.1s cubic-bezier(
            0.7,
            0.05,
            0.2,
            1
        );
}


/*
   When JS adds .play
   the white section moves upward
*/

.fx-intro.play .fx-intro-veil {
    transform: translateY(-100%);
}


/* =========================================
   BUBBLES CONTAINER
========================================= */

.fx-intro-bubbles {
    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    overflow: hidden;
}


/* =========================================
   BUBBLES
========================================= */

.fx-intro-bubbles span {
    position: absolute;

    bottom: -30px;

    left: var(--x, 50%);

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(255, 255, 255, 0.95),
            rgba(16, 185, 129, 0.4)
        );

    box-shadow:
        0 0 14px rgba(16, 185, 129, 0.5);

    transform:
        scale(var(--s, 1));

    animation:
        fx-bubble
        1.6s
        ease-out
        var(--d, 0s)
        forwards;

    opacity: 0;
}


/* =========================================
   BUBBLE ANIMATION
========================================= */

@keyframes fx-bubble {

    0% {
        transform:
            translateY(0)
            scale(var(--s, 1));

        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform:
            translateY(-110vh)
            scale(
                calc(
                    var(--s, 1) * 1.4
                )
            );

        opacity: 0;
    }
}


/* =========================================
   CENTER LOGO AREA
========================================= */

.fx-intro-mark {
    position: relative;

    z-index: 2;

    display: grid;

    place-items: center;

    gap: 14px;

    transform: scale(0.85);

    opacity: 0;

    animation:
        fx-mark-in
        1s
        cubic-bezier(
            0.2,
            0.7,
            0.2,
            1.1
        )
        0.15s
        forwards;
}


/* =========================================
   LOGO ENTRANCE
========================================= */

@keyframes fx-mark-in {

    to {
        transform: scale(1);
        opacity: 1;
    }
}


/* =========================================
   SVG LOGO
========================================= */

.fx-intro-mark svg {

    display: block;

    filter:
        drop-shadow(
            0 14px 32px
            rgba(16, 185, 129, 0.45)
        );

    animation:
        fx-mark-pulse
        1.4s
        ease-in-out
        infinite;
}


/* =========================================
   LOGO FLOAT / PULSE
========================================= */

@keyframes fx-mark-pulse {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-4px)
            rotate(-3deg);
    }
}


/* =========================================
   LOADER TEXT
========================================= */

.fx-intro-label {

    direction: rtl;

    font-family:
        Arial,
        "Tajawal",
        sans-serif;

    font-size: 16px;

    letter-spacing: 0.04em;

    color:
        rgba(255, 255, 255, 0.92);

    font-weight: 600;

    white-space: nowrap;

    animation:
        fx-label
        2s
        ease-in-out
        infinite;
}


/* =========================================
   TEXT ANIMATION
========================================= */

@keyframes fx-label {

    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .fx-intro-mark svg {
        width: 74px;
        height: 74px;
    }

    .fx-intro-label {
        font-size: 15px;
    }
}


/* =========================================
   REDUCED MOTION
========================================= */

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

    .fx-intro {
        display: none !important;
    }

}






/* ---- Intro splash (first-visit "trick") ---- */
.fx-ribbon {
  position: relative;
  height: 64px;
  overflow: hidden;
  perspective: 800px;
  background: linear-gradient(90deg, transparent, rgba(16,185,129,.06), transparent);
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.fx-ribbon-track {
  display: flex; gap: 56px; align-items: center;
  height: 100%; width: max-content;
  animation: fx-marquee 42s linear infinite;
  transform-style: preserve-3d;
  white-space: nowrap;
  padding-inline: 32px;
}
html[dir="rtl"] .fx-ribbon-track { animation-direction: reverse; }
@keyframes fx-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.fx-ribbon-track .chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-2);
  transform: rotateY(-10deg) translateZ(0);
  transition: transform .4s, color .4s;
}
.fx-ribbon-track .chip:nth-child(even) { transform: rotateY(10deg); }
.fx-ribbon-track .chip:hover { color: var(--accent); transform: rotateY(0) scale(1.05); }
.fx-ribbon-track .chip svg { color: var(--accent); }
.fx-ribbon-track .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: .55;
}

.fx-intro {
  position: fixed; inset: 0;
  z-index: 9999;
  background: radial-gradient(ellipse at center, #0d3b32 0%, #052017 80%);
  display: grid; place-items: center;
  overflow: hidden;
  pointer-events: all;
  opacity: 1;
  transition: opacity .7s ease;
}
.fx-intro.done { opacity: 0; pointer-events: none; }
.fx-intro-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, #fff 50%);
  transform: translateY(0);
  transition: transform 1.1s cubic-bezier(.7,.05,.2,1);
}
.fx-intro.play .fx-intro-veil { transform: translateY(-100%); }
.fx-intro-bubbles {
  position: absolute; inset: 0;
  pointer-events: none;
}
.fx-intro-bubbles span {
  position: absolute;
  bottom: -30px;
  left: var(--x, 50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(16,185,129,.4));
  box-shadow: 0 0 14px rgba(16,185,129,.5);
  transform: scale(var(--s,1));
  animation: fx-bubble 1.6s ease-out var(--d, 0s) forwards;
  opacity: 0;
}
@keyframes fx-bubble {
  0%   { transform: translateY(0)     scale(var(--s,1)); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-110vh) scale(calc(var(--s,1) * 1.4)); opacity: 0; }
}
.fx-intro-mark {
  position: relative; z-index: 2;
  display: grid; place-items: center; gap: 14px;
  transform: scale(.85);
  animation: fx-mark-in 1s cubic-bezier(.2,.7,.2,1.1) .15s forwards;
  opacity: 0;
}
@keyframes fx-mark-in {
  to { transform: scale(1); opacity: 1; }
}
.fx-intro-mark svg {
  filter: drop-shadow(0 14px 32px rgba(16,185,129,.45));
  animation: fx-mark-pulse 1.4s ease-in-out infinite;
}
@keyframes fx-mark-pulse {
  50% { transform: translateY(-4px) rotate(-3deg); }
}
.fx-intro-label {
  font-size: 16px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.92);
  font-weight: 600;
  animation: fx-label 2s ease-in-out infinite;
}
@keyframes fx-label {
  0%,100% { opacity: .55; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-intro, .fx-ribbon-track { display: none !important; }
}