/* ========== Base ========== */
:root{
  --bg1:#061013;
  --bg2:#0b1b21;
  --glow:#0fa9b3;
  --glow2:#1fd6c5;
  --text:#eaf2f5;
  --muted:rgba(234,242,245,.72);
  --card:rgba(6,16,19,.72);
  --stroke:rgba(31,214,197,.35);
  --stroke2:rgba(31,214,197,.22);
  --shadow: 0 18px 55px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#000;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }


/* ========== Layout helpers ========== */
.container{
  width:min(1180px, calc(100% - 64px));
  margin:0 auto;
}

.section{
  min-height:100vh;
  padding:120px 0 80px;
  position:relative;
  isolation:isolate;
}

/* ✅ Per-section background images */
.section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.28;              /* زود/قلل حسب رغبتك */
  filter:saturate(1.1) contrast(1.05);
}

/* map images */
#home::before{ background-image:url("assets/herolily5.png"); opacity:.65; }
#games::before{ background-image:url("assets/gameback.png"); opacity:.26; }
#solutions::before{ background-image:url("assets/solutionsback.png"); opacity:.22; }
#about::before{ background-image:url("assets/aboutback.png"); opacity:.24; }
#values::before{ background-image:url("assets/about-valuesback.png"); opacity:.22; }
#contact::before{ background-image:url("assets/contactback.png"); opacity:.22; }

body.privacy-page .bg{
  z-index:-2;
}
body.privacy-page .section-privacy::before{
  background-image:url("assets/privacyback.png");
  opacity:.22;
}

/* ========== Header/Nav ========== */
.header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:20;
  pointer-events:none;
}

.nav-wrap{
  pointer-events:auto;
  width:min(1180px, calc(100% - 64px));
  margin:22px auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;

}

.brand{ display:flex; align-items:center; gap:12px; }
.brand-link{ display:inline-flex; }

.brand-logo{
  width:44px;
  height:auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
  transform: translateX(-120px);

}

.nav{
  display:flex;
  align-items:center;
  gap:26px;
  padding:14px 18px;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.08));
  box-shadow: 0 16px 45px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  transform: translateX(120px);

}

.nav-link{
  font-size:15px;
  letter-spacing:.2px;
  color:rgba(234,242,245,.86);
  position:relative;
  padding:8px 6px;
  transition: color .15s ease, transform .15s ease;
}

.nav-link:hover{
  color: rgba(31,214,197,.95);
  transform: translateY(-1px);
}

.nav-link.active::after{
  content:"";
  position:absolute;
  left:6px; right:6px; bottom:-6px;
  height:2px;
  background: rgba(31,214,197,.9);
  border-radius:9px;
}

.btn-pill{
  padding:9px 16px;
  border:1px solid var(--stroke);
  border-radius:999px;
  background: rgba(10,22,26,.45);
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.btn-pill:hover{
  background: rgba(10,22,26,.62);
  border-color: rgba(31,214,197,.55);
  box-shadow: 0 0 0 6px rgba(31,214,197,.08), 0 18px 40px rgba(0,0,0,.35);
}

/* ========== Floating Discord Button ========== */
.discord-fab{
  position:fixed;
  right:26px;
  bottom:22px;
  width:84px;
  height:84px;
  border-radius:22px;
  display:grid;
  place-items:center;
  z-index:60;
  background: rgba(10,22,26,.38);
  border:1px solid rgba(31,214,197,.35);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.discord-fab img{
  width:44px;
  height:44px;
  object-fit:contain; /* ✅ يمنع الستريتش */
  opacity:.96;
}

.discord-fab:hover{
  transform: translateY(-2px);
  border-color: rgba(31,214,197,.75);
  background: radial-gradient(120% 140% at 25% 20%, rgba(31,214,197,.35), rgba(10,22,26,.30));
  box-shadow:
    0 0 0 10px rgba(31,214,197,.10),
    0 0 32px rgba(31,214,197,.22),
    0 26px 60px rgba(0,0,0,.55);
}

.discord-fab:active{ transform: translateY(0px); }


/* ==========================
   Section Indicator
========================== */

.section-indicator{
  position:fixed;
  left:36px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:18px;
  z-index:999;
}

.indicator-dot{
  width:20px;
  height:20px;
  position:relative;
  opacity:.45;
  transition:.3s ease;
  text-decoration:none;
  transform:rotate(30deg);
}

.indicator-dot::before{
  content:"";
  position:absolute;
  inset:3px;
  background:#64737d;
  clip-path:polygon(
    25% 6%,
    75% 6%,
    100% 50%,
    75% 94%,
    25% 94%,
    0% 50%
  );
  transition:.3s ease;
}

.indicator-dot.active{
  opacity:1;
  filter:
    drop-shadow(0 0 6px #21d8ff)
    drop-shadow(0 0 14px rgba(33,216,255,.9))
    drop-shadow(0 0 28px rgba(33,216,255,.55));
}

.indicator-dot.active::before{
  background:#21d8ff;
}

.indicator-dot:hover{
  opacity:.85;
  transform:rotate(30deg) scale(1.18);
}

.indicator-dot:hover::before{
  background:#66dfff;
}



/* ========== Hero (Home) ========== */
.hero{
  text-align:center;
  padding-top:90px;
  display:flex;                 /* ✅ يخلي المحتوى بالوسط */
  align-items:center;           /* عمودي */
}

.hero .container{
  width:min(980px, calc(100% - 64px));
  transform: translateY(-80px);
}

.hero-title{
  font-size: clamp(42px, 5.8vw, 72px);
  line-height: 1.1;
  margin: 0 0 18px;
  font-weight: 900;
  text-shadow: 0 12px 28px rgba(0,0,0,.45);
}

.hero-content{
    transform: translateY(-50px);
}

.hero{
    position: relative;
    overflow: hidden;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:url("assets/herolily5.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    z-index:-2;

    transform:scale(1.04);
    animation:heroBackgroundZoom 2.2s ease-out forwards;
}

.hero-sub{
  margin:0 0 26px;
  color:rgba(234,242,245,.7);
  letter-spacing:.08em;
  font-size:16px;
  text-transform:none;
}

.hero-actions{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:8px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  border:1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: radial-gradient(120% 140% at 20% 10%, rgba(31,214,197,.95), rgba(12,129,145,.82));
  border-color: rgba(31,214,197,.35);
  box-shadow: 0 18px 42px rgba(0,0,0,.35);
  color:#062127;
}

.btn-ghost{
  background: rgba(10,22,26,.35);
  border-color: rgba(31,214,197,.30);
  color: rgba(234,242,245,.92);
}

.btn-wide{ padding:14px 28px; min-width:190px; }

.btn:hover{ transform: translateY(-1px); }

/* ✅ Hover: النور + الزر نفسه يتلون */
.btn-primary:hover{
  background: radial-gradient(120% 140% at 20% 10%, rgba(31,214,197,1), rgba(35,205,255,.82));
  box-shadow:
    0 0 0 10px rgba(31,214,197,.10),
    0 0 34px rgba(31,214,197,.22),
    0 22px 52px rgba(0,0,0,.50);
}

.btn-ghost:hover{
  background: rgba(31,214,197,.14);
  border-color: rgba(31,214,197,.65);
  box-shadow:
    0 0 0 10px rgba(31,214,197,.08),
    0 0 30px rgba(31,214,197,.18);
  color: rgba(234,242,245,1);
}


/* ==========================
   Features Section
========================== */

.features{
    min-height:100vh;
    padding:120px 0 90px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    position:relative;
    overflow:hidden;
}

/* Background */

.features::before{

    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.40)),
        url("assets/features-bg.png");

    background-size:cover;
    background-position:center;

    z-index:-2;

}

/* Overlay */

.features::after{

    content:"";

    position:absolute;
    inset:0;

    background:

    radial-gradient(
        circle at center,
        rgba(23,140,150,.16),
        rgba(0,0,0,.30)
    );

    z-index:-1;

}


/* ==========================
   Title
========================== */

.features h2{

    font-size:clamp(44px,5vw,72px);

    margin-bottom:65px;

    font-weight:900;

    color:#fff;

    text-shadow:
    0 12px 28px rgba(0,0,0,.45);

}


/* ==========================
   Grid
========================== */

.features-grid{

    display:grid;

    grid-template-columns:repeat(3,150px);

    gap:34px 40px;

    justify-content:center;

    margin-bottom:55px;

}


/* ==========================
   Cards
========================== */

.feature-card{

    width:150px;
    height:150px;

    border-radius:14px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    gap:8px;

    text-align:center;

    background:

    linear-gradient(
        180deg,
        rgba(16,28,38,.92),
        rgba(8,15,22,.95)
    );

    border:1px solid rgba(255,255,255,.05);

    backdrop-filter:blur(16px);

    box-shadow:

        0 18px 45px rgba(0,0,0,.42),

        inset 0 1px 0 rgba(255,255,255,.05);

    transition:.30s ease;

}


/* ==========================
   Numbers
========================== */

.feature-card h3{

    margin:0;

    font-size:56px;
    font-weight:800;

    color:#eef7ff;

    line-height:1;

    text-shadow:0 0 10px rgba(255,255,255,.18);

}


.feature-card p{

    margin:0;

    font-size:15px;

    color:#EEF8FA;

}


/* ==========================
   Blue Cards
========================== */

.feature-card:nth-child(1){

    background:linear-gradient(
135deg,
rgba(42,70,102,.65) 0%,
rgba(18,30,48,.88) 100%
);

}


.feature-card:nth-child(3){

    background:

    radial-gradient(
    circle at 70% 18%,

    rgba(170,190,255,.20),

    rgba(42,58,94,.80) 55%,

    rgba(8,16,24,.96)

    );

}


.feature-card:nth-child(4){

    background:

    radial-gradient(
    circle at 30% 20%,

    rgba(80,170,255,.26),

    rgba(30,61,96,.82) 55%,

    rgba(8,16,24,.96)

    );

}


/* ==========================
   Dark Cards
========================== */

.feature-card:nth-child(2){

    background:

    radial-gradient(
    circle at 30% 20%,

    rgba(30,170,170,.10),

    rgba(8,18,24,.96)

    );

}


.feature-card:nth-child(5){

    background:

    radial-gradient(
    circle at 50% 18%,

    rgba(120,90,255,.08),

    rgba(8,18,24,.96)

    );

}


.feature-card:nth-child(6){

    background:

    radial-gradient(
    circle at 75% 18%,

    rgba(35,180,200,.08),

    rgba(8,18,24,.96)

    );

}


.feature-card:nth-child(4) h3{

    background:

    linear-gradient(

    180deg,

    #48FFD6,

    #10C7FF

    );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;

}


.feature-card:nth-child(4) p{

    color:#17CBFF;

}

/* ==========================
   Worlds Section
========================== */

.worlds{
  min-height:100vh;
  padding:110px 0 80px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  text-align:center;

  background:
    radial-gradient(circle at 72% 70%, rgba(30,180,170,.18), transparent 36%),
    linear-gradient(180deg, #071218, #061014);
}

.worlds .section-title{
  font-size:clamp(44px,5vw,72px);
  margin:0 0 34px;
  font-weight:900;
  color:#fff;
  text-shadow:0 14px 34px rgba(0,0,0,.55);
}

.worlds-showcase{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Video / Phone frame */
.worlds-phone-link{
  display:block;
  text-decoration:none;
  cursor:pointer;
}

.worlds-phone{
  width:310px;
  height:520px;
  overflow:hidden;
  background:#000;
  border-radius:6px;

  box-shadow:
    0 0 22px rgba(31,214,197,.10),
    0 26px 60px rgba(0,0,0,.48);
}

.lily-worlds-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* World Names */
.worlds-list{
  margin:28px 0 14px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:16px 24px;
  max-width:850px;
}

.world-name{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;

  color:rgba(255,255,255,.52);
  font-size:15px;
  font-weight:700;
  letter-spacing:.4px;

  transition:
    color .25s ease,
    transform .25s ease,
    text-shadow .25s ease;
}

.world-name span{
  margin-left:7px;
  color:rgba(255,255,255,.78);
  font-weight:600;
}

.world-name:hover,
.world-name.active{
  color:#2FDFFF;
  transform:translateY(-2px);
  text-shadow:0 0 18px rgba(47,223,255,.28);
}

.world-name:hover span,
.world-name.active span{
  color:#fff;
}

/* Description */
.worlds-description{
  max-width:720px;
  margin:0 auto 28px;
  color:rgba(255,255,255,.84);
  font-size:17px;
  line-height:1.7;
  text-shadow:0 8px 18px rgba(0,0,0,.42);
}

.worlds .btn{
  margin-top:0;
}
/* ==========================
   Characters Section
========================== */

.characters{
  min-height:100vh;
  padding:115px 0 80px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  text-align:center;
  background:
    radial-gradient(circle at 78% 72%, rgba(75,190,175,.24), transparent 36%),
    linear-gradient(180deg, #071218, #061014);
}

.characters .section-title{
  font-size:clamp(42px,5vw,68px);
  margin:0 0 58px;
  font-weight:900;
  color:#fff;
  text-shadow:0 14px 34px rgba(0,0,0,.55);
}

.characters-grid{
  display:grid;
  grid-template-columns:repeat(3, 210px);
  gap:55px;
  justify-content:center;
  align-items:center;
  margin-bottom:32px;
}

.character-card{
  width:210px;
  height:315px;
  border-radius:10px;
  overflow:hidden;
  background:rgba(5,14,18,.72);
  box-shadow:0 22px 48px rgba(0,0,0,.45);
  position:relative;
  transition:
    transform .32s ease,
    box-shadow .32s ease;
}

.character-image{
  height:210px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(9,24,30,.55);
  position:relative;
}

.character-image::before{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  border-radius:50%;
  background:rgba(31,214,197,0);
  filter:blur(28px);
  transition:.32s ease;
  z-index:0;
}

.character-image img{
  max-width:100%;
  max-height:215px;
  object-fit:contain;
  position:relative;
  z-index:1;
  transition:
    transform .32s ease,
    filter .32s ease;
}

/* Faris أكبر شوي */
.character-card:nth-child(1) .character-image img{
  transform:scale(1.10);
}

/* Lily أكبر شوي لأنها البطلة */
.character-card:nth-child(2) .character-image img{
  transform:scale(1.05);
  filter:drop-shadow(0 0 12px rgba(31,214,197,.10));
}

.character-info{
  height:105px;
  background:rgba(3,8,11,.95);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.character-info h3{
  margin:0;
  font-size:32px;
  line-height:1;
  font-weight:800;
  color:#fff;
  text-shadow:0 8px 18px rgba(0,0,0,.55);
}

.character-info p{
  margin:10px 0 0;
  font-size:14px;
  color:rgba(255,255,255,.82);
  opacity:0;
  transform:translateY(12px);
  transition:
    opacity .35s ease,
    transform .35s ease;
}

.character-card:hover{
  transform:translateY(-7px) scale(1.025);
  box-shadow:
    0 0 22px rgba(31,214,197,.34),
    0 0 45px rgba(31,214,197,.18),
    0 25px 55px rgba(0,0,0,.55);
}

.character-card:hover .character-image::before{
  background:rgba(31,214,197,.15);
  filter:blur(32px);
}

.character-card:hover .character-image img{
  transform:scale(1.10);
  filter:
    drop-shadow(0 0 10px rgba(31,214,197,.45))
    drop-shadow(0 0 22px rgba(31,214,197,.22));
}

/* Faris hover */
.character-card:nth-child(1):hover .character-image img{
  transform:scale(1.16);
}

/* Lily hover */
.character-card:nth-child(2):hover .character-image img{
  transform:scale(1.14);
}

.character-card:hover .character-info p{
  opacity:1;
  transform:translateY(0);
}

.characters .btn{
  margin-top:0;
}



/* ==========================
   Story Section
========================== */

.story{
    min-height:100vh;
    padding:115px 0 90px;

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;
    overflow:hidden;
    text-align:center;

    background:
        linear-gradient(
            rgba(3, 12, 16, 0.596),
            rgba(3,12,16,.76)
        ),
        url("assets/story-bg.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.story .section-title{

    font-size:clamp(46px,5vw,70px);

    margin:0 0 24px;

    font-weight:900;

    color:#fff;

    text-shadow:
        0 14px 34px rgba(0,0,0,.55);

}

.story-quote{

    margin:0 0 58px;

    font-size:22px;

    font-style:italic;

    letter-spacing:.5px;

    color:rgba(255,255,255,.95);

    text-shadow:
        0 8px 20px rgba(0,0,0,.45);

}

.story-content{

    width:100%;
    max-width:1000px;

    margin:0 auto;

    display:flex;
    flex-direction:column;

    gap:26px;

}

.story-content p{

    margin:0;

    font-size:18px;

    line-height:1.8;

    color:rgba(255,255,255,.90);

    text-shadow:
        0 8px 18px rgba(0,0,0,.45);

}





/* ==========================
   Gallery Section
========================== */

.gallery{
  min-height:100vh;
  padding:115px 0 80px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  text-align:center;
  background:
    radial-gradient(circle at 76% 72%, rgba(75,190,175,.24), transparent 36%),
    linear-gradient(180deg, #071218, #061014);
}

.gallery .section-title{
  font-size:clamp(42px,5vw,68px);
  margin:0 0 18px;
  font-weight:900;
  color:#fff;
  text-shadow:0 14px 34px rgba(0,0,0,.55);
}

.gallery-subtitle{
  margin:0 0 28px;
  font-size:20px;
  font-style:italic;
  font-weight:300;
  color:rgba(255,255,255,.92);
  letter-spacing:.2px;
}

.gallery-frame{
  width:720px;
  min-height:280px;
  margin:0 auto 28px;
  padding:30px 42px;
  border-radius:8px;

  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.04);
  box-shadow:0 22px 55px rgba(0,0,0,.32);
  backdrop-filter:blur(12px);
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(5, 105px);
  grid-auto-rows:80px;
  gap:22px;
  justify-content:center;
  align-items:stretch;
}

.gallery-item{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:5px;
  cursor:pointer;

  transition:
    transform .28s ease,
    filter .28s ease,
    box-shadow .28s ease;
}

.gallery-item.tall{
  grid-row:span 2;
}

.gallery-item.wide{
  grid-column:span 2;
}

.gallery-item.purple{
  grid-column:5;
  grid-row:2;
}

.gallery-item.fish{
  grid-column:5;
  grid-row:3;
}

.gallery-item.flower-big{
  grid-column:3 / span 2;
  grid-row:2 / span 2;
}

.gallery-item:hover{
  transform:scale(1.045);
  filter:brightness(1.08);
  box-shadow:
    0 0 18px rgba(31,214,197,.22),
    0 12px 28px rgba(0,0,0,.35);
  z-index:2;
}

.gallery .btn{
  margin-top:0;
}

/* ==========================
   Gallery Lightbox
========================== */

.gallery-lightbox{
  position:fixed;
  inset:0;
  z-index:5000;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(2,10,14,.72);
  backdrop-filter:blur(12px);

  opacity:0;
  pointer-events:none;

  transition:opacity .28s ease;
}

.gallery-lightbox.active{
  opacity:1;
  pointer-events:auto;
}

.lightbox-image{
  max-width:78vw;
  max-height:82vh;
  object-fit:contain;

  box-shadow:
    0 0 40px rgba(0,0,0,.55),
    0 0 80px rgba(31,214,197,.12);

  transform:scale(.96);
  opacity:0;

  transition:
    transform .28s ease,
    opacity .28s ease;
}

.gallery-lightbox.active .lightbox-image{
  transform:scale(1);
  opacity:1;
}

.lightbox-close{
  position:absolute;
  top:70px;
  right:95px;

  border:none;
  background:none;
  color:#17d9ff;

  font-size:58px;
  line-height:1;
  cursor:pointer;

  text-shadow:0 0 18px rgba(23,217,255,.35);
}

.lightbox-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);

  width:56px;
  height:56px;
  border-radius:50%;

  border:1px solid rgba(31,214,197,.45);
  background:rgba(5,20,26,.62);
  color:#fff;

  font-size:46px;
  line-height:1;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:.25s ease;
}

.lightbox-arrow:hover{
  background:rgba(31,214,197,.18);
  box-shadow:0 0 22px rgba(31,214,197,.25);
}

.lightbox-prev{
  left:85px;
}

.lightbox-next{
  right:85px;
}






/* ==========================
   CTA Section
========================== */

.cta{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
    overflow:hidden;
}

/* الفيديو */

.cta-video{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:0;
}

/* التغميق */

.cta-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            rgba(4, 12, 18, 0.363),
            rgba(4,12,18,.58)
        );

    z-index:1;
}

/* المحتوى */

.cta-container{
    position:relative;
    z-index:2;
     transform: translateY(-50px)
}

.cta-title{

    font-size:clamp(50px,6vw,78px);

    font-weight:900;

    color:#fff;

    margin-bottom:28px;

    text-shadow:
        0 12px 28px rgba(0,0,0,.45);
}

.cta-text{

    max-width:700px;

    margin:0 auto 42px;

    color:rgba(255,255,255,.92);

    font-size:22px;

    line-height:1.6;

    text-shadow:
        0 6px 18px rgba(0,0,0,.35);
}

.cta .btn{
    margin-top:0;
}


.cta-video{

    filter:
        brightness(.78)
        saturate(.95);

    transform:scale(1.03);

}


/* ==========================
   Hero Intro Animation
========================== */

.hero-title,
.hero-sub,
.hero-actions{
  opacity:0;
  transform:translateY(28px);
  animation:heroFadeUp .8s ease forwards;
}

.hero-title{
  animation-delay:.15s;
}

.hero-sub{
  animation-delay:.35s;
}

.hero-actions{
  animation-delay:.55s;
}

@keyframes heroFadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}



@keyframes heroBackgroundZoom{

    from{
        transform:scale(1.04);
    }

    to{
        transform:scale(1);
    }

}

/* ==========================
   Features Reveal Animation
========================== */

.features h2,
.features .feature-card,
.features .btn{
  opacity:0;
  transform:translateY(34px);
  transition:
    opacity .75s ease,
    transform .75s ease;
}

.features.show h2{
  opacity:1;
  transform:translateY(0);
  transition-delay:.05s;
}

.features.show .feature-card{
  opacity:1;
  transform:translateY(0);
}

.features.show .feature-card:nth-child(1){ transition-delay:.16s; }
.features.show .feature-card:nth-child(2){ transition-delay:.24s; }
.features.show .feature-card:nth-child(3){ transition-delay:.32s; }
.features.show .feature-card:nth-child(4){ transition-delay:.40s; }
.features.show .feature-card:nth-child(5){ transition-delay:.48s; }
.features.show .feature-card:nth-child(6){ transition-delay:.56s; }

.features.show .btn{
  opacity:1;
  transform:translateY(0);
  transition-delay:.68s;
}


/* ==========================
   Worlds Reveal Animation
========================== */

.worlds .section-title,
.worlds-phone,
.worlds .world-name,
.worlds-description,
.worlds .btn{
  opacity:0;
  transform:translateY(34px);
  transition:
    opacity .75s ease,
    transform .75s ease;
}

.worlds.show .section-title{
  opacity:1;
  transform:translateY(0);
  transition-delay:.05s;
}

.worlds.show .worlds-phone{
  opacity:1;
  transform:translateY(0);
  transition-delay:.18s;
}

.worlds.show .world-name{
  opacity:1;
  transform:translateY(0);
}

.worlds.show .world-name:nth-child(1){ transition-delay:.34s; }
.worlds.show .world-name:nth-child(2){ transition-delay:.42s; }
.worlds.show .world-name:nth-child(3){ transition-delay:.50s; }
.worlds.show .world-name:nth-child(4){ transition-delay:.58s; }
.worlds.show .world-name:nth-child(5){ transition-delay:.66s; }

.worlds.show .worlds-description{
  opacity:1;
  transform:translateY(0);
  transition-delay:.76s;
}

.worlds.show .btn{
  opacity:1;
  transform:translateY(0);
  transition-delay:.88s;
}


/* ==========================
   Characters Reveal
========================== */

.characters .section-title,
.character-card,
.characters .btn{
    opacity:0;
    transition:all .8s cubic-bezier(.22,1,.36,1);
}

.characters .section-title{
    transform:translateY(-35px);
}

.character-card:nth-child(1){
    transform:translateX(-70px);
}

.character-card:nth-child(2){
    transform:translateY(60px) scale(.92);
}

.character-card:nth-child(3){
    transform:translateX(70px);
}

.characters .btn{
    transform:translateY(30px);
}

.characters.show .section-title,
.characters.show .character-card,
.characters.show .btn{
    opacity:1;
    transform:none;
}

.characters.show .section-title{
    transition-delay:.05s;
}

.characters.show .character-card:nth-child(1){
    transition-delay:.20s;
}

.characters.show .character-card:nth-child(2){
    transition-delay:.35s;
}

.characters.show .character-card:nth-child(3){
    transition-delay:.50s;
}

.characters.show .btn{
    transition-delay:.65s;
}



/* ==========================
   Story Reveal Animation
========================== */

.story .section-title,
.story-quote,
.story-content p{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .75s ease,
    transform .75s ease;
}

.story.show .section-title{
  opacity:1;
  transform:translateY(0);
  transition-delay:.05s;
}

.story.show .story-quote{
  opacity:1;
  transform:translateY(0);
  transition-delay:.22s;
}

.story.show .story-content p{
  opacity:1;
  transform:translateY(0);
}

.story.show .story-content p:nth-child(1){ transition-delay:.38s; }
.story.show .story-content p:nth-child(2){ transition-delay:.50s; }
.story.show .story-content p:nth-child(3){ transition-delay:.62s; }
.story.show .story-content p:nth-child(4){ transition-delay:.74s; }



/* ==========================
   Gallery Reveal Animation
========================== */

.gallery .section-title,
.gallery-subtitle,
.gallery-frame,
.gallery .btn{
  opacity:0;
  transform:translateY(30px);
  transition:
    opacity .75s ease,
    transform .75s ease;
}

.gallery .gallery-item{
  opacity:0;
  transform:scale(.92);
  transition:
    opacity .65s ease,
    transform .65s ease,
    filter .28s ease,
    box-shadow .28s ease;
}

.gallery.show .section-title{
  opacity:1;
  transform:translateY(0);
  transition-delay:.05s;
}

.gallery.show .gallery-subtitle{
  opacity:1;
  transform:translateY(0);
  transition-delay:.18s;
}

.gallery.show .gallery-frame{
  opacity:1;
  transform:translateY(0);
  transition-delay:.30s;
}

.gallery.show .gallery-item{
  opacity:1;
  transform:scale(1);
}

.gallery.show .gallery-item:nth-child(1){ transition-delay:.42s; }
.gallery.show .gallery-item:nth-child(2){ transition-delay:.48s; }
.gallery.show .gallery-item:nth-child(3){ transition-delay:.54s; }
.gallery.show .gallery-item:nth-child(4){ transition-delay:.60s; }
.gallery.show .gallery-item:nth-child(5){ transition-delay:.66s; }
.gallery.show .gallery-item:nth-child(6){ transition-delay:.72s; }
.gallery.show .gallery-item:nth-child(7){ transition-delay:.78s; }
.gallery.show .gallery-item:nth-child(8){ transition-delay:.84s; }
.gallery.show .gallery-item:nth-child(9){ transition-delay:.90s; }

.gallery.show .btn{
  opacity:1;
  transform:translateY(0);
  transition-delay:1s;
}


/* ==========================
   CTA Reveal Animation
========================== */

.cta .cta-title,
.cta .cta-text,
.cta .btn{
    opacity:0;
    transform:translateY(30px);
    transition:
        opacity .75s ease,
        transform .75s ease;
}

.cta.show .cta-title{
    opacity:1;
    transform:translateY(0);
    transition-delay:.08s;
}

.cta.show .cta-text{
    opacity:1;
    transform:translateY(0);
    transition-delay:.25s;
}

.cta.show .btn{
    opacity:1;
    transform:translateY(0);
    transition-delay:.42s;
}

/* خلفية تتحرك بهدوء */
.cta{
    animation:ctaBackground 14s ease-in-out infinite alternate;
}

@keyframes ctaBackground{
    from{
        background-position:center center;
        background-size:100%;
    }

    to{
        background-position:center 48%;
        background-size:106%;
    }
}

/* نبضة خفيفة للزر */
.cta.show .btn{
    animation:ctaPulse 4s ease-in-out infinite;
}

@keyframes ctaPulse{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.035);
    }

}