/* =========================================================
   ORS — Coffee Hero

   Layer order (bottom -> top), every layer has an explicit z-index:

     1. background image ......... .coffee-hero (background-image)
     2. dark overlay ............. .coffee-hero::before      z-index 1
     3. center glow .............. .coffee-hero::after       z-index 2
     4. green patterned strip .... .coffee-hero__green-area  z-index 3
     5. smoke .................... .coffee-hero__smoke       z-index 4   (inside visual)
     6. coffee ................... .coffee-hero__coffee      z-index 6   (inside visual)
     7. content .................. .coffee-hero__content     z-index 10
     8. navbar ................... .coffee-hero__nav         z-index 20

   .coffee-hero__visual (z-index 5) spans the whole hero and creates its own
   stacking context. That is what makes the smoke read as rising *from behind*
   the bowl, while the smoke + coffee group as a whole still sits above the
   green strip. Because the wrapper is full-bleed, every offset below is a
   percentage of the hero height, which keeps the composition stable at any
   viewport.
   ========================================================= */

:root {
  --hero-green: #4b9855;
  --hero-dark-overlay: rgba(0, 0, 0, 0.72);

  --hero-min-height: 100vh;
  --hero-inline: min(1320px, calc(100% - 64px));

  /*
    نوار سبز از خود کاسه اندازه می‌گیرد، نه از ارتفاع Hero.

    با درصدِ ارتفاع، روی نمایشگر بلند یک نوار سبزِ خالی زیر کاسه
    می‌ماند که هیچ کاری نمی‌کند — فقط صفحه را بلندتر می‌کند و بخش
    بعدی را پایین می‌برد. حالا ارتفاع نوار برابر است با همان مقدار
    که کاسه در آن فرو می‌رود، به‌علاوه‌ی یک فاصله‌ی ثابت. یعنی زیر
    کاسه همیشه همان‌قدر سبز می‌ماند، روی هر ابعادی.
  */
  --green-breathing: 34px;
  --pattern-height:
    calc(var(--coffee-width) * var(--coffee-sink) + var(--green-breathing));

  /*
    ---------- بودجه‌ی عمودی هیرو ----------

    هر چیزی که در هیرو ارتفاع می‌خورد باید سقف ارتفاعی هم داشته باشد،
    نه فقط عرضی. ۱۳۶۶×۷۶۸ دقیقاً همان‌قدر پهن است که ۱۳۶۶×۱۰۲۴، پس با
    clamp عرضیِ تنها، هر دو یک اندازه تیتر و کاسه می‌گیرند — ولی یکی
    ۲۵۶ پیکسل ارتفاع کمتر دارد و توضیح روی کاسه می‌افتد. اغلب
    نمایشگرهای واقعی (۱۳۶۶×۷۶۸، ۱۵۳۶×۸۶۴، ۱۶۰۰×۹۰۰، ۱۹۲۰×۹۶۹ با نوار
    مرورگر) دقیقاً همین‌طورند.
  */
  --coffee-width: clamp(300px, min(33vw, 52vh), 620px);

  /*
    نسبت ارتفاع دیدنیِ کاسه به عرضش. تصویر ۱۵۳۶×۱۰۲۴ است با ۱۰٫۱۶٪
    شفاف در بالا و ۲٫۹۳٪ در پایین، و لبه‌ی پایینش همیشه
    --green-breathing بالاتر از کف هیرو می‌نشیند. پس فاصله‌ی لبه‌ی
    دیدنیِ بالای کاسه تا کف هیرو برابر است با:

        --green-breathing + --coffee-width × 0.599

    این عدد در مرورگر اندازه‌گیری شده، حدس نیست.
  */
  --coffee-visible-ratio: 0.599;

  /* کمترین فاصله‌ی متن تا لبه‌ی دیدنیِ کاسه */
  --coffee-clearance: 40px;

  /*
    ریتم عمودی نوار بالا هم با ارتفاع کوچک می‌شود. روی ۷۶۸ پیکسل، نوار
    ۲۰۷ پیکسلی یعنی «اورس» زیر منو می‌رفت.
  */
  --hero-nav-pad: clamp(14px, 2.2vh, 26px);
  --hero-logo-size: clamp(78px, 9.6vh, 104px);
  --hero-nav-gap: clamp(14px, 2.4vh, 26px);

  /*
    قد تقریبی نوار بالا. ۵۱ پیکسل ارتفاع خط منوست و ۲۴ پیکسل فاصله‌ی
    نفس‌کشیدن زیرش. بقیه‌اش از همان توکن‌های بالاست، پس اگر ریتم نوار
    عوض شود این هم خودکار عوض می‌شود و متن دوباره زیر منو نمی‌رود.
  */
  --hero-nav-height:
    calc(var(--hero-nav-pad) + var(--hero-logo-size) + var(--hero-nav-gap) + 75px);

  /*
    The bowl and the smoke are anchored to the green line and scaled by the
    bowl's own width, not by the hero height. That keeps the composition
    identical on a short laptop and a tall phone:

      --coffee-sink   how far the bowl's bottom edge sinks past the green line
      --smoke-origin  how far the smoke origin sits above the green line

    Both are multiples of --coffee-width, measured from coffee4 (1536x1024,
    transparent inset 10.16% top / 2.93% bottom). Together they put ~69% of the
    bowl above the green line and start the smoke at the top of the bean mound.
  */
  --coffee-sink: 0.199;
  --smoke-origin: 0.387;

  --smoke-width: calc(var(--coffee-width) * 0.58);
  --smoke-duration: 12s;

  /*
    coffee-smoke.png is pure white with a peak alpha of only 45/255 (~18%), so
    the Kaffa value of 0.5 would cap the plume at ~9% and make it invisible on
    this background. 1 lets the PNG show at its own density; the curve shape
    below is unchanged and scales with this one knob.
  */
  --smoke-max-opacity: 1;

  --content-top: max(var(--hero-nav-height), min(24vh, 280px));
}

/* mobile browsers: avoid the URL-bar jump on 100vh */
@supports (height: 100svh) {
  :root {
    --hero-min-height: 100svh;
  }
}


/* =========================
   HERO
========================= */

.coffee-hero {
  position: relative;
  min-height: var(--hero-min-height);
  overflow: hidden;
  isolation: isolate;

  /* ۴۴۵ کیلوبایت برای پس‌زمینه‌ای که روی گوشی ۳۹۰ پیکسل دیده می‌شود.
     نسخه‌ی موبایل در مدیاکوئری پایین‌تر می‌آید.

     ‏webp اینجا نیامده چون اندازه‌گیری گفت نسخه‌ی webp این عکس ٪۳
     **بزرگ‌تر** می‌شود — JPEG برای عکس فتوگرافیک تمام‌قاب همچنان
     رقیب خوبی است. */
  background-image: url("../assets/top_BG.cc81ab122d21.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* dark overlay */
.coffee-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background: var(--hero-dark-overlay);
  pointer-events: none;
}

/* slight center glow so hero doesn't look flat */
.coffee-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(255, 255, 255, 0.045) 0%,
      rgba(255, 255, 255, 0.02) 20%,
      rgba(0, 0, 0, 0) 52%
    );

  pointer-events: none;
}


/* =========================
   GREEN PATTERN AREA
========================= */

.coffee-hero__green-area {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: var(--pattern-height);

  z-index: 3;

  /* the green comes from background-color; the PNG is never recolored */
  background-color: var(--hero-green);
  /* همان فایل فوتر — یک بار دانلود می‌شود، دو جا استفاده. */
  background-image: url("../assets/leaves_pattern_010.c62c7bf78398.png");
  background-image: image-set(url("../assets/leaves_pattern_010.da8dac46410b.webp") type("image/webp"),
                              url("../assets/leaves_pattern_010.c62c7bf78398.png") type("image/png"));
  background-repeat: repeat;

  /*
    اگر پترن خیلی درشت بود:
    background-size: 250px 250px;
  */
}


/* =========================
   NAVBAR
========================= */

.coffee-hero__nav {
  position: absolute;

  top: 0;
  left: 50%;

  z-index: 20;

  width: var(--hero-inline);

  transform: translateX(-50%);

  padding-top: var(--hero-nav-pad);

  color: #fff;
}

.coffee-hero__nav-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

/* --- گوشه‌ی کاربردی هدر --- */

/*
  .coffee-hero__social-list هنوز لازم است چون فوتر از همان استفاده
  می‌کند؛ فقط برچسب و خط تیره‌ی هدر برداشته شدند.
*/

.coffee-hero__utility {
  display: flex;
  align-items: center;
  min-height: 34px;
}

.coffee-hero__utility-link,
.coffee-hero__utility-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;

  transition: color 0.2s ease;
}

.coffee-hero__utility-link svg {
  width: 17px;
  height: 17px;
}

.coffee-hero__utility-link:hover,
.coffee-hero__utility-link:focus-visible {
  color: #ffffff;
}

.coffee-hero__social {
  display: flex;
  align-items: center;
  gap: 14px;
}

.coffee-hero__social-list {
  display: flex;
  align-items: center;
  gap: 8px;
}

.coffee-hero__social-list a {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;

  color: #fff;

  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.coffee-hero__social-list svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.coffee-hero__social-list a:hover,
.coffee-hero__social-list a:focus-visible {
  border-color: var(--ors-green-action);
  background-color: var(--ors-green-action);
}

/* --- logo --- */

.coffee-hero__logo {
  display: grid;
  place-items: center;
  align-content: center;

  width: var(--hero-logo-size);
  height: var(--hero-logo-size);

  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;

  text-align: center;
  line-height: 1;
}

.coffee-hero__logo-top,
.coffee-hero__logo-bottom {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
}

.coffee-hero__logo-mark {
  margin-block: 2px;

  /* فارسی است، پس فونت فارسی. letter-spacing مثبت هم حروف فارسی را
     از هم جدا می‌کند — «اورس» به «ا و ر س» تبدیل می‌شود. */
  font-family: var(--ors-font-fa);
  font-size: 23px;
  font-weight: 900;
  letter-spacing: normal;

  /* والد line-height: 1 دارد که زیرنویس «و» و «ر» را می‌برد. */
  line-height: 1.35;
  color: #fff;
}

/* --- actions --- */

.coffee-hero__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.coffee-hero__icon-btn {
  position: relative;

  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;

  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.coffee-hero__icon-btn svg {
  width: 18px;
  height: 18px;
}

.coffee-hero__icon-btn:hover,
.coffee-hero__icon-btn:focus-visible {
  border-color: var(--hero-green);
  background-color: rgba(75, 152, 85, 0.2);
}

.coffee-hero__icon-btn--cart {
  border-color: var(--ors-green-action);
  background-color: var(--ors-green-action);
}

.coffee-hero__icon-btn--cart:hover,
.coffee-hero__icon-btn--cart:focus-visible {
  background-color: var(--ors-green-action-hover);
}

.coffee-hero__cart-count {
  position: absolute;
  top: -6px;
  inset-inline-end: -3px;

  display: grid;
  place-items: center;

  min-width: 19px;
  height: 19px;
  padding-inline: 4px;

  border-radius: 999px;
  background: #fff;
  color: var(--ors-charcoal);

  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* --- burger (mobile only) --- */

.coffee-hero__burger {
  display: none;

  width: 38px;
  height: 38px;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
}

.coffee-hero__burger span {
  display: block;
  width: 16px;
  height: 1.6px;
  margin: 3px auto;

  background: #fff;
  border-radius: 2px;
}

/* --- menu --- */

.coffee-hero__nav-bottom {
  margin-top: var(--hero-nav-gap);
}

.coffee-hero__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.6vw, 44px);
}

.coffee-hero__menu a {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  font-size: 15px;
  font-weight: 700;

  color: rgba(255, 255, 255, 0.92);

  transition: color 0.2s ease;
}

.coffee-hero__menu a:hover,
.coffee-hero__menu a:focus-visible,
.coffee-hero__menu a.is-active {
  color: var(--hero-green);
}

/* small line-art caret for items that open a submenu */
.coffee-hero__menu a i {
  width: 5px;
  height: 5px;

  border-inline-end: 1.4px solid currentColor;
  border-block-end: 1.4px solid currentColor;

  transform: rotate(45deg) translateY(-1px);

  opacity: 0.85;
}


/* =========================
   CONTENT
========================= */

.coffee-hero__content {
  position: relative;
  z-index: 10;

  width: var(--hero-inline);
  margin-inline: auto;

  padding-top: var(--content-top);

  /*
    این padding کلید ماجراست، نه یک فاصله‌ی تزئینی.

    کاسه absolute است و از کف هیرو اندازه می‌گیرد؛ متن در جریان است و
    از سقف. تا وقتی این دو هیچ خبری از هم ندارند، روی نمایشگر کوتاه
    به هم می‌رسند و هر بار باید با عددی دستی جلویش را گرفت — که تا
    ابعاد بعدی جواب می‌دهد.

    اینجا متن جای کاسه را در جریان صفحه رزرو می‌کند. اگر فضا کم بیاید،
    خودِ هیرو بلندتر می‌شود و کاسه با کف آن پایین می‌رود. یعنی همپوشانی
    دیگر «تنظیم» نمی‌شود، ساختاراً ممکن نیست — روی هر ابعادی، حتی
    ابعادی که هیچ‌وقت تستش نکرده‌ایم.
  */
  padding-bottom:
    calc(
      var(--coffee-width) * var(--coffee-visible-ratio)
      + var(--green-breathing)
      + var(--coffee-clearance)
    );

  text-align: center;
}

.coffee-hero__eyebrow {
  margin: 0;

  color: var(--hero-green);

  /* فارسی است، پس فونت فارسی. مونتسرات حروف فارسی ندارد و مرورگر
     بی‌صدا به جایگزین می‌افتد. letter-spacing منفی هم اتصال حروف را
     خراب می‌کند و line-height زیر ۱ زیرنویس‌ها را می‌برد. */
  font-family: var(--ors-font-fa);
  /* سقف ارتفاعی هم دارد؛ وگرنه روی ۱۳۶۶×۷۶۸ همان‌قدر بزرگ می‌شود
     که روی ۱۳۶۶×۱۰۲۴ و هیرو را از یک صفحه بیرون می‌زند. */
  font-size: clamp(38px, min(5.4vw, 8.4vh), 82px);
  font-weight: 900;
  /* یک کلمه‌ی کوتاه است و زیرنویس عمیق ندارد، پس ۱٫۱۲ کافی است.
     بیشتر از این، کل بلوک متن را پایین می‌برد و توضیح روی کاسه
     می‌افتد — همان چیزی که با ۱٫۳ اتفاق افتاد. */
  line-height: 1.12;

  letter-spacing: normal;
}

.coffee-hero__title {
  margin:
    clamp(6px, 0.8vw, 12px)
    auto
    0;

  color: #fff;

  /* فونت فارسی، نه لاتینِ لوگو: عنوان دیگر فارسی است و Montserrat
     حروف فارسی ندارد — با آن، مرورگر بی‌صدا به فونت جایگزین می‌افتد. */
  font-family: var(--ors-font-fa);
  font-size: clamp(38px, min(6.2vw, 10vh), 96px);
  font-weight: 800;

  /* فارسی زیرنویس و بالانویس دارد؛ line-height زیر ۱ حروف را
     می‌برید. letter-spacing منفی هم اتصال حروف فارسی را خراب
     می‌کند و برای لاتین نوشته شده بود. */
  line-height: 1.32;
  letter-spacing: normal;

  max-width: 1200px;
}

.coffee-hero__description {
  width: min(580px, 88%);
  margin:
    clamp(22px, 2.2vw, 34px)
    auto
    0;

  color: rgba(255, 255, 255, 0.9);

  font-size: clamp(14px, 0.95vw, 16px);
  line-height: 2.1;
}


/* =========================
   VISUAL AREA (smoke + coffee)
========================= */

.coffee-hero__visual {
  position: absolute;
  inset: 0;

  z-index: 5;

  pointer-events: none;
}


/* =========================
   SMOKE
========================= */

.coffee-hero__smoke {
  position: absolute;

  left: 50%;
  bottom: calc(var(--pattern-height) + var(--coffee-width) * var(--smoke-origin));

  width: var(--smoke-width);
  height: 40%;

  transform: translateX(-50%);

  z-index: 4;

  pointer-events: none;
}

.coffee-hero__smoke img {
  position: absolute;

  left: 50%;
  bottom: 0;

  display: block;
  width: 100%;
  height: auto;

  opacity: 0;

  transform: translate(-50%, 55%);

  animation-name: coffee-smoke-rise;
  animation-duration: var(--smoke-duration);
  animation-timing-function: ease;
  animation-iteration-count: infinite;

  will-change: transform, opacity;
}

.coffee-hero__smoke img:nth-child(1) {
  animation-delay: 0s;
}

.coffee-hero__smoke img:nth-child(2) {
  animation-delay: 2s;
}

.coffee-hero__smoke img:nth-child(3) {
  animation-delay: 4s;
}

.coffee-hero__smoke img:nth-child(4) {
  animation-delay: 6s;
}

.coffee-hero__smoke img:nth-child(5) {
  animation-delay: 8s;
}

.coffee-hero__smoke img:nth-child(6) {
  animation-delay: 10s;
}

@keyframes coffee-smoke-rise {
  0% {
    opacity: 0;
    transform:
      translate(-50%, 58%)
      scale(0.92);
  }

  12% {
    opacity: calc(var(--smoke-max-opacity) * 0.24);
  }

  35% {
    opacity: calc(var(--smoke-max-opacity) * 0.8);
  }

  50% {
    opacity: var(--smoke-max-opacity);
  }

  75% {
    opacity: calc(var(--smoke-max-opacity) * 0.5);
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -25%)
      scale(1.08);
  }
}


/* =========================
   COFFEE
========================= */

.coffee-hero__coffee {
  position: absolute;

  left: 50%;
  bottom: calc(var(--pattern-height) - var(--coffee-width) * var(--coffee-sink));

  z-index: 6;

  width: var(--coffee-width);
  max-width: 92vw;

  height: auto;

  transform: translateX(-50%);

  display: block;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1180px) {

  :root {
    --hero-inline: min(1000px, calc(100% - 40px));
    --coffee-width: clamp(320px, 46vw, 520px);
    --content-top: max(var(--hero-nav-height), min(23vh, 240px));
  }

  .coffee-hero__utility-note {
    display: none;
  }
}

@media (max-width: 860px) {

  :root {
    --hero-inline: calc(100% - 32px);
    --coffee-width: min(430px, 62vw);
    --green-breathing: 40px;
    --content-top: 190px;
  }

  .coffee-hero {
    min-height: max(760px, var(--hero-min-height));
    background-position: center top;
  }

  .coffee-hero__nav-top {
    grid-template-columns: 1fr auto 1fr;
  }

  .coffee-hero__utility {
    display: none;
  }

  .coffee-hero__logo {
    width: 84px;
    height: 84px;
  }

  .coffee-hero__logo-mark {
    font-size: 19px;
  }

  .coffee-hero__burger {
    display: block;
  }

  .coffee-hero__nav-bottom {
    margin-top: 18px;
  }

  /* collapsed menu, toggled by the burger */
  .coffee-hero__menu {
    flex-direction: column;
    gap: 4px;

    max-height: 0;
    overflow: hidden;

    opacity: 0;

    transition: max-height 0.3s ease, opacity 0.25s ease;
  }

  .coffee-hero__menu.is-open {
    max-height: 320px;
    opacity: 1;
    padding-block: 10px;
  }

  .coffee-hero__menu a {
    /*
      ۳۸ پیکسل بود. منوی موبایل جایی است که همه‌ی ناوبری از آن عبور
      می‌کند؛ هدف لمسی کوچک اینجا یعنی کاربر صفحه‌ی اشتباه باز می‌کند.
    */
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 8px;
    font-size: 16px;
  }
}

@media (max-width: 560px) {

  :root {
    --coffee-width: min(340px, 78vw);
    --green-breathing: 46px;
    --smoke-max-opacity: 0.85;
    --content-top: 165px;
  }

  .coffee-hero {
    min-height: max(680px, var(--hero-min-height));
  }

  .coffee-hero__eyebrow {
    font-size: clamp(38px, 11.5vw, 56px);
  }

  .coffee-hero__title {
    font-size: clamp(34px, 10vw, 52px);
    line-height: 1.35;
  }

  .coffee-hero__description {
    width: min(94%, 460px);
    font-size: 14px;
    line-height: 1.95;
  }
}


/* =========================
   ACCESSIBILITY
========================= */

@media (prefers-reduced-motion: reduce) {

  .coffee-hero__smoke img {
    animation: none;
    opacity: 0.18;

    transform: translate(-50%, 0);
  }

  .coffee-hero__smoke img:not(:first-child) {
    display: none;
  }

  .coffee-hero__menu {
    transition: none;
  }
}


/* پس‌زمینه‌ی هیرو روی موبایل: همان تصویر در ۹۶۰ پیکسل به‌جای ۱۹۲۰ */
@media (max-width: 800px) {
  .coffee-hero {
    background-image: url("../assets/top_BG-sm.bb9fad66b914.jpg");
    background-image: image-set(url("../assets/top_BG-sm.bb9fad66b914.jpg") type("image/jpeg"));
  }
}