/**
 * هیرو صفحه اصلی «من جانا هستم»
 * متن‌ها و تصویر سونیک از «ویرایشگر هیرو» تزریق می‌شوند؛ این فایل فقط چیدمان و جلوه‌هاست.
 */

/* صفحه فرود تمام‌صفحه — هدر و ناوبری پایین مخفی می‌شوند */
body.jana-hero-page .jana-app-container {
  max-width: none;
  padding: 0;
  margin: 0;
}
body.jana-hero-page .jana-header,
body.jana-hero-page .bottom-nav {
  display: none;
}

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #2a1a4a;
}

/* ── پس‌زمینه صحنه ─────────────────────────── */
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/hero/hero-bg-tablet.webp');
  background-size: cover;
  background-position: center;
  animation: janaHeroKenburns 36s ease-in-out infinite alternate;
}
@media (min-width: 1180px) and (min-aspect-ratio: 4/3) {
  .hero-bg { background-image: url('../img/hero/hero-bg-wide.webp'); }
}
@keyframes janaHeroKenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.1) translateY(-1.2%); }
}

/* اسکریم خوانایی — سمت راست (سمت متن در RTL) تیره‌تر */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(30, 14, 56, .82) 0%, rgba(30, 14, 56, .38) 38%, transparent 68%),
    linear-gradient(to top, rgba(20, 10, 40, .55) 0%, transparent 26%);
}

/* ── حلقه‌های طلایی ─────────────────────────── */
.ring {
  position: absolute;
  width: var(--s);
  height: var(--s);
  background: var(--img) center / contain no-repeat;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
  animation: janaHeroRingFloat var(--d) ease-in-out var(--dl, 0s) infinite alternate;
  z-index: 2;
  opacity: .95;
}
@keyframes janaHeroRingFloat {
  from { transform: translateY(0) rotate(-6deg); }
  to   { transform: translateY(calc(var(--s) * -0.55)) rotate(8deg); }
}

/* ── محتوای متنی ───────────────────────────
   دسکتاپ: بلوک متن می‌چسبد به چپ‌ترین نقطه و همه نوشته‌ها وسط‌چین‌اند
   تا با سونیک (چسبیده به راست‌ترین نقطه) تداخل نکنند */
.hero-content {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: min(58%, 680px);
  margin-right: auto; /* در RTL جعبه را به لبه چپ می‌چسباند */
  margin-left: clamp(12px, 3vw, 48px);
  padding-left: 8px;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font-size: clamp(.85rem, 1.6vw, 1rem);
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 9999px;
  backdrop-filter: blur(6px);
  margin-bottom: 20px;
  animation: janaHeroFadeUp .8s .1s both;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5.6vw, 3.9rem);
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: -.5px;
  text-shadow: 0 3px 22px rgba(20, 8, 50, .55);
  animation: janaHeroFadeUp .8s .25s both;
}
/* خط دوم عنوان: گرادیانی — سایه‌ی معمولی متن روی گرادیان می‌نشیند و آن را تیره می‌کند؛
   drop-shadow بعد از رندر اعمال می‌شود و پشت حروف می‌ماند تا رنگین‌کمان دیده شود */
.hero h1 em {
  font-style: normal;
  background: linear-gradient(93deg, #F59E0B, #FF9AD4 55%, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 2px rgba(24, 10, 55, .6)) drop-shadow(0 6px 16px rgba(24, 10, 55, .5));
}
.hero .sub {
  color: rgba(255, 255, 255, .92);
  font-size: clamp(1rem, 2.1vw, 1.22rem);
  line-height: 2;
  max-width: 480px;
  margin-top: 18px;
  text-shadow: 0 2px 12px rgba(20, 8, 50, .6);
  animation: janaHeroFadeUp .8s .4s both;
}
.cta-row { margin-top: 32px; animation: janaHeroFadeUp .8s .55s both; }
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: clamp(1.1rem, 2.3vw, 1.35rem);
  font-weight: 800;
  color: #fff;
  background: linear-gradient(86deg, #7C3AED 2%, #FF9AD4 53%, #F59E0B 99%);
  border: none;
  border-radius: 9999px;
  padding: 16px 38px;
  min-height: 58px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(124, 58, 237, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s;
  text-decoration: none;
  animation: janaHeroCtaHue 12s linear infinite;
}
.cta:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 38px rgba(124, 58, 237, .6), inset 0 1px 0 rgba(255,255,255,.35); }
.cta:active { transform: scale(.97); }
@keyframes janaHeroCtaHue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}
.stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
  animation: janaHeroFadeUp .8s .7s both;
}
.chip {
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .95);
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: clamp(.8rem, 1.5vw, .95rem);
  font-weight: 600;
  backdrop-filter: blur(4px);
}
@keyframes janaHeroFadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── هایپر سونیک ──────────────────────────── */
.sonic-wrap {
  position: absolute;
  bottom: 14px;
  right: clamp(4px, 1.2vw, 20px); /* چسبیده به راست‌ترین نقطه */
  width: clamp(230px, 34vw, 400px);
  aspect-ratio: var(--sonic-ar, 736 / 1217);
  z-index: 4;
  animation: janaHeroBob 3.6s ease-in-out infinite alternate;
  filter: drop-shadow(0 18px 28px rgba(10, 5, 30, .5));
}
@media (max-width: 860px) {
  .sonic-wrap { width: clamp(190px, 42vw, 260px); bottom: 6px; right: 2px; }
  .hero-content {
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0 16px 26px;
  }
}
@keyframes janaHeroBob {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}
.sonic-img {
  width: 100%;
  height: 100%;
  display: block;
  /* رنگ‌های هایپر سونیک ثابت می‌مانند — به درخواست جانا 😊 */
}

/* چشم‌ها: پچ سفید روی چشم‌های درخشان + مردمک متحرک
   (مختصات برای تصویر sonic-hyper.webp فعلی ۷۳۶×۱۲۱۷ تنظیم شده) */
.eye {
  position: absolute;
  width: 10%;
  aspect-ratio: 1 / 1.28;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff 78%, rgba(255, 255, 255, 0) 100%);
  animation: janaHeroBlink 5.2s ease-in-out infinite;
  transform-origin: center;
}
.eye-l { right: 57.1%; top: 31.1%; }
.eye-r { right: 35.5%; top: 31.1%; }
@keyframes janaHeroBlink {
  0%, 91.5%, 100% { transform: translate(50%, -50%) scaleY(1); }
  94.5%           { transform: translate(50%, -50%) scaleY(.08); }
}
.pupil {
  position: absolute;
  right: 50%;
  top: 50%;
  width: 47%;
  aspect-ratio: 1 / 1.3;
  background: #232b40;
  border-radius: 50%;
  transform: translate(50%, -50%) translate(var(--dx, 0px), var(--dy, 0px));
  transition: transform .13s ease-out;
}
.hero.idle .pupil { transition: transform .55s ease-in-out; }
.pupil::after {
  content: '';
  position: absolute;
  right: 22%;
  top: 16%;
  width: 30%;
  height: 26%;
  background: #fff;
  border-radius: 50%;
  opacity: .9;
}

/* حباب گفتگو */
.bubble {
  position: absolute;
  bottom: 74%;
  right: 55%;
  background: #fff;
  color: #241245;
  font-size: clamp(.9rem, 1.7vw, 1.08rem);
  font-weight: 700;
  line-height: 1.9;
  padding: 12px 20px;
  border-radius: 18px;
  border-bottom-right-radius: 4px;
  box-shadow: 0 8px 24px rgba(15, 8, 40, .35);
  white-space: nowrap;
  transition: opacity .35s, transform .35s;
  z-index: 6;
}
.bubble::after {
  content: '';
  position: absolute;
  bottom: -9px;
  right: 18px;
  border: 10px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}
.bubble.swap { opacity: 0; transform: translateY(8px) scale(.94); }

/* احترام به کاربرانی که حرکت کمتر می‌خواهند */
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .sonic-wrap, .ring, .eye, .cta { animation: none; }
  .kicker, .hero h1, .hero .sub, .cta-row, .stats-row { animation: none; }
  .pupil { transition: none; }
}

/* ── موبایل — در انتهای فایل تا بر قوانین پایه غلبه کند ── */
@media (max-width: 860px) {
  /* هایپر سونیک کامل (بدون قاب)، بالا-راست و بالای نوشته‌ها تا با متن‌ها تداخل نکند */
  .sonic-wrap {
    top: 34px;
    right: 6px;
    bottom: auto;
    width: clamp(140px, 40vw, 180px);
  }
  /* حباب هم‌تراز سرِ سونیک، سمت چپ او با دُم رو به خودش */
  .bubble {
    top: 31%;
    bottom: auto;
    right: calc(100% + 12px);
    transform: translateY(-50%);
    max-width: 46vw;
    white-space: normal;
    text-align: center;
    font-size: .85rem;
    line-height: 1.7;
    padding: 8px 14px;
  }
  .bubble.swap { transform: translateY(calc(-50% + 8px)) scale(.94); }
  .bubble::after {
    bottom: auto;
    top: 50%;
    right: -9px;
    transform: translateY(-50%);
    border: 10px solid transparent;
    border-left-color: #fff;
    border-right: 0;
  }
  .hero-content {
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0 16px 30px;
  }
}