/* ============================================
   PLAYFUL — Decorative floating elements
   Paper planes, stars, clouds, dots
   Pure CSS animations — no JS dependency
   ============================================ */

/* --- Playful container (placed per section) --- */
.playful {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.playful + * { position: relative; z-index: 1; }

/* --- Base particle --- */
.playful__item {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
}

.playful__item--visible {
  opacity: 1;
}

/* ========================
   PAPER PLANE
   ======================== */
.playful__plane {
  width: 32px;
  height: 32px;
  color: var(--nd-blue-300);
  opacity: 0.18;
}

.playful__plane--sm { width: 20px; height: 20px; }
.playful__plane--lg { width: 44px; height: 44px; }

.playful__plane svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

@keyframes plane-drift-1 {
  0%   { transform: translate(0, 0) rotate(-15deg); opacity: 0; }
  10%  { opacity: 0.18; }
  50%  { transform: translate(80px, -60px) rotate(-5deg); }
  90%  { opacity: 0.18; }
  100% { transform: translate(160px, -30px) rotate(-20deg); opacity: 0; }
}

@keyframes plane-drift-2 {
  0%   { transform: translate(0, 0) rotate(10deg); opacity: 0; }
  10%  { opacity: 0.15; }
  50%  { transform: translate(-70px, -80px) rotate(20deg); }
  90%  { opacity: 0.15; }
  100% { transform: translate(-140px, -40px) rotate(5deg); opacity: 0; }
}

@keyframes plane-drift-3 {
  0%   { transform: translate(0, 0) rotate(-25deg) scale(0.8); opacity: 0; }
  15%  { opacity: 0.12; }
  50%  { transform: translate(100px, -100px) rotate(-10deg) scale(1); }
  85%  { opacity: 0.12; }
  100% { transform: translate(200px, -50px) rotate(-30deg) scale(0.9); opacity: 0; }
}

.playful__plane--a1 { animation: plane-drift-1 12s ease-in-out infinite; }
.playful__plane--a2 { animation: plane-drift-2 15s ease-in-out infinite; animation-delay: -3s; }
.playful__plane--a3 { animation: plane-drift-3 18s ease-in-out infinite; animation-delay: -7s; }

/* ========================
   STARS (small twinkling)
   ======================== */
.playful__star {
  width: 14px;
  height: 14px;
  color: var(--nd-gold-400);
  opacity: 0;
}

.playful__star--sm { width: 8px; height: 8px; }
.playful__star--lg { width: 20px; height: 20px; }

.playful__star svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

@keyframes twinkle-1 {
  0%, 100% { opacity: 0; transform: scale(0.6) rotate(0deg); }
  20%      { opacity: 0.35; }
  50%      { opacity: 0.5; transform: scale(1) rotate(20deg); }
  80%      { opacity: 0.35; }
}

@keyframes twinkle-2 {
  0%, 100% { opacity: 0; transform: scale(0.8) rotate(0deg); }
  30%      { opacity: 0.4; }
  60%      { opacity: 0.55; transform: scale(1.1) rotate(-15deg); }
  85%      { opacity: 0.3; }
}

@keyframes twinkle-3 {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  40%      { opacity: 0.45; transform: scale(1.05) rotate(10deg); }
  70%      { opacity: 0.3; }
}

.playful__star--a1 { animation: twinkle-1 4s ease-in-out infinite; }
.playful__star--a2 { animation: twinkle-2 5s ease-in-out infinite; animation-delay: -1.5s; }
.playful__star--a3 { animation: twinkle-3 6s ease-in-out infinite; animation-delay: -3s; }

/* ========================
   CLOUDS (soft floating)
   ======================== */
.playful__cloud {
  width: 60px;
  height: 36px;
  color: var(--nd-blue-200);
  opacity: 0.12;
}

.playful__cloud--sm { width: 40px; height: 24px; }
.playful__cloud--lg { width: 80px; height: 48px; opacity: 0.08; }

.playful__cloud svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

@keyframes cloud-float-1 {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(30px); }
  100% { transform: translateX(0); }
}

@keyframes cloud-float-2 {
  0%   { transform: translateX(0) translateY(0); }
  33%  { transform: translateX(-20px) translateY(-5px); }
  66%  { transform: translateX(-40px) translateY(3px); }
  100% { transform: translateX(0) translateY(0); }
}

.playful__cloud--a1 { animation: cloud-float-1 20s ease-in-out infinite; }
.playful__cloud--a2 { animation: cloud-float-2 25s ease-in-out infinite; animation-delay: -5s; }

/* ========================
   DOTS (small confetti-like)
   ======================== */
.playful__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nd-blue-300);
  opacity: 0.15;
}

.playful__dot--gold { background: var(--nd-gold-400); opacity: 0.2; }
.playful__dot--green { background: var(--nd-green-400); opacity: 0.15; }
.playful__dot--sm { width: 5px; height: 5px; }
.playful__dot--lg { width: 12px; height: 12px; }

@keyframes dot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.playful__dot--a1 { animation: dot-bob 3s ease-in-out infinite; }
.playful__dot--a2 { animation: dot-bob 4s ease-in-out infinite; animation-delay: -1s; }
.playful__dot--a3 { animation: dot-bob 3.5s ease-in-out infinite; animation-delay: -2s; }

/* ========================
   CIRCLE RING (outline)
   ======================== */
.playful__ring {
  width: 40px;
  height: 40px;
  border: 2px solid var(--nd-blue-200);
  border-radius: 50%;
  opacity: 0.1;
}

.playful__ring--sm { width: 24px; height: 24px; }
.playful__ring--lg { width: 60px; height: 60px; }
.playful__ring--gold { border-color: var(--nd-gold-300); }

@keyframes ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.1; }
  50% { transform: scale(1.15); opacity: 0.18; }
}

.playful__ring--a1 { animation: ring-pulse 5s ease-in-out infinite; }
.playful__ring--a2 { animation: ring-pulse 6s ease-in-out infinite; animation-delay: -2s; }

/* ========================
   CROSS (small +)
   ======================== */
.playful__cross {
  width: 14px;
  height: 14px;
  position: relative;
  opacity: 0.12;
}

.playful__cross::before,
.playful__cross::after {
  content: '';
  position: absolute;
  background: var(--nd-blue-300);
  border-radius: 1px;
}

.playful__cross::before {
  width: 2px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.playful__cross::after {
  width: 100%;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.playful__cross--gold::before,
.playful__cross--gold::after { background: var(--nd-gold-400); }

@keyframes cross-spin {
  0%, 100% { transform: rotate(0deg); opacity: 0.12; }
  50% { transform: rotate(90deg); opacity: 0.2; }
}

.playful__cross--a1 { animation: cross-spin 8s ease-in-out infinite; }
.playful__cross--a2 { animation: cross-spin 10s ease-in-out infinite; animation-delay: -4s; }

/* ========================
   PENCIL (for team/equipe)
   ======================== */
.playful__pencil {
  width: 28px;
  height: 28px;
  color: var(--nd-gold-500);
  opacity: 0.15;
}

.playful__pencil svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

@keyframes pencil-write {
  0%, 100% { transform: rotate(-10deg) translateY(0); }
  25% { transform: rotate(5deg) translateY(-5px); }
  50% { transform: rotate(-5deg) translateY(2px); }
  75% { transform: rotate(8deg) translateY(-3px); }
}

.playful__pencil--a1 { animation: pencil-write 6s ease-in-out infinite; }

/* ========================
   RESPONSIVE: reduce particles
   ======================== */
@media (max-width: 768px) {
  .playful__plane--lg,
  .playful__cloud--lg,
  .playful__ring--lg { display: none; }

  .playful__plane { width: 22px; height: 22px; }
  .playful__cloud { width: 40px; height: 24px; }
}

/* ========================
   REDUCED MOTION
   ======================== */
@media (prefers-reduced-motion: reduce) {
  .playful__item,
  .playful__plane,
  .playful__star,
  .playful__cloud,
  .playful__dot,
  .playful__ring,
  .playful__cross,
  .playful__pencil {
    animation: none !important;
    opacity: 0.08 !important;
  }
}