/* Header logo frame — Glass V1.2.2 production integration */
.header-promocode-button {
  --logo-glass-color: #4e8abe;
  --logo-glass-color-light: #8fb8dc;
  --logo-glass-color-lighter: #c5d9eb;
  --logo-glass-color-dark: #315777;
  --logo-glass-color-darker: #1e3a53;
  --logo-glass-color-deep: #10283d;
  --logo-glass-tint-strength: 1;
  --logo-glass-blur: 8px;
  --logo-glass-saturation: 170%;
  --logo-glass-brightness: 88%;
  --logo-glass-contrast: 108%;
  --logo-glass-rim-strength: 0.88;
  --logo-glass-specular-strength: 1;
  --logo-glass-shadow-strength: 1;
  --logo-glass-fallback-alpha: 0.08;
  --logo-glass-fallback-alpha-no-blur: 0.62;
  --logo-slogan-drop: clamp(6px, 0.7vw, 9px);
  padding-inline: 0;
}

@supports (color: color-mix(in oklab, red, blue)) {
  .header-promocode-button {
    --logo-glass-color-light: color-mix(in oklab, var(--logo-glass-color) 44%, white);
    --logo-glass-color-lighter: color-mix(in oklab, var(--logo-glass-color) 24%, white);
    --logo-glass-color-dark: color-mix(in oklab, var(--logo-glass-color) 58%, #06111d);
    --logo-glass-color-darker: color-mix(in oklab, var(--logo-glass-color) 35%, #06111d);
    --logo-glass-color-deep: color-mix(in oklab, var(--logo-glass-color) 20%, #020912);
  }
}

.header-promocode-button::before,
.header-promocode-button::after {
  content: none;
}

.header-logo-frame__fallback-base {
  fill: var(--logo-glass-color-dark);
  fill-opacity: clamp(0, var(--logo-glass-fallback-alpha), 1);
}

.header-logo-glass-surface {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgb(255 255 255 / 0.065);
  -webkit-backdrop-filter:
    blur(var(--logo-glass-blur))
    saturate(var(--logo-glass-saturation))
    brightness(var(--logo-glass-brightness))
    contrast(var(--logo-glass-contrast));
  backdrop-filter:
    blur(var(--logo-glass-blur))
    saturate(var(--logo-glass-saturation))
    brightness(var(--logo-glass-brightness))
    contrast(var(--logo-glass-contrast));
}

.header-logo-glass-surface > span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.header-logo-glass-surface__ambient {
  background:
    radial-gradient(circle at 82% 12%, color-mix(in oklab, var(--logo-glass-color-light) 21%, transparent), transparent 71%),
    linear-gradient(49deg, color-mix(in oklab, var(--logo-glass-color) 17%, transparent), rgb(255 255 255 / 0.03) 52%, transparent);
}

.header-logo-glass-surface__specular {
  background:
    radial-gradient(44% 90% at 17.75% -8%, rgb(255 255 255 / 0.20), transparent 58%),
    radial-gradient(80% 110% at 100% 100%, color-mix(in oklab, var(--logo-glass-color-light) 13%, transparent), transparent 60%);
  opacity: clamp(0, var(--logo-glass-specular-strength), 1);
}

.header-logo-glass-surface__inner-shadow {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.03) 20%, rgb(3 10 18 / 0.02) 56%, rgb(3 10 18 / 0.18));
}

.logo-glass-stop--tint-1 { stop-color: var(--logo-glass-color-lighter); stop-opacity: 0.18; }
.logo-glass-stop--tint-2 { stop-color: var(--logo-glass-color-light); stop-opacity: 0.12; }
.logo-glass-stop--tint-3 { stop-color: var(--logo-glass-color); stop-opacity: 0.28; }
.logo-glass-stop--tint-4 { stop-color: var(--logo-glass-color-dark); stop-opacity: 0.46; }
.logo-glass-stop--highlight-1 { stop-color: white; stop-opacity: 0.46; }
.logo-glass-stop--highlight-2 { stop-color: white; stop-opacity: 0.16; }
.logo-glass-stop--highlight-3 { stop-color: var(--logo-glass-color-lighter); stop-opacity: 0.10; }
.logo-glass-stop--glow-1 { stop-color: var(--logo-glass-color-lighter); stop-opacity: 0.28; }
.logo-glass-stop--glow-2 { stop-color: var(--logo-glass-color-light); stop-opacity: 0.16; }
.logo-glass-stop--glow-3 { stop-color: var(--logo-glass-color-dark); stop-opacity: 0.06; }
.logo-glass-stop--transparent { stop-color: transparent; stop-opacity: 0; }
.logo-glass-stop--inner-1 { stop-color: white; stop-opacity: 0.08; }
.logo-glass-stop--inner-2 { stop-color: white; stop-opacity: 0.02; }
.logo-glass-stop--inner-3 { stop-color: var(--logo-glass-color-deep); stop-opacity: 0.04; }
.logo-glass-stop--inner-4 { stop-color: var(--logo-glass-color-deep); stop-opacity: 0.18; }

.header-logo-glass-layer--highlight { opacity: calc(0.84 * var(--logo-glass-specular-strength)); }
.header-logo-glass-layer--glow { opacity: calc(0.94 * var(--logo-glass-tint-strength)); }
.header-logo-glass-layer--shade { opacity: 0.84; }
.logo-glass-shadow--outer { flood-color: var(--logo-glass-color-deep); flood-opacity: calc(0.34 * var(--logo-glass-shadow-strength)); }
.logo-glass-shadow--top { flood-color: white; flood-opacity: calc(0.11 * var(--logo-glass-shadow-strength)); }

.logo-rim-stop--1 { stop-color: white; stop-opacity: calc(0.82 * var(--logo-glass-rim-strength)); }
.logo-rim-stop--2 { stop-color: var(--logo-glass-color-lighter); stop-opacity: calc(0.18 * var(--logo-glass-rim-strength)); }
.logo-rim-stop--3 { stop-color: var(--logo-glass-color-darker); stop-opacity: calc(0.34 * var(--logo-glass-rim-strength)); }
.logo-rim-stop--4 { stop-color: var(--logo-glass-color-light); stop-opacity: calc(0.26 * var(--logo-glass-rim-strength)); }
.logo-rim-stop--5 { stop-color: white; stop-opacity: calc(0.48 * var(--logo-glass-rim-strength)); }
.logo-rim-glow-stop--1 { stop-color: var(--logo-glass-color-lighter); stop-opacity: calc(0.42 * var(--logo-glass-rim-strength)); }
.logo-rim-glow-stop--2 { stop-color: var(--logo-glass-color-light); stop-opacity: calc(0.10 * var(--logo-glass-rim-strength)); }
.logo-rim-glow-stop--3 { stop-color: var(--logo-glass-color-dark); stop-opacity: calc(0.05 * var(--logo-glass-rim-strength)); }
.logo-rim-glow-stop--4 { stop-color: var(--logo-glass-color-lighter); stop-opacity: calc(0.27 * var(--logo-glass-rim-strength)); }
.logo-rim-inner-stop--1 { stop-color: white; stop-opacity: calc(0.08 * var(--logo-glass-rim-strength)); }
.logo-rim-inner-stop--2 { stop-color: var(--logo-glass-color-dark); stop-opacity: calc(0.24 * var(--logo-glass-rim-strength)); }
.logo-rim-inner-stop--3 { stop-color: var(--logo-glass-color-deep); stop-opacity: calc(0.58 * var(--logo-glass-rim-strength)); }

.header-logo-frame__rim-glow,
.header-logo-frame__rim,
.header-logo-frame__rim-inner {
  vector-effect: non-scaling-stroke;
}

.header-logo-frame__rim-glow {
  stroke-width: 2.2;
  stroke-opacity: 0.34;
}

.header-logo-frame__rim {
  stroke-width: 1.05;
  stroke-opacity: 0.64;
}

.header-logo-frame__rim-inner {
  stroke-width: 0.7;
  stroke-opacity: 0.3588;
  transform: translateY(0.6px);
  transform-box: fill-box;
}

#logobobble {
  width: 84%;
  height: auto;
  aspect-ratio: 282 / 78;
}

#logoshine,
#logoshine_canvas {
  width: 100%;
  height: 100%;
}

#logoslogan {
  width: 79.5%;
  max-width: none;
  margin-top: var(--logo-slogan-drop);
  white-space: nowrap;
}

#logoshine {
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 0.16));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header-logo-frame__fallback-base {
    fill-opacity: var(--logo-glass-fallback-alpha-no-blur);
  }

  .header-logo-glass-surface {
    background: var(--logo-glass-color-dark);
  }

  .header-logo-glass-layer--highlight {
    opacity: calc(0.62 * var(--logo-glass-specular-strength));
  }
}

@media (prefers-reduced-transparency: reduce) {
  .header-logo-frame__fallback-base {
    fill-opacity: var(--logo-glass-fallback-alpha-no-blur);
  }

  .header-logo-glass-surface {
    background: var(--logo-glass-color-dark);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}