body {
  background: var(--bg-inverse);
}

.wrapper {
  display: grid;
  grid-template-rows: 1fr 24px;
  gap: var(--spacing-1);
  width: 100%;
  max-width: var(--content-width-max);
  height: 100%;
  padding: var(--spacing-1);
  margin: 0 auto;
  background: var(--bg-inverse);

  main {
    .grid-layout {
      display: grid;
      grid-template-columns: repeat(16, 1fr);
      grid-template-rows: repeat(8, 1fr);
      gap: var(--spacing-1);
      height: 100%;
      width: 100%;

      .left-title {
        grid-area: 1 / 1 / -3 / 6;
        background: var(--bg-canvas);
        border-radius: var(--radius-32) 0 var(--radius-32) var(--radius-32);
      }

      .contact {
        grid-area: -3 / 1 / -1 / 2;
        display: grid;
        gap: var(--spacing-1);

        .icon-button {
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: var(--radius-full);

          img {
            width: 32px;
            height: 32px;
          }
          .material-symbols-outlined {
            color: var(--text-inverse);
            font-size: 32px;
          }
        }
      }

      .left-visual {
        grid-area: -3 / 2 / -1 / 6;
        display: flex;
        align-items: center;
        justify-content: space-center;
        gap: var(--spacing-1);
        position: relative;

        .circle {
          aspect-ratio: 1;
          height: 80%;
          border-radius: var(--radius-full);
          overflow: hidden;
          background-repeat: no-repeat;
          position: relative;

          &.half {
            aspect-ratio: 0.5;
            border-radius: var(--radius-full) 0 0 var(--radius-full);
          }

          &.quarter {
            aspect-ratio: 0.25;
            height: 75%;
            border-radius: var(--radius-full) 0 0 var(--radius-full);
          }
        }
      }

      .site-nav {
        grid-area: 1 / 6 / 2 / -3;
        margin: 0 calc(-1 * var(--spacing-1));
        background: var(--bg-canvas);

        ul {
          display: flex;
          align-items: center;
          gap: var(--spacing-2);
          height: 100%;
          background: var(--bg-canvas);

          li {
            padding: var(--spacing-half);
            background: var(--bg-sunken);
            border-radius: var(--radius-32);

            button {
              min-width: 100px;
              padding: var(--spacing-1) var(--spacing-2);
              border-radius: var(--radius-12);
              background: var(--bg-canvas);
            }
          }
        }
      }

      .main-visual {
        grid-area: 2 / 6 / -1 / -3;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(7, 1fr);
        gap: var(--spacing-1);
        background: var(--bg-inverse);
        position: relative;

        &::before,
        &::after {
          content: "";
          position: absolute;
          top: calc(-1 * var(--spacing-1));
          width: var(--radius-32);
          height: var(--radius-32);
          background: var(--bg-canvas);
          mask-image: radial-gradient(
            circle at 0 0,
            transparent var(--radius-32),
            var(--bg-inverse) var(--radius-32)
          );
          -webkit-mask-image: radial-gradient(
            circle at 0 0,
            transparent var(--radius-32),
            var(--bg-inverse) var(--radius-32)
          );
        }

        &::before {
          left: calc(-1 * var(--spacing-1));
          rotate: 180deg;
          mask-position: top right;
          -webkit-mask-position: top right;
        }

        &::after {
          right: calc(-1 * var(--spacing-1));
          rotate: -90deg;
          mask-position: top left;
          -webkit-mask-position: top left;
        }

        .main-visual-item {
          border-radius: var(--radius-32);
          overflow: hidden;
          position: relative;
          background-repeat: no-repeat;

          &.item1 {
            grid-area: 1 / 1 / 3 / 2;
          }
          &.item2 {
            grid-area: 1 / 2 / 6 / -1;
          }
          &.item3 {
            grid-area: 3 / 1 / -1 / 2;
          }
          &.item4 {
            grid-area: 6 / 2 / -1 / -1;
          }
        }
      }

      .right-text {
        grid-area: 1 / -3 / -5 / -1;
        background: var(--bg-canvas);
        border-radius: 0 var(--radius-32) var(--radius-32);

        .inner {
          height: 100%;
          background: var(--bg-muted);
          border-radius: var(--radius-32);
          border: var(--spacing-half) solid var(--bg-canvas);
        }
      }

      .right-content {
        grid-area: -5 / -3 / -1 / -1;
        background: var(--bg-muted);
        border: var(--spacing-half) solid var(--bg-canvas);
        border-radius: var(--radius-32);
      }
    }
  }

  footer {
    overflow: hidden;

    .marquee {
      overflow: hidden;
      display: flex;
      width: 100%;
      background: yellow;
      border-radius: var(--radius-full);

      .marquee-content {
        display: flex;
        gap: 3rem;
        padding-right: 3rem;
        animation: marquee 15s linear infinite;
        flex-shrink: 0;

        span {
          color: var(--text-muted);
          font-size: var(--font-size-16);
          white-space: nowrap;
        }
      }
    }

    @keyframes marquee {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
      }
    }
  }
}

/* WebGL Canvas */
.webgl-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Privacy Policy Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;

  &::backdrop {
    background: var(--bg-overlay);
    backdrop-filter: blur(4px);
  }

  &[open] {
    display: flex;
    align-items: center;
    justify-content: center;

    .modal-content {
      animation: modal-slide-in var(--transition-normal) ease-out;
    }
  }

  .modal-content {
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    background: var(--bg-canvas);
    border-radius: var(--radius-32);
    box-shadow: var(--shadow-overlay);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: 1px solid var(--bg-sunken);

    h2 {
      margin: 0;
      font-size: var(--font-size-20);
      color: var(--text-primary);
    }
  }

  .modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--bg-sunken);
    cursor: pointer;
    transition: background var(--transition-fast);

    &:hover {
      background: var(--bg-muted);
    }

    .material-symbols-outlined {
      font-size: 24px;
      color: var(--text-primary);
    }
  }

  .modal-body {
    padding: var(--spacing-3);
    overflow-y: auto;
    color: var(--text-primary);

    h3 {
      margin: var(--spacing-3) 0 var(--spacing-1);
      font-size: var(--font-size-16);

      &:first-child {
        margin-top: 0;
      }
    }

    p {
      margin: 0 0 var(--spacing-2);
      font-size: var(--font-size-14);
      line-height: 1.6;
    }

    ul {
      margin: 0 0 var(--spacing-2);
      padding-left: var(--spacing-3);

      li {
        font-size: var(--font-size-14);
        line-height: 1.6;
        margin-bottom: var(--spacing-half);
      }
    }
  }
}

@keyframes modal-slide-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}