/*--------------------------------------------------------------
# GlobalAI-2027 — Motion layer
# Page animations + animated toy robots.
# Loaded after main.css. Safe to remove: delete the <link> in
# header.php and the <script> in footer.php.
--------------------------------------------------------------*/

/* ============================================================
   1. Scroll progress bar
   ============================================================ */
.rb-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 10000;
  pointer-events: none;
  background: linear-gradient(90deg, #22d3ee, #6366f1, #22d3ee);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ============================================================
   2. Hero entrance
   ============================================================ */
@keyframes rb-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes rb-pop {
  from { opacity: 0; transform: scale(.94) translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.rb-js .hero-main .event-badge,
.rb-js .hero-main .main-title,
.rb-js .hero-main .info-badges,
.rb-js .hero-main .action-area {
  animation: rb-rise .9s cubic-bezier(.2, .7, .2, 1) both;
}
.rb-js .hero-main .event-badge { animation-delay: .15s; }
.rb-js .hero-main .main-title  { animation-delay: .30s; }
.rb-js .hero-main .info-badges { animation-delay: .50s; }
.rb-js .hero-main .action-area { animation-delay: .65s; }
.rb-js .hero-main .countdown-card {
  animation: rb-pop 1s cubic-bezier(.2, .7, .2, 1) .45s both;
}

/* Soft breathing glow around the countdown card */
@keyframes rb-card-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(34, 211, 238, 0), 0 18px 40px rgba(0, 0, 0, .25); }
  50%      { box-shadow: 0 0 34px rgba(34, 211, 238, .22), 0 18px 40px rgba(0, 0, 0, .25); }
}
.rb-js .hero-main .countdown-card {
  animation: rb-pop 1s cubic-bezier(.2, .7, .2, 1) .45s both,
             rb-card-glow 4.5s ease-in-out 1.6s infinite;
}

/* Seconds digit ticks every second */
@keyframes rb-tick {
  0%   { transform: translateY(-5px) scale(1.08); color: #22d3ee; }
  100% { transform: none; }
}
.rb-tick { animation: rb-tick .45s ease-out; }

/* Gentle ring pulse on the primary call-to-action */
@keyframes rb-ring {
  0%   { box-shadow: 0 0 0 0 rgba(34, 211, 238, .55); }
  70%  { box-shadow: 0 0 0 16px rgba(34, 211, 238, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}
.rb-js .btn-register { animation: rb-ring 2.6s ease-out 2s infinite; }
.btn-register:hover, .btn-agenda:hover, .schedule-btn:hover { transform: translateY(-2px); }

/* Featured presenter avatars bob in sequence */
@keyframes rb-float-sm {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.rb-js .speaker-avatars .speaker-avatar { animation: rb-float-sm 3.2s ease-in-out infinite; }
.rb-js .speaker-avatars .speaker-avatar:nth-child(2) { animation-delay: .3s; }
.rb-js .speaker-avatars .speaker-avatar:nth-child(3) { animation-delay: .6s; }
.rb-js .speaker-avatars .speaker-avatar:nth-child(4) { animation-delay: .9s; }

/* Hero stage: particle network + hovering drone (sits between video and text) */
#hero.hero { position: relative; overflow: hidden; }
.rb-hero-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.rb-net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }

/* ============================================================
   3. Scroll reveal
   (hidden state only exists while JS has tagged the element)
   ============================================================ */
.rb-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--rb-delay, 0ms);
}
.rb-reveal.rb-from-left  { transform: translateX(-34px); }
.rb-reveal.rb-from-right { transform: translateX(34px); }
.rb-reveal.rb-in { opacity: 1; transform: none; }

/* Decorative lift on cards (does not touch the site's own hover rules) */
@keyframes rb-icon-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}
.feature-item:hover .feature-icon i,
.stat-item:hover > i { animation: rb-icon-pulse .8s ease-in-out; }

@keyframes rb-underline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.rb-js .section-title.rb-in h2::after,
.rb-js .session-heading.rb-in h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #22d3ee, #6366f1);
  transform-origin: 0 50%;
  animation: rb-underline .8s .25s cubic-bezier(.2, .7, .2, 1) both;
}

/* About image slow drift */
@keyframes rb-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.rb-js .image-showcase .main-image img { animation: rb-drift 7s ease-in-out infinite; }

/* ============================================================
   4. Robot SVG shared animation primitives
   ============================================================ */
.rb-robot { display: block; overflow: visible; }
.rb-robot * { transform-box: view-box; }

@keyframes rb-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(.08); }
}
.rb-eye { transform-box: fill-box !important; transform-origin: center; animation: rb-blink 5.2s infinite; }
.rb-eye--b { animation-delay: -2.1s; animation-duration: 6.1s; }

@keyframes rb-led { 0%, 100% { opacity: .22; } 50% { opacity: 1; } }
.rb-led { animation: rb-led 1.5s steps(2, jump-none) infinite; }

@keyframes rb-bulb { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.rb-bulb { animation: rb-bulb 1.2s ease-in-out infinite; }
.rb-halo { transform-box: fill-box !important; transform-origin: center; animation: rb-halo 1.2s ease-in-out infinite; }
@keyframes rb-halo { 0%, 100% { opacity: .1; transform: scale(.8); } 50% { opacity: .45; transform: scale(1.25); } }

@keyframes rb-core { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.rb-core { animation: rb-core 1.8s ease-in-out infinite; }

/* ============================================================
   5. Walking tin robot ("Rivet")
   ============================================================ */
@keyframes rb-leg    { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
@keyframes rb-swing  { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes rb-bob    { from { transform: translateY(0); } to { transform: translateY(-2.6px); } }
@keyframes rb-waddle { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes rb-head   { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes rb-needle { from { transform: rotate(-55deg); } to { transform: rotate(55deg); } }

.rb-waddle { transform-origin: 60px 178px; animation: rb-waddle 1.4s ease-in-out infinite; }
.rb-bob    { animation: rb-bob .35s ease-in-out infinite alternate; }
.rb-head   { transform-origin: 60px 62px; animation: rb-head 2.8s ease-in-out infinite; }
.rb-leg-l  { transform-origin: 47px 122px; animation: rb-leg .7s ease-in-out infinite alternate; }
.rb-leg-r  { transform-origin: 73px 122px; animation: rb-leg .7s ease-in-out infinite alternate-reverse; }
.rb-arm-l  { transform-origin: 29px 79px;  animation: rb-swing .7s ease-in-out infinite alternate-reverse; }
.rb-arm-r  { transform-origin: 91px 79px;  animation: rb-swing .7s ease-in-out infinite alternate; }
.rb-needle { transform-origin: 52px 90px;  animation: rb-needle 2.2s ease-in-out infinite alternate; }

/* ============================================================
   6. Rolling rover robot ("Pixel")
   ============================================================ */
@keyframes rb-spin  { to { transform: rotate(360deg); } }
@keyframes rb-glide { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-1.6px) rotate(.8deg); } }
@keyframes rb-wave  { from { transform: rotate(-38deg); } to { transform: rotate(14deg); } }
@keyframes rb-scan  { 0%, 100% { transform: translateX(-1.5px); } 50% { transform: translateX(1.5px); } }

.rb-spin-a { transform-origin: 40px 125px;  animation: rb-spin .9s linear infinite; }
.rb-spin-b { transform-origin: 100px 125px; animation: rb-spin .9s linear infinite; }
.rb-glide  { transform-origin: 70px 138px;  animation: rb-glide .8s ease-in-out infinite alternate; }
.rb-wave   { transform-origin: 106px 84px;  animation: rb-wave .9s ease-in-out infinite alternate; }
.rb-scan   { animation: rb-scan 3.4s ease-in-out infinite; }

/* ============================================================
   7. Footer "floor" — robots patrol along the top edge of the footer
   ============================================================ */
.rb-floor {
  position: absolute;
  left: 0;
  right: 0;
  top: -122px;
  height: 122px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.rb-walker { position: absolute; bottom: 0; left: 0; will-change: transform; }
.rb-walker .rb-robot { width: 76px; height: auto; }
.rb-walker--b .rb-robot { width: 96px; }

@keyframes rb-patrol-fwd {
  0%   { transform: translateX(-180px); }
  45%  { transform: translateX(calc(100vw + 20px)); }
  50%  { transform: translateX(calc(100vw + 20px)); }
  95%  { transform: translateX(-180px); }
  100% { transform: translateX(-180px); }
}
@keyframes rb-patrol-rev {
  0%   { transform: translateX(calc(100vw + 20px)); }
  45%  { transform: translateX(-180px); }
  50%  { transform: translateX(-180px); }
  95%  { transform: translateX(calc(100vw + 20px)); }
  100% { transform: translateX(calc(100vw + 20px)); }
}
@keyframes rb-flip-fwd {
  0%, 49.9% { transform: scaleX(1); }
  50%, 100% { transform: scaleX(-1); }
}
@keyframes rb-flip-rev {
  0%, 49.9% { transform: scaleX(-1); }
  50%, 100% { transform: scaleX(1); }
}
.rb-walker--a { animation: rb-patrol-fwd 38s linear infinite; }
.rb-walker--a .rb-flip { animation: rb-flip-fwd 38s linear infinite; }
.rb-walker--b { animation: rb-patrol-rev 52s linear -20s infinite; }
.rb-walker--b .rb-flip { animation: rb-flip-rev 52s linear -20s infinite; }

/* ============================================================
   8. Hovering drone robot ("Orbit")
   ============================================================ */
.rb-drone { position: absolute; left: 0; top: 0; width: 96px; will-change: transform; }
.rb-drone-y { will-change: transform; }

@keyframes rb-drone-x {
  from { transform: translateX(calc(var(--rb-hw, 1200px) * .04)); }
  to   { transform: translateX(calc(var(--rb-hw, 1200px) * .86)); }
}
@keyframes rb-drone-y {
  from { transform: translateY(calc(var(--rb-hh, 700px) * .12)); }
  to   { transform: translateY(calc(var(--rb-hh, 700px) * .68)); }
}
@keyframes rb-hover {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-9px) rotate(4deg); }
}
@keyframes rb-rotor { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.18); } }
@keyframes rb-disc  { 0%, 100% { opacity: .38; } 50% { opacity: .2; } }
@keyframes rb-pupil { 0%, 100% { transform: translate(-3px, 0); } 30% { transform: translate(3px, -1px); } 65% { transform: translate(0, 2px); } }
@keyframes rb-glow  { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }

.rb-drone { animation: rb-drone-x 29s ease-in-out infinite alternate; }
.rb-drone-y { animation: rb-drone-y 21s ease-in-out infinite alternate; }
.rb-drone .rb-robot { animation: rb-hover 3.4s ease-in-out infinite; }
.rb-rotor { animation: rb-rotor .09s linear infinite; }
.rb-rotor-a { transform-origin: 20px 24px; }
.rb-rotor-b { transform-origin: 100px 24px; animation-delay: -.045s; }
.rb-disc  { animation: rb-disc .18s linear infinite; }
.rb-pupil { animation: rb-pupil 4.6s ease-in-out infinite; }
.rb-underlight { animation: rb-glow 1.6s ease-in-out infinite; }

/* ============================================================
   9. Welcome buddy ("Volt") — peeks up in the bottom-left corner
   ============================================================ */
.rb-buddy {
  position: fixed;
  left: 14px;
  bottom: 0;
  z-index: 1000;
  width: 92px;
  transform: translateY(108%);
  transition: transform 1s cubic-bezier(.2, .9, .3, 1.15);
}
.rb-buddy.rb-up { transform: none; }
.rb-buddy.rb-gone { display: none; }
.rb-buddy-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rb-buddy-btn:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; border-radius: 12px; }
.rb-buddy .rb-robot { width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); transition: transform .25s ease; }
.rb-buddy-btn:hover .rb-robot { transform: translateY(-4px) rotate(-2deg); }

@keyframes rb-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes rb-hi { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(24deg); } }
.rb-breathe { animation: rb-breathe 3s ease-in-out infinite; }
.rb-hi { transform-origin: 88px 88px; animation: rb-hi .55s ease-in-out infinite; }
.rb-hi-stop .rb-hi { animation: none; transform: rotate(6deg); }
.rb-bpupil { transition: transform .12s ease-out; }

.rb-bubble {
  position: absolute;
  left: 8px;
  bottom: calc(100% + 6px);
  width: 210px;
  padding: 10px 28px 10px 12px;
  border-radius: 14px 14px 14px 4px;
  background: #f4f8fb;
  color: #0f172a;
  font: 500 13px/1.4 var(--default-font, Roboto, sans-serif);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transform-origin: 14px 100%;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.rb-bubble.rb-show { opacity: 1; transform: none; pointer-events: auto; }
.rb-bubble .rb-x {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #475569;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.rb-bubble .rb-x:hover { background: #dbe4ec; }

/* ============================================================
   10. Responsive + accessibility
   ============================================================ */
.rb-paused, .rb-paused * { animation-play-state: paused !important; }

@media (max-width: 767px) {
  .rb-floor { top: -96px; height: 96px; }
  .rb-walker .rb-robot { width: 58px; }
  .rb-walker--b .rb-robot { width: 74px; }
  .rb-drone { width: 68px; }
  .rb-buddy { width: 70px; left: 8px; }
  .rb-bubble { width: 180px; font-size: 12px; }
  .rb-net { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .rb-robot *, .rb-walker, .rb-walker *, .rb-drone, .rb-drone *,
  .rb-hero-stage *, .rb-buddy, .rb-buddy * {
    animation: none !important;
    transition: none !important;
  }
  .rb-walker--a { transform: translateX(8vw); }
  .rb-walker--b { transform: translateX(78vw); }
  .rb-walker--b .rb-flip { transform: scaleX(-1); }
  .rb-drone { transform: translateX(72vw); }
  .rb-drone-y { transform: translateY(18vh); }
  .rb-buddy { transform: none; }
  .rb-progress { display: none; }
  .rb-reveal { opacity: 1 !important; transform: none !important; }
  .rb-js .hero-main * { animation: none !important; }
}

/* ============================================================
   11. "Explore AI Topics" side decorations (fill the empty gutters)
   Slow gears + circuit on the left, atom + neural net on the right.
   Only shown when the screen is wide enough to have gutters.
   ============================================================ */
.ai-sessions { overflow: hidden; }
.ai-sessions > .container { position: relative; z-index: 2; }
.rb-side {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc((100% - 1320px) / 2);
  pointer-events: none;
  z-index: 1;
  display: none;
}
.rb-side--l { left: 0; }
.rb-side--r { right: 0; }
.rb-side svg { width: 100%; height: 100%; display: block; overflow: visible; }
@media (min-width: 1500px) { .rb-side { display: block; } }

@keyframes rb-rot     { to { transform: rotate(360deg); } }
@keyframes rb-rot-rev { to { transform: rotate(-360deg); } }
@keyframes rb-trace   { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes rb-orb     { from { transform: translate(0, 0); } to { transform: translate(var(--dx, 8px), var(--dy, -26px)); } }
@keyframes rb-nodep   { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes rb-ping    { 0% { transform: scale(.7); opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes rb-hexf    { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-22px) rotate(60deg); } }

.rb-gear-a  { transform-origin: 100px 150px; animation: rb-rot 54s linear infinite; }
.rb-gear-b  { transform-origin: 170.5px 209px; animation: rb-rot-rev 36s linear infinite; }
.rb-ring-grp { transform-origin: 130px 150px; animation: rb-rot 70s linear infinite; }
.rb-orbit   { transform-origin: 130px 150px; animation: rb-rot var(--d, 18s) linear infinite; }
.rb-orbit--rev { animation-name: rb-rot-rev; }
.rb-trace   { stroke-dasharray: 7 93; animation: rb-trace var(--d, 8s) linear infinite; }
.rb-orb     { animation: rb-orb var(--d, 15s) ease-in-out infinite alternate; }
.rb-nn      { animation: rb-nodep 3.6s ease-in-out infinite; }
.rb-ping    { transform-box: fill-box; transform-origin: center; animation: rb-ping 4s ease-out infinite; }
.rb-hex     { transform-box: fill-box; transform-origin: center; animation: rb-hexf var(--d, 20s) ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .rb-side * { animation: none !important; }
}

/* ============================================================
   12. Custom cursor — glowing cyan ring (desktop mouse only)
   ============================================================ */
.rb-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 2147483600;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  will-change: transform;
}
.rb-cursor.rb-show { opacity: 1; }
.rb-cursor i {
  position: absolute;
  left: -17px;
  top: -17px;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid #22d3ee;
  background: transparent;
  box-shadow: 0 0 6px rgba(34, 211, 238, .85),
              0 0 16px rgba(34, 211, 238, .45),
              inset 0 0 8px rgba(34, 211, 238, .3);
  transition: transform .28s cubic-bezier(.2, .8, .3, 1.2), background-color .25s ease, border-color .25s ease;
}
.rb-cursor.rb-link i { transform: scale(1.55); background: rgba(34, 211, 238, .1); border-color: #67e8f9; }
.rb-cursor.rb-down i { transform: scale(.72); }
.rb-cursor.rb-link.rb-down i { transform: scale(1.2); }

/* hide the system arrow only once the ring is actually following the mouse */
html.rb-cursor-on, html.rb-cursor-on * { cursor: none !important; }
/* ...but give the real cursor back for text fields, embeds and video controls */
html.rb-cursor-on.rb-cursor-native, html.rb-cursor-on.rb-cursor-native * { cursor: auto !important; }

@media print { .rb-cursor { display: none !important; } }