/* =============================================================================
   HUEMARK — one-screen landing (see BUILD-GUIDE.md)
   Palette tokens come from styles.css (:root). Everything here is layout,
   theming (dark / light) and the entry buttons.
   ============================================================================= */

/* ---------- 1. Theme tokens ---------- */
html { cursor: url("assets/brush-cursor.svg") 4 28, auto; }
input, textarea, select { cursor: text; }
:root {
  --ink-rgb: 34, 41, 20;       /* --text  #222914 */
  --paper-rgb: 251, 252, 250;  /* --bg    #FBFCFA */
}
html[data-theme="dark"] {
  color-scheme: dark;
  --panel-rgb: 14, 17, 8;
  --fg: var(--bg);
  --fg-soft: rgba(var(--paper-rgb), .86);
  --hl: var(--primary);
  --glass: rgba(var(--ink-rgb), .72);
  --glass-line: rgba(var(--paper-rgb), .28);
  --card: rgba(var(--paper-rgb), .07);
  --btn-fg: var(--text);
  --rocket-eye: #A4DF3B;
  --g: #FFB259, #FFD84D 22%, #A4DF3B 45%, #3FD3A0 62%, #5BB8FF 80%, #B79BFF;
  --c1: #FFB259; --c2: #A4DF3B; --c3: #7cc4ff;
}
html[data-theme="light"] {
  color-scheme: light;
  --panel-rgb: var(--paper-rgb);
  --fg: var(--text);
  --fg-soft: #3a4326;
  --hl: var(--primary-deep);    /* lime fails contrast on light */
  --glass: rgba(var(--paper-rgb), .88);
  --glass-line: rgba(var(--ink-rgb), .35);
  --card: rgba(var(--ink-rgb), .05);
  --btn-fg: var(--text);
  --rocket-eye: #567224;
  --g: #E0701A, #C79200 22%, #5E8A12 45%, #129A78 62%, #2878C0 80%, #6A4FD0;
  --c1: #C9600E; --c2: #567224; --c3: #1F6DB0;
}

/* ---------- 2. One screen, no scroll ---------- */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: rgb(var(--panel-rgb));
  color: var(--fg);
}
body { font-size: 1rem; line-height: 1.4; }
html[data-lang="fa"] body { font-family: "Vazirmatn", Tahoma, "Segoe UI", sans-serif; }

.hm-stage {
  position: relative;
  height: 100vh; height: 100dvh;
  width: 100%;
  overflow: hidden;
  --col-w: clamp(21rem, 42vw, 46rem);
}
.scene {
  position: absolute; inset: 0;
  background: #0b0d06 url("assets/background-2560.webp") 70% center / cover no-repeat;
}
.scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(var(--panel-rgb), .97) 0,
    rgba(var(--panel-rgb), .90) var(--col-w),
    rgba(var(--panel-rgb), 0) calc(var(--col-w) + 22vw));
}
html[data-theme="light"] .scrim {
  background: linear-gradient(90deg,
    rgba(var(--panel-rgb), 1) 0,
    rgba(var(--panel-rgb), .96) calc(var(--col-w) * .85),
    rgba(var(--panel-rgb), 0) calc(var(--col-w) + 18vw));
}

.copy {
  position: relative; z-index: 2;
  height: 100%; width: var(--col-w);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(.4rem, 2.1dvh, 1.5rem);
  padding: clamp(3.8rem, 9dvh, 6rem) 1.5rem .8rem;
  text-align: center;
}
.copy > * { margin: 0; }

/* ---------- 3. Top bar ---------- */
.topbar {
  position: absolute; inset: 0 0 auto 0; z-index: 4;
  display: flex; justify-content: space-between; align-items: center;
  padding: clamp(.75rem, 2.5dvh, 1.5rem) clamp(.75rem, 2vw, 1.75rem);
}
.topbar__right { display: flex; gap: .75rem; align-items: center; }
.ico { width: 1.25rem; height: 1.25rem; flex: none; }


.lang {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 1rem; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(8px); color: var(--fg);
  font-size: .95rem;
}
.lang .bar { width: 1px; height: 1rem; background: var(--glass-line); }
.lang button {
  all: unset; cursor: pointer; font-weight: 600; border-radius: 6px; padding: 0 .2rem;
  display: inline-flex; align-items: center; gap: .35rem; color: var(--fg);
}
.lang button[lang="fa"] { font-family: "Vazirmatn", Tahoma, sans-serif; }
.lang button[aria-pressed="true"] { color: var(--hl); font-weight: 800; }
.lang button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.lang .flag { width: 1.1rem; height: .75rem; border-radius: 2px; }

.round {
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  border: 1px solid var(--glass-line);
  background: var(--glass); color: var(--fg);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  backdrop-filter: blur(8px);
  transition: background-color .15s ease, transform .2s ease;
}
html[data-theme="dark"] .round { background: rgba(14, 17, 8, .85); }
.round:hover { transform: rotate(-12deg) scale(1.05); }
.round .ico { width: 1.3rem; height: 1.3rem; }

/* ---------- 4. Typography ---------- */
.hm-brand { position: relative; display: inline-block; padding: 0 .3rem; }
.spark {
  position: absolute; left: -1.9rem; top: 38%;
  width: clamp(1rem, 2.4dvh, 1.4rem); height: auto; color: var(--accent);
  animation: pulse 3.2s ease-in-out infinite;
}
.logo {
  position: relative; display: inline-block; margin: 0;
  font: 400 clamp(3rem, min(9.4vw, 17.5dvh), 9rem)/1.05 "Kaushan Script", "Segoe Script", "Brush Script MT", cursive;
  letter-spacing: -.01em; text-wrap: nowrap; padding: .05em .16em .08em .08em; margin: 0 -.1em;
}
.logo__hue { color: var(--fg); }
.logo__mark { color: var(--hl); }
.tagline b { font-weight: inherit; color: inherit; }
.logo__leaf {
  position: absolute; left: 24%; top: -.28em; width: .46em; height: .46em;
  color: var(--hl); transform: rotate(18deg); filter: drop-shadow(0 0 8px rgba(164, 223, 59, .4));
}
.logo__swoosh {
  position: absolute; left: 6%; bottom: -.12em; width: 90%; height: .14em;
  color: var(--fg); opacity: .9;
}
.tagline {
  font-size: clamp(.68rem, 1.75dvh, .98rem); letter-spacing: .38em; text-indent: .38em;
  font-weight: 500; color: var(--fg); margin-top: clamp(.4rem, 1.4dvh, 1rem) !important;
}
.desc { font-size: clamp(.9rem, 2.35dvh, 1.2rem); line-height: 1.55; color: var(--fg-soft); }
.desc em, .poem em { font-style: normal; color: var(--hl); }
.poem {
  font: italic 500 clamp(1.15rem, 3.7dvh, 2rem)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--fg-soft);
}
html[data-lang="fa"] .logo { font-family: "Vazirmatn", Tahoma, sans-serif; font-weight: 800; letter-spacing: 0; font-size: clamp(2.8rem, min(8.4vw, 15dvh), 7.6rem); }
html[data-lang="fa"] .logo__swoosh { left: 5%; }
html[data-lang="fa"] .tagline { letter-spacing: 0; text-indent: 0; font-size: clamp(.85rem, 2.1dvh, 1.15rem); }
html[data-lang="fa"] .poem { font-family: "Vazirmatn", Tahoma, serif; font-style: normal; font-weight: 400; line-height: 1.7; }
html[data-lang="fa"] .desc { line-height: 1.8; }

.divider {
  width: min(86%, 30rem); display: flex; align-items: center; gap: .8rem; color: var(--fg); opacity: .8;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .3; }
.divider .leaf { width: 1rem; height: 1rem; color: var(--fg); opacity: .8; transform: rotate(-20deg); }

.credit {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  font-size: clamp(.74rem, 1.7dvh, .92rem); color: var(--fg-soft); width: 100%;
}
.credit .line { flex: 1; max-width: 5rem; height: 1px; background: currentColor; opacity: .25; }
.credit strong { color: var(--fg); font-weight: 600; }
.credit .sep { color: var(--hl); opacity: .8; }
.credit .nick { color: var(--hl); font-weight: 700; }

/* ---------- 5. Buttons ---------- */
.btn-main {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-width: min(100%, 17rem);
  padding: clamp(.55rem, 1.7dvh, .95rem) 2.6rem; border-radius: 999px;
  font-weight: 800; font-size: clamp(1.05rem, 2.8dvh, 1.35rem); line-height: 1.2;
  color: var(--btn-fg); text-decoration: none;
  background: linear-gradient(180deg, #c3ee5f, var(--primary) 45%, var(--primary-hover));
  box-shadow: 0 0 28px rgba(164, 223, 59, .45), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: filter .15s ease, transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-main:hover { color: var(--btn-fg); }
.btn-main:hover:not([aria-disabled="true"]) { filter: brightness(.93); transform: translateY(-1px); }
.btn-main .ico { width: 1.5em; height: 1.5em; --rocket-eye: #A4DF3B; }
.btn-main .ico { color: var(--btn-fg); }
.hm-status { min-height: 1.1em; font-size: .85rem; color: var(--fg-soft); margin-top: -.2rem !important; }
.hm-status:empty { display: none; }
.hm-status.is-ok { color: var(--hl); font-weight: 700; }

:is(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 2px var(--secondary);
}


/* ---------- 5b. Entry buttons: Studio + Painting Online Game ---------- */
.hm-cta { display: flex; flex-direction: column; align-items: center; gap: clamp(.55rem, 1.8dvh, 1rem); width: 100%; }
.btn-game {
  --b1: #FFB259; --b2: #A4DF3B; --b3: #5BB8FF; --b4: #B79BFF;
  position: relative; isolation: isolate; cursor: pointer; font: inherit; color: var(--fg);
  display: inline-flex; align-items: center; gap: .85rem; text-align: start;
  min-width: min(100%, 22rem); max-width: 100%;
  padding: clamp(.5rem, 1.5dvh, .8rem) 1.2rem clamp(.5rem, 1.5dvh, .8rem) 1rem; border-radius: 999px;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--btn-bg), var(--btn-bg)) padding-box,
    conic-gradient(from var(--ang, 0deg), var(--b1), var(--b2), var(--b3), var(--b4), var(--b1)) border-box;
  --btn-bg: rgba(var(--panel-rgb), .92);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .28);
  animation: gameSpin 6s linear infinite;
  transition: transform .18s ease, box-shadow .25s ease;
}
html[data-theme="light"] .btn-game { --btn-bg: rgba(var(--paper-rgb), .96); --b1: #E0701A; --b2: #5E8A12; --b3: #2878C0; --b4: #6A4FD0; box-shadow: 0 6px 22px rgba(34, 41, 20, .2); }
.btn-game:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 10px 34px rgba(0, 0, 0, .35), 0 0 30px rgba(91, 184, 255, .25); }
.btn-game:active { transform: translateY(0) scale(.99); }
.btn-game__glow {
  position: absolute; inset: -6px; z-index: -1; border-radius: inherit; filter: blur(16px); opacity: .35;
  background: conic-gradient(from var(--ang, 0deg), var(--b1), var(--b2), var(--b3), var(--b4), var(--b1));
  transition: opacity .25s ease;
}
.btn-game:hover .btn-game__glow { opacity: .6; }
.btn-game__ico { width: 2.3rem; height: 2.3rem; flex: none; color: var(--fg-soft); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.btn-game:hover .btn-game__ico { transform: rotate(-12deg) scale(1.1); }
.btn-game__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.btn-game__title { font-weight: 800; font-size: clamp(1rem, 2.5dvh, 1.2rem); line-height: 1.2; color: var(--fg); }
.btn-game__sub { font-size: clamp(.68rem, 1.6dvh, .8rem); color: var(--fg-soft); opacity: .85; line-height: 1.3; }
.btn-game__live {
  display: inline-flex; align-items: center; gap: .3rem; flex: none;
  font-size: .62rem; font-weight: 800; letter-spacing: .12em; padding: .22rem .5rem; border-radius: 999px;
  color: var(--btn-fg); background: linear-gradient(180deg, #c3ee5f, var(--primary));
}
.btn-game__live i { width: .42rem; height: .42rem; border-radius: 50%; background: #d63b2b; animation: pulse 1.6s ease-in-out infinite; }
html[data-lang="fa"] .btn-game { font-family: "Vazirmatn", Tahoma, sans-serif; }
html[data-lang="fa"] .btn-game__live { letter-spacing: 0; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes gameSpin { to { --ang: 360deg; } }
@media (max-width: 899px) { .btn-game { min-width: min(100%, 20rem); gap: .65rem; } .btn-game__ico { width: 2rem; height: 2rem; } }
@media (max-height: 560px) { .btn-game__sub { display: none; } }
@media (prefers-reduced-motion: reduce) { .btn-game, .btn-game__live i { animation: none; } .btn-game:hover { transform: none; } }

/* ---------- 7. Decorations ---------- */
.drift { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.leaf-fall {
  position: absolute; top: 0; left: var(--x); width: var(--s); height: var(--s);
  opacity: 0; will-change: transform, opacity;
  animation: fall var(--t) linear var(--delay) infinite;
}
.leaf-fall svg {
  width: 100%; height: 100%; color: var(--c); max-width: none;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, .25));
  animation: sway calc(var(--t) / 5) ease-in-out var(--delay) infinite alternate;
}
html[data-theme="light"] .leaf-fall svg { filter: drop-shadow(0 1px 3px rgba(34, 41, 20, .25)); }
@keyframes fall {
  0%   { transform: translate3d(0, -6vh, 0); opacity: 0; }
  8%   { opacity: var(--o); }
  50%  { transform: translate3d(calc(var(--drift) * .5), 52vh, 0); }
  92%  { opacity: var(--o); }
  100% { transform: translate3d(var(--drift), 106vh, 0); opacity: 0; }
}
@keyframes sway {
  0%   { transform: translateX(calc(var(--sway) * -1)) rotate(-35deg) rotateY(0deg); }
  50%  { transform: translateX(0) rotate(15deg) rotateY(160deg); }
  100% { transform: translateX(var(--sway)) rotate(55deg) rotateY(360deg); }
}
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.78); opacity: .75; } }
@keyframes shake {
  0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}

/* ---------- 8. Responsive: the page must never scroll ---------- */
@media (max-width: 899px) {
  .scene {
    inset: 0 0 auto 0; height: 46dvh;
    background-image: url("assets/background-1280.webp");
    background-position: 72% 20%;
  }
  .scrim {
    background: linear-gradient(180deg,
      rgba(var(--panel-rgb), 0) 0, rgba(var(--panel-rgb), 0) 16dvh, rgba(var(--panel-rgb), .97) 42dvh);
  }
  .copy { width: 100%; justify-content: flex-end; gap: clamp(.25rem, 1.1dvh, .8rem); padding: 4.5rem 1rem .6rem; }
  .logo { font-size: clamp(2.8rem, min(15vw, 8.5dvh), 5.5rem); }
  html[data-lang="fa"] .logo { font-size: clamp(2.6rem, min(14vw, 8dvh), 5rem); }
  .logo__leaf { left: 20%; }
  .spark { left: -1.4rem; }
  .tagline { letter-spacing: .24em; text-indent: .24em; font-size: clamp(.62rem, 1.6dvh, .85rem); margin-top: .2rem !important; }
  .desc { font-size: clamp(.82rem, 1.9dvh, 1rem); line-height: 1.45; }
  .poem { font-size: clamp(1.05rem, 2.8dvh, 1.5rem); }
  .btn-main { padding-block: clamp(.5rem, 1.4dvh, .8rem); }
  .lang { padding: .45rem .75rem; font-size: .85rem; gap: .4rem; }
  .round { width: 2.5rem; height: 2.5rem; }
  .topbar__right { gap: .5rem; }
}
@media (max-height: 700px) { .desc, .divider--bottom { display: none; } }
@media (max-height: 560px) { .poem { display: none; } }
@media (max-height: 480px) {
  .copy { overflow-y: auto; justify-content: flex-start; gap: .35rem; padding-top: 3.4rem; }
  .tagline, .desc, .poem, .divider, .hm-status:empty { display: none; }
  .logo { font-size: 2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep the leaves alive even with reduced motion on - just slower and
     calmer. Only the spark and button hover motion are switched off. */
  .spark { animation: none; }
  .leaf-fall { animation-duration: calc(var(--t) * 1.6); }
  .leaf-fall svg { animation: swaySoft calc(var(--t) / 3) ease-in-out var(--delay) infinite alternate; }
  .round:hover { transform: none; }
}
@keyframes swaySoft {
  0%   { transform: translateX(calc(var(--sway) * -.5)) rotate(-15deg); }
  100% { transform: translateX(calc(var(--sway) * .5)) rotate(20deg); }
}