@font-face {
  font-family: 'Alliance No.1';
  src: url('fonts/DegarismStudio-Alliance No.1 Light.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jumper';
  src: url('fonts/JumperPERSONALUSEONLY-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html {
  overflow: hidden;
}

body {
  background: radial-gradient(circle at 50% 46%, rgba(83, 113, 116, 0.16) 0%, rgba(5, 5, 5, 0) 58%), #050505;
  font-family: 'Alliance No.1', sans-serif;
  margin: 0;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.wave-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  transform: translate3d(var(--cursor-x, 0px), var(--cursor-y, 0px), 0) rotate(var(--cursor-r, 0deg)) scale(1.14);
  transition: transform 80ms ease-out;
  filter: brightness(1.04);
}

.cursor-shine {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.82;
  background: radial-gradient(
    circle 210px at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(225, 250, 250, 0.22) 0%,
    rgba(145, 205, 211, 0.12) 24%,
    rgba(80, 130, 139, 0.045) 48%,
    transparent 76%
  );
  mix-blend-mode: screen;
  animation: shine-pulse 3.2s ease-in-out infinite alternate;
}

@keyframes shine-pulse {
  from {
    opacity: 0.62;
  }
  to {
    opacity: 0.9;
  }
}

.wave-group {
  fill: none;
  stroke: url(#wave-ink);
  stroke-width: 0.95;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.wave-group-left {
  opacity: 0.34;
  animation: drift-left 7s ease-in-out infinite alternate;
}

.wave-group-right {
  opacity: 0.2;
  animation: drift-right 9s ease-in-out infinite alternate-reverse;
}

.wave-group-center {
  opacity: 0.24;
  animation: drift-center 11s ease-in-out infinite alternate;
}

.wave-group-fine {
  opacity: 0.06;
  stroke-width: 0.7;
  animation: drift-fine 8s ease-in-out infinite alternate-reverse;
}

.wave-group-wide {
  opacity: 0.11;
  stroke-width: 0.72;
  animation: drift-wide 10s ease-in-out infinite alternate;
}

.wave-group-corners {
  opacity: 0.3;
  stroke-width: 0.78;
  animation: drift-corners 13s ease-in-out infinite alternate-reverse;
}

@keyframes drift-left {
  from {
    transform: translate(-28px, -18px) rotate(-1.4deg) skewX(-0.8deg) scale(1.02, 0.98);
  }
  28% {
    transform: translate(8px, 12px) rotate(0.4deg) skewX(0.5deg) scale(1.04, 0.96);
  }
  63% {
    transform: translate(30px, -4px) rotate(1.2deg) skewX(1deg) scale(0.98, 1.03);
  }
  to {
    transform: translate(-4px, 24px) rotate(-0.5deg) skewX(-0.4deg) scale(1.01, 1.02);
  }
}

@keyframes drift-right {
  from {
    transform: translate(32px, 20px) rotate(1.2deg) skewX(0.7deg) scale(0.98, 1.03);
  }
  34% {
    transform: translate(-12px, -4px) rotate(-0.7deg) skewX(-0.5deg) scale(1.04, 0.97);
  }
  68% {
    transform: translate(-30px, 18px) rotate(-1.3deg) skewX(-0.9deg) scale(1, 1.04);
  }
  to {
    transform: translate(4px, -24px) rotate(0.5deg) skewX(0.4deg) scale(1.02, 0.98);
  }
}

@keyframes drift-center {
  from {
    transform: translate(-22px, 26px) rotate(-0.8deg) skewX(-0.6deg) scale(1.03, 0.98);
  }
  30% {
    transform: translate(20px, -12px) rotate(0.8deg) skewX(0.7deg) scale(0.98, 1.04);
  }
  62% {
    transform: translate(28px, 18px) rotate(1.1deg) skewX(0.9deg) scale(1.04, 0.97);
  }
  to {
    transform: translate(-26px, -22px) rotate(-1deg) skewX(-0.8deg) scale(1.08, 1.01);
  }
}

@keyframes drift-fine {
  from {
    transform: translate(24px, -20px) rotate(-1.2deg) skewX(-0.5deg) scale(1.02, 0.98);
  }
  35% {
    transform: translate(-18px, 4px) rotate(0.5deg) skewX(0.6deg) scale(0.98, 1.03);
  }
  70% {
    transform: translate(-28px, 22px) rotate(1.4deg) skewX(0.8deg) scale(1.04, 0.98);
  }
  to {
    transform: translate(12px, 28px) rotate(-0.4deg) skewX(-0.4deg) scale(1, 1.03);
  }
}

@keyframes drift-wide {
  from {
    transform: translate(-36px, 20px) rotate(-1.4deg) skewX(-0.7deg) scale(1.03, 0.97);
  }
  32% {
    transform: translate(16px, -10px) rotate(0.4deg) skewX(0.5deg) scale(0.98, 1.04);
  }
  66% {
    transform: translate(34px, 18px) rotate(1.3deg) skewX(0.9deg) scale(1.04, 0.98);
  }
  to {
    transform: translate(-10px, -26px) rotate(-0.4deg) skewX(-0.5deg) scale(1, 1.02);
  }
}

@keyframes drift-corners {
  from {
    transform: translate(-12px, 10px) rotate(-0.6deg) skewX(-0.4deg);
  }
  50% {
    transform: translate(14px, -8px) rotate(0.6deg) skewX(0.4deg);
  }
  to {
    transform: translate(-4px, -14px) rotate(-0.3deg) skewX(-0.2deg);
  }
}

@keyframes mobile-wave-drift {
  from {
    transform: translate3d(-24px, 12px, 0) rotate(-2.5deg) scale(1.03);
  }
  to {
    transform: translate3d(24px, -12px, 0) rotate(2.5deg) scale(1.06);
  }
}

@keyframes mobile-line-flow {
  0%,
  100% {
    transform: translate3d(-3px, 1px, 0);
  }
  50% {
    transform: translate3d(3px, -1px, 0);
  }
}

@keyframes mobile-subtle-sway {
  from {
    transform: translate3d(-3px, 1px, 0);
  }
  to {
    transform: translate3d(3px, -1px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wave-group-left,
  .wave-group-right,
  .wave-group-center,
  .wave-group-fine,
  .wave-group-wide,
  .wave-group-corners {
    animation: none;
  }

  .wave-field {
    animation: none !important;
    transition: none;
  }

  .cursor-shine {
    animation: none;
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

h1,h2,h3,h4,h5,h6 {
  color: #fff;
  margin-left: 0;
  text-align: center;
}

h1,
h3 {
  margin-top: 0;
  margin-bottom: 0;
}

h1 {
  font-family: 'Jumper', sans-serif;
  font-size: 5rem;
  line-height: 0.95;
}

h3 {
  margin-top: 6px;
}

h5 {
  margin: 9px 0 0;
  line-height: 1.1;
}

@media (max-width: 600px) {
  body {
    min-height: 100svh;
  }

  .wave-field {
    transform: none;
    filter: none;
    animation: mobile-subtle-sway 28s ease-in-out infinite alternate;
  }

  .wave-group {
    animation: none;
    will-change: auto;
  }

  .cursor-shine {
    opacity: 0.5;
    mix-blend-mode: normal;
    animation: none;
  }

  h1 {
    max-width: calc(100vw - 32px);
    font-size: 2.4rem;
  }
}

@media (max-width: 360px) {
  h1 {
    font-size: 2.1rem;
  }
}

.glitch-header {
  position: relative;
  animation: none;
}

.glitch-header::before,
.glitch-header::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.glitch-header::before {
  color: #b9f5f5;
  text-shadow: 2px 0 rgba(129, 226, 231, 0.85);
}

.glitch-header::after {
  color: #f2ffff;
  text-shadow: -2px 0 rgba(101, 159, 166, 0.9);
}

@keyframes glitch-in-out {
  0%, 8% {
    opacity: 0;
    transform: translateX(-8px);
  }
  10%, 14% {
    opacity: 1;
    transform: translateX(2px) skewX(-8deg);
  }
  16%, 68% {
    opacity: 1;
    transform: none;
  }
  70%, 74% {
    opacity: 0;
    transform: translateX(7px) skewX(10deg);
  }
  76%, 82% {
    opacity: 1;
    transform: translateX(-2px);
  }
  84%, 100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes glitch-slice-a {
  0%, 9%, 16%, 69%, 76%, 100% {
    opacity: 0;
  }
  10%, 12% {
    opacity: 0.85;
    clip-path: inset(10% 0 62% 0);
    transform: translateX(-5px);
  }
  70%, 73% {
    opacity: 0.8;
    clip-path: inset(54% 0 20% 0);
    transform: translateX(6px);
  }
}

@keyframes glitch-slice-b {
  0%, 11%, 16%, 69%, 76%, 100% {
    opacity: 0;
  }
  12%, 15% {
    opacity: 0.75;
    clip-path: inset(68% 0 8% 0);
    transform: translateX(4px);
  }
  71%, 74% {
    opacity: 0.8;
    clip-path: inset(18% 0 58% 0);
    transform: translateX(-5px);
  }
}

.contact-button {
  margin-top: 10px;
  padding: 10px 26px;
  text-decoration: none;
  border: 1px solid rgba(220, 239, 241, 0.75);
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(235, 250, 251, 0.14), rgba(141, 191, 197, 0.04));
  color: #dcebed;
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(7px) saturate(130%);
  -webkit-backdrop-filter: blur(7px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(117, 177, 184, 0.2);
  transition: color 180ms ease, box-shadow 180ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-button span {
  position: relative;
  z-index: 1;
}

.contact-button:hover,
.contact-button:focus-visible {
  background: rgba(215, 235, 237, 0.06);
  color: #141414;
  box-shadow: 0 0 18px rgba(220, 245, 246, 0.42);
  transform: translateY(-2px);
}

.contact-button:hover::before,
.contact-button:focus-visible::before {
  transform: scaleX(1);
}

.contact-button:focus-visible {
  outline: 2px solid rgba(235, 250, 250, 0.9);
  outline-offset: 4px;
}

@media (max-width: 600px) {
  .contact-button {
    margin-top: 10px;
    padding: 10px 27px;
    font-size: 0.92rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .wave-field,
  .wave-group,
  .cursor-shine {
    animation: none !important;
  }
}

@media (max-width: 600px) {
  .wave-field,
  .wave-group,
  .cursor-shine {
    animation: none !important;
    transition: none !important;
  }

  .wave-field {
    transform: none;
  }
}