/* ============================================================
   فال انبیا — استایل مشترک بین صفحه‌ی شروع (anbia.php)
   و صفحه‌ی نتیجه (anbia-n.php / تمپلیت anbia-r)
   مسیر: wp-content/themes/pm-mihanfal/anbia/style.css
   ============================================================ */

/* ثبت متغیرهای رنگ به‌عنوان <color> تا تغییرشان (در صفحه‌ی نتیجه)
   به‌صورت نرم انیمیت شود؛ در صفحه‌ی شروع بی‌اثر و بی‌خطر است. */
@property --accent-100 { syntax: '<color>'; inherits: true; initial-value: #b2d8d8; }
@property --accent-300 { syntax: '<color>'; inherits: true; initial-value: #66b2b2; }
@property --accent-500 { syntax: '<color>'; inherits: true; initial-value: #008080; }
@property --accent-700 { syntax: '<color>'; inherits: true; initial-value: #006666; }
@property --accent-900 { syntax: '<color>'; inherits: true; initial-value: #004c4c; }
@property --bg-tint    { syntax: '<color>'; inherits: true; initial-value: #f4fafa; }
@property --ink        { syntax: '<color>'; inherits: true; initial-value: #0c3231; }
@property --ink-soft   { syntax: '<color>'; inherits: true; initial-value: #4c7371; }

:root{
  --accent-100:#b2d8d8;
  --accent-300:#66b2b2;
  --accent-500:#008080;
  --accent-700:#006666;
  --accent-900:#004c4c;
  --bg-tint:#f4fafa;
  --ink:#0c3231;
  --ink-soft:#4c7371;

  --paper:#ffffff;
  --font-ui:'Vazirmatn', system-ui, sans-serif;
  --font-display:'Vazirmatn', serif;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:10px;
  --max-width:640px;
  --shadow-card: 0 20px 50px -25px rgba(0,76,76,0.35);

  --color-transition: background-color .6s ease, background .6s ease, color .6s ease, border-color .6s ease, box-shadow .6s ease, stop-color .6s ease;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-ui);
  color:var(--ink);
  background:
    radial-gradient(60% 45% at 50% 0%, color-mix(in srgb, var(--accent-100) 55%, transparent) 0%, rgba(178,216,216,0) 70%),
    var(--bg-tint);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  transition: var(--color-transition);
}
a{color:inherit;}
button{font-family:inherit;}

.wrap{ max-width:var(--max-width); margin:0 auto; padding:0 20px; }

/* ---------------- هدر سایت (مشترک) ---------------- */
.site-header{ padding:22px 0 18px; }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; color:var(--accent-900); font-size:15px; transition:var(--color-transition); }
.brand-mark{
  width:30px;height:30px; border-radius:50%;
  background:conic-gradient(from 180deg, var(--accent-100), var(--accent-500), var(--accent-900), var(--accent-100));
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 4px var(--paper);
  flex:none; transition:var(--color-transition);
}
.brand-mark svg{width:14px;height:14px;}
.home-link{
  font-size:13px; color:var(--ink-soft); text-decoration:none;
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent-500) 25%, transparent);
  transition:background .2s ease, color .2s ease, var(--color-transition);
}
.home-link:hover{background:var(--accent-100);color:var(--accent-900);}

/* ---------------- عنوان صفحه (اندازه‌ها per-page اسکوپ شده‌اند) ---------------- */
main{padding-bottom:80px;}
.page-anbia main{padding-bottom:70px;}

h1.page-title{
  text-align:center; font-weight:900;
  color:var(--accent-900); margin:6px 0 30px; transition:var(--color-transition);
  font-size:clamp(24px,5vw,32px);
}
.page-anbia h1.page-title{
  font-size:clamp(26px,5.5vw,34px);
  margin:6px 0 14px;
}

/* ---------------- ریتینگ (kk-star-ratings، مشترک) ---------------- */
.fal-rating{ display:flex; justify-content:center; margin:40px 0 0; }

/* ---------------- معرفی (فقط صفحه‌ی شروع) ---------------- */
.hero-eyebrow{ text-align:center; margin:18px 0 6px; }
.hero-eyebrow span{
  display:inline-block; font-size:12.5px; letter-spacing:.5px;
  color:var(--accent-700);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent-100) 55%, transparent), color-mix(in srgb, var(--accent-100) 15%, transparent));
  border:1px solid color-mix(in srgb, var(--accent-500) 18%, transparent);
  padding:6px 16px; border-radius:999px; font-weight:600;
}
.hero-desc{
  text-align:center; max-width:440px; margin:0 auto 8px;
  font-size:14.5px; color:var(--ink-soft);
}

/* ---------------- عنوان نتیجه (فقط صفحه‌ی نتیجه) ---------------- */
.result-eyebrow{ text-align:center; margin:18px 0 6px; }
.result-eyebrow span{
  display:inline-block; font-size:12.5px; letter-spacing:.5px;
  color:var(--accent-700);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent-100) 55%, transparent), color-mix(in srgb, var(--accent-100) 15%, transparent));
  border:1px solid color-mix(in srgb, var(--accent-500) 18%, transparent);
  padding:6px 16px; border-radius:999px; font-weight:600;
  transition:var(--color-transition);
}

/* ---------------- هاله‌ی مراسم نیت، چندرنگ (فقط صفحه‌ی شروع) ---------------- */
.ritual{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin:26px auto 8px; height:320px;
}
.ritual-halo{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.ritual-halo span{ position:absolute; border-radius:50%; }
.ritual-halo span:nth-child(1){
  width:170px;height:170px;
  background:conic-gradient(from 0deg, #ff6161, #ffb347, #ffe066, #6bcf7f, #4fa8e0, #9b6bcf, #ff6161);
  filter:blur(26px); opacity:.4;
  animation:ritualPulse 4.5s ease-in-out infinite;
}
.ritual-halo span:nth-child(2){
  width:240px;height:240px; border:1px solid rgba(0,128,128,0.18);
  animation:spin 50s linear infinite;
}
.ritual-halo span:nth-child(3){
  width:290px;height:290px; border:1px dashed rgba(0,128,128,0.12);
  animation:spin 70s linear infinite reverse;
}
@keyframes ritualPulse{ 0%,100%{transform:scale(.92); opacity:.35;} 50%{transform:scale(1.05); opacity:.55;} }
@keyframes spin{ to{ transform:rotate(360deg); } }

.ritual-core{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:14px; }
.ritual-gate{ width:190px; display:flex; align-items:center; justify-content:center; }
.ritual-gate img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 16px 30px rgba(0,102,102,0.28));
  transition:filter .3s ease;
}
.ritual-guide{ margin:0; font-size:14px; color:var(--ink-soft); text-align:center; max-width:260px; line-height:1.9; transition:opacity .3s ease; }

/* حالت لودینگ (شروع فال): تصویر دروازه سرجایش می‌ماند و می‌درخشد */
.ritual.is-loading .ritual-guide{ opacity:0; }
.ritual.is-loading .ritual-halo span:nth-child(1){
  animation:ritualPulseFast 1.2s ease-in-out infinite;
  opacity:.75; filter:blur(20px);
}
.ritual.is-loading .ritual-halo span:nth-child(2){ animation-duration:3s; }
.ritual.is-loading .ritual-halo span:nth-child(3){ animation-duration:4s; }
.ritual.is-loading .ritual-gate img{
  animation:gateGlowRitual 1.2s ease-in-out infinite;
}
@keyframes ritualPulseFast{ 0%,100%{transform:scale(.95); opacity:.5;} 50%{transform:scale(1.12); opacity:.85;} }
@keyframes gateGlowRitual{
  0%,100%{ filter:drop-shadow(0 16px 30px rgba(0,102,102,0.28)) brightness(1) saturate(1); transform:scale(1); }
  50%{ filter:drop-shadow(0 0 42px rgba(255,255,255,0.85)) brightness(1.22) saturate(1.35); transform:scale(1.035); }
}

/* ---------------- ردیف نشانگر تنوع نتایج (فقط صفحه‌ی شروع) ---------------- */
.variety-row{ margin-top:34px; text-align:center; }
.variety-row p{ margin:0 0 12px; font-size:12.5px; color:var(--ink-soft); }
.variety-dots{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; max-width:320px; margin:0 auto; }
.variety-dots span{ width:12px;height:12px; border-radius:50%; display:inline-block; box-shadow:0 2px 6px -2px rgba(0,0,0,0.25); }

/* ---------------- نمایش نام پیامبر / نتیجه (فقط صفحه‌ی نتیجه) ---------------- */
.reveal{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0 auto 34px; height:230px; }
.halo{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.halo span{ position:absolute; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent-500) 35%, transparent); transition:var(--color-transition); }
.halo span:nth-child(1){width:120px;height:120px;background:radial-gradient(circle, color-mix(in srgb, var(--accent-100) 90%, transparent) 0%, rgba(178,216,216,0) 70%);}
.halo span:nth-child(2){width:180px;height:180px;animation:ripple 5s ease-in-out infinite;}
.halo span:nth-child(3){width:230px;height:230px;animation:ripple 5s ease-in-out infinite 1.2s;}
.halo span:nth-child(4){width:230px;height:230px;border-style:dashed;border-color:color-mix(in srgb, var(--accent-500) 18%, transparent);animation:spin 40s linear infinite;}
@keyframes ripple{ 0%{transform:scale(.85);opacity:.55;} 60%{transform:scale(1.08);opacity:0;} 100%{transform:scale(1.08);opacity:0;} }

.reveal-core{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; opacity:1; transition:opacity .35s ease; }
.reveal-gate{ width:120px; display:flex; align-items:center; justify-content:center; }
.reveal-gate img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 14px 26px rgba(0,102,102,0.28));
  transition:filter .3s ease;
}
.prophet-name{ font-family:var(--font-display); font-weight:700; font-size:clamp(34px,7vw,46px); color:var(--accent-900); margin:0; transition:var(--color-transition), opacity .3s ease; }
.reveal-sub{ font-size:13.5px; color:var(--ink-soft); margin:0; transition:var(--color-transition), opacity .3s ease; }

/* حالت لودینگ (فال دوباره): تصویر دروازه سرجایش می‌ماند و می‌درخشد */
.reveal.is-counting .prophet-name,
.reveal.is-counting .reveal-sub{ opacity:0; }
.reveal.is-counting .halo span:nth-child(1){
  animation:ripplePulseFast 1.2s ease-in-out infinite;
  opacity:.85; filter:blur(2px);
}
.reveal.is-counting .halo span:nth-child(2),
.reveal.is-counting .halo span:nth-child(3){ animation-duration:2.2s; }
.reveal.is-counting .reveal-gate img{
  animation:gateGlowReveal 1.2s ease-in-out infinite;
}
@keyframes ripplePulseFast{ 0%,100%{transform:scale(.9); opacity:.6;} 50%{transform:scale(1.15); opacity:.95;} }
@keyframes gateGlowReveal{
  0%,100%{ filter:drop-shadow(0 14px 26px rgba(0,102,102,0.28)) brightness(1) saturate(1); transform:scale(1); }
  50%{ filter:drop-shadow(0 0 36px rgba(255,255,255,0.85)) brightness(1.22) saturate(1.35); transform:scale(1.05); }
}

/* فیلدهایی که هنگام دریافت نتیجه‌ی جدید موقتاً محو می‌شوند (فقط صفحه‌ی نتیجه) */
.fading{ opacity:0 !important; filter:blur(2px); pointer-events:none; transition:opacity .35s ease, filter .35s ease, var(--color-transition); }

.wave-divider{ display:block; width:100%; height:26px; margin-bottom:6px; }
.wave-divider stop.stop-start, .wave-divider stop.stop-end{ stop-color:var(--accent-100); transition:var(--color-transition); }
.wave-divider stop.stop-mid{ stop-color:var(--accent-500); transition:var(--color-transition); }
.wave-divider path{ stroke:var(--accent-500); transition:var(--color-transition); }

/* ---------------- کارت اصلی نتیجه فال (فقط صفحه‌ی نتیجه) ---------------- */
.card{
  background:var(--paper); border-radius:var(--radius-lg); padding:30px 26px;
  box-shadow:var(--shadow-card); border:1px solid color-mix(in srgb, var(--accent-500) 8%, transparent);
  transition:var(--color-transition);
}
.card h2{ font-size:15px; font-weight:700; color:var(--accent-700); margin:0 0 14px; display:flex; align-items:center; gap:8px; transition:var(--color-transition); }
.card h2::before{ content:""; width:6px;height:6px; border-radius:50%; background:var(--accent-500); flex:none; transition:var(--color-transition); }
.card p{ margin:0; font-size:15.5px; color:var(--ink); transition:var(--color-transition); }

/* ---------------- بخش توصیه فال (فقط صفحه‌ی نتیجه) ---------------- */
.advice{
  margin-top:18px;
  background:linear-gradient(155deg, color-mix(in srgb, var(--accent-100) 45%, transparent), color-mix(in srgb, var(--accent-100) 12%, transparent));
  border:1px solid color-mix(in srgb, var(--accent-500) 18%, transparent);
  border-radius:var(--radius-md); padding:22px 24px; display:flex; gap:16px; align-items:flex-start;
  transition:var(--color-transition);
}
.advice-icon{ flex:none; width:38px;height:38px; border-radius:50%; background:var(--paper); display:flex;align-items:center;justify-content:center; box-shadow:0 6px 16px -8px rgba(0,76,76,0.4); }
.advice-icon svg{width:18px;height:18px;color:var(--accent-700); transition:var(--color-transition);}
.advice-body h3{ margin:0 0 6px; font-size:14.5px; color:var(--accent-900); font-weight:700; transition:var(--color-transition); }
.advice-body p{ margin:0; font-size:14px; color:var(--ink-soft); transition:var(--color-transition); }

/* ---------------- دکمه‌ی اصلی (مشترک؛ فاصله‌ی بالا per-page اسکوپ شده) ---------------- */
.cta-wrap{ display:flex; justify-content:center; margin-top:34px; }
.page-anbia .cta-wrap{ margin-top:6px; }

.cta-btn{
  appearance:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg, var(--accent-500), var(--accent-700));
  color:#fff; font-family:var(--font-ui); font-weight:700;
  border-radius:999px;
  box-shadow:0 16px 30px -12px color-mix(in srgb, var(--accent-700) 55%, transparent);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, var(--color-transition);
  font-size:15px; padding:15px 34px;
}
.page-anbia .cta-btn{ font-size:15.5px; padding:16px 38px; }
.cta-btn:hover{transform:translateY(-2px); filter:brightness(1.05);}
.cta-btn:active{transform:translateY(0px) scale(.98);}
.cta-btn:focus-visible{ outline:3px solid var(--accent-100); outline-offset:3px; }
.cta-btn:disabled{ cursor:not-allowed; filter:brightness(.92); transform:none; }
.cta-btn svg{width:17px;height:17px; transition:transform .5s ease;}
.cta-btn.spin svg{transform:rotate(360deg);}
.cta-btn.loading svg{ animation:btnSpin .8s linear infinite; }
@keyframes btnSpin{ to{ transform:rotate(360deg); } }

/* ---------------- فال‌های دیگر (مشترک) ---------------- */
.related-fals{ margin-top:56px; }
.related-fals-title{
  text-align:center; font-size:12.5px; font-weight:700; letter-spacing:.3px;
  color:var(--ink-soft); margin:0 0 14px; transition:var(--color-transition);
}
.related-fals-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.related-card{
  display:flex; align-items:center; gap:14px;
  background:var(--paper); border:1px solid color-mix(in srgb, var(--accent-500) 12%, transparent);
  border-radius:var(--radius-md); padding:16px 18px; text-decoration:none; color:var(--ink);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, var(--color-transition);
}
.related-card:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -18px color-mix(in srgb, var(--accent-700) 60%, transparent); border-color:color-mix(in srgb, var(--accent-500) 30%, transparent); }
.related-card-icon{
  flex:none; width:42px;height:42px; border-radius:50%;
  background:color-mix(in srgb, var(--accent-100) 55%, transparent);
  display:flex; align-items:center; justify-content:center; transition:var(--color-transition);
}
.related-card-icon svg{ width:20px;height:20px; color:var(--accent-700); transition:var(--color-transition); }
.related-card-body{ flex:1; min-width:0; }
.related-card-body h3{ margin:0 0 3px; font-size:14.5px; font-weight:700; color:var(--accent-900); transition:var(--color-transition); }
.related-card-body p{ margin:0; font-size:12.5px; color:var(--ink-soft); transition:var(--color-transition); }
.related-card-arrow{ flex:none; width:16px;height:16px; color:var(--accent-500); transition:var(--color-transition); }

@media (min-width:560px){
  .related-fals-grid{ grid-template-columns:1fr 1fr; }
  .related-fals-grid > a:last-child:nth-child(odd){ grid-column:1 / -1; }
}

/* ---------------- فوتر (مشترک) ---------------- */
footer{ background:var(--accent-900); color:rgba(255,255,255,0.75); padding:26px 0; margin-top:10px; transition:var(--color-transition); }
footer .wrap{ text-align:center; font-size:12.5px; display:flex; flex-direction:column; gap:6px; }
footer a{color:var(--accent-100); text-decoration:none; transition:var(--color-transition);}
footer a:hover{text-decoration:underline;}

/* ---------------- ریسپانسیو دسکتاپ ---------------- */
@media (min-width:760px){
  .wrap{padding:0 24px;}

  /* صفحه‌ی نتیجه */
  h1.page-title{margin-bottom:38px;}
  .reveal{height:270px; margin-bottom:40px;}
  .halo span:nth-child(1){width:150px;height:150px;}
  .halo span:nth-child(2){width:220px;height:220px;}
  .halo span:nth-child(3){width:280px;height:280px;}
  .halo span:nth-child(4){width:280px;height:280px;}
  .reveal-gate{width:145px;}
  .card{padding:40px 44px;}
  .card p{font-size:16.5px;}
  .advice{padding:26px 30px;}

  /* صفحه‌ی شروع */
  .page-anbia h1.page-title{margin-bottom:14px;}
  .ritual{height:360px; margin:34px auto 14px;}
  .ritual-halo span:nth-child(1){width:210px;height:210px;}
  .ritual-halo span:nth-child(2){width:290px;height:290px;}
  .ritual-halo span:nth-child(3){width:340px;height:340px;}
  .ritual-gate{width:230px;}
}

@media (prefers-reduced-motion: reduce){
  .halo span, .ritual-halo span, .cta-btn svg, .reveal-gate img, .ritual-gate img{animation:none !important;}
  *{transition-duration:.01ms !important;}
}