:root {
  --mouse-x: 50%;
  --mouse-y: 48%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: rgba(244, 248, 255, 0.94);
  background: #02040c;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -18vmax;
  z-index: 0;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(ellipse at 8% 44%, rgba(45, 142, 255, 0.66), transparent 25%),
    radial-gradient(ellipse at 91% 48%, rgba(171, 55, 255, 0.62), transparent 28%),
    radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(118, 140, 255, 0.20), transparent 29%),
    linear-gradient(180deg, #010209 0%, #050816 48%, #02030a 100%);
  filter: blur(20px);
  transform: translateZ(0);
}

body::after {
  background:
    conic-gradient(from 238deg at 5% 47%, transparent 0 67%, rgba(37, 147, 255, 0.27) 74%, transparent 81%),
    conic-gradient(from 42deg at 97% 46%, transparent 0 66%, rgba(198, 64, 255, 0.24) 73%, transparent 82%),
    radial-gradient(circle at 50% 115%, rgba(14, 74, 180, 0.24), transparent 42%);
  filter: blur(42px);
  opacity: 0.98;
  animation: slowDrift 18s ease-in-out infinite alternate;
}

#scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  display: block;
}

.page {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 36px);
  perspective: 1100px;
}

.hero-card {
  position: relative;
  width: min(70vw, 920px);
  min-height: clamp(270px, 32vh, 360px);
  padding: clamp(42px, 5.2vw, 70px) clamp(34px, 6vw, 86px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(184, 224, 255, 0.74);
  border-radius: clamp(26px, 3vw, 38px);
  background:
    radial-gradient(circle at 17% 23%, rgba(104, 180, 255, 0.21), transparent 34%),
    radial-gradient(circle at 94% 72%, rgba(205, 78, 255, 0.19), transparent 36%),
    linear-gradient(116deg, rgba(30, 53, 86, 0.33), rgba(8, 7, 22, 0.62) 54%, rgba(22, 12, 45, 0.50)),
    rgba(2, 6, 18, 0.50);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10) inset,
    0 0 28px rgba(97, 179, 255, 0.42),
    0 0 58px rgba(182, 69, 255, 0.34),
    0 34px 92px rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 150ms ease-out;
  overflow: hidden;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(103deg, rgba(255,255,255,0.24), transparent 18%, transparent 72%, rgba(255,255,255,0.16)),
    radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.15), transparent 27%);
  pointer-events: none;
}

.hero-card::after {
  content: "";
  position: absolute;
  inset: auto 5% -1px 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91, 181, 255, 0.92), rgba(201, 85, 255, 0.84), transparent);
}

.word-cloud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.word {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: rgba(213, 228, 255, 0.74);
  text-shadow: 0 0 18px rgba(92, 165, 255, 0.36), 0 0 34px rgba(196, 80, 255, 0.22);
}

.word-welcome { left: 19%; top: 25%; font-size: clamp(1.35rem, 2.05vw, 2.08rem); }
.word-bienvenue { left: 50%; top: 18%; font-size: clamp(1.38rem, 2.2vw, 2.26rem); color: rgba(225, 214, 255, 0.80); }
.word-yokoso { left: 82%; top: 27%; font-size: clamp(1.24rem, 1.96vw, 2rem); color: rgba(232, 177, 255, 0.78); }
.word-bienvenido { left: 18%; top: 48%; font-size: clamp(1.18rem, 1.78vw, 1.86rem); color: rgba(181, 216, 255, 0.72); }
.word-benvenuto { left: 84%; top: 48%; font-size: clamp(1.18rem, 1.78vw, 1.86rem); color: rgba(224, 164, 255, 0.72); }
.word-welkom { left: 24%; top: 73%; font-size: clamp(1.16rem, 1.78vw, 1.84rem); color: rgba(184, 218, 255, 0.69); }
.word-valkommen { left: 79%; top: 73%; font-size: clamp(1.16rem, 1.78vw, 1.84rem); color: rgba(217, 181, 255, 0.70); }
.word-bemvindo { left: 36%; top: 84%; font-size: clamp(1.02rem, 1.55vw, 1.58rem); color: rgba(145, 195, 255, 0.66); }
.word-tervetuloa { left: 57%; top: 86%; font-size: clamp(1.02rem, 1.55vw, 1.58rem); color: rgba(182, 171, 255, 0.68); }

h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 0.96;
  font-size: clamp(3.7rem, 6.3vw, 5.7rem);
  background: linear-gradient(110deg, #ffffff 4%, #9acbff 37%, #e4b6ff 75%, #ffffff 98%);
  background-size: 220% 220%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 38px rgba(128, 194, 255, 0.30);
  animation: textShine 8s ease-in-out infinite;
}

.light-line {
  position: relative;
  z-index: 1;
  width: min(36vw, 340px);
  height: 1px;
  margin-top: clamp(22px, 3vw, 32px);
  background: linear-gradient(90deg, transparent, rgba(137, 195, 255, 0.62), rgba(195, 103, 255, 0.46), transparent);
}

.light-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: #82bdff;
  box-shadow: 0 0 16px #74b7ff, 0 0 36px rgba(174, 78, 255, 0.74);
}

.site-meta {
  position: fixed;
  right: clamp(24px, 5vw, 78px);
  bottom: calc(clamp(18px, 3.8vw, 52px) + env(safe-area-inset-bottom));
  z-index: 3;
  display: flex;
  gap: clamp(12px, 1.8vw, 24px);
  align-items: center;
  justify-content: flex-end;
  max-width: min(86vw, 720px);
  color: rgba(238, 244, 255, 0.84);
  font-size: clamp(0.86rem, 1.15vw, 1.04rem);
  letter-spacing: 0.045em;
  text-align: right;
  text-shadow: 0 0 20px rgba(61, 141, 255, 0.27), 0 0 32px rgba(186, 82, 255, 0.18);
}

.dot { color: rgba(207, 225, 255, 0.72); }

@keyframes textShine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes slowDrift {
  from { transform: translate3d(-1.2%, -0.8%, 0) rotate(-1.2deg); }
  to { transform: translate3d(1.2%, 0.8%, 0) rotate(1.2deg); }
}

@media (max-width: 820px) {
  .hero-card {
    width: min(92vw, 640px);
    min-height: clamp(330px, 46vh, 430px);
    padding: 40px 24px;
  }

  h1 { font-size: clamp(2.8rem, 12vw, 4.25rem); }
  .light-line { width: min(58vw, 260px); }

  .word-welcome { left: 22%; top: 24%; font-size: clamp(1.05rem, 4.2vw, 1.55rem); }
  .word-bienvenue { left: 58%; top: 19%; font-size: clamp(1.05rem, 4.2vw, 1.55rem); }
  .word-yokoso { left: 76%; top: 34%; font-size: clamp(1rem, 4vw, 1.42rem); }
  .word-bienvenido { left: 24%; top: 44%; font-size: clamp(1rem, 4vw, 1.42rem); }
  .word-benvenuto { left: 76%; top: 56%; font-size: clamp(1rem, 4vw, 1.42rem); }
  .word-welkom { left: 25%; top: 72%; font-size: clamp(1rem, 4vw, 1.42rem); }
  .word-valkommen { left: 70%; top: 75%; font-size: clamp(1rem, 4vw, 1.42rem); }
  .word-bemvindo { display: none; }
  .word-tervetuloa { display: none; }

  .site-meta {
    left: 18px;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 6px;
    font-size: clamp(0.76rem, 3vw, 0.92rem);
    letter-spacing: 0.035em;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .page { padding: 14px; }
  .hero-card {
    width: 94vw;
    min-height: 360px;
    border-radius: 26px;
    padding: 36px 18px;
  }
  .site-meta { gap: 8px; }
  .site-meta .dot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}