/* huuhed — зөвхөн энэ загварын өнгө ба онцлог хэсгүүд.
   Нийтлэг хэсэг: ../assets/base.css */

/* ══════════════════════════════════════════════════════════
   Хүүхдийн төрсөн өдрийн урилга — вэб хэв маяг (цайвар, өнгөлөг)
   ══════════════════════════════════════════════════════════ */

:root{
  /* ── Өнгө: «Гэгээ — хичээлийн хуваарь» сайтын dark горимоос яг хуулсан ── */
  --bg:#fff7ee;
  --tint-1:rgba(255,176,56,.22);
  --tint-2:rgba(90,169,240,.20);
  --tint-3:rgba(255,138,170,.22);
  --surface:#ffffff;
  --surface-2:#fff2e4;
  --surface-3:#ffe4cd;
  --line:#f3dcc3;
  --line-2:#e6bf97;

  --amber:#ffb038;
  --pumpkin:#ff8a4c;
  --brand-deep:#f4693b;
  --maple:#5aa9f0;
  --moss:#3fc38a;
  --plum:#c56ede;

  --hero-1:#ffd166;
  --hero-2:#ff9f68;
  --hero-3:#ff7a8a;
  --hero-ink:#4a2a12;
  --hero-ink-2:#7a4a22;

  /* дугтуйн өнгө — цайвар дэвсгэр (#fff7ee) дээр */
  --env-1:#ffdc95;
  --env-2:#ffc07d;
  --env-3:#ff9f86;

  --ink:#3d2a1c;
  --ink-2:#6b503c;
  --muted:#9c8271;
  --text:#3d2a1c;

  --shadow-1:0 1px 2px rgba(120,72,32,.06), 0 6px 18px -8px rgba(120,72,32,.24);
  --shadow-2:0 2px 4px rgba(120,72,32,.07), 0 20px 44px -18px rgba(120,72,32,.32);
  --ring:rgba(244,105,59,.5);

  /* хуучин нэрсийг шинэ өнгө рүү холбоно */
  --gold:var(--pumpkin);
  --gold-soft:var(--amber);
  --gold-dim:var(--line);
  --navy:var(--hero-2);
  --navy-deep:var(--bg);
  --cream:var(--hero-ink);
  --card:var(--surface);
  --shadow:var(--shadow-2);
  --radius:22px;
  --serif:"Palatino Linotype","Book Antiqua",Palatino,"Times New Roman",Georgia,serif;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  /* Өлзий хээ — шаргал өнгө шигтгээтэй */
  --ulzii-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-9 -9 118 118'%3E%3Cg fill='none' stroke='%23f4693b' stroke-width='8'%3E%3Cpath d='M0 40H40V0h20v20h20v40H20V40'/%3E%3Cpath d='M0 40H40V0h20v20h20v40H20V40' transform='rotate(90 50 50)'/%3E%3Cpath d='M0 40H40V0h20v20h20v40H20V40' transform='rotate(180 50 50)'/%3E%3Cpath d='M0 40H40V0h20v20h20v40H20V40' transform='rotate(270 50 50)'/%3E%3C/g%3E%3C/svg%3E");

  /* нийтлэг хэв маягт өгөх утгууд */
  --accent:var(--brand-deep);
  --accent-2:var(--brand-deep);
  --hint-weight:800;
  --scrim:linear-gradient(180deg,rgba(255,247,238,.78),rgba(255,247,238,.55) 30%,rgba(255,247,238,.88));
  --modal-bg:rgba(61,42,28,.90);
  --cover-veil:radial-gradient(72% 52% at 50% 32%,rgba(120,34,26,.02),rgba(120,34,26,.34) 78%),
    linear-gradient(180deg,rgba(120,34,26,.26),rgba(120,34,26,.04) 38%,rgba(120,34,26,.60));
  --cover-kicker:#fff3d6;
  --cover-names:#ffffff;
  --cover-date:rgba(255,245,226,.94);
  --burst-1:rgba(255,255,255,.98);
  --burst-2:rgba(255,210,138,.5);
}

/* ── Насны тэмдэг ── */
.age{
  display:inline-grid;place-items:center;
  width:112px;height:112px;border-radius:50%;margin:0 auto .3rem;
  background:
    radial-gradient(circle at 34% 26%,rgba(255,255,255,.9),transparent 60%),
    linear-gradient(150deg,#ffffff,#fff0d8);
  border:4px solid var(--brand-deep);
  box-shadow:0 10px 26px -12px rgba(244,105,59,.75);
  color:var(--brand-deep);line-height:1;
}

.age b{font-family:var(--serif);font-size:2.9rem;line-height:1}

.age small{
  font-size:.6rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;opacity:.85;margin-top:.15rem;
}

/* ── Бөмбөлөгүүд ── */
.balloons{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.balloons i{
  position:absolute;bottom:-24vh;width:32px;height:40px;
  border-radius:50% 50% 46% 46%;opacity:.5;
  animation:balloonUp linear infinite;
}

.balloons i::after{
  content:"";position:absolute;left:50%;top:100%;width:1px;height:30px;
  background:rgba(120,72,32,.18);
}

@keyframes balloonUp{
  0%  {transform:translateY(0) rotate(-4deg)}
  50% {transform:translateY(-62vh) rotate(4deg)}
  100%{transform:translateY(-130vh) rotate(-3deg)}
}

.balloons i:nth-child(1){left:6%; background:#f4693b;animation-duration:20s;animation-delay:-3s}

.balloons i:nth-child(2){left:19%;background:#5aa9f0;animation-duration:26s;animation-delay:-11s}

.balloons i:nth-child(3){left:32%;background:#3fc38a;animation-duration:23s;animation-delay:-6s}

.balloons i:nth-child(4){left:45%;background:#ffb038;animation-duration:28s;animation-delay:-16s}

.balloons i:nth-child(5){left:58%;background:#c56ede;animation-duration:22s;animation-delay:-9s}

.balloons i:nth-child(6){left:71%;background:#ff8aaa;animation-duration:25s;animation-delay:-19s}

.balloons i:nth-child(7){left:84%;background:#5aa9f0;animation-duration:21s;animation-delay:-13s}

.balloons i:nth-child(8){left:93%;background:#ffb038;animation-duration:27s;animation-delay:-2s}

/* бөмбөлөг */
.motif--bal{width:96px;height:136px;
  animation:coverUp .9s ease .75s backwards,balBob 4s ease-in-out 1.7s infinite}

.motif--bal .bal{fill:#ffffff;filter:drop-shadow(0 10px 20px rgba(120,34,26,.35))}

.motif--bal .knot{fill:#ffffff}

.motif--bal .str{fill:none;stroke:rgba(255,255,255,.85);stroke-width:2.6;stroke-linecap:round}

.motif--bal.is-open{animation:none}

.motif--bal.is-open svg{animation:pop .5s cubic-bezier(.3,1.7,.4,1) forwards}

@keyframes pop{0%{transform:scale(1)}55%{transform:scale(1.24)}100%{transform:scale(1.55);opacity:0}}

/* нүүр хаалганы бичиг — шүрэн дэвсгэр дээр цагаанаар */
.gate--cover .gate__hint{color:#fff6e4;text-shadow:0 2px 10px rgba(120,34,26,.5)}

.gate--cover .gate__skip{color:rgba(255,246,228,.8)}

.gate--cover .gate__skip:hover{color:#fff}

@media (prefers-reduced-motion:reduce){.balloons{display:none}}

@keyframes balBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}

/* Нүүр хаалганы зураг — зам нь энэ файлаас тоологдоно */
.cover__bg{background-image:url("media/cover.jpg")}

/* ══════════════════════════════════════════════════════════════════
   ПРЕМИУМ давхарга — «Цаасан сарнай — ЦАЙВАР загвар, шаргал цаас, ягаан мандарин»
   base.css → lux.css → энэ блок.  Доорх утгууд дээрхийг дарна.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#fdf6ee;
  --ink:#40312a;
  --ink-2:#5f4c42;
  --muted:#a2907f;
  --gold:#e07a52;
  --gold-2:#c96a44;
  --line:rgba(224,122,82,.28);
  --line-2:rgba(224,122,82,.48);
  --on-gold:#fffaf5;
  --toast-bg:#fff2e7;

  --serif:"Comfortaa","Segoe UI",system-ui,sans-serif;
  --sans:"Nunito","Segoe UI",system-ui,Arial,sans-serif;
  --w-display:500;
  --w-sans:400;
  --names-weight:500;

  /* хайрцаг, сүүдэр — бүгд унтраалттай */
  --surface:transparent;
  --surface-2:transparent;
  --surface-3:rgba(128,128,128,.06);
  --radius:0px;
  --shadow-1:none;
  --shadow-2:none;

  /* хуучин нэрсийг шинэ өнгө рүү холбоно (хээ, товчнууд эдгээрийг ашигладаг) */
  --accent:var(--gold);
  --accent-2:var(--gold-2);
  --amber:var(--gold-2);
  --pumpkin:var(--gold);
  --brand-deep:var(--gold);
  --text:var(--ink);
  --cream:var(--ink);
  --gold-soft:var(--gold-2);
  --gold-dim:var(--line);
  --ring:rgba(224,122,82,.48);

  --scrim:linear-gradient(180deg,rgba(253,246,238,.92),rgba(253,246,238,.80) 32%,rgba(253,246,238,.96));
  --modal-bg:rgba(253,246,238,.96);
  --tint-1:rgba(224,122,82,.10);
  --tint-2:transparent;
  --tint-3:transparent;

  --hero-ink:var(--ink);
  --hero-ink-2:var(--muted);
  --hero-name-size:clamp(2.6rem,12vw,4.2rem);

  --cover-names:#40312a;
  --cover-hint:rgba(64,49,42,.62);
  --cover-skip:rgba(64,49,42,.42);
  --cover-shadow:none;
  --ring-line:rgba(224,122,82,.48);
  --cover-veil:radial-gradient(120% 75% at 50% 40%,rgba(253,246,238,0) 20%,rgba(253,246,238,.55) 82%);
  --cover-veil-2:linear-gradient(180deg,rgba(253,246,238,.35),rgba(253,246,238,0) 30%,rgba(253,246,238,0) 60%,rgba(253,246,238,.75));
}

body{
  background:
    radial-gradient(120% 70% at 50% 120%,rgba(224,122,82,.10),transparent 62%),
    var(--bg);
}

/* Нүүр хаалганы дэвсгэр видео — бичиггүй, зөвхөн хөдөлж буй гэрэл */
.cover__v{filter:brightness(1.02) saturate(1.02);transform:scale(1.03)}

/* Энэ загварт дэвсгэр видео байхгүй — зөвхөн өнгө */
.bg__video{display:none}

/* Хуучин загварын өнгө дарж байсан тул нүүр хаалганы бичгийг дахин зарлана */
.gate--cover .cover__kicker{color:var(--gold-2)}
.gate--cover .cover__names{color:var(--cover-names);text-shadow:var(--cover-shadow)}
.gate--cover .cover__date{color:var(--ink-2)}
.gate--cover .gate__hint{color:var(--cover-hint);text-shadow:none}
.gate--cover .gate__skip{color:var(--cover-skip)}

/* Нээгдэх агшин */
.motif--ring.is-open{
  transform:scale(1.35);border-color:transparent;
  transition:transform 1.1s cubic-bezier(.3,.9,.3,1),border-color .9s ease;
}
.motif--ring.is-open b{opacity:0;transition:opacity .6s ease}