/* =====================================================================
   Rainbow International School — World Cup blog INTERACTIVE LAYER v2
   ---------------------------------------------------------------------
   Football-themed, drop-in stylesheet. All classes are prefixed .ris- so
   they NEVER collide with your theme. Paste into a WPCode "CSS Snippet"
   scoped to the target post.

   Change --ris-accent to your brand color. Team colors are further down.
   ===================================================================== */

:root {
  --ris-accent: #f5a623;
  --ris-accent-2: #ff7a18;
  --ris-navy: #0b2a5b;
  --ris-reveal-distance: 30px;
  --ris-reveal-time: 0.7s;

  /* Team palettes used by the mascot + VS banner */
  --ris-arg-1: #75aadb;   /* Argentina sky blue */
  --ris-arg-2: #ffffff;   /* white stripe       */
  --ris-arg-dark: #0d2c54;/* Argentina shorts   */
  --ris-esp-1: #c60b1e;   /* Spain red          */
  --ris-esp-2: #ffc400;   /* Spain gold         */
  --ris-esp-dark: #1a2a6c;/* Spain shorts       */
}

/* =========================================================
   1. SCROLL PROGRESS + ROLLING FOOTBALL
   ========================================================= */
.ris-progress-track {
  position: fixed; top: 0; left: 0; right: 0; height: 4px;
  z-index: 99999; pointer-events: none; background: transparent;
}
.ris-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ris-accent), var(--ris-accent-2));
  box-shadow: 0 0 10px rgba(245,166,35,.6);
}
.ris-progress-ball {
  position: fixed; top: -6px; left: 0; width: 16px; height: 16px;
  z-index: 100000; pointer-events: none; will-change: transform;
}
.ris-progress-ball svg { display:block; width:100%; height:100%; }

/* =========================================================
   2. REVEAL ON SCROLL (+ rolling ball before headings)
   ========================================================= */
.ris-reveal {
  opacity: 0; transform: translateY(var(--ris-reveal-distance));
  transition: opacity var(--ris-reveal-time) cubic-bezier(.22,1,.36,1),
              transform var(--ris-reveal-time) cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.ris-reveal.ris-in { opacity: 1; transform: translateY(0); }

.ris-heading-ball {
  display: inline-block; width: 22px; height: 22px; margin-right: 10px;
  vertical-align: middle; opacity: 0; transform: translateX(-40px) rotate(0deg);
}
.ris-heading-ball svg { display:block; width:100%; height:100%; }
.ris-in > .ris-heading-ball,
.ris-heading-ball.ris-rolled {
  animation: risRollIn .9s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes risRollIn {
  from { opacity: 0; transform: translateX(-40px) rotate(-360deg); }
  to   { opacity: 1; transform: translateX(0) rotate(0deg); }
}

/* =========================================================
   3. SCROLLSPY (active TOC link)
   ========================================================= */
.ris-toc-active {
  color: var(--ris-accent) !important; font-weight: 700 !important; position: relative;
}
.ris-toc-active::before {
  content: "⚽"; position: absolute; left: -22px; top: 50%;
  transform: translateY(-50%); font-size: 13px;
}

/* =========================================================
   4. FOOTBALL CURSOR — spring ball + 3D orbital ring + canvas trail
   ========================================================= */
.ris-cursor-on, .ris-cursor-on a, .ris-cursor-on button { cursor: none !important; }

/* ── The spinning football ── */
.ris-cursor-ball {
  position: fixed; top: 0; left: 0;
  width: 28px; height: 28px;
  pointer-events: none; z-index: 100002;
  will-change: transform, left, top;
  transition: opacity .3s;
}
.ris-cursor-ball svg { display:block; width:100%; height:100%;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.45)); }

/* Pop-kick on click */
.ris-cursor-ball.ris-cursor-kick {
  animation: risCursorKick .38s cubic-bezier(.22,1.4,.4,1) forwards;
}
@keyframes risCursorKick {
  0%  { transform: translate(-50%,-50%) scale(1)   rotate(0deg); }
  30% { transform: translate(-50%,-50%) scale(1.9) rotate(200deg); }
  100%{ transform: translate(-50%,-50%) scale(1)   rotate(360deg); }
}

/* ── Orbital ring — Argentina / Spain dual-color, tilts in 3D ── */
.ris-cursor-orbital {
  position: fixed; top: 0; left: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  pointer-events: none; z-index: 100001;
  /* Conic-gradient ring via mask: half ARG sky-blue, half ESP red */
  background: conic-gradient(
    var(--ris-arg-1) 0deg,
    var(--ris-esp-1) 180deg,
    var(--ris-arg-1) 360deg
  );
  /* Hollow it out to just a ring */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
  mask:         radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
  will-change: transform, left, top;
  transform-style: preserve-3d;
  transition: opacity .3s;
}
/* On hover over links/buttons: full accent ring + slight grow */
.ris-cursor-orbital.ris-cursor-hover {
  background: conic-gradient(
    var(--ris-accent) 0deg,
    var(--ris-esp-2)  120deg,
    var(--ris-accent-2) 240deg,
    var(--ris-accent) 360deg
  );
  width: 70px; height: 70px;
}

/* ── Canvas layer for the comet-particle trail ── */
.ris-cursor-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 99999;
  transition: opacity .3s;
}

/* =========================================================
   5. PLAYER NAME HOTSPOTS + 2D MASCOT POP-UP CARD
   ========================================================= */
.ris-player {
  cursor: pointer; font-weight: 700; color: inherit;
  border-bottom: 2px dashed var(--ris-accent);
  position: relative; display: inline; transition: color .2s;
}
.ris-player:hover { color: var(--ris-accent); }
.ris-player::after {
  content: "⚽"; font-size: .7em; margin-left: 3px;
  opacity: .55; animation: risNudge 1.6s ease-in-out infinite;
}
@keyframes risNudge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }

.ris-card {
  position: fixed; z-index: 100002; width: 260px;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  opacity: 0; transform: translateY(12px) scale(.96);
  transition: opacity .25s ease, transform .25s cubic-bezier(.22,1.4,.4,1);
  pointer-events: none; border: 1px solid rgba(0,0,0,.06);
}
.ris-card.ris-card-show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.ris-card-head {
  padding: 14px 16px 6px; color:#fff; position: relative;
  display: flex; align-items: center; gap: 12px; min-height: 92px;
}
.ris-card-fig { width: 70px; height: 92px; flex: 0 0 70px; }
.ris-card-fig svg { display:block; width:100%; height:100%; }
.ris-card-id { line-height: 1.25; }
.ris-card-name { font-size: 1.05rem; font-weight: 800; }
.ris-card-meta { font-size: .72rem; opacity: .9; }
.ris-card-num {
  position: absolute; top: 8px; right: 12px; font-size: 2.2rem;
  font-weight: 900; opacity: .28; line-height: 1;
}
.ris-card-body { padding: 12px 16px 16px; background:#fff; }
.ris-stat { margin: 8px 0; }
.ris-stat-label { display:flex; justify-content: space-between;
  font-size: .72rem; font-weight: 700; color:#444; margin-bottom: 4px; }
.ris-stat-track { height: 8px; border-radius: 6px; background:#eee; overflow:hidden; }
.ris-stat-fill { height:100%; width:0%;
  background: linear-gradient(90deg, var(--ris-accent), var(--ris-accent-2));
  border-radius: 6px; transition: width 1s cubic-bezier(.22,1,.36,1); }
.ris-card-tag {
  display:inline-block; margin-top: 6px; font-size: .68rem; font-weight: 700;
  color: var(--ris-accent); background: rgba(245,166,35,.12);
  padding: 3px 8px; border-radius: 20px;
}

/* Mascot idle animation (applies to any inline mascot svg group) */
.ris-mascot-body { animation: risBob 2.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.ris-mascot-ball { animation: risJuggle 1.15s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.ris-mascot-arm  { animation: risWave 2.2s ease-in-out infinite; transform-origin: top center; transform-box: fill-box; }
@keyframes risBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes risJuggle { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes risWave { 0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(8deg)} }

/* =========================================================
   6. GOAL CONFETTI CANVAS
   ========================================================= */
.ris-confetti { position: fixed; inset: 0; z-index: 100003; pointer-events: none; }
.ris-goal-flash {
  position: fixed; top: 22%; left: 50%; transform: translate(-50%,-50%) scale(.4);
  z-index: 100004; pointer-events: none; opacity: 0;
  font-weight: 900; font-size: clamp(2.5rem, 8vw, 5rem);
  color: #fff; -webkit-text-stroke: 3px var(--ris-accent);
  text-shadow: 0 6px 20px rgba(0,0,0,.35); letter-spacing: 2px;
}
.ris-goal-flash.ris-goal-go { animation: risGoal 1.4s ease forwards; }
@keyframes risGoal {
  0% { opacity:0; transform: translate(-50%,-50%) scale(.4) rotate(-6deg); }
  25%{ opacity:1; transform: translate(-50%,-50%) scale(1.05) rotate(2deg); }
  70%{ opacity:1; transform: translate(-50%,-50%) scale(1) rotate(0); }
  100%{ opacity:0; transform: translate(-50%,-52%) scale(1.05); }
}

/* =========================================================
   7. SPAIN vs ARGENTINA DUEL BANNER  (opt-in: .ris-vs)
   ========================================================= */
.ris-vs-banner {
  position: relative; display:flex; border-radius: 18px; overflow: hidden;
  min-height: 150px; margin: 30px 0; box-shadow: 0 12px 40px rgba(0,0,0,.15);
  isolation: isolate;
}
.ris-vs-side { flex:1; display:flex; align-items:center; padding: 22px 26px; position: relative; }
.ris-vs-home { background: repeating-linear-gradient(90deg, var(--ris-arg-1) 0 18px, var(--ris-arg-2) 18px 36px);
  justify-content: flex-start; transform: translateX(-100%); }
.ris-vs-away { background: linear-gradient(135deg, var(--ris-esp-1), #8a0713);
  justify-content: flex-end; transform: translateX(100%); }
.ris-vs-banner.ris-in .ris-vs-home { animation: risSlideR .8s cubic-bezier(.22,1,.36,1) forwards; }
.ris-vs-banner.ris-in .ris-vs-away { animation: risSlideL .8s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes risSlideR { to { transform: translateX(0); } }
@keyframes risSlideL { to { transform: translateX(0); } }
.ris-vs-team { font-weight: 900; font-size: 1.4rem; color: var(--ris-navy);
  text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.ris-vs-away .ris-vs-team { color:#fff; text-shadow: 0 1px 4px rgba(0,0,0,.3); }
.ris-vs-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 66px; height: 66px; border-radius: 50%; background: var(--ris-navy);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight: 900; font-size: 1.4rem; z-index: 3;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); border: 3px solid #fff;
  animation: risVsPulse 1.6s ease-in-out infinite;
}
@keyframes risVsPulse { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.09)} }

/* =========================================================
   8. STAT BARS (opt-in: .stat-bar with data-value 0-100)
   ========================================================= */
.ris-statbar-track { height: 12px; border-radius: 8px; background:#eee; overflow:hidden; margin: 6px 0; }
.ris-statbar-fill { height:100%; width:0%; border-radius: 8px;
  background: linear-gradient(90deg, var(--ris-accent), var(--ris-accent-2));
  transition: width 1.2s cubic-bezier(.22,1,.36,1); }

/* =========================================================
   9. MAGNETIC + TILT helpers
   ========================================================= */
.ris-magnetic { transition: transform .2s cubic-bezier(.22,1,.36,1); will-change: transform; display:inline-block; }
.ris-tilt { transition: transform .15s ease-out; transform-style: preserve-3d; will-change: transform; }

/* =========================================================
   ACCESSIBILITY & SAFETY
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .ris-reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .ris-progress-track, .ris-progress-ball, .ris-cursor-ball, .ris-cursor-ring, .ris-cursor-trail { display:none !important; }
  .ris-mascot-body, .ris-mascot-ball, .ris-mascot-arm, .ris-vs-badge, .ris-player::after { animation: none !important; }
  .ris-vs-home, .ris-vs-away { transform: none !important; }
  .ris-magnetic, .ris-tilt { transform:none !important; transition:none !important; }
}