:root{
  --obsidian:#0F1115;
  --black:#090A0D;
  --white:#F7F6F3;
  --gold:#B08D57;
  --gold-bright:#d9bd8c;
  --violet:#6B4FA0;
  --gray:#7A7A76;
  --line:rgba(247,246,243,0.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto;}

body{
  background:var(--obsidian);
  color:var(--white);
  font-family:'Vazirmatn','DM Sans',Tahoma,Arial,sans-serif;
  min-height:100svh;
  overflow-x:hidden;
}
html[dir="ltr"] body{font-family:'DM Sans','Vazirmatn',sans-serif;}

.noise{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation:noise-in .8s ease forwards;
}
@keyframes noise-in{to{opacity:.035;}}

/* ============================================
   HERO
   ============================================ */
.hero{
  position:relative;
  height:100svh;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding-bottom:140px;
}
.hero-glow{
  position:absolute;
  width:clamp(300px,52vmin,560px);
  height:clamp(300px,52vmin,560px);
  border-radius:50%;
  background:radial-gradient(circle, rgba(176,141,87,0.26), rgba(176,141,87,0) 70%);
  opacity:0;
  animation:glow-in 1.6s var(--ease) 300ms forwards, breathe 5s ease-in-out 2000ms infinite;
}
@keyframes glow-in{to{opacity:1;}}
@keyframes breathe{
  0%,100%{transform:scale(1);opacity:.85;}
  50%{transform:scale(1.12);opacity:1;}
}

/* ============================================
   V — سه‌بعدی و فویل طلا
   ============================================ */
.v-wrap{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
}

.v-art{
  position:relative;
  display:inline-block;
  font-family:'Playfair Display SC', serif;
  font-weight:400;
  font-size:clamp(170px,30vmin,330px);
  line-height:1;
  letter-spacing:-.04em;
  opacity:0;
  transform:scale(.94);
  animation:v-in 1.2s cubic-bezier(.2,.7,.2,1) 400ms forwards;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.65));
}
@keyframes v-in{
  to{opacity:1;transform:scale(1);}
}

.v-art > span{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  display:block;
  font:inherit;
  font-family:inherit;
  font-weight:inherit;
  font-size:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  pointer-events:none;
  white-space:nowrap;
}

/* V اصلی — همون که اندازه رو تعیین می‌کنه */
.v-base{
  position:relative !important;
  display:inline-block !important;
  top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;
  color:transparent;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"),
    linear-gradient(
      155deg,
      #fbefc8 0%,
      #f3dfa9 8%,
      #e6cd92 18%,
      #d4b677 30%,
      #c2a067 45%,
      #a8854f 58%,
      #8b6a3a 72%,
      #6b4f28 86%,
      #4a3618 100%
    );
  background-blend-mode:overlay, normal;
  -webkit-background-clip:text;
          background-clip:text;
  z-index:2;
  opacity:1 !important;
  transform:none !important;
}

/* عمق */
.v-depth{
  color:#1a1208;
  text-shadow:
    1px 1px 0 #2a1e0e,
    2px 2px 0 #1f1408,
    3px 3px 0 #140d05;
  z-index:1;
}

/* لبه‌ی روشن */
.v-bevel-light{
  color:transparent;
  text-shadow:
    -1px -1px 0 rgba(255,240,200,.55),
    -0.5px -0.5px 0 rgba(255,240,200,.35);
  z-index:3;
  mix-blend-mode:screen;
}

/* لبه‌ی تیره */
.v-bevel-dark{
  color:transparent;
  text-shadow:
    1px 1px 0 rgba(60,40,15,.5),
    0.5px 0.5px 0 rgba(60,40,15,.35);
  z-index:4;
}

/* براقیت */
.v-sheen{
  color:transparent;
  background:linear-gradient(
    165deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.22) 6%,
    rgba(255,255,255,.05) 14%,
    rgba(255,255,255,0) 24%,
    rgba(255,255,255,0) 100%
  );
  -webkit-background-clip:text;
          background-clip:text;
  z-index:5;
  mix-blend-mode:screen;
  pointer-events:none;
}

/* ============================================
   COMETS
   ============================================ */
.comets{
  position:absolute;
  top:50%;
  left:50%;
  width:100vmax;
  height:100vmax;
  transform:translate(-50%,-50%);
  opacity:0;
  animation:comets-in 1s ease 2400ms forwards;
  pointer-events:none;
}
.comets-back{z-index:2;}
.comets-front{z-index:4;}
@keyframes comets-in{to{opacity:1;}}

.orbit-3d{transform-style:preserve-3d;}
.orbit-a-tilt{transform:rotateX(72deg) rotateY(-18deg);}
.orbit-b-tilt{transform:rotateX(58deg) rotateY(28deg) rotateZ(20deg);}
.orbit-c-tilt{transform:rotateX(84deg) rotateY(-42deg) rotateZ(-25deg);}

.comet-spin{transform-origin:600px 600px;}

.comet-a{animation:spin-rev 26s linear infinite;}
.comet-b{animation:spin-rev 38s linear infinite;}
.comet-c{animation:spin-rev 20s linear infinite;}

@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes spin-rev{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}

.comet-ring{fill:none;stroke-width:1.1;stroke-linecap:round;}
.comet-ring.gold{stroke:rgba(176,141,87,.55);}
.comet-ring.violet{stroke:rgba(107,79,160,.5);}
.comet-ring.soft-violet{stroke:rgba(150,120,190,.4);}
.comet-head.gold{fill:#d9bd8c;}
.comet-head.violet{fill:#9d84c9;}
.comet-head.soft-violet{fill:#b6a2d6;}

/* DUST */
.dust{
  position:absolute;inset:0;z-index:3;
  opacity:0;
  animation:dust-in 1.2s ease 2800ms forwards;
  pointer-events:none;
}
@keyframes dust-in{to{opacity:1;}}
.dust i{
  position:absolute;
  left:50%;top:50%;
  width:var(--s,1.4px);height:var(--s,1.4px);
  border-radius:50%;
  background:var(--c,var(--gold));
  will-change:transform,opacity;
  animation:drift var(--d,14s) ease-in-out infinite, twinkle var(--tw,4s) ease-in-out infinite;
  animation-delay:var(--delay,0s), var(--delay,0s);
}
@keyframes drift{
  0%{transform:translate(var(--x0),var(--y0));}
  50%{transform:translate(var(--x1),var(--y1));}
  100%{transform:translate(var(--x0),var(--y0));}
}
@keyframes twinkle{
  0%,100%{opacity:.15;}
  50%{opacity:.85;}
}

/* TAGLINE */
.tagline{
  position:relative;z-index:3;
  margin-top:34px;
  display:flex;align-items:center;gap:16px;
  opacity:0;
  animation:fade-up 1s var(--ease) 5000ms forwards;
}
@keyframes fade-up{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}
.tagline-text{
  font-family:'DM Sans',sans-serif;
  font-size:10px;
  letter-spacing:.42em;
  color:var(--gray);
  white-space:nowrap;
}
.tagline .rule{
  width:40px;height:1px;
  background:linear-gradient(to right, transparent, rgba(176,141,87,.7), transparent);
}

/* ============================================
   WHEEL
   ============================================ */
.wheel{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:20;
  height:88px;
  opacity:0;
  animation:fade-in .9s var(--ease) 5600ms forwards;
  overflow:hidden;
  background:rgba(9,10,13,0.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

@keyframes fade-in{to{opacity:1;}}

.wheel-lines{position:absolute;inset:0;pointer-events:none;}

.wheel .line{
  position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(
    to right,
    transparent 0%,
    rgba(176,141,87,0.00) 8%,
    rgba(176,141,87,0.35) 30%,
    rgba(217,189,140,0.65) 50%,
    rgba(176,141,87,0.35) 70%,
    rgba(176,141,87,0.00) 92%,
    transparent 100%
  );
  opacity:0;
  animation:line-in .9s var(--ease) forwards;
}
.wheel .line-top{top:0;animation-delay:5650ms;}
.wheel .line-bottom{bottom:0;animation-delay:5750ms;}
@keyframes line-in{to{opacity:1;}}

.wheel-hint{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:rgba(176,141,87,.45);
  pointer-events:none;
  z-index:5;
  opacity:0;
  animation:
    hint-in .8s var(--ease) 6000ms forwards,
    hint-pulse 2.6s ease-in-out 6800ms infinite;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .5s var(--ease);
}
.wheel-hint svg{
  display:block;
  filter:drop-shadow(0 0 6px rgba(176,141,87,.25));
}
.wheel-hint-left{ left: clamp(14px, 3vw, 42px); }
.wheel-hint-right{ right: clamp(14px, 3vw, 42px); }
@keyframes hint-in{ to{opacity:1;} }
@keyframes hint-pulse{
  0%, 100% { opacity:.6; }
  50%      { opacity:1; }
}
[dir="rtl"] .wheel-hint-left svg{ animation: pulse-left-rtl 2.6s ease-in-out 6800ms infinite; }
[dir="rtl"] .wheel-hint-right svg{ animation: pulse-right-rtl 2.6s ease-in-out 6800ms infinite; }
[dir="ltr"] .wheel-hint-left svg{ animation: pulse-left-ltr 2.6s ease-in-out 6800ms infinite; }
[dir="ltr"] .wheel-hint-right svg{ animation: pulse-right-ltr 2.6s ease-in-out 6800ms infinite; }
@keyframes pulse-left-rtl{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)} }
@keyframes pulse-right-rtl{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(-5px)} }
@keyframes pulse-left-ltr{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(-5px)} }
@keyframes pulse-right-ltr{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)} }

.wheel.hide-hints .wheel-hint{ opacity:0; animation:none; }
.wheel.hide-hints .wheel-hint svg{ animation:none; }

.wheel-viewport{
  position:relative;
  width:100%;
  height:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  overflow-anchor:none;
}
.wheel-viewport::-webkit-scrollbar{display:none;}

.wheel-track{
  display:flex;
  height:100%;
  align-items:center;
  list-style:none;
  padding:0;
  margin:0;
}

.wheel-item{
  flex:0 0 100vw;
  width:100vw;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  scroll-snap-align:center;
  scroll-snap-stop:always;
}

.wheel-item a{
  position:relative;
  display:inline-block;
  padding:14px 26px 18px;
  color:#c8c6c0;
  text-decoration:none;
  font-family:'DM Sans',sans-serif;
  font-size:15px;
  font-weight:500;
  letter-spacing:.16em;
  white-space:nowrap;
  transition:color .45s var(--ease), opacity .45s var(--ease);
  opacity:.35;
}
[dir="rtl"] .wheel-item a{
  font-family:'Vazirmatn',sans-serif;
  letter-spacing:0;
  font-size:15px;
}

.wheel-item a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:8px;
  width:0;
  height:1px;
  background:var(--gold-bright);
  transform:translateX(-50%);
  transition:width .5s var(--ease);
}

.wheel-item.is-active a{
  color:var(--gold-bright);
  opacity:1;
}
.wheel-item.is-active a::after{
  width:calc(100% - 52px);
}
.wheel-item.is-active a::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--gold-bright);
  transform:translateX(-50%);
  box-shadow:0 0 8px rgba(217,189,140,.7);
}

.topbar{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:28px clamp(20px,5vw,60px);
  opacity:0;
  animation:fade-in .6s ease 6400ms forwards;
}
.logotype{
  font-family:'Playfair Display SC',serif;
  font-size:15px;
  letter-spacing:.42em;
  color:var(--white);
  text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  transition:color .35s var(--ease);
}
.logotype:hover{color:var(--gold-bright);}
.logotype .dot{
  width:4px;height:4px;border-radius:50%;
  background:var(--gold);
  display:inline-block;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.logotype:hover .dot{
  background:var(--gold-bright);
  box-shadow:0 0 8px rgba(217,189,140,.7);
}

.lang-switch{
  display:flex;align-items:center;gap:8px;
  font-family:'DM Sans',sans-serif;
  font-size:12px;letter-spacing:.1em;
  color:var(--gray);
}
.lang-switch button{
  background:none;border:none;color:var(--gray);
  font:inherit;letter-spacing:inherit;cursor:pointer;
  padding:2px 4px;transition:color .3s ease;
}
.lang-switch button.active{color:var(--gold);}
.lang-switch button:hover{color:var(--white);}

a:focus-visible, button:focus-visible{
  outline:1px solid var(--gold);outline-offset:4px;
}

@media (max-width:720px){
  .wheel{height:72px;}
  .wheel-item a{font-size:14px;padding:12px 20px 16px;}
  [dir="rtl"] .wheel-item a{font-size:14px;}
  .hero{padding-bottom:110px;}
  .wheel-hint svg{width:8px;height:14px;}
}

@media (max-width:420px){
  .wheel{height:68px;}
  .wheel-item a{font-size:13px;padding:12px 16px 16px;}
  [dir="rtl"] .wheel-item a{font-size:13px;}
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-delay:0s !important;
    transition-duration:0.01ms !important;
  }
}