/* Shared CrypWorld product entrance; artwork is drawn from the official logo. */
#cw-cosmos-intro {
  position: fixed; inset: 0; z-index: 2147483000; overflow: hidden;
  isolation: isolate; background: #02050b; color: #f1f7ff;
  font-family: Inter, "Segoe UI", "Noto Sans KR", sans-serif;
  opacity: 1; transition: opacity .7s ease; color-scheme: dark; cursor: pointer;
}
#cw-cosmos-intro[hidden] { display: none !important; }
#cw-cosmos-intro.is-revealing { opacity: 0; pointer-events: none; }
#cw-cosmos-intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#cw-cosmos-intro.cw-approved-movie { background: #000; }
#cw-cosmos-intro.cw-approved-movie canvas { display: none; }
#cw-cosmos-intro .cw-intro-movie { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none; }
#cw-cosmos-intro.cw-approved-movie::after { display:none; }
#cw-cosmos-intro.cw-approved-movie h1 { font-family:'Segoe UI',Inter,sans-serif;font-size:clamp(26px,4.4792vw,110px);font-weight:600;letter-spacing:0; }
#cw-cosmos-intro.cw-approved-movie h1 span { top:50%;opacity:var(--cw-intro-title-opacity,1);transition:transform 1.7s cubic-bezier(.4,0,.2,1); }
#cw-cosmos-intro.cw-approved-movie .cw-intro-name { left:18.5%;transform:translate(-50%,-50%); }
#cw-cosmos-intro.cw-approved-movie .cw-intro-world { left:82%;right:auto;transform:translate(-50%,-50%); }
#cw-cosmos-intro.cw-approved-movie.is-entering h1 span { opacity:0; }
@media (max-aspect-ratio: 1/1) {
  #cw-cosmos-intro .cw-intro-movie { object-fit:contain; }
  #cw-cosmos-intro.cw-approved-movie h1 { font-size:clamp(20px,6vw,44px); }
  #cw-cosmos-intro.cw-approved-movie h1 span { top:27%; }
  #cw-cosmos-intro.cw-approved-movie .cw-intro-name { left:23%; }
  #cw-cosmos-intro.cw-approved-movie .cw-intro-world { left:77%; }
}
#cw-cosmos-intro::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, transparent 35%, #02050b55 100%);
}
#cw-cosmos-intro .cw-intro-controls {
  position: absolute; inset: max(26px, env(safe-area-inset-top)) 3.5vw auto;
  z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
#cw-cosmos-intro button {
  appearance: none; font: inherit; font-size: 14px; line-height: 1.4; cursor: pointer;
  color: #d5e2f1; background: #06101b80; border: 1px solid #99c9f329;
  border-radius: 999px; min-height: 44px; padding: 10px 17px;
  transition: background .2s, border-color .2s, color .2s;
}
#cw-cosmos-intro button:hover { background: #183450ad; border-color: #acd9ff7a; color: white; }
#cw-cosmos-intro button:focus-visible { outline: 2px solid #c5e8ff; outline-offset: 5px; }
#cw-cosmos-intro .cw-intro-skip { border-color: transparent; background: transparent; color: #c2cbd9; display: inline-flex; align-items: center; gap: 9px; }
#cw-cosmos-intro .cw-intro-skip::before {
  content: ""; flex: 0 0 28px; width: 28px; height: 28px;
  background: url("./crypworld-logo.png") center / contain no-repeat;
}
#cw-cosmos-intro h1 { margin: 0; font-size: clamp(36px, 4.7vw, 78px); font-weight: 350; line-height: 1.15; letter-spacing: -.045em; }
#cw-cosmos-intro h1 span {
  position: absolute; top: 47%; z-index: 2; transform: translateY(-50%);
  text-shadow: 0 2px 30px #000, 0 0 70px #a6ccff29;
  transition: opacity 1s, transform 1.7s cubic-bezier(.4,0,.2,1);
}
#cw-cosmos-intro .cw-intro-name { left: 6.5%; }
#cw-cosmos-intro .cw-intro-world { right: 8%; }
#cw-cosmos-intro.is-entering .cw-intro-name { opacity: 0; transform: translate(12vw, -50%); }
#cw-cosmos-intro.is-entering .cw-intro-world { opacity: 0; transform: translate(-12vw, -50%); }
@media (max-width: 650px) {
  #cw-cosmos-intro .cw-intro-controls { inset: max(18px, env(safe-area-inset-top)) 16px auto; gap: 4px; }
  #cw-cosmos-intro .cw-intro-controls button { padding: 9px 12px; }
  #cw-cosmos-intro .cw-intro-skip { padding-left: 0 !important; }
  #cw-cosmos-intro h1 { font-size: clamp(24px, 7.8vw, 49px); }
  #cw-cosmos-intro h1 span { top: 27%; }
  #cw-cosmos-intro .cw-intro-name { left: 7%; }
  #cw-cosmos-intro .cw-intro-world { right: 7%; }
}
@media (max-height: 500px) and (min-width: 651px) {
  #cw-cosmos-intro .cw-intro-controls { top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #cw-cosmos-intro, #cw-cosmos-intro * { transition: none !important; }
}