/* Hero-ul campaniei de Halloween (template-parts/campaign-hero.php): pe pagina campaniei si in
   prezentarea de la prima intrare pe site (inc/campaign-intro.php). */
:root { --hw-violet: #A78BFA; --hw-violet-d: #7C3AED; }   /* movul campaniei: deschis pe fundal inchis, inchis pe fundal deschis (AA) */
.hw-hero { padding-bottom: 0; background: radial-gradient(60% 70% at 85% 30%, rgba(124,58,237,.28), transparent 70%), radial-gradient(45% 60% at 5% 90%, rgba(167,139,250,.14), transparent 70%), var(--bg); }
/* Titlul sta pe un singur rand, cu bostanul aliniat pe mijlocul lui; marimea scade cu latimea ecranului. */
.hw-title { display: flex; align-items: center; gap: .35em; font-size: clamp(1.5rem, 6.3vw, 3.1rem); white-space: nowrap; }
.hw-pumpkin { flex: none; width: 1.1em; height: 1.1em; filter: drop-shadow(0 0 14px rgba(255,157,48,.45)); }
.hw-flame { animation: hw-flicker 7s ease-in-out infinite; transform-origin: 50% 70%; }
@keyframes hw-flicker {
  0%   { opacity: 1;   filter: brightness(1.15); }
  9%   { opacity: .72; filter: brightness(.85); }
  14%  { opacity: .95; filter: brightness(1.25); }
  27%  { opacity: .8;  filter: brightness(.95); }
  33%  { opacity: 1;   filter: brightness(1.3); }
  48%  { opacity: .68; filter: brightness(.8); }
  56%  { opacity: .9;  filter: brightness(1.1); }
  71%  { opacity: .78; filter: brightness(.9); }
  79%  { opacity: 1;   filter: brightness(1.35); }
  91%  { opacity: .74; filter: brightness(.88); }
  100% { opacity: 1;   filter: brightness(1.15); }
}
/* Ciclu de 12,6 s, fara moment gol: t1 2 s (Dan: „Preturi de speriat” sa apara repede); t2 brusc, cutremur 0,8 s, 10 s; apoi t2 dispare IN TIMP CE t1
   apare (0,6 s, se suprapun). La incarcare, intregul titlu apare o singura data cu fade in (hw-in). */
.hw-swap { display: grid; animation: hw-in .6s ease-out both; }
@keyframes hw-in { from { opacity: 0; } to { opacity: 1; } }
.hw-t1, .hw-t2 { grid-area: 1 / 1; align-self: center; animation: 12.6s linear infinite; }
.hw-t1 { animation-name: hw-t1; color: var(--orange); text-shadow: 0 0 22px rgba(255,157,48,.45), 0 0 44px rgba(124,58,237,.3); }
.hw-t2 { animation-name: hw-t2; color: var(--text); text-shadow: 0 0 22px rgba(167,139,250,.55), 0 0 44px rgba(124,58,237,.35); }
@keyframes hw-t1 { 0% { opacity: 1; } 15.87% { opacity: 1; } 15.88% { opacity: 0; } 95.24% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hw-t2 {
  0%, 15.87% { opacity: 0; transform: none; }
  15.88% { opacity: 1; transform: translate(-6px, 3px) rotate(-2deg); }
  16.51% { transform: translate(7px, -4px) rotate(2deg); }
  17.15% { transform: translate(-7px, 2px) rotate(-1.5deg); }
  17.78% { transform: translate(6px, 4px) rotate(1.8deg); }
  18.41% { transform: translate(-5px, -3px) rotate(-1.2deg); }
  19.05% { transform: translate(4px, 2px) rotate(1deg); }
  19.68% { transform: translate(-3px, -2px) rotate(-.6deg); }
  20.32% { transform: translate(2px, 1px) rotate(.4deg); }
  20.95% { transform: translate(-1px, 0) rotate(-.2deg); }
  21.59% { transform: none; }
  95.24% { opacity: 1; transform: none; }
  100%   { opacity: 0; transform: none; }
}

.hw-hero-in { position: relative; z-index: 2; padding-top: 8rem; padding-bottom: 5rem; display: grid; grid-template-columns: 1.25fr 1fr; gap: 3rem; align-items: center; }
.hw-hero .tag { display: inline-block; color: var(--orange); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.hw-h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.08; margin: 0 0 .6rem; color: var(--text); }   /* si cand nu e h1 (prezentarea) */
.hw-h1-sub { display: block; font-size: .55em; color: var(--text-s); font-weight: 400; margin-top: .7rem; }
.hw-lead { font-size: 1.15rem; color: #C7CFDD; line-height: 1.6; max-width: 34rem; margin: 1.4rem 0 2rem; }
.hw-note { font-size: .85rem; color: var(--text-s); margin-top: 1.1rem; max-width: 34rem; line-height: 1.55; }
.hw-cd { display: flex; align-items: flex-end; gap: .9rem; margin-top: 2rem; }
.hw-cd-l { font-size: .8rem; color: var(--text-s); text-transform: uppercase; letter-spacing: .1em; margin-right: .4rem; padding-bottom: .55rem; }
.hw-cd-u { text-align: center; min-width: 3.6rem; padding: .45rem .3rem .4rem; border: 1px solid rgba(167,139,250,.35); border-radius: 10px; background: rgba(124,58,237,.12); }
.hw-cd-u b { display: block; font-size: 1.9rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.hw-cd-u span { font-size: .72rem; color: var(--hw-violet); text-transform: uppercase; letter-spacing: .08em; }
/* Ilustratia: rack-ul, cu procentul in lumina portocalie si violet */
.hw-art { position: relative; display: flex; justify-content: center; }
.hw-art::before { content: ""; position: absolute; inset: 8% 6%; background: radial-gradient(closest-side, rgba(255,157,48,.3), rgba(124,58,237,.3) 55%, transparent 75%); filter: blur(18px); animation: hw-glow 4s ease-in-out infinite; }
.hw-art svg { position: relative; width: min(360px, 100%); height: auto; }
.hw-pct { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -58%); font-size: clamp(3.4rem, 8vw, 5.4rem); font-weight: 700; color: var(--orange); text-shadow: 0 0 24px rgba(255,157,48,.55), 0 0 60px rgba(124,58,237,.55); letter-spacing: -.02em; }
.hw-led { animation: hw-blink 2.4s ease-in-out infinite; }
.hw-led:nth-of-type(2n) { animation-delay: -.8s; } .hw-led:nth-of-type(3n) { animation-delay: -1.6s; }
@keyframes hw-glow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes hw-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* Oferta in desfasurare / incheiata (clasa hw-over pe <html>, pusa din browser). */
.hw-off { display: none; }
.hw-over .hw-live { display: none; }
.hw-over .hw-off { display: block; }
@media (max-width: 900px) {
  .hw-hero-in { grid-template-columns: 1fr; padding-top: 6.5rem; gap: 2rem; }
  .hw-art { order: -1; } .hw-art svg { width: 240px; }
  .hw-cd { flex-wrap: wrap; gap: .6rem; }
  .hw-cd-l { flex-basis: 100%; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-art::before, .hw-led, .hw-flame { animation: none; }
  .hw-swap, .hw-t1 { animation: none; }
  .hw-t1 { opacity: 0; }
  .hw-t2 { animation: none; opacity: 1; }
}