/* Homepage map and globe: moments that matter (map-wow.js). */
.wow-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.wow-ui { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.wow-ui > * { pointer-events: auto; }
.wow-ui [hidden] { display: none !important; }
:root { --wow-gold: #ffd23f; }

/* 1. Welcome */
.wow-spot { position: absolute; inset: 0; background: radial-gradient(circle at var(--x) var(--y), transparent 0 7%, rgba(2, 6, 20, 0.55) 20%); transition: opacity 1.2s ease; animation: wow-fade-in 0.6s ease both; }
.wow-spot.out { opacity: 0; }
.wow-pin { position: absolute; width: 34px; height: 34px; margin: -34px 0 0 -17px; color: var(--wow-gold); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(255, 210, 63, 0.7)); animation: wow-drop 0.9s cubic-bezier(.3, 1.5, .5, 1) both; }
.wow-pin svg { width: 100%; height: 100%; }
@keyframes wow-drop { 0% { transform: translateY(-160px) scale(0.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.wow-burst { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid var(--wow-gold); opacity: 0; animation: wow-burst 1.4s ease-out both; }
@keyframes wow-burst { 0% { opacity: 1; transform: scale(0.4); } 100% { opacity: 0; transform: scale(7); } }
.wow-beam { fill: none; stroke: var(--wow-gold); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 210, 63, 0.9)); vector-effect: non-scaling-stroke; }
.wow-beam.go { transition: stroke-dashoffset 1.6s cubic-bezier(.5, 0, .3, 1) 0.9s; stroke-dashoffset: 0 !important; }
.wow-welcome {
  position: absolute; transform: translateX(-50%); width: min(300px, 86%); padding: 14px 16px 14px; border-radius: 16px; text-align: center;
  background: rgba(8, 14, 34, 0.92); border: 1px solid rgba(255, 210, 63, 0.6); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7), 0 0 30px -8px rgba(255, 210, 63, 0.45);
  color: #fff; display: flex; flex-direction: column; gap: 4px; animation: wow-card-in 0.6s cubic-bezier(.2, .8, .2, 1.2) 1.2s both;
}
@keyframes wow-card-in { from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.92); } }
.wow-w-hi { font: 800 1.15rem/1.2 var(--font-head, Inter, sans-serif); color: var(--wow-gold); }
.wow-w-line { font-size: 1rem; }
.wow-w-line strong { font: 800 1.3rem var(--font-head, Inter, sans-serif); font-variant-numeric: tabular-nums; }
.wow-w-sub { font-size: 0.8rem; color: #b8c4e6; }
.wow-close { position: absolute; top: 4px; right: 6px; width: 30px; height: 30px; border: 0; background: transparent; color: #b8c4e6; font-size: 1.3rem; cursor: pointer; border-radius: 8px; }
.wow-close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.wow-see-me { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; }
.wow-see-me svg { width: 18px; height: 18px; color: var(--wow-gold); }

/* 2. Sunday takeover */
.hero-map.wow-converge .map-line { stroke: var(--wow-gold); opacity: 0.85; }
.hero-map.wow-converge .map-line-flow { animation-direction: reverse; animation-duration: 0.9s; }
.hero-map.wow-converge .map-dot-hub, .hero-map.wow-live .map-dot-hub { background: var(--wow-gold); box-shadow: 0 0 0 4px rgba(255, 210, 63, 0.3), 0 0 30px 8px rgba(255, 210, 63, 0.7); }
.wow-takeover {
  position: absolute; left: 50%; top: 56px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 18px 12px; border-radius: 16px; background: rgba(8, 14, 34, 0.82); border: 1px solid rgba(255, 210, 63, 0.55);
  box-shadow: 0 0 34px -6px rgba(255, 210, 63, 0.5); color: #fff; text-align: center; backdrop-filter: blur(6px);
}
.wow-to-label { font: 700 0.72rem/1 var(--font-body, Inter, sans-serif); letter-spacing: 0.1em; text-transform: uppercase; color: var(--wow-gold); }
.wow-to-clock { font: 800 2rem/1.1 var(--font-head, Inter, sans-serif); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(255, 210, 63, 0.6); }
.wow-to-sub { font-size: 0.75rem; color: #b8c4e6; }
.wow-live-dot { width: 12px; height: 12px; border-radius: 50%; background: #ff4d4f; animation: wow-rec 1.4s ease-out infinite; }
@keyframes wow-rec { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.7); } 100% { box-shadow: 0 0 0 14px rgba(255, 77, 79, 0); } }
.wow-to-live { font: 800 1.3rem/1.2 var(--font-head, Inter, sans-serif); }
.wow-join { margin-top: 6px; }
.wow-shock { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid var(--wow-gold); box-shadow: 0 0 30px 6px rgba(255, 210, 63, 0.45); animation: wow-shock 2.6s cubic-bezier(.2, .6, .3, 1) both; }
@keyframes wow-shock { from { transform: scale(1); opacity: 1; } to { transform: scale(90); opacity: 0; border-width: 0.2px; } }

/* 3. Watch us grow */
.wow-grow-btn {
  position: absolute; left: 12px; top: 56px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; min-height: 34px; border-radius: 999px; cursor: pointer;
  font: 700 0.78rem/1 var(--font-body, Inter, sans-serif); color: #1a1200; border: 0;
  background: linear-gradient(135deg, #ffe27a, var(--wow-gold)); box-shadow: 0 8px 22px -10px rgba(255, 210, 63, 0.9);
}
.wow-grow-btn svg { width: 14px; height: 14px; }
.wow-grow-btn.on { background: rgba(8, 14, 34, 0.85); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); }
.wow-grow-btn.on svg { display: none; }
.globe-on .wow-grow-btn { display: none; }
.hero-map.wow-lapse .map-markers, .hero-map.wow-lapse .map-lines, .hero-map.wow-lapse .mfx-layer, .hero-map.wow-lapse .map-label { opacity: 0.08; transition: opacity 0.5s ease; }
.wow-gpin { position: absolute; width: 7px; height: 7px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--wow-gold); box-shadow: 0 0 12px 3px rgba(255, 210, 63, 0.6); transition: width 0.25s ease, height 0.25s ease; }
.wow-gpin.pop { animation: wow-gpop 0.5s ease-out; }
@keyframes wow-gpop { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.9); } 100% { box-shadow: 0 0 0 16px rgba(255, 210, 63, 0), 0 0 12px 3px rgba(255, 210, 63, 0.6); } }
.wow-lapse-box {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 10px 18px; border-radius: 16px; background: rgba(8, 14, 34, 0.85); border: 1px solid rgba(255, 210, 63, 0.5); color: #fff; min-width: 200px; text-align: center;
}
.wow-l-when { font-size: 0.78rem; color: #b8c4e6; font-variant-numeric: tabular-nums; }
.wow-l-total { font: 800 1.9rem/1.1 var(--font-head, Inter, sans-serif); color: var(--wow-gold); font-variant-numeric: tabular-nums; }
.wow-l-sub { font-size: 0.78rem; color: #dfe6ff; }

/* 4. Class time per country */
.wow-tt-time { display: block; margin-top: 2px; font-weight: 600; color: #ffe27a; }
.map-dot-tooltip:has(.wow-tt-time) { text-align: center; }
.wow-card-time { color: #ffe27a !important; font-weight: 600; }
.wow-remind { background: transparent !important; border: 1px solid rgba(255, 210, 63, 0.6) !important; color: #ffe27a !important; margin-left: 6px; }

/* 5. Golden Sundays */
.hero-map.wow-sunday .map-bg { filter: sepia(0.42) saturate(1.3) hue-rotate(-8deg) brightness(0.88); }
.hero-map.wow-sunday .map-dot-ring { border-color: var(--wow-gold); }
.hero-map.wow-sunday .map-panel { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 210, 63, 0.35), 0 0 40px -6px rgba(255, 210, 63, 0.35); }
.wow-badge {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; max-width: 70%;
  padding: 7px 14px; border-radius: 999px; background: linear-gradient(135deg, rgba(255, 226, 122, 0.95), rgba(245, 184, 46, 0.95)); color: #1a1200;
  font: 800 0.78rem/1.2 var(--font-body, Inter, sans-serif); box-shadow: 0 10px 26px -10px rgba(255, 210, 63, 0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wow-badge svg { width: 15px; height: 15px; flex-shrink: 0; animation: wow-spin 6s linear infinite; }
@keyframes wow-spin { to { transform: rotate(360deg); } }
.hero-map.wow-lapse .wow-badge, .hero-map:has(.wow-welcome) .wow-badge { display: none; }
.wow-sparkle { position: absolute; width: 10px; height: 10px; margin: -5px; background: radial-gradient(circle, #fff 0 18%, transparent 20%), linear-gradient(var(--wow-gold), var(--wow-gold)) center / 2px 100% no-repeat, linear-gradient(var(--wow-gold), var(--wow-gold)) center / 100% 2px no-repeat; animation: wow-twinkle 3s ease-in-out infinite; opacity: 0; }
@keyframes wow-twinkle { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0); } 50% { opacity: 0.95; transform: scale(1) rotate(45deg); } }

/* 6. Telegram pulse */
.wow-plane { position: absolute; left: -40px; top: 70%; width: 30px; height: 30px; color: #4fc3ff; filter: drop-shadow(0 0 8px rgba(79, 195, 255, 0.8)); animation: wow-fly 3.2s cubic-bezier(.45, .05, .55, .95) both; pointer-events: none; }
.wow-plane svg { width: 100%; height: 100%; }
@keyframes wow-fly { 0% { transform: translate(0, 0) rotate(-8deg); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(55vw, -90px) rotate(-14deg); } 90% { opacity: 1; } 100% { transform: translate(110vw, -30px) rotate(4deg); opacity: 0; } }
.wow-tg, .wow-replay {
  position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; max-width: min(92%, 460px);
  padding: 8px 14px; border-radius: 999px; background: rgba(8, 14, 34, 0.9); color: #fff; font: 600 0.8rem/1.3 var(--font-body, Inter, sans-serif);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.7); transition: opacity 0.5s ease, transform 0.5s ease; animation: wow-rise 0.5s ease both;
}
.wow-tg { bottom: 56px; border: 1px solid rgba(79, 195, 255, 0.6); }
.wow-replay { bottom: 98px; border: 1px solid rgba(255, 210, 63, 0.6); text-decoration: none; }
.wow-replay span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wow-replay svg { width: 14px; height: 14px; color: var(--wow-gold); flex-shrink: 0; }
.wow-replay:hover { border-color: var(--wow-gold); }
.wow-tg.out, .wow-replay.out { opacity: 0; transform: translateX(-50%) translateY(8px); }
@keyframes wow-rise { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }
.wow-replay-ring { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid #4fd1ff; box-shadow: 0 0 18px rgba(79, 209, 255, 0.6); animation: wow-replay-ring 2.4s ease-out both; }
@keyframes wow-replay-ring { from { transform: scale(1); opacity: 1; } to { transform: scale(26); opacity: 0; } }

/* Globe view: nothing over the globe disc; labels move into the top and bottom strips */
.globe-on .wow-takeover { top: 10px; flex-direction: row; gap: 10px; padding: 6px 14px; border-radius: 999px; }
.globe-on .wow-to-clock { font-size: 1.15rem; }
.globe-on .wow-to-sub { display: none; }
.globe-on .wow-tg, .globe-on .wow-replay { bottom: 12px; }
.globe-on .wow-replay { bottom: 12px; }
.globe-on .wow-tg ~ .wow-replay { display: none; }
.globe-on .wow-badge { bottom: 12px; }
.globe-on .wow-plane { display: none; }

/* Phones: smaller labels */
@media (max-width: 640px) {
  .wow-takeover { top: 46px; padding: 6px 12px 8px; }
  .wow-to-clock { font-size: 1.4rem; }
  .wow-to-sub { display: none; }
  .wow-grow-btn { top: 46px; left: 8px; padding: 6px 10px; min-height: 30px; font-size: 0.72rem; }
  .wow-badge { font-size: 0.68rem; max-width: 64%; bottom: 8px; padding: 5px 10px; }
  .wow-tg, .wow-replay { font-size: 0.7rem; bottom: 40px; padding: 6px 10px; }
  .wow-replay { bottom: 76px; }
  .wow-lapse-box { bottom: 8px; padding: 6px 12px; min-width: 150px; }
  .wow-l-total { font-size: 1.4rem; }
  .wow-welcome { width: min(260px, 90%); padding: 10px 12px; }
}

/* 7. Scroll reveal: removed 2026-10-03 (no tilting map or globe). */

@keyframes wow-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .wow-pin, .wow-burst, .wow-spot, .wow-welcome, .wow-shock, .wow-sparkle, .wow-plane, .wow-badge svg, .wow-live-dot, .wow-tg, .wow-replay, .wow-replay-ring, .wow-gpin.pop { animation: none !important; }
  .wow-beam.go { transition: none; }
  .wow-burst, .wow-shock, .wow-plane, .wow-replay-ring, .wow-sparkle { display: none; }
}
html.lite .wow-sparkle, html.lite .wow-plane, html.lite .wow-shock { display: none; }

/* Keep the big moments clear: the milestone note steps aside while they show */
.hero-map:has(.wow-welcome) .map-milestone, .hero-map:has(.wow-welcome) .map-confetti,
.hero-map.wow-lapse .map-milestone, .hero-map.wow-lapse .map-confetti,
.hero-map.wow-converge .map-milestone, .hero-map.wow-live .map-milestone { display: none !important; }
.map-card .wow-card-time { flex-basis: 100%; display: block; margin: 2px 0 6px; }

/* One message at a time: the welcome and the time-lapse come first */
.hero-map:has(.wow-welcome) .wow-replay, .hero-map:has(.wow-welcome) .wow-tg,
.hero-map.wow-lapse .wow-replay, .hero-map.wow-lapse .wow-tg { display: none; }
.wow-b-short { display: none; }

/* Phones: the map is small, so everything gets its own corner */
@media (max-width: 640px) {
  .wow-grow-btn { top: 8px; left: 8px; }
  .wow-badge { left: auto; right: auto; transform: none; bottom: auto; top: 8px; left: 132px; max-width: none; padding: 6px 10px; }
  .wow-b-long { display: none; }
  .wow-b-short { display: inline; }
  .wow-takeover { top: 46px; flex-direction: row; gap: 8px; padding: 5px 12px; border-radius: 999px; }
  .wow-to-label { font-size: 0.62rem; }
  .wow-to-clock { font-size: 1.05rem; }
  .wow-to-live { font-size: 0.95rem; }
  .wow-join { margin-top: 0; padding: 5px 10px; font-size: 0.75rem; }
  .wow-tg, .wow-replay { top: 46px; bottom: auto; max-width: 86%; }
  .hero-map.wow-converge .wow-tg, .hero-map.wow-converge .wow-replay, .hero-map.wow-live .wow-tg, .hero-map.wow-live .wow-replay { top: 86px; }
  .wow-welcome { left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto; transform: none; padding: 8px 34px 8px 12px; text-align: left; gap: 1px; animation-name: wow-card-in-phone; }
  @keyframes wow-card-in-phone { from { opacity: 0; transform: translateY(14px); } }
  .wow-w-hi { font-size: 0.95rem; }
  .wow-w-line { font-size: 0.85rem; }
  .wow-w-line strong { font-size: 1.05rem; }
  .wow-w-sub { display: none; }
  .wow-lapse-box { bottom: 8px; left: 8px; right: 8px; transform: none; flex-direction: row; justify-content: center; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .wow-l-total { font-size: 1.2rem; }
}
@media (max-width: 640px) { .wow-to-label, .wow-to-live, .wow-join { white-space: nowrap; } }

/* Fixes (globe rule: nothing over the globe disc; notes never over pins on phones) */
.globe-on .wow-layer { display: none; }                         /* flat-map effects only */
.globe-on .wow-tg, .globe-on .wow-replay { top: auto !important; bottom: 12px; }
.wow-below { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wow-below:empty { display: none; }
.wow-below .wow-tg, .wow-below .wow-replay { position: static; transform: none; top: auto; bottom: auto; max-width: 100%; margin: 6px auto 0; }
.wow-below .wow-tg.out, .wow-below .wow-replay.out { transform: translateY(6px); }
@media (max-width: 640px) {
  .globe-on .wow-takeover { top: 8px; left: 8px; transform: none; padding: 4px 10px; }
  .globe-on .wow-badge { display: none; }                      /* the gold glow round the globe says it */
}

/* 5. Golden Sundays on the black-land map (map-hub.js .mh-land): the land turns a
   deep warm gold with gold borders on class day; the yellow hover stays. */
.hero-map.wow-sunday .mh-land path:not(.is-hover) { fill: #4a3308; stroke: rgba(255, 210, 63, 0.8); }
@media (prefers-reduced-motion: no-preference) {
  .hero-map.wow-sunday .mh-land { animation: wow-land-glow 4s ease-in-out infinite; }
  @keyframes wow-land-glow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 6px rgba(255, 210, 63, 0.35)); } }
}