/* ============================================================
   BRILLIANTICS — THE FLOATING SCENE (#anywhere)
   Pairs with js/landing-float.js. JS moves .fl-item (scroll and
   pointer); CSS floats the inner .fl-bob. Positions are % of the
   section so the scene scales with the window.
   ============================================================ */

.fl-section {
  position: relative;
  overflow: hidden;
  min-height: 860px;
  padding: 120px 0 0;
  background:
    radial-gradient(1200px 520px at 50% 18%, #f2fbff 0%, rgba(242, 251, 255, 0) 70%),
    linear-gradient(180deg, #ddf3fb 0%, #cfeefa 55%, #c2e8f8 100%);
  isolation: isolate;
}
.fl-copy { position: relative; z-index: 3; text-align: center; max-width: 720px; pointer-events: none; }
.fl-copy .section-title { color: #0b1020; }
.fl-copy .section-sub { color: #23406b; margin-left: auto; margin-right: auto; }

.fl-stage { position: absolute; inset: 0; z-index: 1; }
.fl-item { position: absolute; will-change: transform, opacity; opacity: 0; }
.fl-section.is-still .fl-item { opacity: 1; }

/* ---- float loops (inner element) ---- */
.fl-bob { animation: fl-bob 6s ease-in-out infinite; }
.fl-b1 { animation-duration: 5.2s; }
.fl-b2 { animation-duration: 6.4s; animation-delay: -1.8s; }
.fl-b3 { animation-duration: 7.6s; animation-delay: -3.1s; }
@keyframes fl-bob {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(4px, -12px) rotate(2deg); }
  66%      { transform: translate(-3px, -5px) rotate(-1.5deg); }
}

/* ---- positions (desktop) ---- */
.fl-phone-l { left: 7%;  top: 44%; }
.fl-phone-c { left: 41%; top: 60%; }
.fl-phone-r { left: 76%; top: 50%; }
.fl-t1 { left: 4%;  top: 78%; }
.fl-t2 { left: 18%; top: 14%; }
.fl-t3 { left: 79%; top: 12%; }
.fl-t4 { left: 90%; top: 34%; }
.fl-t5 { left: 29%; top: 56%; }
.fl-t6 { left: 62%; top: 52%; }
.fl-t7 { left: 6%;  top: 26%; }
.fl-t8 { left: 63%; top: 86%; }
.fl-g1 { left: 27%; top: 38%; }
.fl-g2 { left: 71%; top: 33%; }
.fl-g3 { left: 90%; top: 76%; }
.fl-d1 { left: 50%; top: 4%; }
.fl-d2 { left: 36%; top: 88%; }
.fl-d3 { left: 94%; top: 58%; }

/* ---- phones ---- */
.fl-phone {
  position: relative; z-index: 2;
  width: 168px; height: 330px;
  border-radius: 32px;
  background: #0b1020;
  padding: 9px;
  box-shadow: 10px 12px 0 rgba(0, 74, 153, 0.18);
}
.fl-phone::before {               /* side button */
  content: ""; position: absolute; right: -4px; top: 74px;
  width: 4px; height: 44px; border-radius: 0 3px 3px 0; background: #1d2742;
}
.fl-screen {
  width: 100%; height: 100%;
  border-radius: 24px;
  background: #f8fafc;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 14px 14px;
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
}

/* path screen */
.fl-scr-path { align-items: center; justify-content: flex-end; gap: 14px; padding-bottom: 26px; background: linear-gradient(180deg, #eaf3ff, #f8fafc); }
.fl-node { width: 46px; height: 40px; border-radius: 50%; background: #dbe3ee; box-shadow: 0 6px 0 #c3cede; }
.fl-node:nth-child(2) { transform: translateX(-26px); }
.fl-node:nth-child(3) { transform: translateX(10px); }
.fl-node:nth-child(4) { transform: translateX(30px); }
.fl-node:nth-child(5) { transform: translateX(-6px); }
.fl-node.is-done { background: #00aab0; box-shadow: 0 6px 0 #008286; }
.fl-node.is-now  { background: #2563ff; box-shadow: 0 6px 0 #1846c7, 0 0 0 6px rgba(37, 99, 255, 0.18); }

/* lesson screen */
.fl-q { font-weight: 800; font-size: 15px; line-height: 1.2; color: #0b1020; }
.fl-opt { height: 54px; border-radius: 14px; background: #fff; border: 2px solid #dbe3ee; box-shadow: 0 4px 0 #dbe3ee; }
.fl-opt.is-good { border-color: #00aab0; box-shadow: 0 4px 0 #00aab0; background: #e6f8f8; display: flex; align-items: flex-end; padding: 6px 10px; }
.fl-opt.is-good b { font-size: 12px; color: #007a7e; }
.fl-btn { margin-top: auto; height: 38px; border-radius: 14px; background: #004a99; box-shadow: 0 4px 0 #00356e; }

/* result screen */
.fl-r-label { font-size: 12px; font-weight: 700; color: #4a5a78; text-transform: uppercase; letter-spacing: .08em; }
.fl-r-num { font-size: 40px; font-weight: 800; color: #004a99; line-height: 1; }
.fl-r-num small { font-size: 15px; color: #4a5a78; font-weight: 700; }
.fl-bar { height: 12px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.fl-bar i { display: block; width: 57%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #00aab0, #2563ff); }
.fl-line { height: 10px; border-radius: 99px; background: #e2e8f0; margin-top: 8px; }
.fl-line.is-short { width: 60%; margin-top: 0; }

/* ---- Spark behind the left phone ---- */
.fl-spark-slot {
  --rise: 1;
  position: absolute; z-index: 1;
  left: 34px; top: -138px;
  width: 196px; height: 196px;
  transform: translateY(calc((1 - var(--rise)) * 120px)) rotate(calc(var(--rise) * 12deg));
  transform-origin: 30% 100%;
  cursor: pointer;
  pointer-events: auto;
}
.fl-spark-slot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fl-spark-slot.is-swap svg { animation: fl-swap 420ms cubic-bezier(.2, .9, .3, 1.3); }
.fl-spark-slot.is-hop svg  { animation: fl-hop 760ms cubic-bezier(.3, .8, .3, 1.2); }
@keyframes fl-swap {
  0%   { transform: scale(1.12, 0.86); }
  60%  { transform: scale(0.95, 1.06); }
  100% { transform: none; }
}
@keyframes fl-hop {
  0%   { transform: scale(1.15, 0.82); }
  30%  { transform: translateY(-50px) scale(0.9, 1.12) rotate(-10deg); }
  55%  { transform: translateY(-50px) rotate(10deg); }
  80%  { transform: scale(1.14, 0.86); }
  100% { transform: none; }
}
.fl-stage { pointer-events: none; }
.fl-spark-slot { pointer-events: auto; }

/* ---- chunky icon tiles ---- */
.fl-tile {
  display: grid; place-items: center;
  width: 76px; height: 76px; border-radius: 22px;
  color: #fff;
  box-shadow: 0 8px 0 var(--edge), 6px 14px 0 rgba(0, 74, 153, 0.12);
  transform: rotate(-6deg);
}
.fl-tile .sym { width: 36px; height: 36px; }
.fl-tile.is-sm { width: 56px; height: 56px; border-radius: 17px; }
.fl-tile.is-sm .sym { width: 26px; height: 26px; }
.fl-tile.is-blue  { background: #2563ff; --edge: #1846c7; }
.fl-tile.is-teal  { background: #00aab0; --edge: #008286; }
.fl-tile.is-navy  { background: #004a99; --edge: #00356e; }
.fl-tile.is-gold  { background: #ffc531; --edge: #e09e00; color: #7a4b00; }
.fl-tile.is-white { background: #fff;    --edge: #c9d6e6; color: #2563ff; }

.fl-gem {
  display: block; width: 26px; height: 26px; border-radius: 6px;
  background: linear-gradient(135deg, #7fb0ff, #2563ff);
  box-shadow: 0 4px 0 #1846c7;
}
.fl-gem.is-teal { background: linear-gradient(135deg, #6fe3e6, #00aab0); box-shadow: 0 4px 0 #008286; }
.fl-gem.is-gold { background: linear-gradient(135deg, #ffe08a, #ffc531); box-shadow: 0 4px 0 #e09e00; }
.fl-dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: #9db8ff; }
.fl-dot.is-teal { background: #7fdadd; }
.fl-dot.is-navy { background: #7d9cc7; }

/* ---- tablet ---- */
@media (max-width: 1099px) {
  .fl-section { min-height: 780px; }
  .fl-phone { width: 140px; height: 276px; border-radius: 28px; }
  .fl-spark-slot { width: 160px; height: 160px; left: 28px; top: -112px; }
  .fl-phone-l { left: 3%; }
  .fl-phone-r { left: 74%; }
}

/* ---- phone ---- */
@media (max-width: 759px) {
  .fl-section { min-height: 720px; padding-top: 72px; }
  .fl-phone { width: 112px; height: 220px; border-radius: 24px; padding: 7px; }
  .fl-screen { border-radius: 18px; padding: 18px 9px 9px; gap: 7px; }
  .fl-q { font-size: 11px; }
  .fl-opt { height: 36px; border-radius: 10px; }
  .fl-btn { height: 26px; }
  .fl-r-num { font-size: 28px; }
  .fl-node { width: 32px; height: 28px; }
  .fl-scr-path { gap: 9px; }
  .fl-spark-slot { width: 120px; height: 120px; left: 18px; top: -84px; }
  .fl-tile { width: 54px; height: 54px; border-radius: 16px; }
  .fl-tile .sym { width: 26px; height: 26px; }
  .fl-phone-l { left: -4%; top: 52%; }
  .fl-phone-c { left: 36%; top: 64%; }
  .fl-phone-r { left: 72%; top: 54%; }
  .fl-t2, .fl-t3, .fl-t7, .fl-g1, .fl-g2, .fl-d1 { display: none; }
  .fl-t1 { left: 2%; top: 88%; }
  .fl-t4 { left: 84%; top: 43%; }
  .fl-t5 { left: 26%; top: 47%; }
  .fl-t6 { left: 60%; top: 46%; }
  .fl-t8 { left: 80%; top: 90%; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-section:not(.fl-force) .fl-bob,
  .fl-section:not(.fl-force) .fl-spark-slot svg { animation: none !important; }
  .fl-section:not(.fl-force) .fl-item { opacity: 1; }
}