/* =========================
   STUDIO HERO (SCOPED ONLY)
   لا يؤثر على باقي الصفحة
========================= */

.studio-hero{
  --tilt: 19deg;
  --gapX: 18px;
  --gapY: 18px;
  --imgH: 520px;
  --radius: 0px;

  --speedUp: 18s;
  --speedDown: 20s;

  --bg: #0b0b0d;
  --text: #f3f4f6;
  --muted: rgba(243,244,246,.78);

  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}

.studio-hero .studio-bg{
  position: absolute;
  inset: -22%;
  transform: rotate(var(--tilt));
  z-index: -2;
}

.studio-hero .studio-cols{
  height: 150%;
  display: flex;
  gap: var(--gapX);
  padding: 28px;
}

.studio-hero .studio-col{
  flex: 0.65;
  position: relative;
  overflow: hidden;
}

.studio-hero .studio-col.mid{ flex: 0.65; }

.studio-hero .marquee{
  position: absolute;
  left: 0; right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gapY);
  will-change: transform;
  transform: translate3d(0,0,0);
}

.studio-hero .track{
  display: flex;
  flex-direction: column;
  gap: var(--gapY);
}

.studio-hero .track img{
  width: 100%;
  height: var(--imgH);
  object-fit: cover;
  border-radius: var(--radius);
  outline: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  display: block;
}

.studio-hero{
  --items: 3;
  --step: calc(var(--imgH) + var(--gapY));
  --loop: calc((var(--items) * var(--step)) - var(--gapY));
}

.studio-hero .studio-col.up .marquee{
  animation: studioUp var(--speedUp) linear infinite;
}
.studio-hero .studio-col.down .marquee{
  animation: studioDown var(--speedDown) linear infinite;
}

@keyframes studioUp{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(0, calc(-1 * var(--loop)), 0); }
}
@keyframes studioDown{
  from{ transform: translate3d(0, calc(-1 * var(--loop)), 0); }
  to  { transform: translate3d(0,0,0); }
}

.studio-hero .studio-shade{
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 700px at 50% 40%, rgba(0,0,0,.20), rgba(0,0,0,.75)),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.90));
}

.studio-hero .studio-content{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text);
  padding: 0 16px;
  gap: 30px;
}

.studio-hero .studio-content p{
  font-family: "Almarai", sans-serif;
  max-width: 720px;
  font-size: clamp(15px, 2.2vw, 19px);
  margin: 0;
  color: var(--muted);
}

.studioImg{
  width: 200px;
  height: auto;
  display: block;
  margin: 0;
  border-radius: 10px;
}

.studio-hero .studio-btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: #e64329;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.40);
  margin: 0;
  font-family: "Almarai", sans-serif;
}

.studio-hero .studio-btn p{
  font-family: "Almarai", sans-serif;


}

.studio-hero .arrow{
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}

/* 📱 الجوال */
@media (max-width: 768px){

  .studio-hero{
    height: 70vh;
    min-height: 540px;
    --imgH: 210px;
    --gapX: 14px;
    --gapY: 14px;
  }

  .studio-hero .studio-cols{
    width: 122%;
    margin-left: -11%;
    padding: 18px;
  }
  .studio-hero .studio-col{ flex: 0.85; }
  .studio-hero .studio-col.mid{ flex: 1.5; }

  .studio-hero{
    --step: calc(var(--imgH) + var(--gapY));
    --loop: calc((var(--items) * var(--step)) - var(--gapY));
  }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .studio-hero .studio-col.up .marquee,
  .studio-hero .studio-col.down .marquee{
    animation: none;
  }
}










/* 📱 iPad (طولي + عرضي) نفس الشكل */

@media (min-width: 768px) and (max-width: 1024px){

  .studio-hero{

    --imgH: 460px;   /* نفس الارتفاع في كل أوضاع الآيباد */

    --gapX: 14px;

    --gapY: 14px;

  }

  .studio-hero .studio-cols{

    width: 122%;

    margin-left: -11%;

    padding: 18px;

  }

  .studio-hero .studio-col{

    flex: 0.85;

  }

  .studio-hero .studio-col.mid{

    flex: 1.5;

  }

  .studio-hero .track img{

    object-fit: cover;

  }

}