/* ============================================
   نورهای برند (همه‌ی صفحه‌ها)

   ۱) گنبد نور  .ll-domed > .ll-dome
      نور از بالا، با سقف گنبدی و لبه‌های منحنی؛ اندازه‌اش از محتوای زیرش می‌آید
      (اسپات‌لایت منعطف). محتوا داخل گنبد می‌نشیند و بیرون نمی‌زند.
      تنظیم: --dome-x (فاصله‌ی دو طرف)، --dome-top، --dome-bottom،
             --dome-curve (گردی سقف)، --dome-a (شدت نور)

   ============================================ */

.ll-domed {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
}

.ll-dome {
  --_a: var(--dome-a, .16);
  position: absolute;
  z-index: -1;
  left: 50%;
  top: calc(-1 * var(--dome-top, 46px));
  width: calc(100% + 2 * var(--dome-x, 70px));
  height: calc(100% + var(--dome-top, 46px) + var(--dome-bottom, 36px));
  transform: translateX(-50%);
  border-top-left-radius: 50% var(--dome-curve, 44%);
  border-top-right-radius: 50% var(--dome-curve, 44%);
  background:
    radial-gradient(ellipse 58% 52% at 50% 0%, rgba(246, 231, 195, var(--_a)), rgba(199, 164, 106, calc(var(--_a) * .38)) 58%, transparent 88%),
    linear-gradient(180deg, rgba(240, 220, 174, calc(var(--_a) * .32)), transparent 78%);
  -webkit-mask: linear-gradient(180deg, #000 52%, transparent 100%);
          mask: linear-gradient(180deg, #000 52%, transparent 100%);
  pointer-events: none;
}

/* خط طلایی سقف گنبد؛ پایین که می‌آید محو می‌شود */
.ll-dome::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  border-top-color: rgba(240, 220, 174, .5);
  -webkit-mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 22%, transparent 42%);
          mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 22%, transparent 42%);
}

/* درخشش نرم بالای گنبد (منشأ نور) */
.ll-dome::after {
  content: "";
  position: absolute;
  top: -22px;
  left: 50%;
  width: 42%;
  height: 54px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(246, 231, 195, calc(var(--_a) * 2.2)), transparent);
  filter: blur(10px);
}


/* ============================================
   ۳) دریچه‌ی نور  .ll-skylit > .ll-sky
      نوری صاف که از یک دریچه در آسمان پایین می‌آید، هم‌امتداد با محتوا (نه منحنی).
      محتوا زیرش واضح، مثل هولوگرام. پهنا = پهنای محتوا + --sky-x.
      تنظیم: --sky-x، --sky-top (چقدر بالاتر از محتوا شروع شود)، --sky-a (شدت)
   ============================================ */
.ll-skylit {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
}
.ll-sky {
  --_a: var(--sky-a, .13);
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--sky-top, 160px));
  bottom: calc(-1 * var(--sky-bottom, 40px));
  left: 50%;
  width: calc(100% + 2 * var(--sky-x, 60px));
  transform: translateX(-50%);
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(180deg,
    rgba(246, 231, 195, var(--_a)) 0%,
    rgba(232, 205, 150, calc(var(--_a) * .6)) 38%,
    rgba(199, 164, 106, calc(var(--_a) * .22)) 72%,
    transparent 100%);
  /* لبه‌های دو طرف نرم، ولی صاف و هم‌امتداد محتوا */
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
/* خود دریچه: خط روشن بالا */
.ll-sky::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #FFF3D6 30%, #FFF8E8 50%, #FFF3D6 70%, transparent);
  box-shadow: 0 0 22px 4px rgba(246, 231, 195, .35);
}
/* موج نوری که آرام از دریچه پایین می‌آید (حس هولوگرام) */
.ll-sky::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40%;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(255, 246, 222, calc(var(--_a) * .55)), transparent);
  animation: llSkyScan 7s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes llSkyScan {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: .6; }
  100% { transform: translateY(350%); opacity: 0; }
}
/* ذره‌های نور معلق داخل پرتو */
.ll-sky__dust {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  box-shadow:
    -120px 20px 0 rgba(255, 243, 214, .7), 90px 60px 0 rgba(255, 243, 214, .5),
    -40px 130px 0 rgba(255, 243, 214, .6), 150px 170px 0 rgba(255, 243, 214, .4),
    -170px 210px 0 rgba(255, 243, 214, .45), 30px 240px 0 rgba(255, 243, 214, .55),
    110px 110px 0 rgba(255, 243, 214, .35), -80px 290px 0 rgba(255, 243, 214, .4);
  animation: llSkyDust 9s linear infinite;
}
@keyframes llSkyDust {
  from { transform: translateY(-20px); opacity: 0; }
  20%  { opacity: 1; }
  to   { transform: translateY(80px); opacity: 0; }
}
/* محتوای زیر دریچه: کمی درخشش، مثل تصویر نوری */
.ll-skylit .ll-holo {
  animation: llHoloIn 1.4s .2s cubic-bezier(.22, 1, .36, 1) both;
}
/* درخشش ملایم تیتر طلایی زیر نور (drop-shadow چون متن گرادیانی است) */
.ll-skylit h1.ll-holo { filter: drop-shadow(0 0 20px rgba(246, 231, 195, .14)); }
@keyframes llHoloIn {
  0%   { opacity: 0; filter: blur(8px); transform: translateY(14px); }
  60%  { opacity: .85; filter: blur(0); }
  70%  { opacity: .6; }
  100% { opacity: 1; transform: none; }
}

/* ============================================
   ۴) فضای برند  .ll-atmos  (پس‌زمینه‌ی آینه‌کاری کم‌رنگ + غبار نور)
   در یک ظرف relative؛ تصویر آینه‌کاری با style روی .ll-atmos__mosaic داده می‌شود
   ============================================ */
.ll-atmos { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ll-atmos__mosaic {
  position: absolute;
  inset: 0;
  background-size: 360px;
  opacity: .1;
  -webkit-mask: radial-gradient(ellipse 60% 55% at 50% 30%, #000, transparent 75%);
          mask: radial-gradient(ellipse 60% 55% at 50% 30%, #000, transparent 75%);
}
.ll-atmos__dust {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  box-shadow:
    -260px 40px 0 rgba(240, 220, 174, .55), 210px 90px 0 rgba(240, 220, 174, .4),
    -150px 230px 0 rgba(240, 220, 174, .35), 300px 260px 0 rgba(240, 220, 174, .5),
    -330px 380px 0 rgba(240, 220, 174, .3), 120px 420px 0 rgba(240, 220, 174, .45),
    -60px 120px 0 rgba(240, 220, 174, .3), 380px 30px 0 rgba(240, 220, 174, .35);
  animation: llAtmosTwinkle 6s ease-in-out infinite alternate;
}
@keyframes llAtmosTwinkle { from { opacity: .25; transform: translateY(0); } to { opacity: 1; transform: translateY(-14px); } }

@media (prefers-reduced-motion: reduce) {
  .ll-sky::after, .ll-sky__dust, .ll-atmos__dust, .ll-skylit .ll-holo { animation: none; }
}

/* ============================================
   ۵) پرده‌برداری  .ll-unveil (صحنه) + .ll-plaque (کتیبه)
      مثل افتتاح: کتیبه‌ای کوچک پشت پرده‌ی سینما. پرده‌ی مخملی زمردی با ریشه‌ی طلایی
      به دو طرف جمع می‌شود (موبایل: یک پرده که بالا می‌رود)، بعد دریچه‌ی نور و ذرات روشن می‌شوند
      و نوشته‌های کتیبه مثل هولوگرام ظاهر می‌شوند. فقط CSS؛ «کاهش حرکت» = بدون پرده.
      زمان‌ها: --unveil-at (شروع)، --unveil-dur (مدت باز شدن)
   ============================================ */
.ll-unveil {
  --unveil-at: .35s;
  --unveil-dur: 1.9s;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* پرده‌ها */
.ll-unveil__curtain {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 50.5%;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, transparent 18%, transparent 70%, rgba(0, 0, 0, .45) 100%),
    repeating-linear-gradient(90deg,
      #071a12 0px, #0f3424 9px, #1a4a35 15px, #0f3424 22px, #071a12 30px,
      #0c2b1e 38px, #15402e 44px, #0b2a1d 52px);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55);
  will-change: transform;
}
/* ریشه‌ی طلایی پایین پرده */
.ll-unveil__curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background:
    linear-gradient(180deg, #C7A46A 0 3px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(240, 220, 174, .85) 0 1.5px, transparent 1.5px 5px);
  -webkit-mask: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, .4));
          mask: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, .4));
}
.ll-unveil__curtain--l {
  left: 0;
  transform-origin: 0 50%;
  animation: llCurtainOpen var(--unveil-dur) var(--unveil-at) cubic-bezier(.77, 0, .18, 1) both;
}
.ll-unveil__curtain--r {
  right: 0;
  transform-origin: 100% 50%;
  animation: llCurtainOpen var(--unveil-dur) var(--unveil-at) cubic-bezier(.77, 0, .18, 1) both;
}
/* لبه‌ی وسط هر پرده کمی سایه (درز بین دو پرده) */
.ll-unveil__curtain--l { box-shadow: inset -18px 0 30px -10px rgba(0, 0, 0, .7), inset 0 0 60px rgba(0, 0, 0, .55); }
.ll-unveil__curtain--r { box-shadow: inset 18px 0 30px -10px rgba(0, 0, 0, .7), inset 0 0 60px rgba(0, 0, 0, .55); }
@keyframes llCurtainOpen {
  from { transform: scaleX(1); }
  to   { transform: scaleX(.085); } /* جمع شده در دو طرف، مثل قاب صحنه می‌ماند */
}

/* پیش‌پرده‌ی بالا (والان) با لبه‌ی طلایی */
.ll-unveil__valance {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  background:
    linear-gradient(180deg, #0a2419, #133a29);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .8);
  pointer-events: none;
}
.ll-unveil__valance::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 7px;
  background: radial-gradient(circle at 50% 0, #C7A46A 0 2px, transparent 2.5px) 0 0 / 14px 7px repeat-x,
              linear-gradient(180deg, rgba(199, 164, 106, .8), rgba(199, 164, 106, .8)) 0 0 / 100% 1px no-repeat;
}

/* بعد از باز شدن: نور و نوشته‌ها */
.ll-unveil .ll-sky {
  opacity: 0;
  animation: llUnveilLight 1.6s calc(var(--unveil-at) + var(--unveil-dur) * .55) ease-out both;
}
@keyframes llUnveilLight { from { opacity: 0; } to { opacity: 1; } }
.ll-unveil .ll-holo { animation-delay: calc(var(--unveil-at) + var(--unveil-dur) * .5); }

/* کتیبه */
.ll-plaque {
  position: relative;
  z-index: 1;
  min-width: min(520px, 100%);
  max-width: min(720px, 100%);
  box-sizing: border-box;
  padding: 30px clamp(26px, 5vw, 60px) 22px;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(240, 220, 174, .08), transparent 60%),
    linear-gradient(180deg, rgba(20, 51, 37, .62), rgba(6, 19, 13, .82));
  border: 1px solid rgba(199, 164, 106, .45);
  outline: 1px solid rgba(199, 164, 106, .16);
  outline-offset: 6px;
  box-shadow: 0 40px 70px -35px rgba(0, 0, 0, .9);
}
/* نگین‌های طلایی بالا و پایین کتیبه */
.ll-plaque::before,
.ll-plaque::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  transform: rotate(45deg);
  background: #C7A46A;
  box-shadow: 0 0 10px rgba(240, 220, 174, .5);
}
.ll-plaque::before { top: -12px; }
.ll-plaque::after { bottom: -12px; }

@media (max-width: 700px) {
  /* موبایل: یک پرده که بالا می‌رود */
  .ll-unveil__curtain--r { display: none; }
  .ll-unveil__curtain--l {
    width: 100%;
    transform-origin: 50% 0;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, .55);
    animation-name: llCurtainRise;
  }
  .ll-plaque { min-width: 0; width: 100%; }
}
@keyframes llCurtainRise {
  from { transform: scaleY(1); }
  to   { transform: scaleY(.04); }
}

@media (prefers-reduced-motion: reduce) {
  .ll-unveil__curtain { display: none; }
  .ll-unveil .ll-sky { opacity: 1; animation: none; }
}

/* ============================================
   مهرها (.ll-seals) — تعهدهای برند به شکل کارت‌های سه‌بعدی
   هر کارت: مدال طلایی ستاره‌ی هشت‌پر (خاتم) که از سطح کارت جلو آمده، با آیکون روی قرص زمردی.
   دسکتاپ: کارت با نشانگر کج می‌شود و مدال جلوتر از کارت می‌ماند (عمق)؛ با هاور مدال مثل سکه می‌چرخد.
   یک بار برق آینه از روی کارت رد می‌شود. صفحه‌ی اول و «درباره‌ی ما».
   ============================================ */
.ll-seals {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1120px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  perspective: 1100px;
}
.ll-seals--page { margin-top: 46px; gap: 14px; }
.ll-seals__item { display: flex; }
.ll-seal {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 14px 28px;
  border-radius: 20px;
  border: 1px solid rgba(199, 164, 106, .2);
  background:
    linear-gradient(165deg, rgba(28, 66, 50, .7) 0%, rgba(9, 27, 19, .92) 55%, rgba(5, 16, 11, .96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(246, 231, 195, .1),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 22px 40px -22px rgba(0, 0, 0, .85),
    0 2px 0 rgba(199, 164, 106, .05);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .6s var(--lux-transition), border-color .5s, box-shadow .6s;
  overflow: visible;
}
.ll-seal::before {
  /* درخشش آینه‌ای به سمت نشانگر */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 0%), rgba(246, 231, 195, .13), transparent 65%);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.ll-seal::after {
  /* برق آینه، یک بار */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgba(246, 231, 195, .16) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
  animation: llSealSheen 1.8s cubic-bezier(.4, 0, .2, 1) calc(.5s + var(--d, 0) * .18s) both;
  pointer-events: none;
}
body.ll-reveal-on .ll-seals__item:not(.is-in) .ll-seal::after { animation: none; }
@keyframes llSealSheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }

.ll-seal:hover { border-color: rgba(199, 164, 106, .45); box-shadow: inset 0 1px 0 rgba(246, 231, 195, .14), 0 30px 50px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(199, 164, 106, .08); }
.ll-seal:hover::before { opacity: 1; }

.ll-seal__medal {
  position: relative;
  width: 76px;
  height: 76px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  transform: translateZ(44px);
  transform-style: preserve-3d;
  transition: transform 1.3s cubic-bezier(.3, .7, .2, 1);
}
.ll-seal:hover .ll-seal__medal { transform: translateZ(54px) rotateY(360deg); }
.ll-seal__star { position: absolute; inset: 8px; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .55)); }
.ll-seal__star::before,
.ll-seal__star::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, #F8EBCB 0%, #D4B27A 30%, #8C6A36 62%, #E6CC96 100%);
  box-shadow: inset 0 1px 1px rgba(255, 250, 235, .7), inset 0 -2px 3px rgba(60, 40, 15, .55);
}
.ll-seal__star::after { transform: rotate(45deg); background: linear-gradient(180deg, #F3E2BB 0%, #C9A56C 40%, #7E5E2E 75%, #DDBF86 100%); }
.ll-seal__disc {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 28%, #24604C 0%, #0B2A1F 58%, #04120C 100%);
  box-shadow: 0 0 0 1.5px rgba(248, 235, 203, .75), 0 0 0 3px rgba(90, 64, 28, .55), inset 0 3px 6px rgba(0, 0, 0, .6);
  color: #E9CF97;
}
.ll-seal__disc svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.ll-seal__label {
  transform: translateZ(22px);
  font-size: 15px;
  font-weight: 500;
  color: var(--lux-champagne);
  text-align: center;
  line-height: 1.7;
}
.ll-seals--page .ll-seal { padding: 28px 10px 22px; }
.ll-seals--page .ll-seal__label { font-size: 14px; }

@media (max-width: 900px) {
  .ll-seals { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
}
@media (max-width: 520px) {
  .ll-seals { gap: 12px; }
  .ll-seal { padding: 26px 8px 20px; border-radius: 16px; }
  .ll-seal__medal { width: 64px; height: 64px; margin-bottom: 14px; }
  .ll-seal__disc { width: 38px; height: 38px; }
  .ll-seal__disc svg { width: 19px; height: 19px; }
  .ll-seal__label { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ll-seal::after { animation: none; }
  .ll-seal, .ll-seal__medal { transition: none; }
  .ll-seal:hover .ll-seal__medal { transform: translateZ(44px); }
}