/* ============================================================
   Alkemijana - Halloween tjedan (js/halloween.js), prefiks hw-
   Sve vrijedi samo pod html.hw-on (25. 10. - 1. 11. ili ?halloween).
   Boje iz palete stranice - bez narančasto-crne i bez zlatne.
   BEZ paukova (vlasnik, izričito).
   ============================================================ */

/* ============================================================
   SABLASNA TEMA - cijela stranica skoro crna, tekst prigušen.
   Svijetla tema je isključena (js/halloween.js skida data-theme="light",
   aj_theme u localStorageu ostaje pa se nakon tjedna sve vrati),
   prekidač teme je skriven. Samo varijable + slojevi (vinjeta, magla,
   Mjesec) - bez blur filtera u pokretu, pokreti samo preko transforma.
   Tekst za čitanje (--text na --bg-deep) ima kontrast ~9:1; --text-muted je
   samo za sitne oznake. Krv (--lavender) je za naslove i naglaske, ne za dugi tekst.
   ============================================================ */
:root.hw-on {
  /* paleta „KRV I KOST" (izabrao vlasnik): crno-siva pozadina (bez crvenog
     sjaja - vlasnik), tekst boje stare kosti, naslovi/gumbi/logo TAMNA krv. Ostale (izravno upisane) ljubičaste
     boje preslikava css/halloween-palette.css (tools/halloween-palette.js). */
  --bg-deep: #040404;
  --bg-mid: #09090a;
  --bg-light: #121213;
  --navy: #060607;
  --lavender: #7a1a1e;          /* tamna krv - naslovi, naglasci, logo */
  --lavender-soft: #561114;     /* zgrušana krv - gumbi */
  --silver-bright: #d6ccb8;
  --silver: #a39a88;
  --silver-light: #c0b6a2;
  --sage: #8f8573;              /* pepeo */
  --forest: #1c1a18;
  --text: #b3a996;              /* stara kost */
  --text-muted: #6b6356;        /* pepeo */
  --border: rgba(78, 70, 66, 0.32);       /* crno-siva, ne crvena */

  --body-grad-1: rgba(48, 48, 52, 0.22);    /* hladna siva izmaglica gore lijevo (bez crvenog) */
  --body-grad-2: rgba(0, 0, 0, 0.8);
  --body-grad-3: rgba(60, 60, 62, 0.06);
  --card-bg: rgba(10, 10, 11, 0.86);
  --card-bg-hover: rgba(17, 17, 18, 0.9);
  --nav-bg: rgba(4, 4, 5, 0.9);
  --form-bg: rgba(9, 9, 10, 0.86);
  --noise-opacity: 0.07;
  --transition-cover: #040404;
  --card-text: #c4baa6;
  --panel-grad-1: rgba(13, 13, 14, 0.72);
  --panel-grad-2: rgba(2, 2, 2, 0.86);
  --search-grad-1: rgba(13, 13, 14, 0.86);
  --search-grad-2: rgba(2, 2, 2, 0.86);
  --search-grad-1-focus: rgba(19, 19, 20, 0.92);
  --search-grad-2-focus: rgba(4, 4, 5, 0.92);
  --aa-sjaj: #8f2a2e;
  --aa-iskra: #f0e6d6;
}

.hw-on .nd-theme { display: none !important; }

/* Vinjeta: fiksni sloj iznad pozadine (z 0), ispod sadržaja (z 2).
   body::before u style.css nije zauzet (samo je u popisu tranzicija). */
.hw-on body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 115% 90% at 50% 48%, transparent 50%, rgba(0, 0, 0, 0.85) 100%);
}
.hw-fog {
  position: fixed;
  left: -50%;
  bottom: -6vh;
  width: 200%;
  height: 42vh;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
  background:
    radial-gradient(ellipse 18% 55% at 12% 70%, rgba(150, 140, 125, 0.10), transparent 70%),
    radial-gradient(ellipse 22% 60% at 34% 80%, rgba(110, 108, 112, 0.08), transparent 70%),
    radial-gradient(ellipse 20% 50% at 58% 72%, rgba(150, 140, 125, 0.08), transparent 70%),
    radial-gradient(ellipse 24% 60% at 82% 82%, rgba(110, 108, 112, 0.09), transparent 70%);
  animation: hwFog 70s linear infinite alternate;
  will-change: transform;
}
@keyframes hwFog {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(25%, -2vh, 0); }
}

/* ============================================================
   MJESEC u sredini, UMJESTO zviježđa (#sky-bg je skriven).
   Faza i nagib su stvarni (js/halloween.js, astronomy-engine), crta se
   samo osvijetljeni dio; tamni dio se jedva nazire (Zemljin odsjaj).
   Sjaj prati oblik osvijetljenog dijela (drop-shadow na SVG-u) - zato
   okvir NEMA overflow:hidden ni border-radius. Statičan; prikaže se
   (fade) tek kad je faza izračunata, da ne bljesne pun Mjesec.
   ============================================================ */
.hw-on #sky-bg { display: none !important; }
/* Mjesec je CANVAS slika (js/halloween.js renderMoon): platno ima 25 % ruba za sjaj
   sa svake strane, pa se razvuče na 150 % okvira. Nema SVG filtera (iPhone). */
.hw-moon-cv {
  position: absolute;
  left: -25%;
  top: -25%;
  width: 150%;
  height: 150%;
  display: block;
  pointer-events: none;
}
/* zajednička geometrija: pozadina, uvod i ekran učitavanja - isto mjesto i veličina */
.hw-moon-geo {
  --hw-moon-w: min(58vmin, 560px);
  left: 50%;
  top: 50%;
  width: var(--hw-moon-w);
  height: var(--hw-moon-w);
  margin: calc(var(--hw-moon-w) / -2) 0 0 calc(var(--hw-moon-w) / -2);
}
@media (max-width: 768px) {
  .hw-moon-geo { --hw-moon-w: min(92vw, 440px); top: 46%; }
}
.hw-moon {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hw-moon.hw-moon-ready { opacity: 0.15; }

/* ============================================================
   ŠIŠMIŠI - potpuno crna silueta, bez obruba. Najbolje se vide preko
   Mjeseca i krvavog sjaja. Mahanje je SMIL morph u SVG-u.
   ============================================================ */
.hw-bat svg,
.hw-navbat svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
/* potpuno crni - bez obruba i sjaja (vlasnik: obrub je izgledao čudno) */
.hw-wing,
.hw-body {
  fill: #000;
  stroke: none;
}

.hw-bat {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;            /* kao glare zvjezdice - iznad pozadine, ispod sadržaja */
  pointer-events: none;
  will-change: transform;
}

/* Šišmiš oko šešira u traci - ciklus 75 s: većinu vremena ga nema,
   zadnjih ~3 s napravi krug oko šešira. */
.hw-navbat {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 22px;
  margin-left: -11px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  animation: hwNavBat 75s linear 20s infinite;
}
@keyframes hwNavBat {
  0%, 96%  { opacity: 0; transform: translate(46px, 6px) scale(0.6); }
  96.6%    { opacity: 1; transform: translate(40px, -14px) scale(0.85); }
  97.5%    { transform: translate(12px, -30px) scale(1) rotate(-8deg); }
  98.4%    { transform: translate(-30px, -16px) scale(0.95) rotate(-14deg); }
  99.2%    { opacity: 1; transform: translate(-12px, 14px) scale(0.9) rotate(6deg); }
  100%     { opacity: 0; transform: translate(60px, -8px) scale(0.6) rotate(12deg); }
}

/* ============================================================
   POLEĐINE TAROT KARATA - tamnocrvene, sablasne (isti motiv svakog špila,
   prebojan + vinjeta + šišmiš). GENERIRANE: node tools/halloween-backs.js
   (iz back.svg). Selektori su isti kao u tarot/tarot.css, samo pod .hw-on.
   ============================================================ */
.hw-on .vtar-back-rws .vtar-deck-card, .hw-on .vtar-back-rws .vtar-card-back, .hw-on .vtar-back-rws.vtar-discard-card, .hw-on .vtar-back-rws.vtar-deck-switch-thumb,
.hw-on .vtar-back-rws.vtar-drawbar-swatch { background-image: url('../tarot/assets/decks/rws/back-halloween.svg'); }
.hw-on .vtar-back-marseille .vtar-deck-card, .hw-on .vtar-back-marseille .vtar-card-back, .hw-on .vtar-back-marseille.vtar-discard-card, .hw-on .vtar-back-marseille.vtar-deck-switch-thumb,
.hw-on .vtar-back-marseille.vtar-drawbar-swatch { background-image: url('../tarot/assets/decks/marseille/back-halloween.svg'); }
.hw-on .vtar-back-lenormand .vtar-deck-card, .hw-on .vtar-back-lenormand .vtar-card-back, .hw-on .vtar-back-lenormand.vtar-discard-card, .hw-on .vtar-back-lenormand.vtar-deck-switch-thumb,
.hw-on .vtar-back-lenormand.vtar-drawbar-swatch { background-image: url('../tarot/assets/decks/lenormand/back-halloween.svg'); }
.hw-on .vtar-back-oracle .vtar-deck-card, .hw-on .vtar-back-oracle .vtar-card-back, .hw-on .vtar-back-oracle.vtar-discard-card, .hw-on .vtar-back-oracle.vtar-deck-switch-thumb,
.hw-on .vtar-back-oracle.vtar-drawbar-swatch { background-image: url('../tarot/assets/decks/oracle/back-halloween.svg'); }

@media (prefers-reduced-motion: reduce) {
  .hw-bat, .hw-navbat { display: none !important; }
  .hw-fog { animation: none; }
}

/* ============================================================
   UVOD - prvi posjet u Halloween tjednu (#hw-intro, js/halloween.js
   mountIntro). Počinje u NORMALNOJ temi (ljubičasta noć), završava crnim;
   tema stranice se zamijeni u završnom bljesku. Overlay je iznad ekrana
   učitavanja (99999) i iznad trake kolačića.
   ============================================================ */
#hw-intro {
  position: fixed;
  inset: 0;
  z-index: 100001;
  overflow: hidden;
  background: transparent;     /* na početku se kroz njega vidi normalni ekran učitavanja */
  pointer-events: none;
  transition: opacity 1.1s ease;
}
#hw-intro.hwi-covered { background: #06080f; }
/* ekran učitavanja skriva svu djecu <body> osim sebe, a traka kolačića
   ih poblijedi - uvod mora ostati vidljiv (specifičnost veća od oba pravila) */
html.aj-loading body > #hw-intro#hw-intro,
html.cc-blocking body > #hw-intro#hw-intro {
  visibility: visible !important;
  opacity: 1 !important;
}
html body > #hw-intro#hw-intro.hwi-out { opacity: 0 !important; }

.hwi-sky {
  position: absolute;
  inset: -4%;
  background:
    radial-gradient(circle at 50% 42%, rgba(61, 40, 120, 0.45) 0%, transparent 62%),
    radial-gradient(ellipse at 20% 10%, rgba(61, 40, 120, 0.3) 0%, transparent 50%),
    #06080f;
  opacity: 0;
}
.hwi-covered .hwi-sky { opacity: 1; }
/* „ispiranje boja": tamni neutralni sloj se pretopi preko neba (samo opacity -
   filter grayscale u pokretu je na mobitelu zapinjao) */
.hwi-sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #0b0b0d;
  opacity: 0;
  transition: opacity 2.8s ease;
}
.hwi-sky.hwi-gray::after { opacity: 0.78; }
.hwi-stars {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  animation: hwiTwinkle 3.2s ease-in-out infinite alternate;
}
@keyframes hwiTwinkle { from { opacity: 0.65; } to { opacity: 1; } }

/* isti realistični Mjesec kao u pozadini (canvas, stvarna faza) - dva gotova sloja */
.hwi-moon {
  position: absolute;
  opacity: 0;
  transform: scale(0.97);
  /* NE izlazi odozdo - postupno se stvori u sredini (~2 s); prije je sporo izlazio odozdo, predugo */
  transition: opacity 2s ease-in-out, transform 2.2s ease-out;
  will-change: transform, opacity;    /* iscrta se jednom, dalje ga samo pomiče kompozitor */
}
.hwi-moon.hwi-moon-in { opacity: 0.5; transform: none; }   /* prigušen (0.85 je bio presvijetao nakon prve munje) */
.hwi-ml { position: absolute; inset: 0; }
/* krvavi sloj: gotova crvena slika (renderMoon blood), pojavljuje se samo prozirnošću */
.hwi-ml-r {
  opacity: 0;
  transition: opacity 1.8s ease;
  will-change: opacity;
}
.hwi-moon-blood .hwi-ml-r { opacity: 1; }
/* obični sloj se istodobno ugasi - inače njegova blijeda noćna strana probija kroz krvavi */
.hwi-ml-n { transition: opacity 1.8s ease; will-change: opacity; }
.hwi-moon-blood .hwi-ml-n { opacity: 0; }
/* u drugom bljesku Mjesec postaje tamnosiv - isti kao u pozadini stranice */
.hwi-moon.hwi-moon-ghost { opacity: 0.15 !important; transition: none !important; }
.hwi-moon-ghost .hwi-ml-r { opacity: 0 !important; transition: none !important; }
.hwi-moon-ghost .hwi-ml-n { opacity: 1 !important; transition: none !important; }
/* dok je na ekranu rečenica, Mjesec se zatamni da se jedva vidi */
.hwi-moon.hwi-moon-ghost.hwi-moon-dimmable { transition: opacity 1.2s ease !important; }
.hwi-moon.hwi-moon-ghost.hwi-moon-dim { opacity: 0.04 !important; }
/* otkucaji srca - tamnocrveni rub ekrana (sporo, nije bljesak) */
.hwi-vig {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 110% 90% at 50% 50%, transparent 45%, rgba(70, 4, 8, 0.75) 100%);
  opacity: 0;
}
.hwi-vig-beat { animation: hwiBeat 1.05s ease-out 2; }
@keyframes hwiBeat {
  0% { opacity: 0; } 12% { opacity: 0.85; } 24% { opacity: 0.3; } 36% { opacity: 0.75; } 100% { opacity: 0.15; }
}
.hwi-bats { position: absolute; inset: 0; }
.hwi-bat { position: absolute; z-index: auto; }
/* jato: dvije gotove slike, mahanje = izmjena (samo opacity) */
.hwi-bf { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; }
.hwi-bf-a { animation: hwiFlapA 0.09s linear infinite; }
.hwi-bf-b { animation: hwiFlapB 0.09s linear infinite; }
@keyframes hwiFlapA { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes hwiFlapB { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }
.hwi-bolts {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hwi-b-glow { stroke: rgba(150, 165, 255, 0.12); }   /* bez filtera - sjaj su široki prozirni slojevi */
.hwi-b-glow2 { stroke: rgba(175, 185, 255, 0.22); }
.hwi-b-halo { stroke: rgba(215, 222, 255, 0.75); }
.hwi-b-core { stroke: #fff; }
/* osvjetljenje neba oko munje (pozicija = vrh munje, postavlja JS) */
.hwi-skyglow {
  position: absolute;
  top: -30vh;
  width: 120vmax;
  height: 110vh;
  margin-left: -60vmax;
  background: radial-gradient(ellipse at 50% 30%, rgba(190, 200, 255, 0.55), rgba(120, 130, 200, 0.18) 40%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.hwi-black {
  position: absolute;
  inset: 0;
  background: #040404;
  opacity: 0;
}
.hwi-text {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(90vw, 760px);
  transform: translate(-50%, -50%);
  margin: 0;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.4rem, 4.2vw, 2.6rem);
  letter-spacing: 0.02em;
  color: #b3a996;
  text-shadow: 0 0 24px rgba(122, 26, 30, 0.8);
  opacity: 0;
  filter: blur(6px);
  transition: opacity 0.9s ease, filter 1.2s ease;
}
.hwi-text.hwi-text-in { opacity: 1; filter: none; }
.hwi-flash {
  position: absolute;
  inset: 0;
  background: #f6f4ff;
  opacity: 0;
}

/* Mjesec na ekranu učitavanja (Halloween tjedan): isti tamnosivi kao u pozadini
   (i kao na kraju uvoda), iza loga i trake (zato logo/traka dobivaju z-index). */
.ajl-hwmoon {
  position: absolute;
  opacity: 0.15;
  pointer-events: none;
  animation: hwiMoonFade 1.4s ease both;
}
.ajl-hwmoon.ajl-hwmoon-instant { animation: none; }
@keyframes hwiMoonFade { from { opacity: 0; } to { opacity: 0.15; } }
.hw-on #aj-loader > .ajl-logo,
.hw-on #aj-loader > .ajl-bar { position: relative; z-index: 1; }

/* Lice Jack-o'-lanterna iza hero loga (js/halloween.js initJack): vidi se SAMO
   oko završnog bljeska ispisa „Potpisa" - naglo se upali na vrhu bljeska
   (~0,35 s nakon 'aj:hero-flash') pa polako izblijedi. Sivi obris sa sivim
   sjajem (narančasta se nije uklapala u paletu). Animira se samo opacity. */
.hw-on #home .hero h1.hero-logo { position: relative; }
.hw-on #home .hero h1.hero-logo > .hero-logo-art { position: relative; z-index: 1; }
.hw-jack {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 92%;
  aspect-ratio: 116 / 88;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.hw-jack svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: #625f68;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(110, 106, 118, 0.6)) drop-shadow(0 0 16px rgba(100, 96, 106, 0.65)) drop-shadow(0 0 32px rgba(85, 82, 92, 0.5));
}
.hw-jack.hw-jack-on { animation: hwJack 0.56s both; }
@keyframes hwJack {
  0%   { opacity: 0; animation-timing-function: steps(1, end); }
  59%  { opacity: 0.75; animation-timing-function: cubic-bezier(0.35, 0, 0.6, 1); }
  100% { opacity: 0; }
}
/* Bljesak CIJELE stranice u trenutku kad se upali lice (js/halloween.js initJack):
   ista duljina i isti trenutak vrha (59 %) kao hwJack, ali se gasi brže - kao
   munja. Hladna blijeda bijela kao bljesak u uvodu (.hwi-flash), ne žuta. */
.hw-pageflash {
  position: fixed;
  inset: 0;
  z-index: 2500;
  background: #e9e6f0;
  opacity: 0;
  pointer-events: none;
}
.hw-pageflash.hw-pageflash-on { animation: hwPageFlash 0.56s both; }
@keyframes hwPageFlash {
  0%   { opacity: 0; animation-timing-function: steps(1, end); }
  59%  { opacity: 0.55; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hw-jack, .hw-pageflash { display: none; } }

/* Rečenica ispod loga na početnoj u Halloween fontu: IM Fell DW Pica kurziv
   (Igino Marini, SIL Open Font License) - staroknjiški kurziv iz 17. st.
   PUNI TTF (~240 KB), ne Googleov woff2: web podskup ima samo osnovnu latinicu
   pa nema „đ" (rečenica ima „između"). Almendra je odbačena iz istog razloga,
   Griffy jer se nije svidio. Preglednik skine font tek kad ga neko pravilo
   stvarno koristi - dakle samo pod .hw-on. */
@font-face {
  font-family: 'IM Fell DW Pica';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/web/IMFellDWPica-Italic.ttf) format('truetype');
}
.hw-on #home .hero-desc {
  font-family: 'IM Fell DW Pica', 'Josefin Sans', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, min(4vw, 2.3vh), 1.4rem);
  letter-spacing: 0.01em;
  line-height: 1.55;
  opacity: 0.85;
}
/* duga prva rečenica se na mobitelu prelomi - balance da ne ostane „tanak." sam u redu */
.hw-on #home .hero-desc > span { text-wrap: balance; }