:root {
  color-scheme: dark;
  --bg: #2b2b2b;
  --artboard-w: 2586;
  --artboard-h: 1844;
  --crop-w: 1920;
  --crop-h: 1080;
  --crop-x: 333;
  --crop-y: 382;
  --lettering-opacity: 1;
  --frame-scale: 1;
}

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

html,
body {
  width: 100%;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body {
  position: fixed;
  inset: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
}

/* Atmosphere always fills the real viewport (portrait + landscape). */
.stage-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bg-lettering {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2757px;
  height: 1297.57px;
  /* Cover viewport while keeping native pattern aspect. */
  transform: translate(-50%, -50%) scale(var(--bg-cover-scale, 1));
  transform-origin: center center;
  background-image: url("assets/lettering_pattern.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: var(--lettering-opacity);
  will-change: transform;
}

.bg-texture {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2702px;
  height: 1916px;
  transform: translate(-50%, -50%) scale(var(--bg-cover-scale, 1));
  transform-origin: center center;
  background-image: url("assets/background.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 90ms linear;
  will-change: transform, opacity;
}

.bg-texture[data-variant="2"] {
  background-image: url("assets/background_2.svg");
  transform: translate(-50%, -50%) scaleX(-1) scale(var(--bg-cover-scale, 1));
  opacity: 0.4;
}

.bg-texture.is-hidden {
  opacity: 0 !important;
}

/*
  Hero crop (logo + banners). Margin-centered so scale never pins top-left.
  Transparent so stage lettering shows through.
*/
.frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--crop-w) * 1px);
  height: calc(var(--crop-h) * 1px);
  margin-left: calc(var(--crop-w) * -0.5px);
  margin-top: calc(var(--crop-h) * -0.5px);
  overflow: hidden;
  background: transparent;
  transform: scale(var(--frame-scale));
  transform-origin: center center;
  will-change: transform;
  z-index: 1;
}

.artboard {
  position: absolute;
  width: calc(var(--artboard-w) * 1px);
  height: calc(var(--artboard-h) * 1px);
  left: calc(var(--crop-x) * -1px);
  top: calc(var(--crop-y) * -1px);
  background: transparent;
}

.corner {
  position: absolute;
  width: 268px;
  height: 268px;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.corner-tl {
  left: 549px;
  top: 244px;
}

.corner-br {
  left: 1789px;
  top: 1324px;
}

.spin-root {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-origin: 1293px 922px;
  will-change: transform;
}

.banners {
  position: absolute;
  left: 0;
  top: 698.9px;
  width: 2586px;
  height: 418.62px;
}

.banner-shadow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  mix-blend-mode: soft-light;
  transform: translate(1.6%, 3.4%) scale(1.03);
  z-index: 0;
}

.banner-track {
  position: absolute;
  inset: 0;
  will-change: transform;
  z-index: 1;
}

.banner-track-left {
  transform: translate3d(-120%, 0, 0);
}

.banner-track-right {
  transform: translate3d(120%, 0, 0);
}

.banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.banner-text {
  position: absolute;
  display: block;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 2;
}

.banner-text-left {
  left: 724.5px;
  top: calc(913.7px - 698.9px);
  width: 354.07px;
  height: 105.5px;
}

.banner-text-right {
  left: 1506.4px;
  top: calc(805.4px - 698.9px);
  width: 355.81px;
  height: 105.75px;
}

.prijavi-hit {
  position: absolute;
  left: 1641.5px;
  top: 822.4px;
  width: 658.97px;
  height: 172.84px;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3;
  transform: translate3d(125%, 0, 0);
  opacity: 1;
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}

.prijavi-hit:focus-visible {
  outline: 2px solid #f89b1c;
  outline-offset: 6px;
}

.prijavi-hit.is-disabled {
  pointer-events: none;
  cursor: default;
}

.prijavi-banner,
.prijavi-shadow {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.prijavi-shadow {
  /* Asset viewBox is shorter than the full prijavi graphic. */
  width: 658.97px;
  height: 121.46px;
  opacity: 0.95;
  mix-blend-mode: soft-light;
  transform: translate(2%, 5%) scale(1.04);
  z-index: 0;
}

.prijavi-banner {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.logo-hit {
  position: absolute;
  left: 1178px;
  top: 830px;
  width: 230px;
  height: 182.98px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 5;
  transform-origin: 55% 70%;
  will-change: transform;
}

.logo-hit:disabled {
  cursor: default;
}

.logo,
.logo-shadow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.logo {
  opacity: 0;
  will-change: opacity, transform;
}

.logo-shadow {
  opacity: 0;
  mix-blend-mode: soft-light;
  transform: translate(2%, 3%) scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .banner-track-left,
  .banner-track-right,
  .prijavi-hit,
  .logo,
  .banner-text,
  .banner-shadow,
  .logo-hit {
    transition: none !important;
  }
}