/* Home-page intro — "Swarm → wall". See static/js/intro.js. */
.intro{position:absolute;inset:0;z-index:20;background:#06060F;overflow:hidden;pointer-events:none;transition:opacity .9s ease;font-family:'Figtree',sans-serif}
.intro.done{opacity:0}
.intro .ph{position:absolute;background-size:cover;background-position:center}
.intro .stage3d{position:absolute;inset:0;perspective:1400px;display:flex;align-items:center;justify-content:center}
.intro .wall{display:grid;grid-template-columns:repeat(5,19vw);grid-auto-rows:10.7vw;gap:1vw;transform-style:preserve-3d}
.intro .wall .wtile{position:relative;overflow:hidden;border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.5);outline:1px solid rgba(255,255,255,.08)}
.intro .swarm{position:absolute;inset:0;width:100%;height:100%;z-index:5}
.intro .prompt{position:absolute;left:50%;top:50%;transform:translate(-50%,0);z-index:9;display:flex;align-items:center;gap:10px;width:min(90vw,640px);padding:8px 8px 8px 18px;border-radius:16px;background:rgba(14,16,34,.55);backdrop-filter:blur(14px);border:1px solid rgba(176,154,255,.45);box-shadow:0 20px 60px rgba(0,0,0,.45),0 0 40px -10px rgba(176,154,255,.6);font-size:16px;font-weight:500;color:#fff;text-align:start}
.intro .pr-ico{color:#C9B8FF}
.intro .pr-text{flex:1;white-space:nowrap;overflow:hidden}
.intro .pr-caret{width:2px;height:20px;background:#C9B8FF;animation:introCaret 1s steps(2) infinite}
@keyframes introCaret{50%{opacity:0}}
.intro .pr-go{border-radius:11px;padding:11px 20px;font-size:15px;font-weight:700;color:#fff;background:linear-gradient(135deg,#8B6CFF,#B09AFF);transition:transform .15s}
.intro .pr-go.press{transform:scale(.94)}
.intro .counter{position:absolute;left:0;right:0;top:12vh;z-index:9;text-align:center;font-size:clamp(18px,2vw,26px);font-weight:700;color:rgba(255,255,255,.85)}
.intro .counter b{font-size:1.6em;color:#fff;font-variant-numeric:tabular-nums}
.intro .counter em,.intro .cap em{font-style:normal;background:linear-gradient(135deg,#FFFFFF,#B09AFF 60%,#8B6CFF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.intro .roles{position:absolute;left:50%;bottom:10vh;transform:translateX(-50%);z-index:9;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:min(92vw,900px)}
.intro .roles span{padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;color:#fff;background:rgba(176,154,255,.1);border:1px solid rgba(201,184,255,.55);box-shadow:0 0 18px -4px #B09AFF;opacity:0}
.intro .veil{position:absolute;inset:0;z-index:6;background:rgba(6,6,15,.55);opacity:0}
.intro .cap{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:9;text-align:center;color:#fff;font-size:clamp(34px,5.6vw,84px);font-weight:800;letter-spacing:-.02em;text-shadow:0 4px 40px rgba(0,0,0,.6);opacity:0}
.intro .dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:linear-gradient(135deg,#299DFF,#B09AFF);box-shadow:0 0 40px 12px rgba(41,157,255,.45);z-index:7;opacity:0}
.intro-skip{position:absolute;inset-inline-end:20px;top:88px;z-index:30;pointer-events:auto;font:600 13px 'Figtree',sans-serif;color:rgba(255,255,255,.7);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:8px 14px;cursor:pointer}
.intro-skip:hover{color:#fff;background:rgba(255,255,255,.12)}
@media(max-width:768px){.intro .wall{grid-template-columns:repeat(3,30vw);grid-auto-rows:17vw}.intro .wall .wtile:nth-child(n+13){display:none}}

/* Menu bar over the hero (Kling-style): it floats at the top of the home page — transparent with white text over the
   hero, the usual white bar once the hero is scrolled past. */
html.home-nav .nav{position:fixed;top:0;left:0;right:0}
html.nav-over .nav{background:linear-gradient(180deg,rgba(6,6,15,.55),rgba(6,6,15,0));border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.nav{transition:background .35s ease,border-color .35s ease,box-shadow .3s}
html.nav-over .nav .nav-link,html.nav-over .nav .nav-dd-trigger{color:rgba(255,255,255,.88)}
html.nav-over .nav .nav-link:hover,html.nav-over .nav .nav-dd-trigger:hover{color:#fff}
html.nav-over .nav .lang-current{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff}
html.nav-over .nav .lang-current .lang-arrow{color:rgba(255,255,255,.7)}
html.nav-over .nav .nav-login{color:#fff;border-color:rgba(255,255,255,.35)}
html.nav-over .nav .nav-login:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
html.nav-over .nav .nav-hamburger span{background:#fff}