/* =========================================================
   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;
  --boot-hide: 1000ms ease;
  --intro-hide: 1000ms ease;
  --fade-out: 1000ms ease;
  --fade-in: 1000ms 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,
.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
   Hidden until site entry
   ========================= */

#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);

  opacity: 0;
  visibility: hidden;
  transition: opacity 1000ms ease, visibility 0s linear 1000ms;
}

body.site-active #background {
  opacity: 1;
  visibility: visible;
  transition: opacity 1000ms ease, visibility 0s linear 0s;
}

body.loading #background,
body.intro-active #background {
  opacity: 0;
  visibility: hidden;
}

body.loading,
body.intro-active {
  background: #000;
}

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

#fade {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: none;
}

body.is-fading-in #fade,
body.is-fading-out #fade {
  visibility: visible !important;
  z-index: 9999 !important;
}

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

body.is-fading-out #fade {
  opacity: 1;
  transition: opacity var(--fade-out);
}

body.site-active:not(.is-fading-in):not(.is-fading-out) #fade {
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: -1 !important;
}

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

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

body.loading {
  overflow: hidden;
}

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

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

body.site-active #controls,
body.site-active #main,
body.site-active footer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* =========================
   PHASE 1 — BOOT LOADER
   ========================= */

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

  display: grid;
  place-items: center;

  background: #000;

  opacity: 1;
  visibility: visible;
  pointer-events: auto;

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

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

.boot-inner {
  width: 100vw;
  height: 100vh;

  display: grid;
  place-items: center;

  padding: clamp(20px, 3vw, 36px);
  text-align: center;

  position: relative;
}

.boot-logo {
  position: relative;
  display: inline-block;
}

.boot-svg {
  position: relative;
  display: inline-block;

  width: clamp(280px, 48vmin, 1100px);
  max-width: min(92vw, 92vh);
  height: auto;

  opacity: 0.94;

  filter:
    brightness(1.03)
    contrast(1.10)

    drop-shadow(0 0 6px rgba(255,255,255,0.22))
    drop-shadow(0 2px 10px rgba(0,0,0,0.65));

  transform: translateZ(0);
  backface-visibility: hidden;

  mix-blend-mode: normal;
}


/* =========================
   PHASE 2 — INTRO SCREEN
   ========================= */

#intro {
  position: fixed;
  inset: 0;
  z-index: 9998;

  display: grid;
  place-items: center;

  background: #000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

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

#intro.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

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

#intro .pl-inner {
  position: relative;
  z-index: 1;
}

.pl-inner{

  position:relative;

  width:100vw;
  height:100vh;

  display:flex;
  flex-direction:column;

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

  gap:clamp(18px,3.5vh,42px);

  padding:
    clamp(28px,4vh,60px)
    clamp(24px,4vw,48px)
    clamp(36px,6vh,80px);

  text-align:center;

  overflow:hidden;

}

.pl-logo-video{

  display:block;

  flex:0 1 auto;

  width:auto;
  height:auto;

  max-width:min(92vw,1400px);
  max-height:min(62vh,900px);

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

  opacity:0.88;

  mix-blend-mode:screen;

  filter:
    brightness(1.05)
    contrast(1.15);

  cursor:url("/assets/cursors/cursor-hover.cur"), pointer;

  transition:
    transform 300ms ease,
    filter 300ms ease,
    opacity 300ms ease;

}

.pl-svg {
  flex: 0 1 auto;

  width: min(92vw, 1400px);
  height: 48vh;
  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(16px, 2.6vh, 28px);

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

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

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

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



.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;
}

/* =========================
   CONTINUE TRAP MESSAGE
   ========================= */

.consent-insult {
  opacity: 0;
  transform: translateY(4px);
  margin-top: -15px;
  pointer-events: none;
  font-style: italic;
  transition: opacity 180ms ease, transform 180ms ease;
}

.consent-insult.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body.loader-ready .consent-insult:not(.is-visible) {
  opacity: 0;
  transform: translateY(4px);
}

#fakeContinue {
  cursor: url("/assets/cursors/cursor-global.cur") 12 12, auto;
}

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

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

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

  pointer-events: none;

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

#panelBackButton,
#soundToggle {
  appearance: none;
  -webkit-appearance: none;

  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;

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

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

  pointer-events: auto;

  cursor: url("/assets/cursors/cursor-hover.cur") 12 12, pointer;
}

#panelBackButton {
  grid-column: 1;
  justify-self: start;
}

#soundToggle {
  grid-column: 3;
  justify-self: end;
}

#panelBackButton[hidden] {
  display: none !important;
}

#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));
}

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


/* =========================
   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;

  opacity: 0;
  transition: opacity 800ms ease;
}

body.gpu-ready #swordCanvas {
  opacity: 1;
}


//* =========================
   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 BUTTON
   ========================= */

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

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

  width: clamp(260px, 24vmin, 360px);
  height: clamp(190px, 24vmin, 320px);

  text-decoration: none;
  pointer-events: auto;
  outline: none;

  transform-origin: center center;
  transition:
    transform 220ms ease,
    filter 220ms ease;
}


/* =========================
   SHIELD IMAGE
   ========================= */

.menu-shield {
  position: absolute;
  inset: 0;
  margin: auto;

  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;

  opacity: 0.92;

  filter:
    brightness(0.78)
    contrast(1.08)
    saturate(0.70)
    blur(0.35px)
    drop-shadow(0 0 0.8px rgba(0, 0, 0, 0.85))
    drop-shadow(0 10px 24px rgba(0, 0, 0, 0.42))
    drop-shadow(0 22px 48px rgba(0, 0, 0, 0.34));

  transform: scale(0.997);

  transition:
    transform 280ms cubic-bezier(.22,.61,.36,1),
    filter 280ms cubic-bezier(.22,.61,.36,1),
    opacity 280ms cubic-bezier(.22,.61,.36,1);

  pointer-events: none;
  user-select: none;
  z-index: 1;
}


/* =========================
   BUTTON TEXT
   ========================= */

.menu-text {
  position: relative;
  z-index: 2;

  display: inline-block;
  min-width: max-content;

  font-family: "Centaur", serif;
  font-size: clamp(1.2rem, 1.45vmax, 2rem);
  line-height: 1;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;

  color: #d8d3ca;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.12),
    0 0 6px rgba(255,255,255,0.08),
    0 0 18px rgba(150,170,195,0.10),
    0 2px 6px rgba(0,0,0,0.85),
    0 8px 20px rgba(0,0,0,0.50);

  transform: translateY(-1px);

  pointer-events: none;

  transition:
    color 220ms ease,
    text-shadow 220ms ease,
    transform 220ms ease;
}


/* =========================
   HOVER / FOCUS
   ========================= */

.menu-item:hover,
.menu-item:focus-visible {
  outline: none;
}

.menu-item:hover .menu-shield,
.menu-item:focus-visible .menu-shield {
  opacity: 1;

  filter:
    brightness(0.96)
    contrast(1.14)
    saturate(0.82)
    blur(0.30px)
    drop-shadow(0 0 1px rgba(0, 0, 0, 0.90))
    drop-shadow(0 14px 28px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 18px rgba(170, 195, 225, 0.12))
    drop-shadow(0 0 36px rgba(120, 150, 185, 0.08));

  transform: translateY(-2px) scale(1.012);
}

.menu-item:hover .menu-text,
.menu-item:focus-visible .menu-text {
  color: #eef1f4;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.18),
    0 0 8px rgba(255,255,255,0.14),
    0 0 22px rgba(160,185,210,0.16),
    0 2px 8px rgba(0,0,0,0.88),
    0 10px 24px rgba(0,0,0,0.56);

  transform: translateY(-2px);
}

.menu-item:active .menu-shield {
  transform: translateY(1px) scale(0.990);
}

.menu-item:active .menu-text {
  transform: translateY(0);
}


/* =========================
   MENU POSITIONS
   ========================= */

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

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

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

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

.menu-item:nth-child(1):hover,
.menu-item:nth-child(1):focus-visible {
  transform: translate(calc(-50% - var(--menu-half-gap-x)), calc(-50% - var(--menu-half-gap-y))) scale(1.03);
}

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

.menu-item:nth-child(3):hover,
.menu-item:nth-child(3):focus-visible {
  transform: translate(calc(-50% - var(--menu-half-gap-x)), calc(-50% + var(--menu-half-gap-y))) scale(1.03);
}

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

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

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

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

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

/* =========================
   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;

  overflow: hidden;

  border-top: 1px solid rgba(255, 255, 255, 0.10);

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

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


/* decorative texture layer */

footer::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -2;

  background-image: url("/assets/images/footer.webp");
  background-repeat: repeat-x;
  background-position: center bottom;

  /* respect du ratio */
  background-size: auto 100%;

  /* meilleur rendu retina */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}


/* subtle vignette / blending */

footer::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.65),
      rgba(0,0,0,0.35),
      rgba(0,0,0,0.08)
    );
}


/* layout zones */

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

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

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


/* links */

.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 {
    margin-top: 6px;
    gap: 20px;
  }

}

@media (max-width: 980px) {
  :root {
    --menu-box-size: clamp(400px, 72vmin, 720px);
    --menu-half-gap-x: clamp(124px, 18vmin, 208px);
    --menu-half-gap-y: clamp(132px, 19vmin, 224px);
  }

  .menu-item {
    width: clamp(220px, 23vmin, 300px);
    height: clamp(168px, 22vmin, 260px);
  }

  .menu-text {
    font-size: clamp(1.02rem, 1.55vmax, 1.6rem);
    letter-spacing: 0.22em;
  }
}

@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(92px, 17vw, 142px);
    --menu-half-gap-y: clamp(104px, 19vw, 160px);
  }

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

  .boot-svg {
    width: clamp(240px, 70vw, 340px);
    max-width: 90vw;
  }
  
  .pl-logo-video {
    display: block;
    flex: 0 1 auto;

    width: min(92vw, 820px);
    max-width: 820px;

    height: auto;
    max-height: clamp(140px, 28vh, 260px);

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

    opacity: 0.70;
  }

  .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: 10px;
  }

  .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 {
    width: clamp(160px, 26vw, 220px);
    height: clamp(122px, 22vw, 178px);
  }

  .menu-text {
    font-size: clamp(0.86rem, 2.2vw, 1.08rem);
    letter-spacing: 0.18em;
  }

  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(72px, 18vw, 108px);
    --menu-half-gap-y: clamp(84px, 21vw, 124px);
  }

  .boot-svg {
    width: clamp(220px, 72vw, 300px);
  }

  .pl-svg {
    height: 54vh;
  }

  .consent {
    font-size: 0.84rem;
  }

  .menu-item {
    width: clamp(124px, 28vw, 164px);
    height: clamp(96px, 24vw, 136px);
  }

  .menu-text {
    font-size: clamp(0.70rem, 2.9vw, 0.88rem);
    letter-spacing: 0.14em;
  }
}

/* =========================
   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;
  }
}