/* ==========================================================================
   4shimon.com v0.1 MVP — Logo / Escapeのみの遷移ゲート
   ========================================================================== */

:root {
  --color-page: #000000;

  /* LOGO: 画面幅約857px〜1286pxで、Escapeと同期して拡縮 */
  --logo-top: clamp(40px, 6vh, 96px);
  --logo-height: clamp(
    120px,
    calc(80px + 4.6667vw),
    140px
  );

  /* ESCAPE: 画面幅約857px〜1286pxで、Logoと同期して拡縮 */
  --escape-top: 45%;
  --escape-width: clamp(
    300px,
    calc(180px + 14vw),
    360px
  );
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-page);
  overflow-x: hidden;
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   STAGE
   ========================================================================== */

.stage {
  position: relative;
  min-height: 100svh;
  background: var(--color-page);
}

.stage__logo-link,
.stage__escape-link {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  cursor: pointer;
}

.stage__logo-link:focus-visible,
.stage__escape-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 6px;
}

.stage__logo-link {
  top: var(--logo-top);
}

.stage__logo {
  height: var(--logo-height);
  width: auto;
}

.stage__escape-link {
  top: var(--escape-top);
  transform: translate(-50%, -50%);
}

.stage__escape {
  width: var(--escape-width);
  height: auto;
}