
.opening{
  position:fixed;z-index:1000;inset:0;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 48%,rgba(37,99,235,.13),transparent 24%),#02060c;
  transition:opacity 900ms var(--osof-ease),visibility 900ms;
}
.opening.is-complete{opacity:0;visibility:hidden;pointer-events:none}
.opening__glow{
  position:absolute;width:min(66vw,760px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.12),rgba(37,99,235,.035) 38%,transparent 68%);
  filter:blur(18px);opacity:0;animation:opening-glow 8s var(--osof-ease) forwards;
}
.opening__content{
  position:relative;z-index:2;width:min(90vw,900px);min-height:420px;
  display:grid;place-items:center;text-align:center;
}
.opening__symbol{
  position:absolute;width:clamp(62px,7vw,102px);height:auto;opacity:0;
  filter:drop-shadow(0 0 34px rgba(34,211,238,.22));
  animation:symbol-in 8s var(--osof-ease) forwards;
}
.opening__line{
  position:absolute;max-width:760px;margin:0;
  font-size:clamp(38px,5.2vw,78px);line-height:.98;letter-spacing:-.055em;
  font-weight:760;opacity:0;
}
.opening__line--one{animation:line-one 8s var(--osof-ease) forwards}
.opening__line--two{animation:line-two 8s var(--osof-ease) forwards}
.opening__skip{
  position:absolute;z-index:3;right:24px;bottom:22px;
  border:1px solid var(--osof-line);border-radius:999px;padding:10px 15px;
  background:rgba(255,255,255,.035);color:var(--osof-muted);
  font-size:11px;letter-spacing:.14em;cursor:pointer;
}
.release-stage{
  min-height:100vh;display:grid;place-items:center;padding:90px 24px;text-align:center;
  background:radial-gradient(circle at 50% 40%,rgba(37,99,235,.16),transparent 28%),linear-gradient(180deg,#07111f,#050b14);
}
.release-stage img{width:170px;margin:0 auto 28px}
.release-stage h1{
  margin:0;font-size:clamp(54px,9vw,132px);line-height:.88;letter-spacing:-.065em;
}
.release-stage p{
  max-width:650px;margin:26px auto 0;color:var(--osof-muted);font-size:18px;line-height:1.75;
}
.release-stage small{
  display:block;margin-top:32px;color:var(--osof-cyan);letter-spacing:.16em;
}
@keyframes opening-glow{
  0%,12%{opacity:0;transform:scale(.84)}
  28%,90%{opacity:1;transform:scale(1)}
  100%{opacity:0}
}
@keyframes symbol-in{
  0%,10%{opacity:0;transform:scale(.86)}
  22%,30%{opacity:.88;transform:scale(1)}
  38%,100%{opacity:0;transform:scale(1.06)}
}
@keyframes line-one{
  0%,30%{opacity:0;transform:translateY(14px)}
  41%,57%{opacity:1;transform:none}
  66%,100%{opacity:0;transform:translateY(-10px)}
}
@keyframes line-two{
  0%,61%{opacity:0;transform:translateY(14px)}
  72%,91%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-8px)}
}
@media(max-width:640px){
  .opening__content{min-height:340px}
  .opening__skip{right:16px;bottom:16px}
}
@media(prefers-reduced-motion:reduce){
  .opening__glow,.opening__symbol,.opening__line{animation:none}
  .opening__symbol{opacity:.9}
  .opening__line{display:none}
}
