/* ========================================
   EDATABIT — Styles 2026
   @layer reset, tokens, base, layout, components, cosmic, utilities
   ======================================== */

@layer reset, tokens, base, layout, components, cosmic, utilities;

/* ── FONTS ── */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

/* ── CUSTOM PROPERTIES FOR ANIMATION ── */
@property --nebula-hue {
  syntax: "<number>";
  inherits: false;
  initial-value: 260;
}

@property --glow-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.6;
}

/* ======================================== */
@layer reset {
/* ======================================== */

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

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-height: 100dvh;
  }

  img, svg {
    display: block;
    max-width: 100%;
  }

  button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul {
    list-style: none;
  }

  dialog {
    border: none;
    padding: 0;
    background: transparent;
    color: inherit;
    max-width: 100%;
    max-height: 100%;
  }

  dialog::backdrop {
    background: transparent;
  }

  address {
    font-style: normal;
  }

  hr {
    border: none;
  }

} /* end reset */

/* ======================================== */
@layer tokens {
/* ======================================== */

  :root {
    /* Palette — oklch */
    --c-bg-deep:    oklch(0.08 0.02 260);
    --c-bg-surface: oklch(0.12 0.03 260);
    --c-text:       oklch(0.92 0.01 260);
    --c-text-dim:   oklch(0.70 0.02 260);
    --c-accent:     oklch(0.72 0.15 250);
    --c-accent-alt: oklch(0.65 0.18 300);
    --c-glow:       oklch(0.60 0.20 250);
    --c-glow-warm:  oklch(0.70 0.15 70);
    --c-divider:    oklch(0.30 0.03 260);

    /* Typography */
    --f-body:    "Inter", system-ui, sans-serif;
    --f-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --fs-base:   clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
    --fs-logo:   clamp(2.5rem, 2rem + 3vw, 5rem);
    --fs-tagline: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);
    --fs-dialog-title: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);

    /* Spacing */
    --sp-xs: 0.25rem;
    --sp-sm: 0.5rem;
    --sp-md: 1rem;
    --sp-lg: 2rem;
    --sp-xl: 4rem;

    /* Misc */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --transition-fast: 200ms ease;
    --transition-med:  400ms ease;
  }

} /* end tokens */

/* ======================================== */
@layer base {
/* ======================================== */

  body {
    font-family: var(--f-body);
    font-size: var(--fs-base);
    color: var(--c-text);
    background: var(--c-bg-deep);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::selection {
    background: oklch(0.50 0.15 250 / 0.5);
    color: oklch(0.95 0 0);
  }

  :focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: 4px;
  }

} /* end base */

/* ======================================== */
@layer layout {
/* ======================================== */

  .skip-link {
    position: fixed;
    top: -100%;
    left: var(--sp-md);
    z-index: 9999;
    padding: var(--sp-sm) var(--sp-md);
    background: var(--c-accent);
    color: oklch(0.1 0 0);
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: top var(--transition-fast);
  }

  .skip-link:focus {
    top: var(--sp-md);
  }

  .header {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: clamp(3rem, 10vh, 8rem);
    text-align: center;
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: var(--sp-sm) var(--sp-md);
    text-align: center;
    font-size: 0.75rem;
    color: var(--c-text-dim);
    background: oklch(0.05 0.01 260 / 0.7);
    backdrop-filter: blur(8px);
  }

} /* end layout */

/* ======================================== */
@layer components {
/* ======================================== */

  /* ── LOGOTYP ── */
  .logo {
    font-family: var(--f-display);
    font-size: var(--fs-logo);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    display: flex;
    gap: 0.02em;
    user-select: none;
    text-shadow:
      0 0 20px oklch(0.60 0.20 250 / 0.5),
      0 0 40px oklch(0.50 0.25 280 / 0.3),
      0 0 80px oklch(0.45 0.20 300 / 0.15);
  }

  .logo__letter {
    display: inline-block;
  }

  /* Entrance: letters materialize */
  .loading .logo__letter {
    opacity: 0;
    filter: blur(12px);
    transform: scale(0.5) translateY(20px);
  }

  .loaded .logo__letter {
    animation: letter-entrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .loaded .logo__letter--1 { animation-delay: 0.1s; }
  .loaded .logo__letter--2 { animation-delay: 0.2s; }
  .loaded .logo__letter--3 { animation-delay: 0.3s; }
  .loaded .logo__letter--4 { animation-delay: 0.4s; }
  .loaded .logo__letter--5 { animation-delay: 0.5s; }
  .loaded .logo__letter--6 { animation-delay: 0.6s; }
  .loaded .logo__letter--7 { animation-delay: 0.7s; }
  .loaded .logo__letter--8 { animation-delay: 0.8s; }

  /* Float starts after entrance completes (JS adds .float-ready) */
  .float-ready .logo__letter {
    animation: float 4s ease-in-out infinite;
  }

  .float-ready .logo__letter--1 { animation-delay: 0s; }
  .float-ready .logo__letter--2 { animation-delay: 0.15s; }
  .float-ready .logo__letter--3 { animation-delay: 0.3s; }
  .float-ready .logo__letter--4 { animation-delay: 0.45s; }
  .float-ready .logo__letter--5 { animation-delay: 0.6s; }
  .float-ready .logo__letter--6 { animation-delay: 0.75s; }
  .float-ready .logo__letter--7 { animation-delay: 0.9s; }
  .float-ready .logo__letter--8 { animation-delay: 1.05s; }

  @keyframes letter-entrance {
    from {
      opacity: 0;
      filter: blur(12px);
      transform: scale(0.5) translateY(20px);
    }
    to {
      opacity: 1;
      filter: blur(0);
      transform: scale(1) translateY(0);
    }
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }

  /* ── LOGO SHIMMER ── */
  .logo {
    position: relative;
    overflow: hidden;
  }

  .logo::after {
    content: "";
    position: absolute;
    inset: -20% -50% -20% -50%;
    background: linear-gradient(
      105deg,
      transparent 40%,
      oklch(0.95 0.05 250 / 0.25) 45%,
      oklch(1 0 0 / 0.35) 50%,
      oklch(0.95 0.05 250 / 0.25) 55%,
      transparent 60%
    );
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
  }

  /* Shimmer only after float-ready (entrance done) */
  .float-ready .logo::after {
    opacity: 1;
    animation: logo-shimmer 6s ease-in-out 1s infinite;
  }

  @keyframes logo-shimmer {
    0%, 100% { transform: translateX(-100%); }
    40%, 60% { transform: translateX(100%); }
  }

  .tagline {
    margin-top: var(--sp-sm);
    font-size: var(--fs-tagline);
    color: var(--c-text-dim);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  /* Entrance: tagline fade-in */
  .loading .tagline {
    opacity: 0;
    transform: translateY(12px);
  }

  .loaded .tagline {
    animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
    opacity: 0;
    transform: translateY(12px);
  }

  @keyframes fade-in-up {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ── CONSTELLATION NAV ── */
  .constellation {
    position: relative;
    z-index: 10;
    width: min(500px, 90vw);
    height: 400px;
    margin: var(--sp-xl) auto;
  }

  .constellation__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.85;
  }

  /* Entrance: constellation lines draw themselves */
  .constellation__lines line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
  }

  .loaded .constellation__lines line {
    animation: draw-line 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .loaded .constellation__lines line:nth-child(1) { animation-delay: 2s; }
  .loaded .constellation__lines line:nth-child(2) { animation-delay: 2.2s; }
  .loaded .constellation__lines line:nth-child(3) { animation-delay: 2.4s; }
  .loaded .constellation__lines line:nth-child(4) { animation-delay: 2.6s; }

  @keyframes draw-line {
    to { stroke-dashoffset: 0; }
  }

  .nav-point {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-xs);
    transition: transform var(--transition-fast);
  }

  /* Entrance: nav points materialize */
  .loading .nav-point {
    opacity: 0;
    transform: scale(0);
  }

  .loaded .nav-point {
    opacity: 0;
    transform: scale(0);
    animation: nav-materialize 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .loaded .nav-point--about   { animation-delay: 1.5s; }
  .loaded .nav-point--contact { animation-delay: 1.7s; }
  .loaded .nav-point--hobby   { animation-delay: 1.9s; }
  .loaded .nav-point--github  { animation-delay: 2.1s; }
  .loaded .nav-point--tech    { animation-delay: 2.3s; }

  @keyframes nav-materialize {
    0% {
      opacity: 0;
      transform: scale(0);
      filter: blur(8px);
    }
    50% {
      opacity: 1;
      transform: scale(1.2);
      filter: blur(0);
    }
    100% {
      opacity: 1;
      transform: scale(1);
      filter: blur(0);
    }
  }

  .nav-point:hover,
  .nav-point:focus-visible {
    transform: scale(1.15);
  }

  /* ── SONAR RING on hover ── */
  .nav-point::after {
    content: "";
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid var(--c-accent);
    opacity: 0;
    transform: scale(1);
    pointer-events: none;
    z-index: -1;
  }

  .nav-point:hover::after,
  .nav-point:focus-visible::after {
    animation: sonar-ring 1s cubic-bezier(0, 0.5, 0.5, 1) forwards;
  }

  @keyframes sonar-ring {
    0% {
      opacity: 0.7;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(2.2);
    }
  }

  .nav-point::before {
    content: "";
    position: absolute;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--c-glow) 0%, transparent 70%);
    opacity: 0.3;
    z-index: -1;
    transition: opacity var(--transition-fast);
  }

  .nav-point:hover::before,
  .nav-point:focus-visible::before {
    opacity: 0.6;
  }

  .nav-point__icon {
    width: 64px;
    height: 64px;
    padding: 18px;
    border-radius: 50%;
    background: oklch(0.15 0.03 260 / 0.6);
    border: 1px solid oklch(0.40 0.08 250 / 0.3);
    backdrop-filter: blur(4px);
    color: var(--c-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  .nav-point:hover .nav-point__icon,
  .nav-point:focus-visible .nav-point__icon {
    border-color: var(--c-accent);
    box-shadow: 0 0 20px oklch(0.60 0.20 250 / 0.5), 0 0 40px oklch(0.50 0.15 260 / 0.2);
  }

  .nav-point__label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--c-text-dim);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    pointer-events: none;
  }

  .nav-point:hover .nav-point__label,
  .nav-point:focus-visible .nav-point__label {
    opacity: 1;
    transform: translateY(0);
  }

  /* Constellation positions (desktop) */
  .nav-point--about   { left: 18%;  top: 10%; }
  .nav-point--contact { left: 42%;  top: 38%; }
  .nav-point--hobby   { left: 22%;  top: 65%; }
  .nav-point--github  { left: 68%;  top: 15%; }
  .nav-point--tech    { left: 66%;  top: 60%; }

  /* ── DIALOGI ── */
  .dialog {
    margin: 10px 0 0 10px;
    width: min(460px, 88vw);
    border-radius: var(--radius-lg);
    background:
      linear-gradient(
        170deg,
        oklch(0.14 0.03 260 / 0.85) 0%,
        oklch(0.09 0.02 250 / 0.75) 100%
      );
    backdrop-filter: blur(32px) saturate(1.3);
    border: 1px solid oklch(0.45 0.10 250 / 0.35);
    box-shadow:
      0 0 30px oklch(0.55 0.18 250 / 0.25),
      0 0 60px oklch(0.45 0.15 270 / 0.12),
      0 24px 80px oklch(0 0 0 / 0.5),
      0 4px 16px oklch(0 0 0 / 0.3),
      inset 0 1px 0 oklch(1 0 0 / 0.10),
      inset 0 0 0 1px oklch(0.55 0.08 250 / 0.08);
    color: var(--c-text);
    padding: 0;
    opacity: 0;
    transform: scale(0.92) translateY(20px);
    transition:
      opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
      overlay 500ms cubic-bezier(0.16, 1, 0.3, 1) allow-discrete,
      display 500ms cubic-bezier(0.16, 1, 0.3, 1) allow-discrete;
  }

  .dialog[open] {
    opacity: 1;
    transform: scale(1) translateY(0);
    animation: dialog-glow-pulse 4s ease-in-out 0.5s infinite;
  }

  @keyframes dialog-glow-pulse {
    0%, 100% {
      box-shadow:
        0 0 30px oklch(0.55 0.18 250 / 0.25),
        0 0 60px oklch(0.45 0.15 270 / 0.12),
        0 24px 80px oklch(0 0 0 / 0.5),
        0 4px 16px oklch(0 0 0 / 0.3),
        inset 0 1px 0 oklch(1 0 0 / 0.10),
        inset 0 0 0 1px oklch(0.55 0.08 250 / 0.08);
    }
    50% {
      box-shadow:
        0 0 40px oklch(0.60 0.20 250 / 0.35),
        0 0 80px oklch(0.50 0.18 270 / 0.18),
        0 24px 80px oklch(0 0 0 / 0.5),
        0 4px 16px oklch(0 0 0 / 0.3),
        inset 0 1px 0 oklch(1 0 0 / 0.12),
        inset 0 0 0 1px oklch(0.60 0.10 250 / 0.12);
    }
  }

  @starting-style {
    .dialog[open] {
      opacity: 0;
      transform: scale(0.92) translateY(20px);
    }
  }

  .dialog::backdrop {
    background: oklch(0.02 0.02 260 / 0.75);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition:
      opacity 400ms ease,
      overlay 400ms ease allow-discrete,
      display 400ms ease allow-discrete;
  }

  .dialog[open]::backdrop {
    opacity: 1;
  }

  @starting-style {
    .dialog[open]::backdrop {
      opacity: 0;
    }
  }

  .dialog__content {
    padding: clamp(1.25rem, 1rem + 2vw, 2rem);
  }

  .dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--sp-md);
    margin-bottom: var(--sp-md);
    border-bottom: 1px solid oklch(0.35 0.04 260 / 0.2);
  }

  .dialog__title {
    font-family: var(--f-display);
    font-size: var(--fs-dialog-title);
    font-weight: 600;
    letter-spacing: 0.03em;
    background: linear-gradient(135deg, var(--c-text), var(--c-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .dialog__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--c-text-dim);
    background: oklch(0.20 0.02 260 / 0.4);
    border: 1px solid oklch(0.35 0.03 260 / 0.2);
    transition:
      color var(--transition-fast),
      background var(--transition-fast),
      border-color var(--transition-fast),
      transform var(--transition-fast);
  }

  .dialog__close:hover,
  .dialog__close:focus-visible {
    color: var(--c-text);
    background: oklch(0.30 0.04 260 / 0.6);
    border-color: oklch(0.45 0.05 260 / 0.3);
    transform: rotate(90deg);
  }

  .dialog__body {
    font-size: 0.85rem;
    line-height: 1.7;
    color: oklch(0.78 0.01 260);
  }

  .dialog__body p {
    margin-bottom: 0.75rem;
  }

  .dialog__body p:last-child {
    margin-bottom: 0;
  }

  .dialog__body strong {
    color: var(--c-text);
    font-weight: 600;
  }

  .dialog__divider {
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      oklch(0.40 0.06 260 / 0.3) 20%,
      oklch(0.40 0.06 260 / 0.3) 80%,
      transparent
    );
    margin: var(--sp-lg) 0;
  }

  .dialog__badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-lg);
    flex-wrap: wrap;
  }

  .dialog__badges img {
    max-height: 70px;
    width: auto;
    opacity: 0.9;
    border-radius: var(--radius-sm);
    padding: var(--sp-sm);
    background: oklch(0.95 0.01 260 / 0.08);
    transition: opacity var(--transition-fast);
  }

  .dialog__badges img:hover {
    opacity: 1;
  }

  /* ── CONTACT INFO ── */
  .contact-info {
    line-height: 1.8;
    font-size: 0.85rem;
  }

  .contact-info strong {
    font-size: 0.95rem;
    color: var(--c-text);
    display: block;
    margin-bottom: 0.25rem;
  }

  .contact-info__link {
    color: var(--c-accent);
    border-bottom: 1px solid oklch(0.72 0.15 250 / 0.3);
    padding-bottom: 1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
  }

  .contact-info__link:hover {
    color: color-mix(in oklch, var(--c-accent), white 20%);
    border-color: color-mix(in oklch, var(--c-accent), white 20%);
  }

  .contact-hours p {
    margin-bottom: var(--sp-xs);
  }

  /* ── PRIVACY TABLE ── */
  .privacy-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--sp-md);
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .privacy-table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid oklch(0.30 0.03 260 / 0.2);
    vertical-align: top;
  }

  .privacy-table tr:last-child td {
    border-bottom: none;
  }

  .privacy-table td:first-child {
    color: var(--c-text-dim);
    white-space: nowrap;
    width: 40%;
  }

  .privacy-table td:last-child {
    color: var(--c-text);
    word-break: break-word;
  }

  /* ── HOBBY LIST ── */
  .hobby-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
  }

  .hobby-list li {
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
  }

  .hobby-list li:hover {
    background: oklch(0.20 0.03 260 / 0.3);
  }

  .hobby-list__link {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    padding: var(--sp-sm) var(--sp-md);
    font-size: 0.85rem;
    color: var(--c-accent);
    font-weight: 500;
    letter-spacing: 0.05em;
    transition: color var(--transition-fast);
  }

  .hobby-list__link:hover {
    color: color-mix(in oklch, var(--c-accent), white 20%);
  }

  .hobby-list__link svg {
    flex-shrink: 0;
  }

  /* ── PRIVACY BUTTON ── */
  .privacy-btn {
    position: fixed;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    transition: transform var(--transition-fast);
  }

  .privacy-btn:hover {
    transform: translateX(-50%) scale(1.1);
  }

  .privacy-btn__icon {
    width: 36px;
    height: 36px;
    padding: 9px;
    border-radius: 50%;
    background: oklch(0.15 0.03 260 / 0.6);
    border: 1px solid oklch(0.40 0.08 250 / 0.3);
    backdrop-filter: blur(4px);
    color: var(--c-text-dim);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
  }

  .privacy-btn:hover .privacy-btn__icon,
  .privacy-btn:focus-visible .privacy-btn__icon {
    border-color: var(--c-accent);
    box-shadow: 0 0 12px oklch(0.60 0.20 250 / 0.4);
    color: var(--c-text);
  }

  .privacy-btn__label {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--c-text-dim);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    pointer-events: none;
  }

  .privacy-btn:hover .privacy-btn__label,
  .privacy-btn:focus-visible .privacy-btn__label {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── MOBILE NAV ── */
  @media (max-width: 640px) {
    .constellation {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: auto;
      margin: 0;
      padding: var(--sp-sm) var(--sp-xs) calc(var(--sp-sm) + env(safe-area-inset-bottom));
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: oklch(0.08 0.02 260 / 0.85);
      backdrop-filter: blur(12px);
      border-top: 1px solid oklch(0.25 0.03 260 / 0.3);
    }

    .constellation__lines {
      display: none;
    }

    .nav-point {
      position: static;
    }

    /* Force visibility on mobile — override entrance animation */
    .loading .nav-point,
    .loaded .nav-point {
      opacity: 1;
      transform: none;
      filter: none;
      animation: none;
    }

    .loading .logo__letter,
    .loaded .logo__letter {
      opacity: 1;
      transform: none;
      filter: none;
      animation: none;
    }

    .loading .tagline,
    .loaded .tagline {
      opacity: 1;
      transform: none;
      animation: none;
    }

    .loading .cosmos__orbits,
    .loaded .cosmos__orbits {
      opacity: 1;
      animation: none;
    }

    .nav-point__icon {
      width: 44px;
      height: 44px;
      padding: 11px;
    }

    .nav-point__label {
      opacity: 1;
      transform: none;
      font-size: 0.625rem;
    }

    .nav-point::before {
      display: none;
    }

    .nav-point::after {
      display: none;
    }

    .footer {
      bottom: 85px;
    }

    .privacy-btn {
      bottom: calc(85px + 1.5rem);
    }
  }

} /* end components */

/* ======================================== */
@layer cosmic {
/* ======================================== */

  .cosmos {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }

  /* ── Warstwa 0: Mgławica ── */
  .cosmos__nebula {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 20% 40%, oklch(0.15 0.08 var(--nebula-hue)) 0%, transparent 70%),
      radial-gradient(ellipse 60% 80% at 80% 60%, oklch(0.12 0.10 300) 0%, transparent 60%),
      radial-gradient(ellipse 50% 50% at 50% 50%, oklch(0.08 0.05 220) 0%, transparent 80%),
      oklch(0.06 0.02 260);
    animation: nebula-breathe 90s ease-in-out infinite;
  }

  @keyframes nebula-breathe {
    0%   { --nebula-hue: 260; }
    33%  { --nebula-hue: 240; }
    66%  { --nebula-hue: 280; }
    100% { --nebula-hue: 260; }
  }

  /* ── Warstwa 1: Gwiazdy ── */
  .cosmos__stars {
    position: absolute;
    inset: 0;
    animation: star-drift 120s linear infinite;
  }

  .cosmos__stars--small {
    background-image:
      radial-gradient(1px 1px at 10% 20%, oklch(0.90 0 0 / 0.8), transparent),
      radial-gradient(1px 1px at 25% 45%, oklch(0.85 0 0 / 0.6), transparent),
      radial-gradient(1px 1px at 40% 10%, oklch(0.80 0 0 / 0.7), transparent),
      radial-gradient(1px 1px at 55% 70%, oklch(0.90 0 0 / 0.5), transparent),
      radial-gradient(1px 1px at 70% 30%, oklch(0.85 0 0 / 0.8), transparent),
      radial-gradient(1px 1px at 85% 80%, oklch(0.80 0 0 / 0.6), transparent),
      radial-gradient(1px 1px at 15% 90%, oklch(0.90 0 0 / 0.7), transparent),
      radial-gradient(1px 1px at 60% 50%, oklch(0.85 0 0 / 0.5), transparent),
      radial-gradient(1px 1px at 92% 15%, oklch(0.80 0 0 / 0.8), transparent),
      radial-gradient(1px 1px at 35% 85%, oklch(0.90 0 0 / 0.6), transparent),
      radial-gradient(1px 1px at 78% 55%, oklch(0.85 0 0 / 0.7), transparent),
      radial-gradient(1px 1px at 5% 65%, oklch(0.80 0 0 / 0.5), transparent),
      radial-gradient(1px 1px at 48% 35%, oklch(0.90 0 0 / 0.8), transparent),
      radial-gradient(1px 1px at 88% 42%, oklch(0.85 0 0 / 0.6), transparent),
      radial-gradient(1px 1px at 22% 75%, oklch(0.90 0 0 / 0.7), transparent),
      radial-gradient(1px 1px at 3% 32%, oklch(0.88 0 0 / 0.7), transparent),
      radial-gradient(1px 1px at 42% 58%, oklch(0.82 0 0 / 0.6), transparent),
      radial-gradient(1px 1px at 68% 12%, oklch(0.90 0 0 / 0.8), transparent),
      radial-gradient(1px 1px at 95% 62%, oklch(0.86 0 0 / 0.5), transparent),
      radial-gradient(1px 1px at 52% 92%, oklch(0.84 0 0 / 0.7), transparent);
    background-size: 100% 100%;
  }

  .cosmos__stars--medium {
    background-image:
      radial-gradient(1.5px 1.5px at 18% 35%, oklch(0.92 0.03 230 / 0.9), transparent),
      radial-gradient(1.5px 1.5px at 45% 60%, oklch(0.88 0.02 200 / 0.7), transparent),
      radial-gradient(1.5px 1.5px at 72% 20%, oklch(0.90 0.04 270 / 0.8), transparent),
      radial-gradient(1.5px 1.5px at 30% 80%, oklch(0.92 0.02 50 / 0.7), transparent),
      radial-gradient(1.5px 1.5px at 85% 50%, oklch(0.88 0.03 190 / 0.9), transparent),
      radial-gradient(1.5px 1.5px at 55% 15%, oklch(0.90 0.02 300 / 0.6), transparent),
      radial-gradient(1.5px 1.5px at 8% 48%, oklch(0.92 0.04 250 / 0.8), transparent),
      radial-gradient(1.5px 1.5px at 65% 85%, oklch(0.88 0.02 170 / 0.7), transparent),
      radial-gradient(1.5px 1.5px at 95% 70%, oklch(0.90 0.03 220 / 0.9), transparent),
      radial-gradient(1.5px 1.5px at 38% 25%, oklch(0.92 0.02 80 / 0.6), transparent),
      radial-gradient(1.5px 1.5px at 12% 62%, oklch(0.90 0.03 260 / 0.8), transparent),
      radial-gradient(1.5px 1.5px at 77% 42%, oklch(0.88 0.04 140 / 0.7), transparent),
      radial-gradient(1.5px 1.5px at 50% 92%, oklch(0.92 0.02 310 / 0.9), transparent);
    background-size: 100% 100%;
    animation-duration: 160s;
    animation-direction: reverse;
  }

  .cosmos__stars--large {
    background-image:
      radial-gradient(2px 2px at 12% 55%, oklch(0.95 0.05 230 / 0.9), transparent),
      radial-gradient(2px 2px at 52% 25%, oklch(0.93 0.06 300 / 0.8), transparent),
      radial-gradient(2px 2px at 78% 75%, oklch(0.95 0.04 50 / 0.9), transparent),
      radial-gradient(2px 2px at 35% 42%, oklch(0.93 0.05 200 / 0.7), transparent),
      radial-gradient(2px 2px at 90% 30%, oklch(0.95 0.06 260 / 0.8), transparent),
      radial-gradient(2.5px 2.5px at 60% 90%, oklch(0.93 0.04 170 / 0.9), transparent),
      radial-gradient(2px 2px at 20% 8%, oklch(0.95 0.05 280 / 0.7), transparent),
      radial-gradient(2px 2px at 42% 68%, oklch(0.94 0.05 120 / 0.8), transparent),
      radial-gradient(2.5px 2.5px at 88% 88%, oklch(0.93 0.06 240 / 0.9), transparent);
    background-size: 100% 100%;
    animation-duration: 200s;
  }

  @keyframes star-drift {
    from { transform: translateY(0); }
    to   { transform: translateY(-30px); }
  }

  /* ── Migoczące gwiazdy ── */
  .twinkle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: oklch(0.95 0.05 250);
    box-shadow: 0 0 8px 3px oklch(0.80 0.10 250 / 0.7);
    animation: twinkle-pulse 3s ease-in-out infinite;
  }

  .twinkle--1  { left: 8%;  top: 12%; animation-delay: 0s;   animation-duration: 2.8s; }
  .twinkle--2  { left: 23%; top: 38%; animation-delay: 0.5s; animation-duration: 3.2s; }
  .twinkle--3  { left: 45%; top: 8%;  animation-delay: 1.1s; animation-duration: 2.5s; }
  .twinkle--4  { left: 67%; top: 22%; animation-delay: 0.3s; animation-duration: 3.5s; }
  .twinkle--5  { left: 82%; top: 55%; animation-delay: 1.8s; animation-duration: 2.9s; }
  .twinkle--6  { left: 15%; top: 72%; animation-delay: 0.7s; animation-duration: 3.1s; }
  .twinkle--7  { left: 55%; top: 65%; animation-delay: 1.4s; animation-duration: 2.7s; }
  .twinkle--8  { left: 92%; top: 35%; animation-delay: 2.0s; animation-duration: 3.3s; }
  .twinkle--9  { left: 38%; top: 88%; animation-delay: 0.9s; animation-duration: 2.6s; }
  .twinkle--10 { left: 73%; top: 82%; animation-delay: 1.6s; animation-duration: 3.0s; }
  .twinkle--11 { left: 30%; top: 28%; animation-delay: 2.2s; animation-duration: 2.4s; }
  .twinkle--12 { left: 62%; top: 45%; animation-delay: 0.2s; animation-duration: 3.4s; }
  .twinkle--13 { left: 88%; top: 68%; animation-delay: 1.2s; animation-duration: 2.8s; }

  @keyframes twinkle-pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.4); }
  }

  /* ── Warstwa 2: Orbity ── */
  .cosmos__orbits {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .orbit-center {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: oklch(0.95 0.05 250);
    box-shadow:
      0 0 15px 6px oklch(0.70 0.15 250 / 0.6),
      0 0 40px 15px oklch(0.50 0.20 260 / 0.3),
      0 0 80px 30px oklch(0.45 0.15 270 / 0.1);
  }

  .orbit-path {
    position: absolute;
    width: 600px;
    height: 400px;
    pointer-events: none;
  }

  .orbit-path--1 { transform: rotate(-15deg); }
  .orbit-path--2 { transform: rotate(25deg); }
  .orbit-path--3 { transform: rotate(-5deg); }

  /* Orbit icons — CSS offset-path */
  .orbit-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Glow aura — pseudo-element pod SVG, nie filtr na SVG */
  .orbit-icon::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    z-index: -1;
    animation: icon-glow-pulse 4s ease-in-out infinite;
  }

  .orbit-icon--tux::before {
    background: radial-gradient(circle, oklch(0.65 0.14 90 / 0.6) 0%, oklch(0.50 0.10 90 / 0.15) 50%, transparent 70%);
    animation-duration: 4s;
  }

  .orbit-icon--apple::before {
    background: radial-gradient(circle, oklch(0.80 0.03 0 / 0.55) 0%, oklch(0.65 0.03 0 / 0.12) 50%, transparent 70%);
    animation-duration: 5s;
    animation-delay: 1s;
  }

  .orbit-icon--windows::before {
    background: radial-gradient(circle, oklch(0.60 0.20 230 / 0.6) 0%, oklch(0.45 0.15 230 / 0.15) 50%, transparent 70%);
    animation-duration: 4.5s;
    animation-delay: 2s;
  }

  .orbit-icon--tux {
    offset-path: ellipse(280px 140px at center);
    offset-rotate: 0deg;
    animation: orbit-tux 30s linear infinite;
  }

  .orbit-icon--apple {
    offset-path: ellipse(220px 170px at center);
    offset-rotate: 0deg;
    animation: orbit-apple 45s linear infinite;
  }

  .orbit-icon--windows {
    offset-path: ellipse(180px 110px at center);
    offset-rotate: 0deg;
    animation: orbit-windows 60s linear infinite;
  }

  @keyframes orbit-tux {
    from { offset-distance: 0%; }
    to   { offset-distance: 100%; }
  }

  @keyframes orbit-apple {
    from { offset-distance: 25%; }
    to   { offset-distance: 125%; }
  }

  @keyframes orbit-windows {
    from { offset-distance: 50%; }
    to   { offset-distance: 150%; }
  }

  @keyframes icon-glow-pulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
  }

  /* ── Entrance: orbity fade-in ── */
  .loading .cosmos__orbits {
    opacity: 0;
  }

  .loaded .cosmos__orbits {
    animation: fade-in-up 1.5s ease 2.5s forwards;
    opacity: 0;
  }

  /* ── CURSOR GLOW ── */
  .cursor-glow {
    position: fixed;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, oklch(0.55 0.20 260 / 0.12) 0%, oklch(0.45 0.15 280 / 0.06) 40%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    transform: translate3d(-50%, -50%, 0);
    mix-blend-mode: screen;
    will-change: transform;
    transition: opacity 0.3s ease;
  }

  @media (hover: none) {
    .cursor-glow { display: none; }
  }

} /* end cosmic */

/* ======================================== */
@layer utilities {
/* ======================================== */

  /* ── Reduced motion ── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    .cosmos__nebula {
      animation: none;
    }

    .cosmos__stars {
      animation: none;
    }

    .twinkle {
      animation: none;
      opacity: 0.6;
    }

    .orbit-icon {
      animation: none;
      offset-distance: 0%;
    }

    .orbit-icon--apple  { offset-distance: 33%; }
    .orbit-icon--windows { offset-distance: 66%; }

    .logo__letter {
      animation: none;
      opacity: 1;
      filter: none;
      transform: none;
    }

    .logo::after {
      display: none;
    }

    .tagline {
      opacity: 1;
      transform: none;
    }

    .nav-point {
      opacity: 1;
      transform: none;
    }

    .constellation__lines line {
      stroke-dashoffset: 0;
    }

    .cosmos__orbits {
      opacity: 1;
    }

    .cursor-glow {
      display: none;
    }
  }

} /* end utilities */