/* =========================
         FONTER & ROOT
         ========================= */
      @font-face {
        font-family: 'GlacialIndifference';
        src: url('./assets/GlacialIndifference-Regular.otf') format('opentype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }

      :root {
        --color-background: #f4efea;
        --color-light-background: #e6f0fd;
        --color-heading: #8ca7e6;
        --color-body: #706c6c;
        --color-text-white: #ffffff;
        --color-accent: #bfac8b;
      }

      /* =========================
         RESET & BAS
         ========================= */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: 'GlacialIndifference', system-ui, -apple-system,
          BlinkMacSystemFont, 'Segoe UI', sans-serif;
        background-color: var(--color-background);
        color: var(--color-body);
        overflow-x: hidden;
      }

      /* Skip link for accessibility */
      .skip-link {
        position: absolute;
        top: -40px;
        left: 0;
        background: var(--color-heading);
        color: white;
        padding: 8px;
        text-decoration: none;
        z-index: 100;
      }

      .skip-link:focus {
        top: 0;
      }

      /* =========================
         TYPOGRAFI
         ========================= */
      .hero-title {
        margin-bottom: 1.2rem;
        text-align: center;
      }

      h1 {
        font-family: 'Playfair Display', 'Times New Roman', serif;
        color: var(--color-text-white);
        font-size: 5rem;
        font-weight: 500;
        letter-spacing: -0.1rem;
        line-height: 0.9;
        opacity: 0;
        transform: translateY(18px);
        animation: heroTitleIn 900ms ease-out forwards;
        will-change: opacity, transform;
      }

      @keyframes heroTitleIn {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .intro, .tagline, .launch, .social {
        opacity: 0;
        transform: translateY(10px);
        animation: heroTextIn 900ms ease-out forwards;
        animation-delay: 200ms;
        will-change: opacity, transform;
      }

      .tagline { animation-delay: 320ms; }
      .launch  { animation-delay: 440ms; }
      .social  { animation-delay: 560ms; }

      @keyframes heroTextIn {
        to { opacity: 1; transform: translateY(0); }
      }

      p {
        font-size: 1.2em;
        line-height: 1.3em;
        margin-top: 0.5rem;
        color: var(--color-text-white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
      }

      /* Link styling */
      a {
        color: var(--color-accent);
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: all 0.3s ease;
        display: inline-block;
      }

      a:hover,
      a:focus {
        color: var(--color-text-white);
        border-bottom-color: var(--color-text-white);
        transform: translateY(-1px);
      }

      a:focus {
        outline: 2px solid var(--color-text-white);
        outline-offset: 4px;
      }

      .handle {
        font-weight: 400;
      }

      /* =========================
         SEKTIONER
         ========================= */
      section {
        position: relative;
        width: 100vw;
        height: 100svh;
        padding: 2rem;
        overflow: hidden;
      }

      /* =========================
         HERO
         ========================= */
      .hero {
        position: relative;
        min-height: 100svh;
      }

      .background {
        position: fixed;
        inset: 0;
        z-index: 0;
        width: 100vw;
        height: 100vh;
        background-image: url('assets/pampass.jpg');
        background-size: cover;
        background-position: center right;
        background-repeat: no-repeat;
        overflow: hidden;
      }

      .background::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.15),
          rgba(0, 0, 0, 0.35)
        );
        pointer-events: none;
      }

      .hero-content {
        position: relative;
        z-index: 2;
        height: 100svh;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

      .hero-title h1 {
        margin-bottom: 1.9rem;
        text-align: center;
      }

      /* =========================
         ANIMATED BALLS
         ========================= */
      @keyframes move {
        100% {
          transform: translate3d(0, 0, 1px) rotate(360deg);
        }
      }

      .ball {
        position: absolute;
        width: 14vmin;
        height: 14vmin;
        border-radius: 50%;
        backface-visibility: hidden;
        animation: move linear infinite;
        opacity: 0.45;
        filter: blur(0.5px);
        mix-blend-mode: normal;
        pointer-events: none;
        box-shadow:
          0 0 40px currentColor,
          0 0 80px rgba(255,255,255,0.05);
      }

      .ball:nth-child(odd) {
        color: rgba(191, 172, 139, 0.9);
      }

      .ball:nth-child(even) {
        color: rgba(140, 167, 230, 0.85);
      }

      .ball:nth-child(1) {
        top: 77%;
        left: 88%;
        animation-duration: 65s;
        animation-delay: -3s;
        transform-origin: 16vw -2vh;
        box-shadow: 40vmin 0 5.7vmin currentColor;
      }

      .ball:nth-child(2) {
        top: 42%;
        left: 2%;
        animation-duration: 80s;
        animation-delay: -29s;
        transform-origin: -19vw 21vh;
        box-shadow: -40vmin 0 5.2vmin currentColor;
      }

      .ball:nth-child(3) {
        top: 28%;
        left: 18%;
        animation-duration: 72s;
        animation-delay: -8s;
        transform-origin: -22vw 3vh;
        box-shadow: 40vmin 0 5.25vmin currentColor;
      }

      .ball:nth-child(4) {
        top: 50%;
        left: 79%;
        animation-duration: 90s;
        animation-delay: -21s;
        transform-origin: -17vw -6vh;
        box-shadow: 40vmin 0 5.3vmin currentColor;
      }

      .ball:nth-child(5) {
        top: 46%;
        left: 15%;
        animation-duration: 85s;
        animation-delay: -40s;
        transform-origin: 4vw 0vh;
        box-shadow: -40vmin 0 6vmin currentColor;
      }

      .ball:nth-child(6) {
        top: 77%;
        left: 16%;
        animation-duration: 70s;
        animation-delay: -10s;
        transform-origin: 18vw 4vh;
        box-shadow: 40vmin 0 5.2vmin currentColor;
      }

      /* =========================
         RESPONSIVT
         ========================= */
      @media (max-width: 1000px) {
        h1 {
          font-size: 3.2rem;
        }

        .intro p {
          width: 90%;
        }
      }

      @media (max-width: 700px) {
        .ball {
          display: none;
        }

        h1 {
          font-size: 3rem;
          line-height: 1;
          letter-spacing: -0.06rem;
        }

        p {
          font-size: 1.05em;
          line-height: 1.35em;
          max-width: 34ch;
        }

        .background::after {
          background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.20),
            rgba(0, 0, 0, 0.40)
          );
        }

        .background {
          background-position: center;
        }
      }