/* First screen, server status plaque and the ribbon. */
.hero { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center;
  min-height:max(600px,calc(100svh - var(--header-h) * .35)); margin-top:calc(var(--header-h) * -1);
  padding-block:calc(var(--header-h) + clamp(24px,4vw,80px)) clamp(110px,9vw,200px); }
.hero-art { position:absolute; inset:0; z-index:-3; }
.hero-art img { width:100%; height:100%; object-fit:cover; object-position:70% 30%; transform:scale(1.04) translate3d(var(--pan-x,0px),calc(var(--pan-y,0px) + var(--scroll-pan,0px)),0); transition:transform 1.2s var(--ease); }
.js-motion .hero-art { animation:hero-art-in 1.6s var(--ease) backwards; }
@keyframes hero-art-in { from { opacity:0; scale:1.05; } }
.hero-shade { position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:linear-gradient(90deg,#0d0e14f2 0%,#0d0e14b3 30%,#0d0e1426 62%,transparent 80%),linear-gradient(0deg,var(--bg) 0%,#0d0e1460 22%,transparent 50%),linear-gradient(180deg,#0d0e14b0,transparent 26%); }
.sparks { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.spark { position:absolute; bottom:-10px; border-radius:50%; background:#f0d3a3; box-shadow:0 0 8px #dfb582; opacity:0; animation:float-spark linear infinite; }
@keyframes float-spark { 0% { transform:translate(0,0); opacity:0; } 15% { opacity:.75; } 80% { opacity:.35; } 100% { transform:translate(35px,-560px); opacity:0; } }

.hero-content { display:grid; justify-items:start; gap:clamp(16px,1.5vw,30px); }
.hero h1 { font-size:var(--fs-hero); line-height:.98; letter-spacing:-.025em; text-shadow:0 4px 40px #000a; max-width:9em; }
.hero-title-line { display:block; }
.hero h1 em { text-shadow:0 0 60px #dcba8540; }
.hero-description { max-width:34em; color:var(--text-soft); text-shadow:0 2px 16px #000; }
.hero-buttons { display:flex; flex-wrap:wrap; gap:12px; margin-top:4px; }
 .hero-opening { display:flex; align-items:center; gap:.3em; font-size:var(--fs-small); color:var(--gold-3); margin-top:4px; }
.hero-caption { position:absolute; right:max(var(--gutter),(100% - 2880px) / 2); bottom:clamp(110px,9vw,200px); display:none; text-align:right; font:600 clamp(14px,.5vw + 8px,24px)/1 var(--display); letter-spacing:.42em; text-transform:uppercase; color:var(--text-soft); text-shadow:0 2px 12px #000; }
.hero-caption .star { color:var(--gold); margin-right:.6em; }
.hero-caption small { display:block; margin-top:.8em; font:500 var(--fs-micro)/1 var(--sans); letter-spacing:.22em; color:var(--muted); }
@media (min-width:1100px) and (min-height:700px) { .hero-caption { display:block; } }

/* Entrance: eyebrow, title lines, text, actions, facts — the first screen is never blurred. */
.js-motion .hero-line,.js-motion .hero-title-line { animation:reveal-up var(--t-slow) var(--ease) calc(var(--n) * 120ms + 100ms) backwards; }
.js-motion .hero-title-line { animation-duration:1s; }

@media (max-width:700px) {
  .hero { align-items:flex-end; min-height:max(560px,100svh); padding-bottom:clamp(96px,26vw,140px); }
  .hero-art img { object-position:62% 20%; }
  .hero-shade { background:linear-gradient(0deg,var(--bg) 2%,#0d0e14e6 40%,#0d0e1460 70%,#0d0e1490 100%); }
  .hero-buttons { width:100%; }
  .hero-buttons .button-gold { flex:1 1 100%; }
  .hero-buttons .button-glass { flex:1 1 100%; }
}

/* Server plaque: название и статус будущего сервера. */
.server-panel { --c:var(--cut); --face:linear-gradient(110deg,#1d1726f7,#14131df7); --face-top:radial-gradient(ellipse at 20% 0%,var(--glow),transparent 70%); --edge-c:var(--line-gold-strong);
  position:relative; z-index:2; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:clamp(18px,2.6vw,64px);
  margin-top:calc(clamp(56px,6vw,120px) * -1); padding:clamp(20px,1.8vw,40px) clamp(20px,2.4vw,56px); box-shadow:0 30px 80px #0008; }
.server-name { display:flex; align-items:center; gap:clamp(12px,1vw,22px); }
.server-emblem { width:clamp(44px,1.6vw + 24px,80px); height:auto; filter:drop-shadow(0 0 14px #cfaa6540); }
.server-name h2 { font:500 clamp(28px,1vw + 20px,52px)/1.1 var(--serif); letter-spacing:.14em; text-transform:uppercase; }
.server-status p { display:flex; align-items:center; gap:.2em; white-space:nowrap; font-weight:500; }
 .server-status small { display:block; margin-top:6px; font-size:var(--fs-small); color:var(--muted); }
 .server-details { white-space:nowrap; }
@media (max-width:1100px) {
  .server-panel { grid-template-columns:1fr auto; }
  .server-details { grid-column:1 / -1; justify-self:start; }
  .server-status { justify-self:end; text-align:right; }
}
@media (max-width:560px) {
  .server-panel { grid-template-columns:1fr; gap:16px; }
  .server-status { justify-self:start; text-align:left; }
  .server-details { width:100%; }
}

/* Ribbon: moves with the scroll where scroll-driven animations exist; static otherwise. */
.world-ribbon { overflow:hidden; margin-top:clamp(40px,4vw,80px); padding-block:clamp(14px,1vw,24px); border-block:1px solid #d8bb8614; -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.world-ribbon>div { display:flex; align-items:center; gap:clamp(24px,2.4vw,60px); width:max-content; font:600 clamp(16px,.6vw + 10px,30px)/1 var(--display); letter-spacing:.32em; text-transform:uppercase; color:#9886aa; white-space:nowrap; }
.world-ribbon .star { color:var(--gold-5); font-size:.6em; }
@supports (animation-timeline:view()) {
  .js-motion .world-ribbon>div { animation:ribbon-scroll linear both; animation-timeline:view(); }
  @keyframes ribbon-scroll { from { transform:translateX(0); } to { transform:translateX(-30%); } }
}

/* 4K: the first screen keeps its weight against the full-width art. */
@media (min-width:3000px) {
  .hero h1 { font-size:clamp(156px,5.2vw,224px); }
  .hero-description { font-size:clamp(26px,.8vw,34px); max-width:30em; }
  .hero-content { gap:clamp(30px,1vw,44px); }
  .hero-buttons .button { font-size:clamp(27px,.8vw,34px); min-height:clamp(72px,2.2vw,92px); padding-inline:1.6em; }
  .hero-caption { font-size:clamp(24px,.7vw,30px); }
}