/* =========================================================
   splash.css — FINALISSIMA LEGENDARY SPLASH (v=8)
   🎬 7-Second Epic Cinematic Intro
   ⭐ Fixed: iOS bottom white line (100dvh)
========================================================= */

#finalissimaSplash{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100vw;
    height:100vh;
    height:100dvh;
    height:-webkit-fill-available;
    min-height:100vh;
    min-height:100dvh;
    z-index:2147483600;
    background:radial-gradient(ellipse at center,
        #6B0F1F 0%,
        #4A0A15 35%,
        #1A0508 75%,
        #000 100%);
    background-color:#0A0505;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px 24px;
    padding-top:calc(40px + env(safe-area-inset-top, 0px));
    padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px));
    opacity:1;
    transition:opacity .8s ease, visibility .8s ease;
    direction:rtl;
    overflow:hidden;
    will-change:opacity;
    margin:0;
    box-sizing:border-box;
}

#finalissimaSplash.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

/* =========================================================
   BACKGROUND GLOW PULSES
========================================================= */

#finalissimaSplash::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 50%,
        rgba(212,183,122,.20) 0%,
        rgba(212,183,122,.08) 25%,
        transparent 60%);
    animation:splashBgPulse 3s ease-in-out infinite;
    pointer-events:none;
    z-index:0;
}

#finalissimaSplash::after{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 30%, rgba(139,26,47,.5) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(139,26,47,.4) 0%, transparent 45%);
    animation:splashBgDrift 6s ease-in-out infinite alternate;
    pointer-events:none;
    z-index:0;
}

@keyframes splashBgPulse{
    0%, 100%{transform:scale(1);opacity:0.7;}
    50%{transform:scale(1.15);opacity:1;}
}

@keyframes splashBgDrift{
    0%{transform:translate(0, 0) scale(1);}
    100%{transform:translate(-20px, 20px) scale(1.08);}
}

/* =========================================================
   CORE (LOGO + GEO WRAPPER)
========================================================= */

.splash-core{
    position:relative;
    z-index:3;
    width:min(200px, 50vw);
    height:min(200px, 50vw);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    margin-bottom:36px;
}

.splash-geo{
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    z-index:1;
    pointer-events:none;
    transform:translate(-50%, -50%);
}

.geo-wrapper{
    position:absolute;
    top:0;
    left:0;
    width:min(380px, 92vw);
    height:min(380px, 92vw);
    transform:translate(-50%, -50%);
    flex-shrink:0;
}

.geo-wrapper > *{
    position:absolute;
    top:50%;
    left:50%;
    will-change:transform, opacity;
}

/* ═══ ROTATING RINGS ═══ */

.geo-ring{
    border-radius:50%;
    border:2px solid transparent;
}

.geo-ring-1{
    width:min(280px, 70vw);
    height:min(280px, 70vw);
    border-top-color:rgba(212,183,122,.9);
    border-right-color:rgba(212,183,122,.4);
    animation:splashRingSpin1 5.5s linear infinite,
              splashFadeIn .8s ease-out .1s backwards;
    box-shadow:0 0 30px rgba(212,183,122,.3), inset 0 0 20px rgba(212,183,122,.15);
}

.geo-ring-2{
    width:min(340px, 86vw);
    height:min(340px, 86vw);
    border-bottom-color:rgba(139,26,47,.8);
    border-left-color:rgba(139,26,47,.3);
    animation:splashRingSpin2 8s linear infinite reverse,
              splashFadeIn 1s ease-out .3s backwards;
    box-shadow:0 0 40px rgba(139,26,47,.4);
}

.geo-ring-3{
    width:min(220px, 55vw);
    height:min(220px, 55vw);
    border:2px dashed rgba(212,183,122,.5);
    animation:splashRingSpin1 10s linear infinite,
              splashFadeIn 1s ease-out .5s backwards;
}

@keyframes splashRingSpin1{
    0%{transform:translate(-50%, -50%) rotate(0deg);}
    100%{transform:translate(-50%, -50%) rotate(360deg);}
}

@keyframes splashRingSpin2{
    0%{transform:translate(-50%, -50%) rotate(0deg);}
    100%{transform:translate(-50%, -50%) rotate(-360deg);}
}

/* ═══ HEXAGONS ═══ */

.geo-hex{
    background:transparent;
    border:1.5px solid rgba(212,183,122,.4);
    clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.geo-hex-1{
    width:min(160px, 40vw);
    height:min(160px, 40vw);
    animation:splashHexSpin 14s linear infinite,
              splashScaleIn .9s ease-out .4s backwards;
}

.geo-hex-2{
    width:min(260px, 65vw);
    height:min(260px, 65vw);
    border-color:rgba(139,26,47,.5);
    animation:splashHexSpin 18s linear infinite reverse,
              splashScaleIn 1s ease-out .6s backwards;
}

@keyframes splashHexSpin{
    0%{transform:translate(-50%, -50%) rotate(0deg);}
    100%{transform:translate(-50%, -50%) rotate(360deg);}
}

/* ═══ TRIANGLES ═══ */

.geo-triangle{
    background:rgba(212,183,122,.15);
    clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
}

.geo-tri-1{
    width:min(160px, 40vw);
    height:min(160px, 40vw);
    animation:splashTriSpin 16s linear infinite,
              splashFadeIn 1s ease-out .7s backwards;
}

.geo-tri-2{
    width:min(160px, 40vw);
    height:min(160px, 40vw);
    background:rgba(139,26,47,.25);
    animation:splashTriSpin 16s linear infinite reverse,
              splashFadeIn 1s ease-out .9s backwards;
}

@keyframes splashTriSpin{
    0%{transform:translate(-50%, -50%) rotate(0deg);}
    100%{transform:translate(-50%, -50%) rotate(360deg);}
}

/* ═══ SQUARES ═══ */

.geo-square{
    border:1.5px solid rgba(212,183,122,.3);
}

.geo-square-1{
    width:min(130px, 32vw);
    height:min(130px, 32vw);
    animation:splashSqSpin 20s linear infinite,
              splashFadeIn 1s ease-out 1s backwards;
}

.geo-square-2{
    width:min(200px, 50vw);
    height:min(200px, 50vw);
    border-color:rgba(139,26,47,.3);
    animation:splashSqSpin 24s linear infinite reverse,
              splashFadeIn 1s ease-out 1.1s backwards;
}

@keyframes splashSqSpin{
    0%{transform:translate(-50%, -50%) rotate(45deg);}
    100%{transform:translate(-50%, -50%) rotate(405deg);}
}

/* ═══ CROSS LINES ═══ */

.geo-line{
    background:linear-gradient(90deg,
        transparent 0%,
        rgba(212,183,122,.7) 50%,
        transparent 100%);
    height:1.5px;
}

.geo-line-h{
    width:min(480px, 96vw);
    transform:translate(-50%, -50%) scaleX(0);
    animation:splashLineGrowH 1.8s ease-out 1.3s forwards;
}

.geo-line-v{
    width:min(480px, 96vw);
    transform:translate(-50%, -50%) rotate(90deg) scaleX(0);
    animation:splashLineGrowV 1.8s ease-out 1.5s forwards;
}

@keyframes splashLineGrowH{
    0%{transform:translate(-50%, -50%) scaleX(0);opacity:0;}
    100%{transform:translate(-50%, -50%) scaleX(1);opacity:1;}
}

@keyframes splashLineGrowV{
    0%{transform:translate(-50%, -50%) rotate(90deg) scaleX(0);opacity:0;}
    100%{transform:translate(-50%, -50%) rotate(90deg) scaleX(1);opacity:1;}
}

/* ═══ PULSE WAVES ═══ */

.core-pulse{
    position:absolute;
    inset:0;
    border-radius:50%;
    border:2px solid rgba(212,183,122,.7);
    animation:splashPulseWave 2.5s ease-out infinite;
    will-change:transform, opacity;
    z-index:2;
}

.core-pulse-2{
    animation-delay:.8s;
    border-color:rgba(139,26,47,.7);
}

.core-pulse-3{
    animation-delay:1.6s;
}

@keyframes splashPulseWave{
    0%{transform:scale(0.5);opacity:0;}
    30%{opacity:1;}
    100%{transform:scale(2);opacity:0;}
}

/* ═══ LOGO WRAPPER ═══ */

.splash-logo-wrapper{
    position:relative;
    z-index:4;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    animation:splashLogoReveal 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.8s forwards;
    filter:
        drop-shadow(0 0 30px rgba(212,183,122,.9))
        drop-shadow(0 0 60px rgba(212,183,122,.5));
}

.splash-logo-wrapper img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    will-change:transform;
    animation:splashLogoFloat 3s ease-in-out 3.6s infinite;
}

@keyframes splashLogoReveal{
    0%{
        opacity:0;
        transform:scale(0.2) rotate(-180deg);
        filter:blur(40px) brightness(3);
    }
    50%{
        opacity:1;
        transform:scale(1.25) rotate(10deg);
        filter:blur(0) brightness(1.5);
    }
    70%{
        transform:scale(0.95) rotate(-5deg);
    }
    100%{
        opacity:1;
        transform:scale(1) rotate(0deg);
        filter:blur(0) brightness(1);
    }
}

@keyframes splashLogoFloat{
    0%, 100%{transform:translateY(0) scale(1);}
    50%{transform:translateY(-8px) scale(1.03);}
}

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

.splash-text{
    position:relative;
    z-index:5;
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:28px;
}

.splash-title{
    font-family:'EnglishCustom', 'Cairo', sans-serif;
    font-size:clamp(26px, 6.5vw, 42px);
    font-weight:900;
    color:#D4B77A;
    letter-spacing:5px;
    text-transform:uppercase;
    line-height:1.1;
    opacity:0;
    text-shadow:
        0 0 20px rgba(212,183,122,.9),
        0 0 40px rgba(212,183,122,.5),
        0 4px 12px rgba(0,0,0,.7);
    animation:splashTextSlideUp 1s cubic-bezier(0.34, 1.56, 0.64, 1) 2.8s forwards;
}

.splash-subtitle{
    font-family:'Cairo', 'Tajawal', sans-serif;
    font-size:clamp(14px, 3.2vw, 18px);
    font-weight:900;
    color:#FAF6F0;
    letter-spacing:9px;
    opacity:0;
    text-transform:uppercase;
    text-shadow:0 2px 8px rgba(0,0,0,.6);
    animation:splashTextSlideUp 1s cubic-bezier(0.34, 1.56, 0.64, 1) 3.2s forwards;
}

.splash-season{
    font-family:'EnglishCustom', 'Cairo', sans-serif;
    font-size:clamp(11px, 2.6vw, 14px);
    font-weight:800;
    color:#D4B77A;
    letter-spacing:6px;
    opacity:0;
    margin-top:6px;
    animation:splashTextSlideUp .9s ease-out 3.6s forwards;
}

@keyframes splashTextSlideUp{
    0%{opacity:0;transform:translateY(30px);filter:blur(10px);}
    100%{opacity:1;transform:translateY(0);filter:blur(0);}
}

/* =========================================================
   LOADING BAR
========================================================= */

.splash-loader{
    position:relative;
    z-index:5;
    width:min(240px, 62vw);
    height:4px;
    background:rgba(212,183,122,.15);
    border-radius:10px;
    overflow:hidden;
    opacity:0;
    animation:splashLoaderAppear .6s ease-out 4.0s forwards;
}

.splash-loader-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,
        #8B1A2F 0%,
        #D4B77A 50%,
        #F5E6D3 100%);
    border-radius:10px;
    box-shadow:0 0 14px rgba(212,183,122,.9);
    animation:splashLoaderRun 2.6s ease-in-out 4.0s forwards;
    position:relative;
}

.splash-loader-fill::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,.5) 50%,
        transparent 100%);
    animation:splashLoaderShimmer 1.4s ease-in-out infinite;
}

@keyframes splashLoaderAppear{
    from{opacity:0;transform:scaleX(0.5);}
    to{opacity:1;transform:scaleX(1);}
}

@keyframes splashLoaderRun{
    0%{width:0%;}
    100%{width:100%;}
}

@keyframes splashLoaderShimmer{
    0%{transform:translateX(-100%);}
    100%{transform:translateX(100%);}
}

/* =========================================================
   FOOTER
========================================================= */

.splash-footer{
    position:absolute;
    bottom:calc(28px + env(safe-area-inset-bottom, 0px));
    left:0;
    right:0;
    text-align:center;
    font-family:'Cairo', 'Tajawal', sans-serif;
    font-size:10px;
    font-weight:700;
    color:rgba(212,183,122,.5);
    letter-spacing:3px;
    text-transform:uppercase;
    opacity:0;
    animation:splashTextSlideUp .9s ease-out 4.2s forwards;
    z-index:5;
}

/* =========================================================
   PARTICLES
========================================================= */

.splash-particles{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    overflow:hidden;
}

.splash-particle{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:radial-gradient(circle,
        #F5E6D3 0%,
        #D4B77A 60%,
        transparent 100%);
    box-shadow:
        0 0 10px #D4B77A,
        0 0 20px rgba(212,183,122,.6);
    opacity:0;
    will-change:transform, opacity;
}

/* =========================================================
   SHOCKWAVE
========================================================= */

.splash-shockwave{
    position:absolute;
    top:50%;
    left:50%;
    width:100px;
    height:100px;
    border-radius:50%;
    border:3px solid #D4B77A;
    transform:translate(-50%, -50%);
    pointer-events:none;
    z-index:3;
    animation:splashShockwaveAnim 1.8s ease-out forwards;
    box-shadow:
        0 0 40px #D4B77A,
        0 0 80px rgba(212,183,122,.5);
}

@keyframes splashShockwaveAnim{
    0%{opacity:1;transform:translate(-50%, -50%) scale(0);}
    100%{opacity:0;transform:translate(-50%, -50%) scale(8);}
}

/* =========================================================
   GENERAL FADE IN
========================================================= */

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

@keyframes splashScaleIn{
    from{opacity:0;transform:translate(-50%, -50%) scale(0.3);}
    to{opacity:1;transform:translate(-50%, -50%) scale(1);}
}

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

@media (prefers-reduced-motion: reduce){
    #finalissimaSplash::before,
    #finalissimaSplash::after,
    .geo-wrapper > *,
    .splash-logo-wrapper,
    .splash-logo-wrapper img,
    .core-pulse{
        animation-duration:0.01s !important;
        animation-iteration-count:1 !important;
    }
    .splash-logo-wrapper{opacity:1 !important;}
    .splash-title,
    .splash-subtitle,
    .splash-season,
    .splash-footer{opacity:1 !important;}
}

/* =========================================================
   iPAD / LARGER
========================================================= */

@media (min-width:768px){
    .splash-core{width:220px;height:220px;}
    .splash-title{font-size:48px;letter-spacing:6px;}
    .splash-subtitle{font-size:20px;letter-spacing:12px;}
    .geo-wrapper{width:440px;height:440px;}
}