/*--------------------------------------------------------------
# MATERION-2027 — Motion layer (Materials Science & Nanotechnology)
# Glowing nano-structures, scroll animations and toy robots,
# tuned for the light violet / coral brand.
# 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, #2a00d6, #7c5cff, #f4705d);
  box-shadow: 0 0 10px rgba(124, 92, 255, .7);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

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

.rb-js .hero-main .event-badge,
.rb-js .hero-main .main-title,
.rb-js .hero-main .main-tagline,
.rb-js .hero-main .meta-list,
.rb-js .hero-main .action-area,
.rb-js .hero-main .countdown-row { animation: rb-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.rb-js .hero-main .event-badge  { animation-delay: .10s; }
.rb-js .hero-main .main-title   { animation-delay: .25s; }
.rb-js .hero-main .main-tagline { animation-delay: .40s; }
.rb-js .hero-main .meta-list    { animation-delay: .52s; }
.rb-js .hero-main .action-area  { animation-delay: .64s; }
.rb-js .hero-main .countdown-row { animation-delay: .80s; }

@keyframes rb-card-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(124, 92, 255, 0), 0 18px 40px rgba(42, 0, 214, .12); }
  50%      { box-shadow: 0 0 40px rgba(124, 92, 255, .38), 0 18px 40px rgba(42, 0, 214, .16); }
}
.rb-js .hero-main .hero-image-wrap {
  animation: rb-pop 1s cubic-bezier(.2, .7, .2, 1) .35s both,
             rb-card-glow 5s ease-in-out 1.6s infinite;
}

@keyframes rb-tick { 0% { transform: translateY(-5px) scale(1.08); color: #f4705d; } 100% { transform: none; } }
.rb-tick { animation: rb-tick .45s ease-out; }

@keyframes rb-ring {
  0%   { box-shadow: 0 0 0 0 rgba(124, 92, 255, .6); }
  70%  { box-shadow: 0 0 0 16px rgba(124, 92, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 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); }

/* the three floating hero badges drift gently */
@keyframes rb-float-sm { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.rb-js .hero .floating-badge { animation: rb-float-sm 4s ease-in-out infinite; }
.rb-js .hero .floating-badge.badge-mid { animation-delay: -1.3s; }
.rb-js .hero .floating-badge.badge-bottom { animation-delay: -2.6s; }

/* Hero stage: glowing nanoparticle network + atom (behind the text, above the page colour) */
#hero.hero { position: relative; overflow: hidden; }
#hero.hero > .container { position: relative; z-index: 2; }
.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: .9; }

/* ============================================================
   3. Scroll reveal
   ============================================================ */
.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);
}
@media (min-width: 1200px) {
  .rb-reveal.rb-from-left  { transform: translateX(-34px); }
  .rb-reveal.rb-from-right { transform: translateX(34px); }
}
.rb-reveal.rb-in { opacity: 1; transform: none; }

@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, #2a00d6, #7c5cff, #f4705d);
  box-shadow: 0 0 10px rgba(124, 92, 255, .6);
  transform-origin: 0 50%;
  animation: rb-underline .8s .25s cubic-bezier(.2, .7, .2, 1) both;
}
@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-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 glowing atom ("Orbit")
   ============================================================ */
.rb-drone { position: absolute; left: 0; top: 0; width: clamp(64px, 7vw, 104px); 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) * .10)); } to { transform: translateY(calc(var(--rb-hh, 700px) * .66)); } }
@keyframes rb-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.rb-drone { animation: rb-drone-x 31s ease-in-out infinite alternate; }
.rb-drone-y { animation: rb-drone-y 23s ease-in-out infinite alternate; }
.rb-drone .rb-robot { animation: rb-hover 3.6s ease-in-out infinite; }
@keyframes rb-lap { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
.rb-electron { offset-rotate: 0deg; animation: rb-lap var(--d, 5s) linear infinite; animation-delay: var(--dl, 0s); }

/* ============================================================
   9. Welcome buddy ("Volt") — peeks up in the bottom-left corner
   ============================================================ */
.rb-buddy {
  position: fixed;
  left: 14px;
  bottom: 0;
  z-index: 1000;
  width: 132px;
  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 #7c5cff; outline-offset: 3px; border-radius: 12px; }
.rb-buddy .rb-robot { width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(22, 17, 43, .35)) drop-shadow(0 0 14px rgba(124, 92, 255, .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: 250px;
  padding: 12px 30px 12px 14px;
  border-radius: 14px 14px 14px 4px;
  background: #ffffff;
  color: #16112b;
  border: 1px solid rgba(124, 92, 255, .45);
  font: 500 14px/1.45 var(--default-font, Roboto, sans-serif);
  box-shadow: 0 10px 30px rgba(42, 0, 214, .25), 0 0 22px rgba(124, 92, 255, .25);
  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: #ece7ff; }

/* ============================================================
   10. Glowing side rail (Materials Science artwork)
   Home page, screens >= 1500px. Sticky inside the span from
   "About the Conference" down to the end of "Latest Updates".
   ============================================================ */
.rb-rail { position: absolute; left: 0; right: 0; top: 0; z-index: 1; pointer-events: none; display: none; justify-content: space-between; align-items: flex-start; }
.rb-rail-side { position: sticky; top: 0; flex: none; }
.rb-stack { margin: 28px auto 0; }
.rb-stack svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (min-width: 1500px) { .rb-rail { display: flex; } }

@keyframes rb-trace  { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes rb-draw   { 0% { stroke-dashoffset: 100; opacity: 1; } 60%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 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-glowp  { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes rb-twinkle { 0%, 100% { opacity: .25; transform: scale(.55) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes rb-tile   { from { transform: translateY(0); } to { transform: translateY(-9px); } }
@keyframes rb-tileg  { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
@keyframes rb-sweep  { from { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { transform: translateY(var(--len, 150px)); opacity: 0; } }
@keyframes rb-meridian { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.22); } }
@keyframes rb-ping-sm { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.7); opacity: 0; } }

.rb-trace  { stroke-dasharray: 7 93; animation: rb-trace var(--d, 8s) linear infinite; }
.rb-draw   { stroke-dasharray: 100; animation: rb-draw 9s ease-in-out 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-glow   { transform-box: fill-box; transform-origin: center; animation: rb-glowp 3.4s ease-in-out infinite; }
.rb-spark  { transform-box: fill-box; transform-origin: center; animation: rb-twinkle 4.2s ease-in-out infinite; }
.rb-tile   { animation: rb-tile var(--d, 7s) ease-in-out infinite alternate; }
.rb-tile-glow { animation: rb-tileg 3.8s ease-in-out infinite; }
.rb-sweep  { animation: rb-sweep 5.5s ease-in-out infinite; }
.rb-merid  { transform-box: fill-box; transform-origin: center; animation: rb-meridian var(--d, 9s) ease-in-out infinite; }
.rb-ping-sm { transform-box: fill-box; transform-origin: center; animation: rb-ping-sm 4s ease-out infinite; }

/* ============================================================
   11. 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 { display: none; }
  .rb-buddy { width: 96px; left: 8px; }
  .rb-bubble { width: 200px; font-size: 13px; }
  .rb-net { opacity: .55; }
}
@media (max-width: 575px) {
  .rb-buddy { width: 60px; left: 6px; }
  .rb-bubble { width: min(200px, calc(100vw - 24px)); font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .rb-robot *, .rb-walker, .rb-walker *, .rb-drone, .rb-drone *,
  .rb-hero-stage *, .rb-buddy, .rb-buddy *, .rb-rail * { 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; }
}

.rb-gear { transform-box: fill-box; transform-origin: center; animation: rb-spin linear infinite; }
@media (prefers-reduced-motion: reduce) { .rb-gear { animation: none; } }