/* =========================================================
🎃 HALLOWEEN STYLE – wersja z pełną dokumentacją techniczną
===========================================================

Autor: Marek Świda (Coltex)
Przeznaczenie: ekran logowania e-coltex
Cel: dodać lekki motyw Halloween wyłącznie przy użyciu CSS
(bez żadnych skryptów JavaScript)
========================================================= */

/* =========================================================
🔸 1. TŁO – delikatny efekt świetlny w tle
==========================================

* Tworzy miękkie, pomarańczowe światło w górnej części ekranu.
* Używa pseudo-elementu ::before, więc nie wymaga dodatkowego HTML.
* Efekt jest całkowicie pasywny (nie przeszkadza w klikaniu).
  ========================================================= */
  body::before {
  content: ""; /* obowiązkowe – tworzy wirtualny element do stylizacji */
  position: fixed; /* przymocowuje efekt do okna przeglądarki, nie przewija się */
  inset: 0; /* skrót dla top/right/bottom/left = 0; pełne pokrycie ekranu */
  background: radial-gradient(
  circle at 50% 20%,              /* gradient okrągły, środek na środku szerokości i 20% wysokości */
  rgba(255,140,0,0.15),           /* kolor: pomarańczowy z przeźroczystością 15% */
  transparent 75%                 /* przejście w przezroczystość po 75% promienia */
  );
  z-index: 0; /* ustawia tło pod wszystkimi innymi elementami */
  pointer-events: none; /* element nie reaguje na zdarzenia myszki – przezroczysty dla kliknięć */
  }

/* =========================================================
🔸 2. LOGIN (tytuł + przycisk)
==============================

Ta sekcja stylizuje nagłówek logowania (tytuł) oraz przycisk „Zaloguj”.
Dodaje emotkę dyni 🎃 i delikatne efekty świetlne.
========================================================= */

/* Nagłówek formularza logowania */
.login-title {
position: relative; /* umożliwia pozycjonowanie pseudo-elementu ::after względem tytułu */
color: #343a40; /* neutralny, ciemnoszary kolor tekstu */
font-family: 'Segoe UI', sans-serif !important; /* nowoczesny, systemowy font */
text-shadow: 0 0 8px rgba(255, 140, 0, 0.25); /* delikatny pomarańczowy cień */
}

/* Dodanie ikony dyni 🎃 po tytule */
.login-title::after {
content: " 🎃"; /* tekst (emoji) dodany po tytule */
font-size: 1.3rem; /* lekko większy rozmiar dla wyróżnienia */
position: relative; /* pozwala użyć top/bottom do drobnej korekty pionowej */
top: -1px; /* lekkie uniesienie dyni względem linii tekstu */
animation: glow 1.8s ease-in-out infinite alternate;
/* animacja „pulsowania” koloru i światła, definiowana niżej */
}

/* Przyciski logowania – przejścia kolorów i cieni */
.login-btn {
transition: background-color 0.3s ease, box-shadow 0.3s ease;
/* definiuje płynność zmian po najechaniu myszką */
}

/* Po najechaniu przycisk świeci na pomarańczowo */
.login-btn:hover {
background-color: #ff8800 !important; /* zmiana koloru tła */
box-shadow: 0 0 10px rgba(255,140,0,0.5); /* pomarańczowa poświata */
}

/* =========================================================
🔸 3. PAJĄK – główny element ozdobny
====================================

Składa się z trzech warstw:
1️⃣ .halloween.motif → kontener (niezależny od reszty layoutu)
2️⃣ .spider-line → pionowa nitka, która się buja
3️⃣ .spider-body → ciało pająka (emoji lub ikona)
========================================================= */

/* Kontener motywu – trzyma całość (nitkę + pająka) */
.halloween.motif {
position: fixed; /* przymocowany do widoku, nie przewija się */
top: 0; /* zaczyna się od górnej krawędzi */
left: 0; /* lewa krawędź ekranu */
width: 100%; /* obejmuje całą szerokość okna – ułatwia pozycjonowanie */
height: 0; /* faktyczna wysokość niepotrzebna, nitka ma własną */
z-index: 4; /* powyżej tła, ale pod treścią formularza */
pointer-events: none; /* nie blokuje kliknięć użytkownika */
}

/* 🎯 Pozycjonowanie pająka – umieszcza go w prawej 1/3 ekranu */
.halloween .spider-line {
left: auto; /* wyłącza domyślne „50% od lewej” */
right: 33%; /* ustawia odległość od prawej krawędzi okna */
}

/* Główna nitka (cała animowana struktura bujania) */
.spider-line {
position: absolute; /* pozycjonowana względem kontenera .halloween */
top: 0; /* zaczyna się od górnej krawędzi */
left: 50%; /* ustawia się dokładnie pośrodku kontenera (chyba że nadpisane wyżej) */
width: 1px; /* cienka jak włos – jedna pikselowa linia */
transform-origin: top center; /* obrót wokół górnego środka (jak wahadło) */
animation: spiderSwing 10s ease-in-out infinite; /* płynne kołysanie w prawo i lewo */
}

/* Sama nitka (rysowana jako pseudo-element) */
.spider-line::before {
content: ""; /* pseudo-element musi coś mieć, aby się narysował */
position: absolute; /* pozycjonowany względem .spider-line */
top: 0; /* zaczyna się od góry nitki */
left: 50%; /* ustawiony na środek */
width: 1px; /* szerokość nitki */
height: 0; /* startowa długość – animacja ją rozwija */
background: linear-gradient(
to bottom,
rgba(0,0,0,0.18),  /* ciemniejszy u góry */
rgba(0,0,0,0.05)   /* jaśniejszy u dołu */
); /* gradient daje efekt delikatnej przezroczystości */
transform: translateX(-50%); /* dokładne wyśrodkowanie */
animation: spiderLineMotion 10s ease-in-out infinite; /* animacja wydłużania/kurczenia nici */
}

/* Ciało pająka (emoji 🕷️) */
.spider-body {
position: absolute; /* niezależnie od innych elementów */
top: 0; /* start w punkcie 0 nitki */
left: 50%; /* centrowanie w poziomie */
transform: translateX(-50%); /* korekta – przesuwa o połowę własnej szerokości */
font-size: 2rem; /* rozmiar emoji (około 32px) */
animation: spiderBodyMotion 10s ease-in-out infinite; /* animacja góra–dół */

/* Efekt wizualny – cień i lekki „połysk” */
text-shadow:
2px 2px 4px rgba(0, 0, 0, 0.25),  /* cień w prawo i w dół */
-1px -1px 3px rgba(0, 0, 0, 0.15),/* cień w górę i w lewo */
0 0 6px rgba(0, 0, 0, 0.2);       /* delikatna poświata */
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2)); /* dodatkowy efekt głębi */
}

/* =========================================================
🔸 4. ANIMACJE
==============

Wszystkie ruchome elementy (blask, nitka, ciało pająka)
są kontrolowane przez animacje CSS.
========================================================= */

/* --- pulsujący blask dyni --- */
@keyframes glow {
from {
opacity: 0.4; /* zaczyna przy 40% widoczności */
filter: drop-shadow(0 0 3px orange); /* mniejsza poświata */
}
to {
opacity: 1; /* pełna widoczność */
filter: drop-shadow(0 0 6px orange); /* mocniejszy blask */
}
}

/* --- bujanie pająka (rotacja wokół nitki) --- */
@keyframes spiderSwing {
0%, 100% { transform: rotate(0deg); } /* spoczynek (pionowo) */
45% { transform: rotate(0deg); }      /* zatrzymanie na chwilę */
55% { transform: rotate(4deg); }      /* wychylenie w prawo */
65% { transform: rotate(-4deg); }     /* wychylenie w lewo */
75% { transform: rotate(3deg); }      /* powrót do prawej */
85% { transform: rotate(-3deg); }     /* lekkie bujnięcie w lewo */
}

/* --- długość nici – rozciąganie i kurczenie --- */
@keyframes spiderLineMotion {
0%   { height: 0; opacity: 0.8; }      /* start: krótka nitka, prawie niewidoczna */
20%  { height: 150px; opacity: 1; }    /* pająk zjeżdża w dół */
40%  { height: 320px; opacity: 1; }    /* maksymalne rozwinięcie */
55%  { height: 330px; opacity: 1; }    /* lekkie „napięcie” */
65%  { height: 325px; opacity: 1; }
75%  { height: 330px; opacity: 1; }
85%  { height: 325px; opacity: 1; }
100% { height: 0; opacity: 0.8; }      /* powrót do góry */
}

/* --- ruch ciała pająka góra–dół (synchronizacja z nitką) --- */
@keyframes spiderBodyMotion {
0%   { transform: translate(-50%, 0); opacity: 0.8; }     /* na górze */
20%  { transform: translate(-50%, 150px); opacity: 1; }   /* w połowie drogi */
40%  { transform: translate(-50%, 320px); opacity: 1; }   /* najniżej */
55%  { transform: translate(-50%, 330px); opacity: 1; }   /* lekko rozciągnięty */
65%  { transform: translate(-50%, 325px); opacity: 1; }
75%  { transform: translate(-50%, 330px); opacity: 1; }
85%  { transform: translate(-50%, 325px); opacity: 1; }
100% { transform: translate(-50%, 0); opacity: 0.8; }     /* powrót na górę */
}

/* =========================================================
🔸 5. DROBIAZGI
===============

Ukrywamy testową biedronkę (ladybug), aby nie kolidowała
z innymi elementami motywu.
========================================================= */
.ladybug {
display: none !important; /* zawsze ukryta, nawet jeśli ma własne reguły */
}