/*
Theme Name: Maris Studio
Theme URI: https://maristudio.xyz
Author: Maryam Salari — Maris Studio
Description: قالب اختصاصی مریس استودیو — صفحه اصلی با انیمیشن اسکرول خورشید (GSAP ScrollTrigger)
Version: 1.0
License: Proprietary
Text Domain: maris
*/

  :root {
    --blue:  #FBFBF8;   /* رنگ عناصر (حالا روشن) */
    --bg:    #1c39bb;   /* زمینه (حالا سرمه‌ای) */
    --cream: #EFE6D5;
    --sky:   #C9DCEE;
    --muted: #8f92b8;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--bg); color:var(--blue); font-family:Georgia,'Times New Roman',serif; overflow-x:hidden; }

  header {
    position:fixed; inset:0 0 auto 0; z-index:50;
    display:flex; justify-content:space-between; align-items:center;
    padding:1.1rem 2rem; transition:color .4s;
  }
  .brand { font-weight:bold; letter-spacing:.25em; font-size:.9rem; }
  nav a { color:inherit; text-decoration:none; margin-left:1.4rem; font-size:.82rem; letter-spacing:.08em; }
  nav a:hover { opacity:.6; }
  header { transition:color .4s; pointer-events:none; }
  header .brand, header nav { opacity:0; transition:opacity .5s ease; }
  header.show-logo .brand { opacity:1; pointer-events:auto; }
  header.show nav { opacity:1; pointer-events:auto; }
  header.inverted, header.inverted nav a { color:#1c39bb; }

  #hero { height:100vh; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
  #sunWrap { width:min(60vmin,540px); }
  #sun { display:block; width:100%; height:auto; }

 }

  #takeover {
    position:absolute; left:50%; top:50%; width:300px; height:300px;
    margin:-150px 0 0 -150px; border-radius:50%; background:#1c39bb;
    transform:scale(0); z-index:5;
  }

  #statement {
    position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center;
    padding:0 8vw; opacity:0; pointer-events:none;
  }
  #statement p { max-width:900px; text-align:center; color:#FBFBF8;
    font-size:clamp(1.7rem,4.2vw,3.1rem); line-height:1.5; font-weight:bold; }
  #statement .w { opacity:.13; }
  #statement .hl-cream { color:#EFE6D5; }
  #statement .hl-sky   { color:#C9DCEE; }

  #services { background:#FBFBF8; padding:8vh 4vw 14vh; }
  .card {
    position:sticky; top:11vh;
    min-height:72vh; border-radius:26px; padding:clamp(1.6rem,5vw,4rem);
    margin-bottom:5vh; display:flex; flex-direction:column; justify-content:space-between;
  }
  .card h2 { font-size:clamp(2.4rem,6.5vw,4.6rem); }
  .card p  { font-size:clamp(1rem,2vw,1.25rem); max-width:46ch; margin-top:.8rem; line-height:1.7; }
  .card a  { align-self:flex-start; color:inherit; text-decoration:none; border-bottom:2px solid currentColor;
             padding-bottom:2px; letter-spacing:.14em; font-size:.85rem; }
  .card .doodle { align-self:flex-end; width:clamp(70px,12vw,130px); opacity:.9; }
  .card.c1 { background:#1c39bb; color:#FBFBF8; }
  .card.c2 { background:#C9DCEE; color:#1c39bb; }

  #about { background:#EFE6D5; color:#1c39bb; padding:16vh 8vw; }
  #about .inner { max-width:1000px; margin:0 auto; }
  #about h2 { font-size:clamp(2.2rem,5.5vw,4rem); margin-bottom:1.4rem; }
  #about .lead { color:#5a5344; font-size:clamp(1.05rem,2.2vw,1.35rem); line-height:1.9; max-width:62ch; }
  .stats { display:flex; gap:clamp(1.2rem,3vw,3rem); margin-top:4vh; flex-wrap:nowrap; justify-content:space-between; }
  @media (max-width:600px){ .stats { flex-wrap:wrap; } }
  .stat .num { font-size:clamp(2.2rem,4.5vw,3.6rem); font-weight:bold; }
  .stat .lbl { color:#9a8f78; letter-spacing:.06em; margin-top:.3rem; }

  footer { background:var(--bg); text-align:center; padding:6vh 2rem 8vh; }
  footer .mini-sun { width:84px; margin:0 auto 1.4rem; }
  footer .mini-sun svg { width:100%; height:auto; animation:spin 26s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
  footer a { color:#FBFBF8; margin:0 .8rem; text-decoration:none; }

  @media (prefers-reduced-motion: reduce) {
    footer .mini-sun svg { animation:none; }
  }


  /* ---------- saboo ---------- */
  #saboo { background:#c5b8a0; color:#3a3125; padding:16vh 8vw; text-align:center; }
  .saboo-kicker { letter-spacing:.35em; font-size:.78rem; opacity:.65; }
  #saboo h2 { font-size:clamp(2.6rem,7vw,5rem); margin:.6rem 0 1.2rem; }
  .saboo-lead { max-width:56ch; margin:0 auto 2.4rem; line-height:1.85; opacity:.9; }
  .saboo-links a { color:#3a3125; text-decoration:none; border:2px solid #3a3125;
    border-radius:999px; padding:.7rem 1.6rem; margin:.35rem; display:inline-block;
    font-size:.82rem; letter-spacing:.12em; transition:all .25s ease; }
  .saboo-links a:hover { background:#3a3125; color:#c5b8a0; }
  .saboo-links a.soon { opacity:.55; border-style:dashed; pointer-events:none; }

  .card .kick { font-size:.72rem; letter-spacing:.3em; opacity:.65; margin-bottom:.9rem; }
  .card.c3 { background:#4A6BD4; color:#FBFBF8; }
  .card.c4 { background:#8FA8E6; color:#101A4D; }
  .card.c5 { background:#101A4D; color:#FBFBF8; }

  .about-grid { display:grid; grid-template-columns:minmax(260px,400px) 1fr; gap:5vw; align-items:center; }
  .about-photo { border-radius:999px 999px 26px 26px;   /* قاب طاقی — امضای معماری */
    overflow:hidden; box-shadow:0 30px 60px rgba(58,49,37,.22); }
  .about-photo img { width:100%; height:auto; display:block; }
  @media (max-width:820px){ .about-grid { grid-template-columns:1fr; } .about-photo { max-width:300px; margin:0 auto; } }

  .brand img { height:44px; width:auto; display:block; }
  .brand .logo-dark { display:none; }
  header.inverted .logo-light { display:none; }
  header.inverted .logo-dark { display:block; }