/* =========================================================
   Black Sword Studios — styles.css
   Homepage only
   ========================================================= */


/* =========================
   FONTS
   ========================= */

@font-face {
  font-family: "Centaur";
  src: url("/assets/fonts/centaur.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "NewTegomin";
  src: url("/assets/fonts/newtegomin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}


/* =========================
   ROOT
   ========================= */

:root {
  --bg: #000;
  --fg: #f3f3f1;

  --muted: rgba(255, 255, 255, 0.72);
  --muted-strong: rgba(255, 255, 255, 0.84);

  --line: rgba(255, 255, 255, 0.16);
  --line-strong: rgba(255, 255, 255, 0.34);

  --panel: rgba(10, 10, 10, 0.80);
  --panel-hover: rgba(20, 20, 20, 0.92);
  --panel-strong: rgba(8, 8, 8, 0.92);

  --footer-bg: rgba(0, 0, 0, 0.84);

  --tile-size: 512px;

  --controls-size: 44px;
  --controls-gap: 10px;

  --footer-height: 64px;
  --side-padding: 24px;

  --menu-box-size: clamp(420px, 62vmin, 860px);
  --menu-half-gap-x: clamp(150px, 20vmin, 280px);
  --menu-half-gap-y: clamp(140px, 18vmin, 250px);
  --menu-item-width: clamp(150px, 16vmin, 250px);
  --menu-item-height: clamp(48px, 5.4vmin, 70px);

  --fast: 160ms ease;
  --medium: 260ms ease;
  --slow: 700ms ease;
  --loader-hide: 420ms ease;
  --fade-out: 1000ms ease;
  --fade-in: 2000ms ease;

  --white-glow-soft: rgba(255, 255, 255, 0.08);
  --white-glow-mid: rgba(255, 255, 255, 0.18);

  --blue-glow-soft: rgba(140, 190, 255, 0.08);
  --blue-glow-mid: rgba(140, 190, 255, 0.16);
  --blue-glow-strong: rgba(140, 190, 255, 0.28);

  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.30);
  --shadow-mid: 0 14px 34px rgba(0, 0, 0, 0.42);
  --shadow-strong: 0 24px 64px rgba(0, 0, 0, 0.62);
}


/* =========================
   RESET
   ========================= */

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

html {
  height: 100%;
  scroll-behavior: auto;
}

body {
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--fg);
  background: var(--bg);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
cursor: url("/assets/cursors/cursor-global.cur") 12 12,
        auto;
}

img,
canvas {
  display: block;
  max-width: 100%;
}

button,
a,
summary,
label,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
label[for],
summary,
select,
.menu-item,
#enterButton,
.consent a,
#controls button {
  cursor: url("/assets/cursors/cursor-hover.cur") 12 12, pointer;
}


/* =========================
   ACCESSIBILITY
   ========================= */

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}


/* =========================
   GLOBAL BACKGROUND
   ========================= */

#background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image:
    radial-gradient(circle at 50% 46%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.24) 40%, rgba(0, 0, 0, 0.76) 100%),
    url("/assets/images/background.jpg");

  background-repeat:
    no-repeat,
    repeat;

  background-position:
    center center,
    center top;

  background-size:
    cover,
    var(--tile-size) var(--tile-size);
}


/* =========================
   PAGE FADE OVERLAY
   ========================= */

#fade {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fade-out);
}

body.is-fading-in #fade {
  opacity: 1;
  animation: pageFadeIn var(--fade-in) forwards;
}

@keyframes pageFadeIn {
  from { opacity: 1; }
  to { opacity: 0; }
}


/* =========================
   LOADING STATE GUARD
   ========================= */

body.loading {
  overflow: hidden;
}

body.loading #brandLogo,
body.loading #controls,
body.loading #main,
body.loading footer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body:not(.loading) #brandLogo,
body:not(.loading) #controls,
body:not(.loading) #main,
body:not(.loading) footer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* =========================
   LOADER
   ========================= */

#loader {
  position: fixed;
  inset: 0;
  z-index: 10000;

  display: grid;
  place-items: center;

  background: #000;

  opacity: 1;
  visibility: visible;

  transition:
    opacity var(--loader-hide),
    visibility var(--loader-hide);
}

#loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pl-inner {
  position: relative;

  width: 100vw;
  height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding:
    clamp(20px, 3vw, 36px)
    clamp(20px, 4vw, 48px)
    clamp(28px, 4vw, 48px);

  text-align: center;
  overflow: hidden;
}

.pl-svg {
  flex: 0 1 auto;

  width: min(96vw, 1800px);
  height: 72vh;
  max-width: none;
  max-height: none;

  object-fit: contain;
  object-position: center center;

  opacity: 0.98;

  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.12))
    drop-shadow(0 0 30px rgba(255, 255, 255, 0.08))
    drop-shadow(0 0 64px rgba(140, 190, 255, 0.04));
}

.loader-actions {
  margin-top: clamp(6px, 1.4vh, 14px);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;

  width: min(760px, 88vw);
}

#enterButton,
.consent {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--slow),
    transform var(--slow);
}

body.loader-ready #enterButton,
body.loader-ready .consent {
  opacity: 1;
  transform: translateY(0);
}

#enterButton {
  appearance: none;
  -webkit-appearance: none;

  min-width: 190px;
  min-height: 56px;
  padding: 14px 30px;

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));

  color: #f7f3ea;

  font-family: "Centaur", "Times New Roman", serif;
  font-size: 1.22rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.12),
    0 0 18px rgba(255, 255, 255, 0.08);

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 8px 24px rgba(0, 0, 0, 0.55),
    0 0 16px var(--blue-glow-soft),
    0 0 34px rgba(140, 190, 255, 0.06);

  backdrop-filter: blur(6px);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 220ms ease,
    text-shadow 220ms ease,
    opacity var(--slow);
}

#enterButton:hover,
#enterButton:focus-visible {
  transform: translateY(-2px) scale(1.015);

  border-color: rgba(255, 255, 255, 0.52);

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));

  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.22),
    0 0 24px rgba(170, 210, 255, 0.18);

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 10px 28px rgba(0, 0, 0, 0.62),
    0 0 24px var(--blue-glow-mid),
    0 0 54px rgba(140, 190, 255, 0.12);

  outline: none;
}

#enterButton:active {
  transform: translateY(0) scale(0.995);

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 6px 18px rgba(0, 0, 0, 0.52),
    0 0 14px rgba(140, 190, 255, 0.10);
}

#enterButton[hidden] {
  display: none;
}

.consent {
  max-width: min(820px, 88vw);

  color: var(--muted-strong);

  font-family: "NewTegomin", "Times New Roman", serif;
  font-size: clamp(0.94rem, 1.05vw, 1.08rem);
  line-height: 1.72;
  text-wrap: balance;
}

.consent a {
  color: #f4efe4;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);

  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.08);

  transition:
    color 180ms ease,
    border-color 180ms ease,
    text-shadow 180ms ease,
    filter 180ms ease;
}

.consent a:hover,
.consent a:focus-visible {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.78);

  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.18),
    0 0 18px rgba(150, 200, 255, 0.14);

  filter: drop-shadow(0 0 8px rgba(150, 200, 255, 0.12));
  outline: none;
}

/* =========================
   TOP LEFT BRAND LOGO
   ========================= */

#brandLogo {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;

  transition:
    opacity 320ms ease,
    visibility 320ms ease;
}

#brandLogoVideo {
  display: block;
  width: clamp(150px, 16vw, 240px);
  height: auto;
  max-height: 72px;
  object-fit: contain;
  opacity: 0.58;

  filter:
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 18px rgba(255, 180, 90, 0.10));
}

/* =========================
   TOP CONTROLS
   ========================= */

#controls {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1000;

  display: flex;
  align-items: center;
  gap: var(--controls-gap);

  transition:
    opacity 320ms ease,
    visibility 320ms ease;
}

#controls button {
  appearance: none;
  -webkit-appearance: none;

  width: auto;
  height: auto;
  padding: 0;

  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: filter var(--fast);
}

#controls button:hover,
#controls button:focus-visible {
  outline: none;
}

#controls img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;

  filter:
    brightness(0)
    invert(0.90)
    sepia(0.08)
    saturate(0.20)
    drop-shadow(0 1px 3px rgba(0, 0, 0, 0.70));

  transition: filter var(--fast);
}
#controls button:hover img,
#controls button:focus-visible img {
  filter:
    brightness(0)
    invert(0.96)
    sepia(0.10)
    saturate(0.28)
    drop-shadow(0 1px 3px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.22))
    drop-shadow(0 0 14px rgba(180, 210, 230, 0.18));
}


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

#main {
  position: relative;
  z-index: 2;

  min-height: 100vh;
  padding-bottom: var(--footer-height);

  transition:
    opacity 420ms ease,
    visibility 420ms ease;
}


/* =========================
   CANVAS
   ========================= */

#swordCanvas {
  position: fixed;
  inset: 0;
  z-index: 1;

  width: 100vw;
  height: 100vh;

  background: transparent;
  pointer-events: none;
}


/* =========================
   CENTRAL MENU
   ========================= */

#menu {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 3;

  width: var(--menu-box-size);
  height: var(--menu-box-size);

  transform: translate(-50%, calc(-50% - (var(--footer-height) * 0.5)));
  pointer-events: none;
}

.menu-item {
  position: absolute;
  left: 50%;
  top: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--menu-item-width);
  min-width: 0;
  height: var(--menu-item-height);
  min-height: 0;
  padding: 0 20px;

  border: 1px solid var(--line);
  border-radius: 12px;

  background: rgba(13, 13, 13, 0.82);
  color: #fff;
  text-decoration: none;

  font-family: "Centaur", "Times New Roman", serif;
  font-size: clamp(1.05rem, 1.55vw, 1.45rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.30),
    0 0 12px rgba(255, 255, 255, 0.02) inset;

  backdrop-filter: blur(5px);
  pointer-events: auto;

  transition:
    background var(--medium),
    border-color var(--medium),
    transform var(--fast),
    box-shadow var(--medium),
    text-shadow var(--medium);
}

.menu-item:hover,
.menu-item:focus-visible {
  background: rgba(22, 22, 22, 0.94);
  border-color: rgba(255, 255, 255, 0.5);
  filter: brightness(1.03);

  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.08);

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.38),
    0 0 18px rgba(140, 190, 255, 0.06);

  outline: none;
}

.menu-item:nth-child(1) {
  transform: translate(-50%, calc(-50% - var(--menu-half-gap-y)));
}

.menu-item:nth-child(2) {
  transform: translate(calc(-50% + var(--menu-half-gap-x)), -50%);
}

.menu-item:nth-child(3) {
  transform: translate(calc(-50% - var(--menu-half-gap-x)), -50%);
}

.menu-item:nth-child(4) {
  transform: translate(-50%, calc(-50% + var(--menu-half-gap-y)));
}


/* =========================
   FOOTER
   ========================= */

footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;

  height: var(--footer-height);
  padding: 0 var(--side-padding);

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  background: var(--footer-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.10);

  backdrop-filter: blur(6px);

  font-family: "Centaur", "Times New Roman", serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;

  transition:
    opacity 420ms ease,
    visibility 420ms ease;
}

.footer-left {
  justify-self: start;
}

.footer-center {
  justify-self: center;
  color: var(--muted);
  font-size: 0.92rem;
}

.footer-right {
  justify-self: end;
}

.footer-left a,
.footer-right a {
  color: var(--muted);
  text-decoration: none;

  font-size: 1.02rem;

  transition:
    color var(--fast),
    text-shadow var(--fast);
}

.footer-left a:hover,
.footer-left a:focus-visible,
.footer-right a:hover,
.footer-right a:focus-visible {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.10);
  outline: none;
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1100px) {
  .pl-svg {
    width: min(98vw, 1500px);
    height: 68vh;
  }

  .loader-actions {
    width: min(720px, 90vw);
  }
}

@media (max-width: 980px) {
  :root {
    --menu-box-size: clamp(380px, 70vmin, 720px);
    --menu-half-gap-x: clamp(132px, 19vmin, 220px);
    --menu-half-gap-y: clamp(124px, 18vmin, 210px);
    --menu-item-width: clamp(138px, 18vmin, 210px);
  }
}

@media (max-width: 700px) {
  :root {
    --controls-size: 42px;
    --tile-size: 384px;

    --menu-box-size: min(88vw, calc(100vh - var(--footer-height) - 72px));
    --menu-half-gap-x: clamp(96px, 18vw, 150px);
    --menu-half-gap-y: clamp(96px, 18vw, 150px);
    --menu-item-width: clamp(120px, 24vw, 170px);
    --menu-item-height: clamp(44px, 7vw, 58px);
  }

  #controls {
    top: 14px;
    right: 14px;
  }

  #brandLogo {
  top: 14px;
  left: 14px;
}

#brandLogoVideo {
  width: clamp(118px, 30vw, 168px);
  max-height: 56px;
}

  .pl-inner {
    justify-content: center;
    padding:
      max(18px, env(safe-area-inset-top))
      16px
      max(24px, env(safe-area-inset-bottom));
  }

  .pl-svg {
    width: 100vw;
    height: 60vh;
  }

  .loader-actions {
    width: min(92vw, 540px);
    gap: 12px;
  }

  #enterButton {
    min-width: 170px;
    min-height: 52px;
    padding: 13px 24px;
    font-size: 1.08rem;
    letter-spacing: 0.14em;
  }

  .consent {
    max-width: 92vw;
    font-size: 0.90rem;
    line-height: 1.64;
  }

  #menu {
    transform: translate(-50%, calc(-50% - (var(--footer-height) * 0.5) - 10px));
  }

  .menu-item {
    border-radius: 10px;
    font-size: clamp(0.96rem, 3.2vw, 1.18rem);
    letter-spacing: 0.11em;
    padding: 0 14px;
  }

  footer {
    height: auto;
    padding: 10px 16px 12px;

    grid-template-columns: 1fr;
    gap: 6px;
    text-align: center;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    justify-self: center;
  }
}

@media (max-width: 420px) {
  :root {
    --tile-size: 320px;

    --menu-box-size: min(90vw, calc(100vh - var(--footer-height) - 64px));
    --menu-half-gap-x: clamp(84px, 19vw, 118px);
    --menu-half-gap-y: clamp(84px, 19vw, 118px);
    --menu-item-width: clamp(108px, 25vw, 144px);
    --menu-item-height: clamp(42px, 8vw, 52px);
  }

  .pl-svg {
    height: 54vh;
  }

  #enterButton {
    min-width: 150px;
    min-height: 50px;
    font-size: 1rem;
  }

  .consent {
    font-size: 0.84rem;
  }

  .menu-item {
    font-size: clamp(0.88rem, 3.4vw, 1rem);
    letter-spacing: 0.08em;
    padding: 0 10px;
  }
}


/* =========================
   REDUCED MOTION
   ========================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}