/* RUBEZH — optical identity, introduction and September development notes. */
.hero-visual {
  display: block;
  min-height: 0;
  padding: 16px 0 24px;
  background: radial-gradient(ellipse at 50% 32%, #152740 0, #091321 48%, #060c16 84%);
  border-color: rgba(152, 184, 225, .18);
}
.hero-visual::before, .hero-visual::after, .crest-stage::before { display: none; }
.crest-stage { width: 100%; padding: 0; }
.crest-artwork { position: relative; width: min(100%, 420px); aspect-ratio: 1; }
.crest-emblem { width: 100%; height: 100%; object-fit: contain; animation: none; filter: none; }
body[data-theme="dark"] .crest-emblem { filter: none; }
.crest-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  mask-image: radial-gradient(ellipse, #000 57%, transparent 73%);
  transition: opacity .7s ease;
}
.crest-artwork.is-playing .crest-video { opacity: 1; }
.crest-artwork.is-playing > .crest-emblem { opacity: 0; }
.crest-artwork > .crest-emblem { transition: opacity .7s ease; }
.crest-wordmark { position: relative; z-index: 2; text-align: center; margin-top: -18px; }
.crest-wordmark small { display: block; color: #99b2cf; font-size: .62rem; font-weight: 600; letter-spacing: .36em; }
.crest-wordmark strong { display: block; margin-top: 8px; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: .14em; font-weight: 500; color: #edf5ff; }
.crest-wordmark strong span { color: #7b98bc; font-weight: 400; }
.crest-replay {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px auto 0;
  padding: 8px 12px;
  border: 1px solid rgba(130, 158, 199, .22);
  border-radius: 999px;
  background: rgba(95, 137, 197, .05);
  color: #b8c9dd;
  font: inherit;
  font-size: .68rem;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.crest-replay:hover { color: #fff; border-color: #8dadd5; }
.crest-replay:disabled { opacity: .55; cursor: default; }
.crest-replay:focus-visible, .intro-skip:focus-visible { outline: 2px solid #ff995d; outline-offset: 5px; }
.crest-play-symbol { font-size: .68rem; color: #ff9a65; }

/* The document stays usable without JavaScript. Only the tiny head bootstrap
   opts into this overlay; an independent watchdog always releases the page. */
.brand-intro { display: none; }
.brand-intro[hidden] { display: none !important; }
html.intro-pending { overflow: hidden; background: #050a12; }
html.intro-pending .page { opacity: 0; }
html.intro-pending .brand-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  color: #edf5ff;
  background: #050a12;
}
.intro-atmosphere {
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 47%, rgba(34, 84, 143, .20), transparent 39%),
    radial-gradient(ellipse at 50% 70%, rgba(234, 102, 39, .07), transparent 24%);
  animation: intro-atmosphere 3.2s ease both;
}
.intro-topline {
  position: absolute;
  top: clamp(22px, 5vh, 52px);
  left: clamp(24px, 5vw, 72px);
  right: clamp(24px, 5vw, 72px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .24em;
  color: #7e92ad;
}
.intro-topline span:first-child { color: #c7d7eb; }
.intro-composition { width: min(92vw, 600px); text-align: center; perspective: 1000px; }
.intro-optic { position: relative; width: min(61vh, 450px, 82vw); margin: -24px auto -12px; }
.intro-optic::after {
  content: "";
  position: absolute;
  inset: 20% 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(56, 135, 228, .14), transparent 65%);
  opacity: 0;
  pointer-events: none;
  animation: intro-focus-flash 2.3s .1s ease both;
}
.intro-optic .crest-artwork { width: 100%; animation: optic-arrival 1.8s cubic-bezier(.16, 1, .3, 1) both; }
.intro-wordmark { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: clamp(2.8rem, 7.5vw, 4.8rem); font-weight: 500; letter-spacing: .18em; text-indent: .18em; line-height: 1; animation: intro-type 1.4s .55s both; }
.intro-digital { margin-top: 15px; color: #8ca4c3; font-size: .67rem; letter-spacing: .65em; text-indent: .65em; animation: intro-type 1.2s .8s both; }
.intro-threshold { width: min(220px, 50vw); height: 1px; margin: 28px auto 23px; background: linear-gradient(90deg, transparent, #f89356, #ffc19d, #f89356, transparent); box-shadow: 0 0 18px #f8864b88; transform-origin: center; animation: threshold-arrival 1.3s .9s both; }
.intro-motto { margin: 0; color: #bccadd; font-size: clamp(.67rem, 2.7vw, .8rem); letter-spacing: .28em; text-indent: .28em; animation: intro-type 1.1s 1.15s both; }
.intro-footer { position: absolute; left: 24px; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); display: flex; justify-content: center; align-items: center; gap: 24px; }
.intro-footer > span { color: #647991; font-size: .58rem; letter-spacing: .18em; }
.intro-skip { border: 1px solid #344153; border-radius: 999px; color: #b7c7db; background: #0d1622; padding: 10px 16px; font: inherit; font-size: .68rem; cursor: pointer; }
.intro-skip:hover { border-color: #819aba; color: #fff; }
.brand-intro.is-leaving { animation: intro-departure .65s cubic-bezier(.4,0,.2,1) forwards; pointer-events: none; }
.page.intro-revealed { animation: page-arrival .9s cubic-bezier(.16,1,.3,1) both; }

@keyframes optic-arrival {
  0% { opacity: 0; transform: translateY(24px) rotateY(-24deg) rotateX(8deg) scale(.82); filter: blur(16px) brightness(.4); }
  48% { opacity: 1; filter: blur(0) brightness(.9); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes intro-type { from { opacity: 0; transform: translateY(12px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes threshold-arrival { from { opacity: 0; transform: scaleX(.06); } to { opacity: 1; transform: scaleX(1); } }
@keyframes intro-atmosphere { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes intro-focus-flash { 0%, 100% { opacity: 0; } 48% { opacity: 1; } }
@keyframes intro-departure { to { opacity: 0; transform: scale(1.04); filter: blur(8px); } }
@keyframes page-arrival { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Release notes deliberately distinguish the playable build from in-progress
   character work, instead of presenting an interrupted export as a release. */
.release-note {
  padding: clamp(22px, 4vw, 38px);
  margin: 0 0 30px;
  border: 1px solid rgba(121, 157, 210, .25);
  border-radius: 24px;
  background: linear-gradient(125deg, #101e32, #08121f);
  color: #eef4ff;
  overflow: hidden;
}
.release-eyebrow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; color: #93accd; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.release-state { display: inline-flex; align-items: center; gap: 7px; color: #ffb184; }
.release-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff985f; box-shadow: 0 0 14px #ff985f55; }
.release-note h3 { margin: 0; max-width: 30ch; font-size: clamp(1.5rem, 4vw, 2.4rem); line-height: 1.16; letter-spacing: -.025em; }
.release-note > p { margin: 16px 0 24px; max-width: 74ch; color: #aebfd6; line-height: 1.8; }
.release-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid #ffffff1a; padding-top: 22px; }
.release-facts div { display: grid; gap: 8px; }
.release-facts small { color: #8eabc9; font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; }
.release-facts strong { color: #ecf4ff; font-size: 1rem; }
.release-facts span { color: #aebfd6; font-size: .83rem; line-height: 1.7; }
.timeline-card.september-patch { border-color: rgba(84, 135, 207, .22); }
.patch-work-in-progress { display: inline-block; margin-top: 10px; border: 1px solid rgba(241, 149, 91, .28); border-radius: 7px; padding: 4px 8px; color: #a8481b; background: #f5935510; font-size: .74rem; }
body[data-theme="dark"] .patch-work-in-progress { color: #ffbb95; }

@media (max-width: 640px) {
  .crest-stage { transform: none; }
  .crest-wordmark strong { font-size: 1.35rem; }
  .intro-topline { font-size: .52rem; letter-spacing: .12em; }
  .intro-topline span:last-child { display: none; }
  .intro-footer > span { display: none; }
  .intro-optic { width: min(50vh, 340px, 88vw); }
  .intro-composition { padding-bottom: 20px; }
  .intro-wordmark { font-size: 2.8rem; }
  .release-facts { grid-template-columns: 1fr; }
}
@media (max-height: 540px) and (min-width: 641px) {
  .intro-optic { width: 48vh; margin-bottom: -8px; }
  .intro-wordmark { font-size: 2rem; }
  .intro-digital { margin-top: 9px; }
  .intro-threshold { margin: 16px auto; }
  .intro-topline { top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.intro-pending .brand-intro { display: none; }
  html.intro-pending .page { opacity: 1; }
  .crest-video { display: none; }
  .crest-artwork.is-playing > .crest-emblem { opacity: 1; }
  .reveal { opacity: 1; transform: none; }
}