/* ===== Videos Page (BEM, responsive) ===== */

.videos-page{
  position:relative;
  width:100%;
  min-height:100vh;
  background:#fff;
  overflow:hidden;
  font-family: Rai, system-ui, -apple-system, Segoe UI, sans-serif;
}

/* تم‌ها */
.videos-page--light{
  background:#ffffff;
}

.videos-page--dark{
  background:#000000;
}

/* رنگ متن و دکمه‌ها بر اساس تم */
.videos-page--light .videos__title{
  color:#000;
}
.videos-page--dark .videos__title{
  color:#ffffff;
}

.videos-page--light .videos__yt{
  color:#000;
  outline-color:#000;
}
.videos-page--dark .videos__yt{
  color:#ffffff;
  outline-color:#ffffff;
}

.videos-page--dark .yt-ic{
  fill:#ffffff !important; 
}

.videos-page--light .videos__cline{
  color:#511818;
}
.videos-page--dark .videos__cline{
  color:#B48D8D;
}

/* نوار بالا */
.videos__bar{
  position:relative;
  height:clamp(64px, 12vh, 140px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  color:#511818;
}

.videos__back{
  position:absolute; left:0; top:0;
  width:clamp(72px, 8vw, 120px);
  height:clamp(72px, 8vw, 120px);
  padding:0; border:0; background:transparent; cursor:pointer;
}
.videos__back img{ width:100%; height:100%; object-fit:contain; display:block; }

.videos__cline{
  margin-top:clamp(10px, 2.8vh, 40px);
  font-family: unixel, monospace;
  font-size:clamp(10px, 1.2vw, 14px);
  color:#511818;
}

/* استیج مرکزی (TV vars رو می‌ذاریم بمونه؛ آسیبی نمی‌زنه) */
.videos__stage{
  position:relative;
  width:100%;
  min-height:calc(100vh - clamp(64px, 12vh, 140px));
  display:block;

  --tv-w: clamp(360px, 39.7vw, 600px);
  --tv-ratio: calc(588 / 600);
  --tv-h: calc(var(--tv-w) * var(--tv-ratio));

  /* screen sizing + alignment for the GIF inside TV */
  --screen-w: calc(var(--tv-w) * 0.678); /* slightly wider so the GIF fills the top edge better */
  --noise-ox: 0;                          /* keep centered horizontally */
  --noise-oy: -0.034;                     /* move the GIF further UP to remove the small top gap */
}

/* TV و نویز (نویز زیر TV) */
.videos__tv,
.videos__noise{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  height:auto; display:block;
}

.videos__tv{
  width:var(--tv-w);
  z-index:3;
}
.videos__noise{
  /* size to TV opening, not viewport */
  width: var(--screen-w);
  height: auto;
  z-index: 2;
  /* position relative to TV center with responsive offsets */
  left: calc(50% + var(--tv-w) * var(--noise-ox));
  top:  calc(50% + var(--tv-h) * var(--noise-oy));
  transform: translate(-50%, -50%);
  filter: contrast(115%) brightness(108%);
}

/* عنوان */
.videos__title{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:clamp(61vh, 67vh, 69vh); /* moved up so it overlaps the TV slightly */
  color:#000;
  text-align:center;
  font-size:clamp(28px, 4.2vw, 64px);
  line-height:1.06;
  white-space:nowrap;
  z-index:5;
}

/* دکمه یوتیوب */
.videos__yt{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:clamp(76vh, 82vh, 84vh); /* increased to avoid overlapping title */
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 12px;
  background:#CD201F;
  color:#000;
  text-decoration:none;
  border-radius:3px;
  outline:2px solid #000;
  outline-offset:-2px;
  z-index:6;
}
.videos__yt .yt-ic{
  width:clamp(12px, 1.2vw, 15px); height:auto; fill:#000; display:block;
}
.videos__yt span{
  font-size:clamp(12px, 1.2vw, 16px); line-height:1.1;
}

/* =================== چشم‌ها: همگی خارج از TV =================== */
/* چشم‌ها با درصد نسبت به استیج پوزیشن می‌گیرند تا روی همه رزولوشن‌ها ثابت بمونن */
.videos__eye{
  position:absolute;
  width:clamp(96px, 10.5vw, 200px); /* کمی کوچیک‌تر برای سازگاری بهتر */
  height:auto; display:block;
  z-index:4;
}

/* A-set (4 عدد) – خارج از TV */
.videos__eye.a1{ left:12%;  top:58%; transform:rotate(-7deg); }
.videos__eye.a2{ left:78%;  top:18%; transform:rotate(25deg); }
.videos__eye.a3{ left:25.7%; top:25.7%; transform:rotate(-6deg); }
.videos__eye.a4{ left:28.8%; top:68.8%; transform:rotate(-16deg); }

/* B-set (4 عدد) – خارج از TV */
.videos__eye.b1{ left:20%;  top:46%; transform:rotate(-8deg); }
.videos__eye.b2{ left:72%;  top:64%; transform:rotate(22deg); }
.videos__eye.b3{ left:42.9%; top:10.9%; transform:rotate(-20deg); }
.videos__eye.b4{ left:63.6%; top:42.4%; transform:rotate(17deg); }

/* چشم‌ها فقط در لایت مود دیده می‌شن */
.videos-page--light .videos__eye{
  display:block;
}
.videos-page--dark .videos__eye{
  display:none;
}

/* متن‌های قرمز فقط در دارک مود دیده می‌شن */
.videos__phrases{
  position:absolute;
  inset:0;
  pointer-events:none;
  /* لایه زیر TV / بالای بک‌گراند */
  z-index:1;
  font-family:"Rai", Rai, system-ui, -apple-system, Segoe UI, sans-serif;
}

.videos-page--light .videos__phrases{
  display:none;
}
.videos-page--dark .videos__phrases{
  display:block;
}

/* استایل پایه‌ی هر خط متن */
.videos__phrase{
  position:absolute;
  color:rgba(255,0,0,0.60);
  font-size:clamp(24px,3vw,48px);
  white-space:nowrap;
}

/* Desktop spacing (more vertical gap) */
.videos__phrase.p1{  right:-10%;  top:26%; }
.videos__phrase.p2{  right:2%;    top:31%; }
.videos__phrase.p3{  right:14%;   top:36%; }
.videos__phrase.p4{  right:26%;   top:41%; }
.videos__phrase.p5{  right:38%;   top:46%; }
.videos__phrase.p6{  right:50%;   top:51%; }
.videos__phrase.p7{  right:62%;   top:56%; }
.videos__phrase.p8{  right:74%;   top:61%; }
.videos__phrase.p9{  right:86%;   top:66%; }
.videos__phrase.p10{ right:98%;   top:71%; }

/* Top row */
.videos__phrase.p11{ right:-6%;   top:6%;  }
.videos__phrase.p12{ right:6%;    top:11%; }
.videos__phrase.p13{ right:18%;   top:16%; }
.videos__phrase.p14{ right:30%;   top:21%; }
.videos__phrase.p15{ right:42%;   top:26%; }
.videos__phrase.p16{ right:54%;   top:31%; }
.videos__phrase.p17{ right:66%;   top:36%; }
.videos__phrase.p18{ right:78%;   top:41%; }
.videos__phrase.p19{ right:90%;   top:46%; }
.videos__phrase.p20{ right:102%;  top:51%; }

@media (max-width:900px){
  .videos__phrase{
    font-size:clamp(18px,3.4vw,32px);
  }
}

/* ریسپانسیو ریزتر (بدون دست‌زدن به پوزیشن‌ها؛ فقط مقیاس‌ها) */
@media (max-width:1080px){
  .videos__title{
    top:min(78vh, calc(50% + 28vh)); /* lowered slightly for tablets */
    white-space:normal;
    padding:0 12px;
  }
  .videos__yt{ top:min(85vh, calc(50% + 33vh)); }
  .videos__tv{ width:min(82vw, 540px); }
  .videos__noise{ width:min(64vw, 420px); }
  .videos__stage{ --screen-w: calc(var(--tv-w) * 0.685); }
}
@media (max-width:720px){
  .videos__back{ width:64px; height:64px; }
  .videos__yt{ transform:translateX(-50%) scale(.95); }
  /* چشم‌ها کمی جمع‌وجورتر می‌شن تا از کادر نزنن بیرون */
  .videos__eye{ width:clamp(84px, 12vw, 160px); }
  .videos__stage{ --noise-oy: -0.028; } /* push up a bit more on small screens */
  .videos__title{
    top:min(68vh, calc(50% + 18vh)); /* moved higher for mobile view */
  }
}

/* Blink فقط در لایت مود */
.videos-page--light .videos__eye{
  animation:eye-blink 30s infinite;
  animation-delay: var(--blink-delay, 0s);
}

@keyframes eye-blink{
  0.6%{ opacity:1; }
  1%{ opacity:0; }
  1.4%{ opacity:1; }
  100%{ opacity:1; }
}