/* ==========================================================================
   AIOpenCamp — Aurora theme
   Theme layer over the Tailwind utilities used across all templates: it
   remaps the shared slate surfaces to glass, adds the aurora background and
   gives each section (body[data-section]) its own accent trio.
   Selectors are prefixed with `html` so they outrank the Tailwind CDN styles,
   which are injected after this file.
   ========================================================================== */

:root {
    --aoc-bg: #050c14;
    --aoc-ink: #eef4f8;
    --aoc-muted: #8fa3b3;
    --aoc-glass: rgba(255, 255, 255, 0.035);
    --aoc-glass-2: rgba(255, 255, 255, 0.06);
    --aoc-surface: rgba(12, 23, 35, 0.82);
    --aoc-edge: rgba(255, 255, 255, 0.09);
    --aoc-edge-2: rgba(255, 255, 255, 0.16);
    --aoc-gold: #f5b041;
    /* Accent trio as RGB channels, so they can be used as rgb(var(--a1) / .5) */
    --a1: 45 212 191;   /* teal */
    --a2: 139 92 246;   /* violet */
    --a3: 245 176 65;   /* gold */
}

/* ---------- Per-section accents (content-aware) ---------- */
body[data-section="courses"]   { --a1: 45 212 191;  --a2: 56 189 248;  --a3: 245 176 65; }
body[data-section="projects"]  { --a1: 139 92 246;  --a2: 99 102 241;  --a3: 45 212 191; }
body[data-section="blog"]      { --a1: 167 139 250; --a2: 244 114 182; --a3: 245 176 65; }
body[data-section="ai_tools"]  { --a1: 34 211 238;  --a2: 45 212 191;  --a3: 139 92 246; }
body[data-section="software"]  { --a1: 99 102 241;  --a2: 139 92 246;  --a3: 34 211 238; }
body[data-section="library"]   { --a1: 245 176 65;  --a2: 234 88 12;   --a3: 45 212 191; }
body[data-section="shop"]      { --a1: 245 176 65;  --a2: 244 114 182; --a3: 139 92 246; }
body[data-section="trainings"] { --a1: 52 211 153;  --a2: 45 212 191;  --a3: 245 176 65; }
body[data-section="services"]  { --a1: 56 189 248;  --a2: 139 92 246;  --a3: 245 176 65; }
body[data-section="feedback"]  { --a1: 245 176 65;  --a2: 45 212 191;  --a3: 139 92 246; }

/* ---------- Base ---------- */
html { background: var(--aoc-bg); }
html body {
    background: transparent;
    color: var(--aoc-ink);
    font-family: "Alexandria", -apple-system, "Segoe UI", Roboto, Tahoma, Arial, sans-serif;
}
html h1, html h2, html h3, html h4 { font-weight: 600; letter-spacing: -0.005em; }
html .font-black { font-weight: 800; }
html .font-bold { font-weight: 600; }
::selection { background: rgb(var(--a1) / 0.35); color: #fff; }

/* ---------- Aurora background ---------- */
.aoc-aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aoc-aurora i {
    position: absolute; border-radius: 50%;
    animation: aoc-drift 26s ease-in-out infinite alternate;
    will-change: transform;
}
.aoc-aurora i:nth-child(1) { width: 70vw; height: 70vw; top: -30vw; right: -18vw; background: radial-gradient(closest-side, rgb(var(--a1) / 0.30), transparent); }
.aoc-aurora i:nth-child(2) { width: 60vw; height: 60vw; bottom: -28vw; left: -16vw; background: radial-gradient(closest-side, rgb(var(--a2) / 0.30), transparent); animation-delay: -9s; }
.aoc-aurora i:nth-child(3) { width: 40vw; height: 40vw; top: 20vh; left: 12vw; background: radial-gradient(closest-side, rgb(var(--a3) / 0.14), transparent); animation-delay: -16s; }
.aoc-aurora::after {
    content: ""; position: absolute; inset: 0; opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes aoc-drift { to { transform: translate(5vw, 4vw) scale(1.12); } }

/* Light trails (landing hero) */
.aoc-ribbons { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.aoc-ribbons path { fill: none; stroke-linecap: round; }
.aoc-trail { stroke-dasharray: 120 1600; animation: aoc-run 7s linear infinite; }
.aoc-trail.t2 { animation-duration: 9s; animation-delay: -3s; }
.aoc-trail.t3 { animation-duration: 11s; animation-delay: -6s; }
@keyframes aoc-run { from { stroke-dashoffset: 1720; } to { stroke-dashoffset: 0; } }

/* ---------- Glass panels (sidebar, topbar, navbar, footer) ---------- */
html .aoc-panel {
    background: rgba(6, 14, 23, 0.62);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
    border-color: var(--aoc-edge);
}
html .aoc-panel-solid { background: rgba(6, 14, 23, 0.94); border-color: var(--aoc-edge); }

/* ---------- Surface remaps (Tailwind slate → glass) ---------- */
html .bg-slate-800\/50, html .bg-slate-800\/40, html .bg-slate-800\/30,
html .bg-slate-900\/50, html .bg-slate-900\/40, html .bg-slate-900\/30, html .bg-slate-900\/20,
html .card, html .glass-card, html .tech-card { background-color: var(--aoc-glass); }
html .bg-slate-800, html .bg-slate-800\/80, html .bg-slate-800\/60,
html .bg-slate-900\/60, html .bg-slate-900\/80, html .bg-slate-950\/60, html .bg-slate-950\/70 { background-color: var(--aoc-surface); }
html .bg-slate-900 { background-color: #07111b; }
html .bg-slate-950 { background-color: #040a11; }
html .bg-slate-700\/50, html .bg-slate-700\/30, html .bg-slate-700\/60 { background-color: rgba(255, 255, 255, 0.07); }
html .bg-slate-700 { background-color: #172636; }
html .bg-slate-600 { background-color: #22364a; }

html .border-slate-700\/50, html .border-slate-700\/30, html .border-slate-700\/40, html .border-slate-700\/60,
html .border-slate-700, html .border-slate-800\/80, html .border-slate-800\/60, html .border-slate-800,
html .card, html .glass-card, html .tech-card { border-color: var(--aoc-edge); }
html .border-slate-600, html .border-slate-600\/50 { border-color: var(--aoc-edge-2); }
@media (min-width: 768px) {
    html .md\:border-slate-700\/50 { border-color: var(--aoc-edge); }
}
html .card, html .glass-card, html .tech-card { border-width: 1px; border-style: solid; border-radius: 1.25rem; }

html .hover\:bg-slate-800:hover, html .hover\:bg-slate-800\/40:hover,
html .hover\:bg-slate-700\/50:hover, html .hover\:bg-slate-700\/30:hover { background-color: rgba(255, 255, 255, 0.07); }
html .hover\:bg-slate-700:hover, html .hover\:bg-slate-600:hover { background-color: rgba(255, 255, 255, 0.11); }
html .hover\:border-slate-600:hover, html .hover\:border-slate-500:hover { border-color: rgb(var(--a1) / 0.45); }

/* Primary buttons: gold gradient with a soft glow */
html .bg-amber-500 {
    background-image: linear-gradient(135deg, #fde68a, var(--aoc-gold));
    box-shadow: 0 8px 26px -10px rgba(245, 176, 65, 0.65);
}
html .bg-amber-500:hover { filter: brightness(1.07); }

/* Inputs */
html input:not([type="checkbox"]):not([type="radio"]):focus,
html textarea:focus, html select:focus {
    border-color: rgb(var(--a1) / 0.6);
    box-shadow: 0 0 0 3px rgb(var(--a1) / 0.15);
    outline: none;
}
html select option { background-color: #0b1724; color: var(--aoc-ink); }

/* ---------- List cards ---------- */
html .aoc-card { position: relative; isolation: isolate; transition: transform 0.35s ease, box-shadow 0.35s ease; }
/* Gradient edge (masked 1px ring) */
html .aoc-card::after {
    content: ""; position: absolute; inset: 0; z-index: 30; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(140deg, rgb(var(--a1) / 0.7), rgba(255, 255, 255, 0.05) 45%, rgb(var(--a2) / 0.6));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity 0.35s ease;
}
/* Pointer spotlight — --x/--y set by the script in _aurora_bg.html */
html .aoc-card::before {
    content: ""; position: absolute; inset: 0; z-index: 25; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
    background: radial-gradient(340px circle at var(--x, 50%) var(--y, 50%), rgb(var(--a1) / 0.13), transparent 60%);
}
html .aoc-card:hover { box-shadow: 0 26px 50px -28px rgb(var(--a1) / 0.55); }
html .aoc-card:hover::after, html .aoc-card:hover::before { opacity: 1; }
@media (min-width: 768px) {
    html .aoc-card.md\:rounded-xl { border-radius: 1.25rem; }
}

/* ---------- Progress ---------- */
html .progress-bar, html .progress-neon {
    background: linear-gradient(90deg, rgb(var(--a1)), rgb(var(--a3)));
    box-shadow: 0 0 14px rgb(var(--a1) / 0.5);
}

/* ---------- Boxed titles (poster style) ---------- */
.aoc-box { display: inline-block; padding: 0.15em 0.45em 0.3em; line-height: 1.15; }
.aoc-box-solid { background: rgba(238, 244, 248, 0.93); color: #07131d; font-weight: 800; }
.aoc-box-line { border: 2px solid rgba(238, 244, 248, 0.85); background: rgba(5, 12, 20, 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-weight: 500; }
.aoc-en { font-family: "Archivo", "Alexandria", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--aoc-bg); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--a1) / 0.5); }

@media (prefers-reduced-motion: reduce) {
    .aoc-aurora i, .aoc-trail { animation: none !important; }
}

/* ---------- Icon tile / chip tinted by the local accent ---------- */
.aoc-icon {
    display: grid; place-items: center;
    background: rgb(var(--a1) / 0.12); border: 1px solid rgb(var(--a1) / 0.35);
    color: rgb(var(--a1)); box-shadow: 0 0 30px -8px rgb(var(--a1) / 0.6);
}
.aoc-chip {
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--aoc-edge);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transition: border-color 0.25s, box-shadow 0.25s;
}
.aoc-chip:hover { border-color: rgb(var(--a1) / 0.6); box-shadow: 0 0 22px -6px rgb(var(--a1) / 0.6); }

/* ---------- Landing hero: floating glass stack ---------- */
.aoc-scene { position: relative; height: 460px; perspective: 1400px; }
.aoc-stack {
    position: absolute; top: 50%; left: 50%; width: 320px; height: 230px; margin: -115px 0 0 -160px;
    transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(38deg);
    animation: aoc-hover 7s ease-in-out infinite;
}
@keyframes aoc-hover { 50% { transform: rotateX(58deg) rotateZ(38deg) translateZ(18px); } }
.aoc-layer {
    position: absolute; inset: 0; border-radius: 22px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.aoc-layer.l1 { opacity: 0.5; }
.aoc-layer.l2 { transform: translateZ(45px); opacity: 0.75; }
.aoc-layer.l3 { transform: translateZ(90px); padding: 20px; display: grid; grid-template-columns: 84px 1fr; gap: 16px; }
.aoc-ui-tile { border-radius: 14px; background: linear-gradient(135deg, rgb(var(--a1) / 0.9), rgb(var(--a1) / 0.35)); box-shadow: 0 0 30px rgb(var(--a1) / 0.6); }
.aoc-ui-lines { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.aoc-ui-lines i { height: 9px; border-radius: 9px; background: rgba(255, 255, 255, 0.3); }
.aoc-ui-lines i:nth-child(2) { width: 70%; }
.aoc-ui-lines i:nth-child(3) { width: 45%; }
.aoc-ui-pills { grid-column: 1 / -1; display: flex; gap: 10px; align-self: end; }
.aoc-ui-pills i { height: 24px; width: 76px; border-radius: 999px; background: rgb(var(--a2) / 0.55); box-shadow: 0 0 20px rgb(var(--a2) / 0.5); }
.aoc-ui-pills i:last-child { background: rgb(var(--a3) / 0.55); box-shadow: 0 0 20px rgb(var(--a3) / 0.5); }
.aoc-cube {
    position: absolute; width: 54px; height: 54px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05));
    animation: aoc-bob 5s ease-in-out infinite;
}
.aoc-cube.c1 { top: -40px; right: -30px; transform: translateZ(160px); background: linear-gradient(135deg, rgb(var(--a3) / 0.7), rgb(var(--a3) / 0.15)); box-shadow: 0 0 30px rgb(var(--a3) / 0.5); }
.aoc-cube.c2 { bottom: -30px; left: -50px; transform: translateZ(130px); animation-delay: -2s; }
.aoc-cube.c3 { top: 40px; left: -70px; width: 36px; height: 36px; transform: translateZ(200px); animation-delay: -3.5s; background: linear-gradient(135deg, rgb(var(--a2) / 0.7), rgb(var(--a2) / 0.15)); }
@keyframes aoc-bob { 50% { margin-top: -14px; } }
.aoc-float-label { position: absolute; display: flex; flex-direction: column; font-size: 15px; font-weight: 600; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8); }
.aoc-float-label small { font-size: 10px; color: var(--aoc-muted); font-weight: 500; }
.aoc-float-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; margin-bottom: 8px; background: rgb(var(--a1)); box-shadow: 0 0 12px rgb(var(--a1)); }
.aoc-float-label.f2::before { background: rgb(var(--a2)); box-shadow: 0 0 12px rgb(var(--a2)); }
.aoc-float-label.f3::before { background: rgb(var(--a3)); box-shadow: 0 0 12px rgb(var(--a3)); }
@media (prefers-reduced-motion: reduce) {
    .aoc-stack, .aoc-cube { animation: none !important; }
}