/* ════════════════════════════════════════════════════════════════════
   MATIVERA+ — Fundal & road map „viu"
   Reacționează la: etapa din călătoria de un an (evoluția liniei),
   sezon/sărbători (tema liniei), borne (ediție de aur/argint).
   Tinta de vreme pe fundalul stelat se face din JS (recolorează canvas-ul).
   ════════════════════════════════════════════════════════════════════ */

/* ─────────── 1. Evoluția liniei (data-rm-stage 1..4) ─────────── */
/* Etapa 1 (sub 30 zile): linia simplă, subțire — stilul de bază existent. */

/* Etapa 2+: orbii prind un „mugure" (frunzuliță) — semn că drumul crește. */
.ms-roadmap[data-rm-stage="2"] .ms-rm-orb::after,
.ms-roadmap[data-rm-stage="3"] .ms-rm-orb::after,
.ms-roadmap[data-rm-stage="4"] .ms-rm-orb::after {
    content: ''; position: absolute; top: -3px; right: -3px;
    width: 0.34rem; height: 0.34rem;
    border-radius: 50% 50% 50% 0;
    background: #8fe0a8;
    box-shadow: 0 0 6px rgba(120, 230, 160, 0.6);
    transform: rotate(22deg);}

/* Etapa 3+: linia se îngroașă și capătă strălucire blândă (drum mai „bătut"). */
.ms-roadmap[data-rm-stage="3"] .ms-rm-timeline::before,
.ms-roadmap[data-rm-stage="4"] .ms-rm-timeline::before {
    width: 2.5px;
    background: linear-gradient(180deg, rgba(110, 193, 255, 0.55), rgba(59, 130, 246, 0.4));
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);}

/* Etapa 4 (peste 6 luni): un firicel de lumină curge de-a lungul liniei. */
.ms-roadmap[data-rm-stage="4"] .ms-rm-timeline::after {
    content: ''; position: absolute; left: 0.74rem; top: 1.5rem; bottom: 3rem;
    width: 2.5px; border-radius: 2px; pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(160, 215, 255, 0.95) 50%, transparent 100%);
    background-size: 100% 45%; background-repeat: no-repeat;
    animation: rmFlow 3.6s linear infinite;
    filter: blur(0.4px);}
@keyframes rmFlow {
    0%   { background-position: 0 -60%;}
    100% { background-position: 0 170%;}
}
.ms-roadmap[data-rm-stage="4"] .ms-rm-orb::after {
    background: #a7d8ff; box-shadow: 0 0 9px rgba(160, 215, 255, 0.75);}

/* ─────────── 2. Teme sezoniere (data-rm-season) ─────────── */
/* Linia își schimbă culoarea după anotimp. */
.ms-roadmap[data-rm-season="autumn"] .ms-rm-timeline::before { background: linear-gradient(180deg, rgba(217, 119, 6, 0.45), rgba(180, 83, 9, 0.28));}
.ms-roadmap[data-rm-season="spring"] .ms-rm-timeline::before { background: linear-gradient(180deg, rgba(34, 197, 94, 0.45), rgba(132, 204, 22, 0.28));}
.ms-roadmap[data-rm-season="summer"] .ms-rm-timeline::before { background: linear-gradient(180deg, rgba(250, 204, 21, 0.45), rgba(245, 158, 11, 0.28));}
.ms-roadmap[data-rm-season="winter"] .ms-rm-timeline::before { background: linear-gradient(180deg, rgba(125, 211, 252, 0.5), rgba(186, 230, 253, 0.28));}
.ms-roadmap[data-rm-season="easter"] .ms-rm-timeline::before { background: linear-gradient(180deg, rgba(167, 243, 208, 0.5), rgba(196, 181, 253, 0.3));}

/* Wash subtil pe panoul de road map, după sezon. */
.ms-roadmap[data-rm-season="autumn"]    { background: linear-gradient(180deg, rgba(120, 53, 15, 0.12), rgba(12, 16, 36, 0.5));}
.ms-roadmap[data-rm-season="spring"]    { background: linear-gradient(180deg, rgba(20, 83, 45, 0.12), rgba(12, 16, 36, 0.5));}
.ms-roadmap[data-rm-season="summer"]    { background: linear-gradient(180deg, rgba(120, 90, 10, 0.10), rgba(12, 16, 36, 0.5));}
.ms-roadmap[data-rm-season="winter"]    { background: linear-gradient(180deg, rgba(30, 58, 95, 0.14), rgba(12, 16, 36, 0.5));}
.ms-roadmap[data-rm-season="easter"]    { background: linear-gradient(180deg, rgba(76, 29, 149, 0.10), rgba(12, 16, 36, 0.5));}

/* Crăciun: linia devine o ghirlandă cu beculețe care pâlpâie. */
.ms-roadmap[data-rm-season="christmas"] { background: linear-gradient(180deg, rgba(127, 29, 29, 0.12), rgba(12, 16, 36, 0.5));}
.ms-roadmap[data-rm-season="christmas"] .ms-rm-timeline::before {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.5), rgba(220, 38, 38, 0.4));}
.ms-roadmap[data-rm-season="christmas"] .ms-rm-timeline::after {
    content: ''; position: absolute; left: 0.63rem; top: 1.5rem; bottom: 3rem;
    width: 0.46rem; pointer-events: none;
    background: radial-gradient(circle at 50% 0, #ffd76a 38%, transparent 43%);
    background-size: 0.46rem 0.7rem; background-repeat: repeat-y;
    animation: rmTwinkle 2.1s ease-in-out infinite;}
@keyframes rmTwinkle {
    0%, 100% { opacity: 0.45;}
    50%      { opacity: 0.95;}
}

/* Buton discret „fundal după vreme" — opt-in (cere locația doar la apăsare). */
.ms-rm-header { position: relative;}
.ms-rm-wx {
    position: absolute; top: 0; right: 0;
    width: 1.4rem; height: 1.4rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--mv-elev-1); border: 1px solid var(--ms-border); color: var(--mv-text-2); cursor: pointer;
    font-size: 0.6rem; transition: color 0.2s, background 0.2s, box-shadow 0.2s;}
.ms-rm-wx:hover { color: var(--mv-text); background: var(--mv-elev-3);}
.ms-rm-wx.is-on {
    color: var(--mv-accent); background: rgba(59, 130, 246, 0.16);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.35);}

/* Badge mic cu sezonul + ziua, lângă subtitlu. */
.ms-rm-season {
    display: inline-flex; align-items: center; gap: 0.25rem;
    margin-left: 0.3rem; padding: 0.05rem 0.4rem;
    border-radius: 999px; background: var(--mv-elev-2);
    font-size: 0.55rem; color: var(--mv-text-soft); white-space: nowrap;}
.ms-rm-season i { font-size: 0.55rem;}

/* ─────────── 3. Borne — ediția de Aur / Argint / Bronz (data-rm-milestone) ─────────── */
.ms-roadmap[data-rm-milestone] { box-shadow: inset 0 0 44px rgba(212, 175, 55, 0.10);}
.ms-roadmap[data-rm-milestone="silver"] { box-shadow: inset 0 0 44px rgba(200, 205, 215, 0.10);}
.ms-roadmap[data-rm-milestone="bronze"] { box-shadow: inset 0 0 44px rgba(205, 127, 50, 0.10);}

/* Orbii devin auriu/argintiu/bronz (suprascriem stilul inline). */
.ms-roadmap[data-rm-milestone] .ms-rm-orb {
    background: rgba(212, 175, 55, 0.20) !important;
    color: var(--mv-warning) !important;}
.ms-roadmap[data-rm-milestone="silver"] .ms-rm-orb {
    background: rgba(200, 205, 215, 0.20) !important;
    color: var(--mv-text-soft) !important;}
.ms-roadmap[data-rm-milestone="bronze"] .ms-rm-orb {
    background: rgba(205, 127, 50, 0.20) !important;
    color: var(--mv-warning) !important;}
.ms-roadmap[data-rm-milestone] .ms-rm-timeline::before {
    background: linear-gradient(180deg, var(--mv-warning), #b8860b) !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);}
.ms-roadmap[data-rm-milestone="silver"] .ms-rm-timeline::before {
    background: linear-gradient(180deg, #eef2f8, #9aa3b2) !important;
    box-shadow: 0 0 10px rgba(200, 205, 215, 0.5);}
.ms-roadmap[data-rm-milestone="bronze"] .ms-rm-timeline::before {
    background: linear-gradient(180deg, var(--mv-warning), #8a5a2b) !important;
    box-shadow: 0 0 10px rgba(205, 127, 50, 0.5);}

/* Titlul ediției speciale. */
.ms-rm-milestone-title, .ms-rm-milestone-title i { color: var(--mv-warning) !important;}
.ms-roadmap[data-rm-milestone="silver"] .ms-rm-milestone-title,
.ms-roadmap[data-rm-milestone="silver"] .ms-rm-milestone-title i { color: var(--mv-text-soft) !important;}
.ms-roadmap[data-rm-milestone="bronze"] .ms-rm-milestone-title,
.ms-roadmap[data-rm-milestone="bronze"] .ms-rm-milestone-title i { color: var(--mv-warning) !important;}

/* ─────────── 4. Accent subtil de vreme pe road map (clasa pe <body>, setată din JS) ─────────── */
/* Tinta principală de vreme e pe fundalul stelat (canvas, din JS). Aici doar un accent fin. */
body.wx-rain  .ms-roadmap { border-left-color: rgba(96, 165, 250, 0.35);}
body.wx-snow  .ms-roadmap { border-left-color: rgba(186, 230, 253, 0.4);}
body.wx-storm .ms-roadmap { border-left-color: rgba(129, 140, 248, 0.4);}
body.wx-heat  .ms-roadmap { border-left-color: rgba(251, 191, 36, 0.35);}

/* Respectă utilizatorii care preferă mai puțină mișcare. */
@media (prefers-reduced-motion: reduce) {
    .ms-roadmap[data-rm-stage="4"] .ms-rm-timeline::after,
    .ms-roadmap[data-rm-season="christmas"] .ms-rm-timeline::after { animation: none;}
}

/* ════════════════════════════════════════════════════════════════════
   ECOSISTEM VIU — ÎNTREAGA INTERFAȚĂ MATIVERA+
   Cerul (canvas) = ora zilei. Accentele (mai jos) = sezonul.
   ════════════════════════════════════════════════════════════════════ */

/* 0. Dezvelește cerul viu: panoul aplicației nu mai acoperă canvas-ul stelat. */
body .ms-app { background: transparent !important;}

/* Panourile devin „sticlă" peste cer — se vede atmosfera prin ele. */
body .ms-sidebar {
    background: rgba(9, 14, 24, 0.55) !important;}
body .ms-topbar {}

/* 1. Tokeni de ambianță.
   Ora zilei dă căldura/atmosfera (--amb-warm/--amb-glow);
   sezonul dă accentul recurent (--amb-accent / --amb-accent-2). */
body {
    --amb-accent: var(--mv-accent);
    --amb-accent-2: var(--mv-accent);
    --amb-glow: var(--mv-glow);
    --amb-warm: rgba(255, 255, 255, 0);}

/* Ora zilei → atmosferă (glow + o tentă caldă/rece foarte fină peste tot). */
body[data-daypart="dawn"]    { --amb-glow: rgba(255, 150, 120, 0.30); --amb-warm: rgba(255, 150, 110, 0.05);}
body[data-daypart="morning"] { --amb-glow: rgba(130, 195, 255, 0.28); --amb-warm: rgba(150, 200, 255, 0.04);}
body[data-daypart="day"]     { --amb-glow: rgba(160, 205, 255, 0.24); --amb-warm: rgba(255, 255, 255, 0.00);}
body[data-daypart="sunset"]  { --amb-glow: rgba(255, 130, 70, 0.32);  --amb-warm: rgba(255, 120, 60, 0.06);}
body[data-daypart="evening"] { --amb-glow: rgba(125, 125, 220, 0.30); --amb-warm: rgba(120, 120, 220, 0.05);}
body[data-daypart="night"]   { --amb-glow: rgba(80, 110, 195, 0.26);  --amb-warm: rgba(40, 60, 120, 0.05);}

/* Sezon → accentul de „vegetație" (verde primăvara, auriu vara, chihlimbar toamna, gheață iarna…). */
body.mtv-season-spring    { --amb-accent: #5fd38a; --amb-accent-2: #2fae6a;}
body.mtv-season-summer    { --amb-accent: var(--mv-warning); --amb-accent-2: #f0a52b;}
body.mtv-season-autumn    { --amb-accent: var(--mv-warning); --amb-accent-2: #d9772b;}
body.mtv-season-winter    { --amb-accent: var(--mv-accent-soft); --amb-accent-2: #5aa6ff;}
body.mtv-season-christmas { --amb-accent: #ff7a7a; --amb-accent-2: #36c98a;}
body.mtv-season-easter    { --amb-accent: #bca7ff; --amb-accent-2: #7fd0a8;}

/* 2. Recolorare globală: variabilele vechi ale temei pointează spre accentul de ambianță,
   deci tot ce le folosea (iconițe, glow-uri, hover-uri) se schimbă cu sezonul, dintr-un loc. */
body {
    --ms-purple: var(--amb-accent);
    --ms-purple-light: var(--amb-accent);
    --ms-blue: var(--amb-accent-2);
    --ms-cyan: var(--amb-accent);}

/* 3. Suprafețe-cheie cu culori „hardcodate" — aliniate la accentul de ambianță. */
.ms-nav a.active { background: var(--amb-accent); color: var(--mv-text-inverse);}
.ms-nav a.active * { color: inherit;}
.ms-search input:focus {
    border-color: color-mix(in srgb, var(--amb-accent) 45%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--amb-accent) 12%, transparent);}
.ms-section-title .plus { color: var(--amb-accent) !important;}
.ms-see-all { color: var(--amb-accent) !important;}
.ms-pl-fill { background: linear-gradient(90deg, var(--amb-accent-2), var(--amb-accent)) !important;}
.ms-rm-cta { background: var(--amb-accent-2);}
.ms-rm-cta:hover {}
.ms-coll-card:hover .ms-coll-play {
    background: color-mix(in srgb, var(--amb-accent) 30%, var(--mv-elev-4)) !important;}
.ms-rm-title i { color: var(--amb-accent) !important;}

/* Titlul de bun-venit primește un firicel de glow al orei zilei (subtil, fără frame). */
.ms-welcome h1 {}

/* 4. Tentă atmosferică foarte fină peste zona de conținut (căldura orei zilei),
   ca timpul să se simtă chiar și peste panouri. Nicio bordură, doar lumină. */
.ms-main::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(120% 80% at 50% 100%, var(--amb-warm), transparent 60%);}

/* Fallback fără color-mix (browsere foarte vechi): rămân accentele albastre implicite. */
@supports not (color: color-mix(in srgb, red, blue)) {
    .ms-nav a.active { background: rgba(110,193,255,0.15);}
}