/* ============================================================
   tospiti.site -- effects.css v3 (SAFE, ASCII-only)

   This file uses ONLY English comments and ASCII chars.
   Does NOT override existing selectors.
   Provides opt-in classes: .aurora-bg, .reveal, .shimmer-text,
   .glow-pulse, .conic-ring, .ripple, .tilt-card
   ============================================================ */


/* ---- AURORA BACKGROUND ---- */
.aurora-bg {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
.aurora-bg::before,
.aurora-bg::after {
  content: ''; position: absolute;
  width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(80px); opacity: 0.3;
  will-change: transform;
}
.aurora-bg::before {
  background: radial-gradient(circle, var(--blue) 0%, transparent 60%);
  top: -20vmax; left: -20vmax;
  animation: aurora-1 22s ease-in-out infinite;
}
.aurora-bg::after {
  background: radial-gradient(circle, var(--orange) 0%, transparent 60%);
  bottom: -25vmax; right: -25vmax;
  animation: aurora-2 28s ease-in-out infinite;
}
.aurora-blob-3 {
  position: absolute;
  width: 50vmax; height: 50vmax; border-radius: 50%;
  background: radial-gradient(circle, var(--pink, #ec4899) 0%, transparent 60%);
  filter: blur(80px); opacity: 0.2;
  top: 30vh; left: 50%;
  animation: aurora-3 35s ease-in-out infinite;
  will-change: transform;
}
@keyframes aurora-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(15vw, 10vh) scale(1.15); }
  66%      { transform: translate(-8vw, 15vh) scale(0.9); }
}
@keyframes aurora-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-12vw, -8vh) scale(0.85); }
  66%      { transform: translate(10vw, -15vh) scale(1.2); }
}
@keyframes aurora-3 {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50%      { transform: translate(-30%, 20vh) scale(1.1); }
}
[data-theme="light"] .aurora-bg::before,
[data-theme="light"] .aurora-bg::after,
[data-theme="light"] .aurora-blob-3 { opacity: 0.15; }


/* ---- AUTO AURORA via body[data-auto-aurora] ---- */
body[data-auto-aurora]::before {
  content: '';
  position: fixed; inset: -20vmax -20vmax auto auto;
  width: 60vmax; height: 60vmax; border-radius: 50%;
  background: radial-gradient(circle, var(--blue) 0%, transparent 60%);
  filter: blur(80px); opacity: 0.25;
  z-index: -1; pointer-events: none;
  animation: aurora-1 22s ease-in-out infinite;
  will-change: transform;
}
body[data-auto-aurora]::after {
  content: '';
  position: fixed; bottom: -25vmax; right: -25vmax;
  width: 60vmax; height: 60vmax; border-radius: 50%;
  background: radial-gradient(circle, var(--orange) 0%, transparent 60%);
  filter: blur(80px); opacity: 0.25;
  z-index: -1; pointer-events: none;
  animation: aurora-2 28s ease-in-out infinite;
  will-change: transform;
}
[data-theme="light"] body[data-auto-aurora]::before,
[data-theme="light"] body[data-auto-aurora]::after { opacity: 0.12; }


/* ---- REVEAL ANIMATION ---- */
@keyframes reveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  animation: reveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}


/* ---- SHIMMER TEXT ---- */
.shimmer-text {
  background: linear-gradient(120deg, var(--text) 0%, var(--blue) 50%, var(--text) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-sweep 6s linear infinite;
}
@keyframes shimmer-sweep {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}


/* ---- GLOW PULSE ---- */
.glow-pulse { position: relative; }
.glow-pulse::after {
  content: ''; position: absolute; inset: -2px;
  border-radius: inherit;
  background: inherit;
  filter: blur(12px); opacity: 0.5; z-index: -1;
  animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.08); }
}


/* ---- CONIC RING ---- */
.conic-ring { position: relative; }
.conic-ring::before {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--blue), var(--orange), var(--green), var(--blue));
  z-index: -1; opacity: 0.6;
  animation: conic-spin 8s linear infinite;
}
@keyframes conic-spin { to { transform: rotate(360deg); } }


/* ---- RIPPLE ---- */
.ripple {
  position: absolute; border-radius: 50%;
  background: color-mix(in srgb, currentColor 30%, transparent);
  transform: scale(0); pointer-events: none;
  animation: ripple-anim 0.6s ease-out;
}
@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}


/* ---- TILT CARD ---- */
.tilt-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease, border-color 0.25s;
  position: relative; overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--card-color, var(--blue)) 18%, transparent) 0%,
    transparent 40%
  );
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
.tilt-card:hover::before { opacity: 1; }
.tilt-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 12px 32px -8px color-mix(in srgb, var(--card-color, var(--blue)) 35%, transparent);
}
.tilt-card:active { transform: translateY(-1px) scale(0.98); transition-duration: 0.1s; }


/* ---- ACCESSIBILITY ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .aurora-bg, .aurora-blob-3,
  body[data-auto-aurora]::before,
  body[data-auto-aurora]::after { display: none; }
}