:root {
  --bg: #3a3a3a;
  --bg-deep: #2c2c2c;
  --orman: #c4c4c4;
  --web: #666666;
  --glow: rgba(255, 255, 255, 0.07);
  --noise-opacity: 0.04;
  --mx: 50%;
  --my: 50%;
  --brand-size: clamp(2.125rem, 5.5vw + 0.75rem, 3.75rem);
  --shine-orman: 0%;
  --shine-web: 100%;

  /* Keep floors clear of the page bg so dark stops never look “clipped” */
  --orman-base: #d2d2d2;
  --orman-mid: #a6a6a6;
  --orman-peak: #ffffff;
  --web-base: #909090;
  --web-mid: #787878;
  --web-peak: #cacaca;
  --brand-shadow: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #e6e6e6;
    --bg-deep: #cfcfcf;
    --orman: #3a3a3a;
    --web: #8a8a8a;
    --glow: rgba(0, 0, 0, 0.05);
    --noise-opacity: 0.035;

    --orman-base: #2a2a2a;
    --orman-mid: #505050;
    --orman-peak: #000000;
    --web-base: #6e6e6e;
    --web-mid: #8a8a8a;
    --web-peak: #3f3f3f;
    --brand-shadow: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.12));
  }
}

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

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "Outfit", sans-serif;
  background: var(--bg);
  color: var(--orman);
  color-scheme: light dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.45s ease, color 0.45s ease;
}

#stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ambient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      600px circle at var(--mx) var(--my),
      var(--glow),
      transparent 55%
    ),
    radial-gradient(
      ellipse 80% 60% at 50% 45%,
      transparent 0%,
      var(--bg-deep) 100%
    );
  transition: background 0.45s ease, opacity 0.4s ease;
}

.noise {
  position: absolute;
  inset: 0;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
}

main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  min-height: 100dvh;
}

/* Shadow on wrapper so it can’t crop background-clipped glyphs */
.brand-glow {
  padding: 0.75em 1em;
  filter: var(--brand-shadow);
}

.brand {
  font-size: var(--brand-size);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 1.35;
  user-select: none;
  animation: brand-enter 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/*
  Animated gradient text — based on:
  https://www.amitmerchant.com/animated-gradient-effect-in-css/
  Position driven via --shine-* so motion is reliable; light/dark palettes via CSS vars.
*/
.brand .orman,
.brand .web {
  display: inline-block;
  /* Padding absorbs italic overhang that backgr-clip would otherwise crop */
  padding: 0.15em 0.12em 0.2em 0.1em;
  margin: 0 -0.14em;
  background-size: 500% auto;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

.orman {
  background-image: linear-gradient(
    to right,
    var(--orman-mid) 20%,
    var(--orman-peak) 35%,
    var(--orman-base) 50%,
    var(--orman-peak) 65%,
    var(--orman-mid) 80%
  );
  background-position: var(--shine-orman) 50%;
}

.web {
  background-image: linear-gradient(
    to right,
    var(--web-mid) 20%,
    var(--web-peak) 35%,
    var(--web-base) 50%,
    var(--web-peak) 65%,
    var(--web-mid) 80%
  );
  background-position: var(--shine-web) 50%;
}

@keyframes brand-enter {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(0.35rem);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient {
    background: radial-gradient(
      ellipse 80% 60% at 50% 45%,
      transparent 0%,
      var(--bg-deep) 100%
    );
  }

  .brand {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* --- Cookie notice ------------------------------------------------------- */
.cookie-notice {
  position: fixed;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  pointer-events: none;
}

.cookie-notice[hidden] {
  display: none;
}

.cookie-notice__inner {
  pointer-events: auto;
  max-width: 36rem;
  margin: 0 auto;
  padding: 1rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--orman) 18%, transparent);
  background: color-mix(in srgb, var(--bg) 92%, var(--bg-deep));
  color: var(--orman);
  font-family: "Outfit", sans-serif;
  backdrop-filter: blur(8px);
}

.cookie-notice__title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  color: var(--orman);
}

.cookie-notice__text {
  font-size: 0.875rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  color: color-mix(in srgb, var(--orman) 78%, var(--web));
  margin-bottom: 0.85rem;
}

.cookie-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.cookie-notice__btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--orman) 28%, transparent);
  background: transparent;
  color: var(--orman);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}

.cookie-notice__btn:hover,
.cookie-notice__btn:focus-visible {
  border-color: color-mix(in srgb, var(--orman) 55%, transparent);
  outline: none;
}

.cookie-notice__btn--primary {
  background: color-mix(in srgb, var(--orman) 14%, transparent);
  border-color: color-mix(in srgb, var(--orman) 40%, transparent);
}

.cookie-notice__btn--primary:hover,
.cookie-notice__btn--primary:focus-visible {
  background: color-mix(in srgb, var(--orman) 22%, transparent);
}