/* ============================================================
   LEGAL PAGES — ANIMATIONS & 3D EFFECTS
   Shared across privacy.ejs, cookies.ejs, terms.ejs
============================================================ */

/* ---- REDUCED MOTION: disable everything ---- */
@media (prefers-reduced-motion: reduce) {
  .orb { animation: none !important; opacity: 0.04 !important; }
  .legal-hero-label, .legal-hero h1, .legal-hero-meta,
  .back-link, .legal-highlight, .legal-warning, .legal-toc {
    animation: none !important;
  }
  .legal-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   FLOATING BACKGROUND ORBS
============================================================ */
.legal-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

main.legal-page {
  position: relative;
  z-index: 1;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0;
  animation: orbFadeIn 2.5s ease-out forwards, orbFloat 28s ease-in-out infinite;
}

@keyframes orbFadeIn {
  to { opacity: 0.08; }
}

[data-theme="light"] .orb {
  filter: blur(110px);
}
[data-theme="light"] .orb { animation: orbFadeInLight 2.5s ease-out forwards, orbFloat 28s ease-in-out infinite; }
@keyframes orbFadeInLight {
  to { opacity: 0.05; }
}

@keyframes orbFloat {
  0%   { transform: translate(0px, 0px)   scale(1);    }
  25%  { transform: translate(-25px, 35px) scale(1.04); }
  50%  { transform: translate(18px, -22px) scale(0.96); }
  75%  { transform: translate(-12px, -28px) scale(1.02); }
  100% { transform: translate(0px, 0px)   scale(1);    }
}

.orb-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle at 40% 40%, rgba(131, 58, 180, 0.9), rgba(253, 29, 29, 0.3));
  top: -280px; right: -180px;
  animation-delay: 0s;
  animation-duration: 2.5s, 32s;
}

.orb-2 {
  width: 600px; height: 600px;
  background: radial-gradient(circle at 60% 60%, rgba(0, 149, 246, 0.9), rgba(131, 58, 180, 0.3));
  bottom: 8%; left: -200px;
  animation-delay: 0s, -11s;
  animation-duration: 2.5s, 38s;
}

.orb-3 {
  width: 480px; height: 480px;
  background: radial-gradient(circle at 50% 50%, rgba(252, 176, 69, 0.7), rgba(253, 29, 29, 0.25));
  top: 42%; right: -160px;
  animation-delay: 0s, -22s;
  animation-duration: 2.5s, 25s;
}

@media (max-width: 768px) {
  .orb-3 { display: none; }
  .orb-1 { width: 420px; height: 420px; top: -160px; right: -120px; }
  .orb-2 { width: 380px; height: 380px; }
}

/* ============================================================
   HERO ENTRANCE — staggered fade-up
============================================================ */
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes scalePop {
  from { opacity: 0; transform: scale(0.78) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.back-link {
  animation: fadeUpIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.legal-hero-label {
  animation: scalePop 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}
.legal-hero h1 {
  animation: fadeUpIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
}
.legal-hero-meta {
  animation: fadeUpIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.38s both;
}

/* ---- Highlight & warning box entrance ---- */
@keyframes accentPulse {
  0%, 100% { box-shadow: inset 3px 0 0 var(--accent, #0095f6), 0 0 0   rgba(0,149,246,0);    }
  50%       { box-shadow: inset 3px 0 0 var(--accent, #0095f6), 0 6px 28px rgba(0,149,246,0.14); }
}

.legal-highlight {
  animation: fadeUpIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.46s both,
             accentPulse 4.5s ease-in-out 1.8s infinite;
}
.legal-warning {
  animation: fadeUpIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.46s both;
}

/* ---- ToC entrance ---- */
.legal-toc {
  animation: fadeUpIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.54s both;
}

/* ---- ToC link hover: slide right ---- */
.legal-toc a {
  display: inline-block;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.18s ease;
}
.legal-toc a:hover {
  transform: translateX(6px);
}

/* ---- Back link hover: slide left ---- */
.back-link {
  transition: color 0.2s ease,
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.back-link:hover {
  transform: translateX(-5px);
}

/* ============================================================
   SECTION SCROLL REVEAL
============================================================ */
.legal-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity  0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease;
  will-change: transform, opacity;
}

.legal-section.ls-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   SECTION H2 — accent underline draws in on scroll entry
============================================================ */
.legal-section h2 {
  position: relative;
}

.legal-section h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent, #0095f6), rgba(0, 149, 246, 0));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.legal-section.ls-visible h2::after {
  transform: scaleX(1);
}

/* ============================================================
   3D CARD TILT (JS adds/removes ls-tilting & ls-tilt-return)
============================================================ */
.legal-section.ls-tilting {
  transition: box-shadow 0.3s ease !important;
}

.legal-section.ls-tilt-return {
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease !important;
}

/* Subtle depth glow while hovering */
.legal-section:hover {
  box-shadow: 0 16px 60px rgba(0, 149, 246, 0.08),
              0 4px 16px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   TABLE — 3D lift on row hover + header depth sheen
============================================================ */
.legal-table {
  border-radius: 10px;
  overflow: hidden;
}

.legal-table th {
  position: relative;
  overflow: hidden;
}

.legal-table th::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 100%);
  pointer-events: none;
}

.legal-table tbody tr {
  transition: background 0.2s ease, transform 0.22s ease;
  will-change: transform;
}

.legal-table tbody tr:hover {
  background: rgba(0, 149, 246, 0.07) !important;
  transform: translateY(-2px);
}

/* ============================================================
   SHIMMER on legal-highlight border
============================================================ */
@keyframes borderShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.legal-highlight::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    var(--accent, #0095f6) 0%,
    rgba(131, 58, 180, 0.9) 50%,
    var(--accent, #0095f6) 100%
  );
  background-size: 100% 300%;
  animation: borderShimmer 3s ease-in-out infinite;
}

.legal-highlight {
  position: relative !important;
  border-left: none !important; /* replaced by the animated ::before */
  padding-left: 21px !important;
}