/* =========================================================
   ROBOKRITI 2026 // PERFECT UI LAYER
   Same cyan / gold / deep-navy palette. Content untouched.
   Inspired by modern technical-festival storytelling: phases,
   editorial spacing, numbered systems and restrained motion.
========================================================= */
:root{
  --rk-cyan:#19e6ff;
  --rk-gold:#d4af37;
  --rk-bg:#050914;
  --rk-panel:rgba(7,12,23,.72);
  --rk-line:rgba(255,255,255,.085);
  --rk-ease:cubic-bezier(.16,1,.3,1);
}
html{scroll-padding-top:96px;scroll-behavior:smooth}
body{overscroll-behavior-x:none;scrollbar-gutter:stable;background:#050914}
::selection{background:rgba(25,230,255,.22);color:#fff}

/* Premium scrollbar, deliberately using the existing palette. */
html{scrollbar-width:thin;scrollbar-color:rgba(25,230,255,.55) #030711}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#030711}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#19e6ff,#d4af37);border-radius:99px;border:2px solid #030711}

/* Scroll progress */
.rk-progress{position:fixed;z-index:3000;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--rk-cyan),var(--rk-gold));box-shadow:0 0 14px rgba(25,230,255,.7);pointer-events:none;transform-origin:left center}

/* Header: calmer, more editorial and responsive. */
.site-header{transition:height .55s var(--rk-ease),background .55s ease,box-shadow .55s ease,border-color .55s ease,transform .55s var(--rk-ease)}
.site-header.rk-compact{height:66px;background:rgba(3,7,18,.88);box-shadow:0 12px 45px rgba(0,0,0,.28);border-bottom-color:rgba(25,230,255,.12)}
.site-header.rk-hidden{transform:translateY(-105%)}
.brand img{transition:transform .6s var(--rk-ease),filter .6s ease}
.site-header:hover .brand img{transform:rotate(-3deg) scale(1.035);filter:drop-shadow(0 0 12px rgba(25,230,255,.2))}
nav a{position:relative}
nav a:not(.nav-register)::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:1px;background:var(--rk-cyan);transform:scaleX(0);transform-origin:center;transition:transform .45s var(--rk-ease)}
nav a:not(.nav-register):hover::after,nav a:not(.nav-register).active::after{transform:scaleX(1)}

/* Hero depth */
.hero{isolation:isolate}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:34%;z-index:1;background:linear-gradient(180deg,transparent,rgba(5,9,20,.92));pointer-events:none}
.hero-content,.hero-visual{will-change:transform}
.hero-content{animation:rkHeroIn 1.05s var(--rk-ease) both}
.hero-visual{animation:rkVisualIn 1.35s var(--rk-ease) .08s both}
.hero-grid{animation:rkGridDrift 18s linear infinite}
.hero-scan{animation:rkScan 5.5s var(--rk-ease) infinite}
.hero-orbit{will-change:transform}

/* Add quiet HUD corner brackets to major sections without adding content. */
.section-head{position:relative}
.section-head:before{content:"";position:absolute;left:-18px;top:2px;width:7px;height:7px;border-left:1px solid var(--rk-cyan);border-top:1px solid var(--rk-cyan);opacity:.7}
.section-head:after{content:"";position:absolute;left:-18px;top:2px;width:7px;height:7px;border-left:1px solid var(--rk-cyan);border-top:1px solid var(--rk-cyan);transform:translate(5px,5px);opacity:.18}

/* Phase strip becomes a strong festival timeline. */
.phase-strip{position:relative;overflow:hidden}
.phase-strip:before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--rk-cyan),transparent);opacity:.45}
.phase-strip>div{min-height:108px;display:flex;flex-direction:column;justify-content:center;transition:transform .55s var(--rk-ease),background .55s ease,border-color .55s ease}
.phase-strip>div:hover{transform:translateY(-4px);background:rgba(25,230,255,.025)}

/* Arena cards: cinematic edge light. */
.arena-card,.team-card,.leadership-feature,.core-card,.operations-grid article,.contact-card,.mentor-message,.final-cta{overflow:hidden}
.arena-card:before,.team-card:before,.leadership-feature:before,.core-card:before,.operations-grid article:before,.contact-card:before,.mentor-message:before,.final-cta:before{pointer-events:none}
.arena-card:after{box-shadow:0 0 0 0 rgba(25,230,255,0);transition:transform .9s var(--rk-ease),box-shadow .9s ease}
.arena-card:hover:after{box-shadow:0 0 28px rgba(25,230,255,.08)}
.arena-index,.feature-index{font-variant-numeric:tabular-nums}

/* Team section gets a more premium command-board feel. */
.leadership-feature,.core-card,.team-card{backdrop-filter:blur(10px)}
.team-card{transition:transform .6s var(--rk-ease),border-color .45s ease,box-shadow .6s var(--rk-ease),background .45s ease}
.team-card:hover{box-shadow:0 22px 55px rgba(0,0,0,.26)}
.team-card h3{transition:transform .55s var(--rk-ease),color .4s ease}
.team-card:hover h3{transform:translateX(3px);color:#fff}

/* Scroll reveal uses only opacity/transform for smooth mobile GPU performance. */
.rk-reveal{opacity:0;transform:translate3d(0,34px,0);will-change:opacity,transform}
.rk-reveal.rk-visible{opacity:1;transform:none;transition:opacity .8s var(--rk-ease),transform .9s var(--rk-ease);transition-delay:var(--rk-delay,0ms)}

/* Section separators: subtle cyan/gold signal lines. */
.section:not(.hero) .section-head:after{background:linear-gradient(90deg,rgba(25,230,255,.45),rgba(212,175,55,.18),transparent);width:min(420px,70vw);height:1px;left:0;top:auto;bottom:-23px;transform:none;border:0;opacity:1}

/* CTA illumination */
.final-cta{position:relative}
.final-cta:after{content:"";position:absolute;inset:auto 12% -65px;height:130px;background:radial-gradient(ellipse,rgba(25,230,255,.10),transparent 68%);pointer-events:none}

/* Focus states */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--rk-cyan);outline-offset:4px}

/* Mobile */
@media(max-width:800px){
  html{scroll-padding-top:78px}
  .rk-progress{height:2px}
  .section-head:before,.section-head:after{display:none}
  .site-header.rk-compact{height:62px}
  .phase-strip>div{min-height:92px}
}
@media(max-width:520px){
  .phase-strip{grid-template-columns:1fr 1fr}
  .phase-strip>div{padding:20px 16px}
}

@keyframes rkHeroIn{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes rkVisualIn{from{opacity:0;transform:translate3d(25px,0,0) scale(.94)}to{opacity:1;transform:none}}
@keyframes rkGridDrift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(28px,18px,0)}100%{transform:translate3d(0,0,0)}}
@keyframes rkScan{0%,100%{transform:translateY(-34vh);opacity:0}15%{opacity:.18}50%{opacity:.34}85%{opacity:.18}100%{transform:translateY(34vh);opacity:0}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-content,.hero-visual,.hero-grid,.hero-scan{animation:none!important}
  .rk-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .site-header{transition:none!important}
}