/* «Онлайн уроки»: вращающаяся Земля и сцена прокрутки (online-globe-1.js).
   Сцена высотой 320vh, внутри экран «прилипает»; Земля поднимается снизу,
   потом уходит влево (на телефоне – вверх), справа – Zoom и Телемост. */
.og-scene { position: relative; height: 320vh; height: 320svh; background: #000; }
.og-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 64%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 76%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 40%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 58%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 8%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 30%, rgba(255,255,255,.4) 50%, transparent 51%),
    #02030a;
}
.og-globe {
  position: absolute; left: 50%; top: 50%;
  width: min(84vh, 64vw); height: min(84vh, 64vw);
  margin: calc(min(84vh, 64vw) / -2) 0 0 calc(min(84vh, 64vw) / -2);
  will-change: transform;
}
.og-globe::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 160, 255, .45) 43%, rgba(90, 120, 240, .12) 47%, rgba(80, 100, 220, 0) 54%);
}
.og-canvas { position: relative; display: block; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; } /* всегда ровный круг, в том числе в Safari */
.og-no-webgl .og-globe::after {
  content: ''; position: absolute; inset: 8%; border-radius: 50%;
  background: url('/assets/img/online/earth-2048.jpg') center/cover;
  box-shadow: inset -40px -20px 80px rgba(0,0,0,.85);
}
.og-phase {
  position: absolute; inset: 0; z-index: 2; display: grid; align-items: center;
  max-width: 1160px; margin: 0 auto; padding: 0 20px; pointer-events: none;
}
.og-phase a { pointer-events: auto; }
.og-phase[data-og-phase="1"] { grid-template-columns: 1fr 1fr; gap: 40px; }
.og-phase[data-og-phase="1"] .og-right { justify-self: end; max-width: 340px; }
.og-phase[data-og-phase="2"] { grid-template-columns: 1fr 1fr; opacity: 0; visibility: hidden; }
.og-phase[data-og-phase="2"] .og-block { grid-column: 2; max-width: 460px; }
.og-kicker { color: #c7c7c7; font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.og-title { margin: 12px 0 0; color: #fff; font-weight: 300; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; }
.og-text { margin: 16px 0 0; color: #d6d6d6; font-weight: 300; font-size: 16px; line-height: 1.65; }
.og-text b { color: #fff; font-weight: 500; }
.og-cta { display: inline-block; margin-top: 22px; padding: 13px 24px; border-radius: 6px; background: #fff; color: #000; font-weight: 600; font-size: 14px; text-decoration: none; }
.og-apps { display: flex; gap: 28px; margin-top: 26px; }
.og-app { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 500; font-size: 15px; }
.og-app img { width: 48px; height: 48px; border-radius: 12px; }
.og-hint { position: absolute; left: 50%; bottom: 28px; z-index: 3; transform: translateX(-50%); color: rgba(255,255,255,.6); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 859.98px) {
  .og-globe { width: 94vw; height: 94vw; margin: calc(-47vw) 0 0 -47vw; }
  .og-phase { align-items: start; padding-top: 12svh; }
  .og-phase[data-og-phase="1"] { grid-template-columns: 1fr; gap: 14px; align-content: start; }
  .og-phase[data-og-phase="1"] .og-right { justify-self: start; }
  .og-phase[data-og-phase="2"] { grid-template-columns: 1fr; align-items: end; padding: 0 20px 10svh; }
  .og-phase[data-og-phase="2"] .og-block { grid-column: 1; }
  .og-apps { gap: 20px; }
}

/* 30.09.2026, его просьба: на телефоне без прокрутки шара. Сверху заголовок,
   посередине вращающийся шар, ниже «В удобное для вас время», потом текст и
   кнопка. Шар только вращается (скрипт на телефоне ничего не двигает и не
   рисует, пока идёт прокрутка – так страница не тормозит). */
@media (max-width: 859.98px) {
  .og-scene { height: auto; }
  .og-sticky { position: relative; top: auto; height: auto; overflow: hidden; display: flex; flex-direction: column; padding: 96px 20px 64px; }
  .og-phase { display: contents; }
  .og-phase[data-og-phase] { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .og-left { order: 1; }
  .og-globe { order: 2; position: relative; left: auto; top: auto; width: min(92vw, 440px); height: min(92vw, 440px); margin: 26px auto 22px; transform: none !important; }
  .og-phase[data-og-phase="2"] .og-block { order: 3; max-width: none; }
  .og-phase[data-og-phase="1"] .og-right { order: 4; max-width: none; margin-top: 8px; pointer-events: auto; }
  .og-hint { display: none; }
}