/* =====================================================================
   Učiteľský Šuflík – vzhľad „Jeseň“
   Načítava sa LEN pri dizajne Jeseň, a to až PO system.css a zosit.css: rozloženie (strana zošita,
   krúžky, linajky) ostáva rovnaké, mení sa nálada.
     Tmavý režim:  jesenná noc – fialová strana, tekvicová oranžová, svetlo sviečky, medené krúžky.
     Svetlý režim: starý papier – krémová strana, hnedý atrament, pálená oranžová.
   Akcent: ružová (--color-pink) sa v Jeseni mení na tekvicovú oranžovú, ceruzková na zlatú sviečku.
   Prepína sa v Admin paneli → Vzhľad webu (alebo si ho návštevník zvolí v Nastaveniach účtu).
   ===================================================================== */

:root {
    /* Strana zošita */
    --zs-desk: #0b0716;
    --zs-page: #1c1432;
    --zs-page-2: #140e26;
    --zs-rule: rgba(253, 186, 116, 0.07);
    --zs-margin: rgba(249, 115, 22, 0.5);
    --zs-glow-1: rgba(249, 115, 22, 0.1);
    --zs-glow-2: rgba(168, 85, 247, 0.08);
    --zs-glow-3: rgba(234, 88, 12, 0.06);
    --zs-page-edge: rgba(249, 115, 22, 0.12);
    --zs-nav: rgba(24, 17, 42, 0.88);
    --zs-nav-border: rgba(249, 115, 22, 0.2);
    --zs-footer: rgba(11, 7, 22, 0.94);

    /* Povrchy: nočná fialová */
    --m-bg: #140e26;
    --m-surface: #1e1636;
    --m-surface-2: #241b40;
    --m-input: #150f29;
    --m-border: rgba(190, 150, 230, 0.16);
    --m-border-strong: rgba(190, 150, 230, 0.28);
    --color-ink: #150f29;
    --color-slate-950: #150f29;
    --color-slate-900: #1e1636;
    --color-slate-800: #2d2349;
    --color-slate-700: #3e315f;
    --color-slate-600: #5d4e80;
    --color-slate-500: #a092bb;
    --color-slate-400: #bdb1d3;
    --color-slate-300: #d9d0e8;
    --color-slate-200: #ece6f4;
    --color-slate-100: #f7f3fb;

    /* Akcenty: tekvica, sviečka, mätová ostáva pre „zadarmo / hotovo“ */
    --color-pink: #ff8a3d;
    --color-pink-dark: #f97316;
    --color-pencil: #fbbf24;
    --su-pink: #ff8a3d;
    --su-pencil: #fbbf24;
    --jz-on-accent: #1d1206;     /* text na oranžovom tlačidle – tmavý, kontrast 8 : 1 */
    --su-pink-solid: var(--color-pink);
    --su-pink-solid-hover: var(--color-pink-dark);
}

[data-theme="light"] {
    --zs-desk: #e6d8bf;
    --zs-page: #fcf6ea;
    --zs-page-2: #f8efdd;
    --zs-rule: rgba(150, 90, 40, 0.14);
    --zs-margin: rgba(194, 65, 12, 0.42);
    --zs-glow-1: rgba(249, 115, 22, 0.07);
    --zs-glow-2: rgba(168, 85, 247, 0.04);
    --zs-glow-3: rgba(234, 88, 12, 0.05);
    --zs-page-edge: rgba(90, 50, 20, 0.12);
    --zs-nav: rgba(252, 246, 234, 0.92);
    --zs-nav-border: rgba(90, 50, 20, 0.12);
    --zs-footer: #f2e7d3;

    --m-bg: #f8efdd;
    --m-surface: #fffcf6;
    --m-surface-2: #fdf7ec;
    --m-input: #fbf5ea;
    --m-border: rgba(90, 50, 20, 0.11);
    --m-border-strong: rgba(90, 50, 20, 0.2);
    --color-white: #26180e;          /* nadpisy – hnedý atrament */
    --color-ink: #fcf6ea;
    --color-slate-950: #f7eedf;
    --color-slate-900: #fffcf6;
    --color-slate-800: #eadbc3;
    --color-slate-700: #dbc7a8;
    --color-slate-600: #ae9a80;
    --color-slate-500: #6f5b48;      /* 5,8 : 1 na krémovej */
    --color-slate-400: #5a4838;
    --color-slate-300: #46372a;
    --color-slate-200: #35281d;
    --color-slate-100: #261a11;
    --color-slate-50: #1d130b;

    --color-pink: #a33508;           /* pálená oranžová – biely text 6,6 : 1 */
    --color-mint: #19663a;
    --color-mint-dark: #145430;
    --su-pink-solid: var(--color-pink);
    --su-pink-solid-hover: var(--color-pink-dark);
    --color-pink-dark: #a8380a;
    --color-pencil: #855200;
    --su-pink: #a33508;
    --su-pencil: #855200;
    --jz-on-accent: #ffffff;
}

/* Na tekvicovom tlačidle v tmavom režime je tmavý text (biely by mal slabý kontrast) */
:root:not([data-theme="light"]) :is(.bg-pink, .bg-pink-dark, .from-pink, .bg-\[\#ED5686\], .bg-\[\#d94875\]),
:root:not([data-theme="light"]) [class*="hover:bg-pink"]:hover { --color-white: var(--jz-on-accent); }
:root:not([data-theme="light"]) .bg-pink .text-white, :root:not([data-theme="light"]) .bg-pink.text-white { color: var(--jz-on-accent); }

/* Logo: šuflík na tekvicovom štvorci */
:root:not([data-theme="light"]) a.group > span.bg-pink { box-shadow: 0 8px 22px -8px rgba(255, 138, 61, 0.6); }

/* Medené krúžky väzby */
.bg-notebook::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='42'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fde3c4'/%3E%3Cstop offset='.35' stop-color='%23a0623a'/%3E%3Cstop offset='1' stop-color='%231c0d06'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='34' cy='22' r='5.4' fill='%2305020a'/%3E%3Ccircle cx='34' cy='22' r='5.4' fill='none' stroke='%233b2440' stroke-width='1'/%3E%3Cpath d='M34 19.5 C 24 13, 9 13, 5 21 C 9 29, 24 29, 34 24.5' fill='none' stroke='%2308040c' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M34 19.5 C 24 13, 9 13, 5 21 C 9 29, 24 29, 34 24.5' fill='none' stroke='url%28%23g%29' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (max-width: 1023px) {
    .bg-notebook::after {
        background-image:
            radial-gradient(700px 420px at 50% -8%, var(--zs-glow-1), transparent 62%),
            radial-gradient(600px 500px at 110% 40%, var(--zs-glow-2), transparent 60%),
            repeating-linear-gradient(to bottom, transparent 0, transparent 33px, var(--zs-rule) 33px, var(--zs-rule) 34px),
            linear-gradient(180deg, var(--zs-page) 0%, var(--zs-page-2) 100%);
    }
}

/* Nadpis „to najlepšie“: zlatá → tekvicová (ako svetlo sviečky) */
.text-gradient { background-image: linear-gradient(120deg, #fde68a 0%, #fbbf24 35%, #ff8a3d 100%); }
[data-theme="light"] .text-gradient { background-image: linear-gradient(120deg, #a16207 0%, #c2410c 60%, #9a3412 100%); }

/* Karta materiálu: pri prejdení myšou teplá žiara namiesto ružovej */
.material-card:hover {
    border-color: color-mix(in srgb, var(--color-pink) 45%, transparent);
    box-shadow: var(--m-shadow), 0 26px 50px -26px color-mix(in srgb, var(--color-pink) 60%, transparent);
}
.material-card .tape { background: color-mix(in srgb, var(--color-pencil) 30%, transparent); }

/* Kriedové písmo dostane teplý jesenný nádych */
.zs-chalk { color: rgba(254, 215, 170, 0.68); text-shadow: 0 0 12px rgba(249, 115, 22, 0.45); }
[data-theme="light"] .zs-chalk { color: rgba(120, 60, 20, 0.5); text-shadow: none; }

/* Kresby v svetlom režime – svetlé ťahy (pavučina, duch) stmavíme, aby boli na papieri vidieť */
[data-theme="light"] .zs-layer { opacity: 0.7; }
[data-theme="light"] .zs-layer [stroke="#e9d5ff"] { stroke: #8b6bb0; }
[data-theme="light"] .zs-layer [stroke="#e2e8f0"], [data-theme="light"] .zs-layer [fill="#e2e8f0"] { stroke: #9a8a7a; }
[data-theme="light"] .zs-layer [fill="#e2e8f0"] { fill: #efe6d8; }
[data-theme="light"] .jz-glow-ghost { filter: drop-shadow(0 2px 6px rgba(90, 50, 20, 0.25)); }
[data-theme="light"] .jz-glow-orange { filter: drop-shadow(0 0 6px rgba(234, 88, 12, 0.45)); }
[data-theme="light"] .jz-halo { opacity: 0.35; }

.jz-glow-orange { filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.8)); }
.jz-glow-purple { filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.75)); }
.jz-glow-ghost { filter: drop-shadow(0 0 8px rgba(241, 245, 249, 0.55)); }

/* ---------------------------------------------------------------------
   Padajúce lístie: obal padá dolu, list vnútri sa kolíše a otáča
   --------------------------------------------------------------------- */
.jz-leaf { position: absolute; top: -70px; will-change: transform; animation: jz-fall var(--d, 18s) linear infinite; animation-delay: var(--delay, 0s); }
.jz-leaf > svg { display: block; will-change: transform; animation: jz-sway var(--s, 4s) ease-in-out infinite alternate; }
@keyframes jz-fall {
    0% { transform: translate3d(0, 0, 0); opacity: 0; }
    6% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translate3d(var(--drift, 40px), calc(100vh + 140px), 0); opacity: 0; }
}
@keyframes jz-sway {
    0% { transform: translateX(-12px) rotate(-25deg); }
    100% { transform: translateX(12px) rotate(35deg); }
}

/* ---------------------------------------------------------------------
   Netopiere preletia cez obrazovku a mávajú krídlami
   --------------------------------------------------------------------- */
.jz-bat { position: absolute; left: 0; will-change: transform; animation: jz-cross var(--d, 24s) linear infinite; animation-delay: var(--delay, 0s); }
.jz-bat.jz-back { animation-direction: reverse; }
.jz-bat.jz-back .jz-bat-bob { scale: -1 1; }
.jz-bat-bob { display: block; animation: jz-bob 4s ease-in-out infinite alternate; }
@keyframes jz-cross { from { transform: translate3d(-14vw, 0, 0); } to { transform: translate3d(114vw, -5vh, 0); } }
@keyframes jz-bob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(10px) rotate(3deg); } }
.jz-wing { transform-box: fill-box; animation: jz-flap 0.6s ease-in-out infinite alternate; }
.jz-wing-l { transform-origin: 100% 40%; }
.jz-wing-r { transform-origin: 0% 40%; }
@keyframes jz-flap { from { transform: scaleY(1); } to { transform: scaleY(0.5); } }

/* Tekvica – sviečka vnútri bliká */
.jz-flicker { animation: jz-flicker 4s steps(1, end) infinite; }
@keyframes jz-flicker {
    0%, 100% { opacity: 1; } 12% { opacity: 0.78; } 18% { opacity: 0.96; } 34% { opacity: 0.7; }
    40% { opacity: 1; } 63% { opacity: 0.85; } 70% { opacity: 0.62; } 76% { opacity: 0.95; }
}

/* Duch sa vznáša a mizne */
.jz-ghost { animation: jz-ghost 12s ease-in-out infinite; }
@keyframes jz-ghost {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--r, -4deg)); opacity: 0.6; }
    50% { transform: translate3d(0, -8px, 0) rotate(calc(var(--r, -4deg) + 3deg)); opacity: 0.9; }
}

/* Pavúk sa spúšťa po vlákne */
.jz-drop { animation: jz-drop 9s ease-in-out infinite alternate; }
@keyframes jz-drop { from { transform: translateY(0); } to { transform: translateY(30px); } }

/* Mesiac jemne žiari */
.jz-halo { position: absolute; inset: -55%; border-radius: 9999px; background: radial-gradient(closest-side, rgba(254, 243, 199, 0.32), rgba(251, 191, 36, 0.08) 55%, transparent 72%); animation: jz-halo 6s ease-in-out infinite alternate; }
@keyframes jz-halo { from { opacity: 0.5; transform: scale(0.95); } to { opacity: 0.8; transform: scale(1.03); } }

@media (prefers-reduced-motion: reduce) {
    .jz-leaf, .jz-bat { display: none; }
    .jz-flicker, .jz-ghost, .jz-drop, .jz-halo, .jz-wing, .jz-bat-bob { animation: none !important; }
}