@font-face {
  font-family: 'Russo One';
  src: url('/assets/russo-one-regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Manrope;
  src: url('/assets/manrope-800.ttf') format('truetype');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  background: #080b0e;
  color: #eef4f3;
  font-family: Manrope, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; }

.scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 48%, #162126 0, #0d1318 36%, #080b0e 74%);
}

.game-background {
  position: absolute;
  inset: -3%;
  background: #071a30 url('/assets/layers-v2/backdrop-v2.webp') center / cover no-repeat;
  pointer-events: none;
  will-change: transform;
}

.game-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, #030c1c30 0, transparent 55%),
    linear-gradient(180deg, #030c1c18, transparent 35%, transparent 65%, #030c1c45);
}

.game-objects {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.game-object {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  transform: translate(-50%, -50%) rotate(var(--angle, 0deg));
}

.game-object img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  will-change: transform;
}

.object-ring-far { --x: 13%; --y: 8%; --size: clamp(190px, 24vw, 380px); --angle: -15deg; }
.object-coin-high { --x: 43%; --y: 5%; --size: clamp(65px, 7.5vw, 120px); --angle: 14deg; }
.object-coin-top { --x: 35%; --y: 17%; --size: clamp(85px, 9vw, 155px); --angle: -17deg; }
.object-booster-far { --x: 56%; --y: 12%; --size: clamp(200px, 24vw, 390px); }
.object-crystal-far { --x: 76%; --y: 12%; --size: clamp(110px, 13vw, 210px); --angle: 9deg; }
.object-portal { --x: 99%; --y: 17%; --size: clamp(280px, 29vw, 520px); }
.object-coin-bottom { --x: 34%; --y: 85%; --size: clamp(110px, 12vw, 200px); --angle: -21deg; }
.object-crystal-mid { --x: 58%; --y: 77%; --size: clamp(110px, 13vw, 200px); --angle: -8deg; }
.object-ring-near { --x: 72%; --y: 101%; --size: clamp(340px, 37vw, 660px); --angle: 24deg; }
.object-island { --x: 6%; --y: 99%; --size: clamp(420px, 47vw, 850px); --angle: -4deg; }
.object-booster-near { --x: 104%; --y: 96%; --size: clamp(390px, 43vw, 760px); --angle: -12deg; }

.atmosphere {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(ellipse at 28% 54%, #2dd5ba0c, transparent 40%),
    radial-gradient(ellipse at 75% 38%, #7f86ff0b, transparent 38%);
  animation: breathe 13s ease-in-out infinite alternate;
}

.halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85vmin;
  height: 52vmin;
  margin: -26vmin 0 0 -42.5vmin;
  border-radius: 50%;
  background: radial-gradient(ellipse, #b2f9e70c 0, #57d6c605 35%, transparent 68%);
  will-change: transform;
}

.grain {
  position: absolute;
  inset: 0;
  opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.15' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  pointer-events: none;
}

.stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

.word {
  position: relative;
  width: max-content;
  font-family: 'Russo One', Manrope, Arial, sans-serif;
  font-size: clamp(1.35rem, min(9.1vw, 17svh), 12rem);
  font-weight: 400;
  font-kerning: none;
  line-height: 1.2;
  letter-spacing: -.025em;
  white-space: nowrap;
  transform-style: preserve-3d;
  will-change: transform;
}

h1, .depth {
  display: block;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  backface-visibility: hidden;
}

.depth {
  position: absolute;
  inset: 0;
  color: #223b40;
  user-select: none;
  pointer-events: none;
  text-shadow: 0 1px 0 #163036;
}

.depth-1 { transform: translate3d(0, 6px, -15px); color: #101e24; text-shadow: 0 22px 34px #0009; }
.depth-2 { transform: translate3d(0, 5px, -12px); color: #1d353b; }
.depth-3 { transform: translate3d(0, 4px, -9px); color: #28474c; }
.depth-4 { transform: translate3d(0, 3px, -6px); color: #375a5f; }
.depth-5 { transform: translate3d(0, 2px, -3px); color: #51777a; }
.depth-6 { transform: translate3d(0, 1px, 0); color: #83aaa9; }

h1 {
  position: relative;
  transform: translateZ(3px);
  color: #e7efed;
  background: linear-gradient(168deg, #fff 8%, #e8f4f0 39%, #acc6c4 72%, #f5fcf9 98%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 -1px 0 #fff4);
}

.glyph {
  display: inline-block;
  transform-origin: 50% 75%;
  transform-style: preserve-3d;
}

.word.has-glyphs h1 {
  background: none;
  -webkit-text-fill-color: initial;
  filter: none;
}

.word.has-glyphs h1 .glyph {
  background: linear-gradient(168deg, #fff 8%, #e8f4f0 39%, #acc6c4 72%, #f5fcf9 98%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 -1px 0 #fff4);
}

::selection { background: #94e9d84d; color: #fff; }

@keyframes breathe {
  from { transform: translate3d(-2%, 1%, 0) scale(1); opacity: .55; }
  to { transform: translate3d(2%, -1%, 0) scale(1.07); opacity: 1; }
}

@media (max-width: 600px) {
  .stage { perspective: 850px; }
  .depth-1 { text-shadow: 0 12px 20px #0009; }
  .object-ring-far { --x: -2%; --y: 13%; --size: 64vw; }
  .object-coin-high { --x: 33%; --y: 3%; --size: 23vw; }
  .object-coin-top { --x: 23%; --y: 25%; --size: 29vw; }
  .object-booster-far { --x: 70%; --y: 11%; --size: 65vw; }
  .object-crystal-far { --x: 95%; --y: 32%; --size: 37vw; }
  .object-portal { display: none; }
  .object-coin-bottom { --x: 13%; --y: 83%; --size: 37vw; }
  .object-crystal-mid { --x: 65%; --y: 75%; --size: 44vw; }
  .object-ring-near { --x: 98%; --y: 103%; --size: 92vw; }
  .object-island { --x: -4%; --y: 107%; --size: 97vw; }
  .object-booster-near { --x: 119%; --y: 103%; --size: 90vw; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .object-booster-far { --size: 22vw; --y: 4%; }
  .object-crystal-mid { --y: 91%; }
  .object-ring-far { --size: 22vw; --y: -6%; }
  .object-island { --y: 122%; }
  .object-booster-near { --y: 121%; }
}

@media (prefers-reduced-motion: reduce) {
  .atmosphere { animation: none; }
  .word, .halo, .game-background, .game-object img { will-change: auto; }
}