/* ═══════════════════════════════════════════════
   effects.css — Visual & Effect Engine
   ohno.top
   ═══════════════════════════════════════════════ */

/* ── Dark theme (default) ── */
:root,
[data-theme="dark"] {
  --bg:      #0b1020;
  --bg2:     #121a33;
  --card:    rgba(255,255,255,.08);
  --border:  rgba(255,255,255,.18);
  --text:    #edf2ff;
  --muted:   #aeb7d8;
  --brand:   #7c5cff;
  --brand2:  #36d1dc;

  --nav-bg:        rgba(10,14,28,.4);
  --nav-bg-scroll: rgba(8,11,22,.85);
  --nav-border:    rgba(255,255,255,.18);

  --tilt-border-hover: #36d1dc;
  --tilt-sheen:        rgba(54,209,220,.15);
  --tilt-glow:         rgba(54,209,220,.12);

  --spot-border-hover: #a855f7;
  --spot-sheen:        rgba(168,85,247,.18);
  --spot-glow:         rgba(168,85,247,.14);

  --jelly-border-hover: #36d1dc;
  --jelly-glow:         rgba(54,209,220,.35);

  --ctrl-bg:       rgba(255,255,255,.07);
  --ctrl-bg-hover: rgba(255,255,255,.13);
  --ctrl-active:   rgba(255,255,255,.18);
  --ctrl-border:   rgba(255,255,255,.14);
  --ctrl-text:     rgba(237,242,255,.8);
}

/* ── Light theme ── */
[data-theme="light"] {
  --bg:      #f0f4ff;
  --bg2:     #e6ecfa;
  --card:    rgba(255,255,255,.65);
  --border:  rgba(0,0,0,.10);
  --text:    #1a1d2e;
  --muted:   #5a6080;
  --brand:   #6244e8;
  --brand2:  #0db8c9;

  --nav-bg:        rgba(240,244,255,.6);
  --nav-bg-scroll: rgba(240,244,255,.88);
  --nav-border:    rgba(0,0,0,.10);

  --tilt-border-hover: #0db8c9;
  --tilt-sheen:        rgba(13,184,201,.12);
  --tilt-glow:         rgba(13,184,201,.14);

  --spot-border-hover: #8b5cf6;
  --spot-sheen:        rgba(139,92,246,.14);
  --spot-glow:         rgba(139,92,246,.12);

  --jelly-border-hover: #0db8c9;
  --jelly-glow:         rgba(13,184,201,.28);

  --ctrl-bg:       rgba(0,0,0,.05);
  --ctrl-bg-hover: rgba(0,0,0,.09);
  --ctrl-active:   rgba(0,0,0,.13);
  --ctrl-border:   rgba(0,0,0,.10);
  --ctrl-text:     rgba(26,29,46,.75);
}

/* ── Base ── */
html, body { scroll-behavior: smooth; }

body {
  font-family: 'Manrope', sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  transition: background-color .5s ease, color .5s ease;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  transition: opacity .5s ease;
}

[data-theme="dark"] body::before {
  background:
    radial-gradient(1000px 600px at 10% -10%, #2b2f6f 0%, transparent 60%),
    radial-gradient(900px  600px at 110% 10%, #3a2267 0%, transparent 50%),
    linear-gradient(135deg, var(--bg), var(--bg2));
}

[data-theme="light"] body::before {
  background:
    radial-gradient(900px 600px at 10% -10%, #c7d4ff 0%, transparent 60%),
    radial-gradient(800px 600px at 110% 10%, #ddd0ff 0%, transparent 50%),
    linear-gradient(135deg, var(--bg), var(--bg2));
}

/* ── Navbar ── */
.navbar-wrapper {
  position: sticky; top: 0; z-index: 1030;
  padding: 12px 1rem 0;
  transition: padding .4s cubic-bezier(0.16,1,0.3,1);
}
.navbar-wrapper.scrolled { padding: 0; }

.navbar-glass {
  background: var(--nav-bg) !important;
  border: 1px solid var(--nav-border);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all .4s cubic-bezier(0.16,1,0.3,1),
              background .5s ease,
              border-color .5s ease;
}
.navbar-wrapper.scrolled .navbar-glass {
  border-radius: 0 0 16px 16px;
  background: var(--nav-bg-scroll) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.18);
  border-top: none;
}

/* Nav links inherit text color */
.navbar-glass .nav-link {
  color: var(--text) !important;
  opacity: .75;
  transition: opacity .2s;
}
.navbar-glass .nav-link:hover { opacity: 1; }
.navbar-brand { color: var(--text) !important; }

/* ── Language group ── */
.lang-group {
  display: flex;
  border: 1px solid var(--ctrl-border);
  border-radius: 8px;
  overflow: hidden;
}
.lang-btn {
  background: var(--ctrl-bg);
  color: var(--ctrl-text);
  border: none;
  padding: 4px 10px;
  font-size: .75rem;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
  cursor: pointer;
  transition: background .2s, color .2s;
  border-right: 1px solid var(--ctrl-border);
  line-height: 1.6;
}
.lang-btn:last-child { border-right: none; }
.lang-btn:hover      { background: var(--ctrl-bg-hover); color: var(--text); }
.lang-btn.active     { background: var(--ctrl-active);   color: var(--text); }

/* ── Theme toggle ── */
.theme-btn {
  background: var(--ctrl-bg);
  color: var(--ctrl-text);
  border: 1px solid var(--ctrl-border);
  border-radius: 8px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-size: .9rem;
  cursor: pointer;
  transition: background .2s, color .2s, transform .3s cubic-bezier(0.34,1.56,0.64,1);
}
.theme-btn:hover {
  background: var(--ctrl-bg-hover);
  color: var(--text);
  transform: rotate(20deg);
}

/* ── Hero ── */
.hero { padding: 120px 0 80px; }
.hero h1 {
  font-size: clamp(2.5rem,5vw,3.8rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
}
.hero-gradient {
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Glass base ── */
.glass {
  background: var(--card);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 18px;
  position: relative;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color .4s cubic-bezier(0.16,1,0.3,1),
              background   .4s cubic-bezier(0.16,1,0.3,1),
              box-shadow   .4s cubic-bezier(0.16,1,0.3,1);
}
.glass:focus-visible {
  outline: 2px solid var(--brand2);
  outline-offset: 3px;
}
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

/* ════════════════════════════════════════════════
   CARD TYPE A — .card-tilt-blue
   ════════════════════════════════════════════════ */
.card-tilt-blue {
  transform-style: preserve-3d;
  will-change: transform;
}
.card-tilt-blue:hover {
  border-color: var(--tilt-border-hover);
  background: rgba(54,209,220,.06);
  box-shadow: 0 20px 40px rgba(0,0,0,.15), 0 0 24px var(--tilt-glow);
}
[data-theme="light"] .card-tilt-blue:hover {
  background: rgba(13,184,201,.07);
  box-shadow: 0 20px 40px rgba(0,0,0,.08), 0 0 24px var(--tilt-glow);
}
.card-tilt-blue::after {
  background: radial-gradient(
    circle at calc(var(--mouse-x,50%) * 1%) calc(var(--mouse-y,50%) * 1%),
    var(--tilt-sheen) 0%, transparent 60%
  );
}
.card-tilt-blue:hover::after { opacity: 1; }
.card-tilt-blue .icon-badge,
.card-tilt-blue h5,
.card-tilt-blue p {
  transform: translateZ(28px);
  transition: transform .4s cubic-bezier(0.16,1,0.3,1);
}

/* ════════════════════════════════════════════════
   CARD TYPE B — .card-spotlight-purple
   ════════════════════════════════════════════════ */
.card-spotlight-purple { overflow: hidden; }
.card-spotlight-purple:hover {
  border-color: var(--spot-border-hover);
  background: rgba(168,85,247,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 0 20px var(--spot-glow);
  transform: none;
}
[data-theme="light"] .card-spotlight-purple:hover {
  background: rgba(139,92,246,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.07), 0 0 20px var(--spot-glow);
}
.card-spotlight-purple::after {
  background: radial-gradient(
    ellipse 80% 60% at calc(var(--mouse-x,50%) * 1%) calc(var(--mouse-y,50%) * 1%),
    var(--spot-sheen) 0%, transparent 70%
  );
}
.card-spotlight-purple:hover::after { opacity: 1; }

/* ════════════════════════════════════════════════
   CARD TYPE C — .card-jelly-status
   ════════════════════════════════════════════════ */
.card-jelly-status {
  transition: transform    .6s cubic-bezier(0.68,-0.6,0.27,1.55),
              border-color .4s cubic-bezier(0.16,1,0.3,1),
              background   .4s cubic-bezier(0.16,1,0.3,1),
              box-shadow   .4s cubic-bezier(0.16,1,0.3,1);
}
.card-jelly-status:hover {
  transform: translateY(-12px) scale(1.03) !important;
  border-color: var(--jelly-border-hover);
  background: rgba(54,209,220,.06);
  box-shadow:
    0 24px 48px rgba(0,0,0,.2),
    0 0 32px var(--jelly-glow),
    0 0 64px rgba(54,209,220,.08);
}
[data-theme="light"] .card-jelly-status:hover {
  background: rgba(13,184,201,.07);
  box-shadow:
    0 24px 48px rgba(0,0,0,.08),
    0 0 32px var(--jelly-glow),
    0 0 64px rgba(13,184,201,.08);
}
.card-jelly-status:hover .progress-bar-inner {
  filter: brightness(1.3);
  transition: filter .4s ease;
}

/* ── Shared utilities ── */
.tag {
  display: inline-block; padding: .25rem .6rem; font-size: .78rem;
  border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); background: var(--card);
  margin-bottom: 1rem;
  transition: border-color .5s ease, color .5s ease, background .5s ease;
}
.icon-badge {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg,rgba(124,92,255,.25),rgba(54,209,220,.25));
  border: 1px solid var(--border);
  margin-bottom: 1rem;
}
.muted        { color: var(--muted); transition: color .5s ease; }
.footer-brand { color: var(--brand); text-decoration: none; font-weight: bold; }

/* ── Progress bar ── */
.progress-container {
  width: 100%; height: 6px;
  background: rgba(128,128,128,.15);
  border-radius: 10px; overflow: hidden; position: relative;
}
.progress-bar-inner {
  height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--brand), var(--brand2), transparent);
  border-radius: 10px;
  transform: translateX(-100%);
  animation: progressLoop 2s infinite ease-in-out;
  filter: brightness(1);
  transition: filter .4s ease;
}
@keyframes progressLoop {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ── Back to top ── */
#backToTop {
  position: fixed; bottom: 30px; right: 30px;
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; border: none; font-size: 1.2rem;
  display: flex; justify-content: center; align-items: center;
  opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: all .4s cubic-bezier(0.16,1,0.3,1);
  z-index: 1050;
  box-shadow: 0 8px 32px rgba(124,92,255,.4);
  cursor: pointer;
}
#backToTop.show  { opacity: 1; visibility: visible; transform: translateY(0); }
#backToTop:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(54,209,220,.6); }
#backToTop:focus-visible { outline: 2px solid var(--brand2); outline-offset: 3px; }

/* ── Reveal animation ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s cubic-bezier(0.16,1,0.3,1),
              transform .8s cubic-bezier(0.16,1,0.3,1);
}
.reveal.active { opacity: 1; transform: translateY(0); }