/* Intro „draw" — kurzor nakreslí logo (?intro=draw). Načítava sa len na index.html.
   Vrstvy (js/intro-draw.js), zdola nahor:
     .idraw__stage  — pozadie + krieda + plné logo; pri výbuchu dostane masku s kruhovou dierou
     .idraw__chalk  — lúče kliknutia (zrnité, mimo diery)
     .idraw__fx     — bodka → fialová záplava (prstenec, ktorého vnútro je diera do hero)
     .idraw__cursor — kresliaci trojuholník
   Farby len cez premenné moodu: ceruzka/bodka/záplava --Pill-bg (v purple móde biela), logo --White,
   kurzor --Coming-soon (= farba img/cursor.svg, v purple móde biela ako cursor_w.svg). */

/* pozadie preberá .idraw__bg — overlay musí byť priehľadný, inak by diera nič neodkryla */
#intro-overlay.idraw {
  background: transparent;
}
#intro-overlay.idraw .intro-logo-svg {
  display: none;
}

.idraw__root,
.idraw__stage,
.idraw__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.idraw__bg {
  background: var(--Background);
}

.idraw__layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* výnimka z mobilnej poistky `svg { max-width: 100% }` (≤ 480px) */
  max-width: none !important;
  overflow: visible;
  pointer-events: none;
}

/* zrnitosť kriedy — rovnaká statická šumová maska ako .pencil__svg / .page-transition */
.idraw__pencil,
.idraw__chalk {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3.4 0 0 0 -0.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3.4 0 0 0 -0.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size: 160px 160px;
          mask-size: 160px 160px;
}

/* moodswitch.js vkladá `svg path { fill: var(--SVG-fill) !important; transition: fill … }` —
   ťahy nesmú byť vyplnené ani prelínané, preto ID v selektore + !important */
#intro-overlay .idraw__stroke {
  fill: none !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: none !important;
}
#intro-overlay .idraw__pencil .idraw__stroke,
#intro-overlay .idraw__glowlayer .idraw__stroke {
  stroke: var(--Pill-bg);
}
#intro-overlay .idraw__fill {
  stroke: var(--White);
}

.idraw__ray {
  stroke: var(--Pill-bg);
  stroke-linecap: round;
  visibility: hidden;
}
.idraw__dust {
  fill: var(--Pill-bg);
}
.idraw__ring {
  fill: none;
  stroke: var(--Pill-bg, var(--Light-purple));
}

/* kresliaci kurzor — box 90 px (2× skutočného kurzora), mierku a polohu hrotu riadi JS */
.idraw__cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
  will-change: transform, opacity;
  transform: translate3d(-200px, -200px, 0);
}
.idraw__cursor svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none !important;
  overflow: visible;
  /* žiara ako vo filtri img/cursor.svg (σ 62 z 784 → ~7 px pri 90 px boxe), v intre o kúsok
     svetlejšia (--Pill-bg), nech hlavný hrdina nezanikne na tmavom pozadí */
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--Pill-bg) 70%, transparent));
}
#intro-overlay .idraw__cursor path {
  fill: var(--Coming-soon) !important;
  transition: none !important;
}

/* moodswitch.js pri načítaní pulzuje opacitou celého body (.mood-changing, 0.6 s) — počas
   intra by stlmil práve začiatok kresby */
body.is-intro-draw.mood-changing {
  animation: none !important;
}

/* skutočný kurzor webu (#customCursor, z-index 9999) — počas intra skrytý, kým sa myš nepohne;
   potom polopriehľadný „duch", plne sa ukáže, keď s ním kresliaci kurzor splynie */
body.idraw-cur #customCursor {
  transition: opacity 0.22s ease;
}
body.idraw-nocursor #customCursor {
  opacity: 0;
}
body.idraw-nocursor.idraw-ghost #customCursor {
  opacity: 0.45;
}