@layer reset, base, composition, details, motion;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    min-block-size: 100%;
    margin: 0;
  }

  html {
    touch-action: pan-x pan-y;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

@layer base {
  :root {
    color-scheme: dark;
    --ink: #f9f5ff;
    --muted: #bfaed0;
    --violet: #a44dff;
    --violet-hot: #d596ff;
    --violet-deep: #5e168d;
    --night: #100519;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
  }

  body {
    min-block-size: 100svh;
    overflow: hidden;
    overscroll-behavior: none;
    color: var(--ink);
    background:
      radial-gradient(circle at 50% 42%, #35104d 0, #180824 42%, var(--night) 74%),
      var(--night);
  }

  body::before {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    content: "";
    opacity: 0.2;
    background:
      repeating-linear-gradient(103deg, transparent 0 4px, rgb(255 255 255 / 1.8%) 5px),
      repeating-linear-gradient(17deg, transparent 0 7px, rgb(255 255 255 / 1.2%) 8px);
    mix-blend-mode: overlay;
  }
}

@layer composition {
  .stage {
    --page-pad: clamp(1rem, 4vmin, 2.5rem);
    position: relative;
    isolation: isolate;
    display: grid;
    overflow: clip;
    min-block-size: 100svh;
    place-items: center;
    padding-block:
      max(var(--page-pad), env(safe-area-inset-top, 0px))
      max(var(--page-pad), env(safe-area-inset-bottom, 0px));
    padding-inline:
      max(var(--page-pad), env(safe-area-inset-left, 0px))
      max(var(--page-pad), env(safe-area-inset-right, 0px));
  }

  .stage::before,
  .stage::after {
    position: absolute;
    z-index: -1;
    inline-size: min(58vw, 24rem);
    aspect-ratio: 1;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 50%;
    content: "";
  }

  .stage::before {
    inset-block-start: -20%;
    inset-inline-start: -22%;
  }

  .stage::after {
    inset-block-end: -26%;
    inset-inline-end: -18%;
  }

  .hero {
    display: grid;
    justify-items: center;
    inline-size: min(100%, 38rem);
    max-block-size: 100%;
    text-align: center;
  }

  .mark-wrap {
    position: relative;
    display: grid;
    inline-size: min(78vw, 22rem, 48svh);
    aspect-ratio: 1;
    margin-block: clamp(0.9rem, 3svh, 2.25rem);
    place-items: center;
  }

  .paw {
    position: relative;
    inline-size: 66%;
    aspect-ratio: 0.92;
    filter: drop-shadow(0 0 1.1rem rgb(164 77 255 / 35%));
  }
}

@layer details {
  .ambient {
    position: absolute;
    z-index: -2;
    inline-size: min(92vw, 36rem);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.7;
    background: radial-gradient(circle, rgb(154 50 231 / 25%), transparent 68%);
    filter: blur(1.5rem);
  }

  .eyebrow {
    margin: 0;
    color: var(--violet-hot);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.38em;
    line-height: 1;
    text-transform: uppercase;
  }

  .orbit {
    position: absolute;
    border: 1px solid transparent;
    border-radius: 50%;
  }

  .orbit--outer {
    inset: 0;
    border-block-start-color: rgb(213 150 255 / 38%);
    border-inline-end-color: rgb(213 150 255 / 7%);
  }

  .orbit--inner {
    inset: 9%;
    border-block-end-color: rgb(164 77 255 / 20%);
    border-inline-start-color: rgb(164 77 255 / 8%);
  }

  .paw::before {
    position: absolute;
    inset: 28% 8% 4%;
    z-index: -1;
    border-radius: 48%;
    content: "";
    background: rgb(164 77 255 / 24%);
    filter: blur(1.8rem);
  }

  .toe,
  .pad {
    position: absolute;
    display: block;
    overflow: hidden;
    background:
      linear-gradient(135deg, rgb(255 255 255 / 20%), transparent 38%),
      linear-gradient(150deg, var(--violet-hot), var(--violet) 42%, var(--violet-deep));
    box-shadow:
      inset 0 1px 1px rgb(255 255 255 / 34%),
      inset -0.6rem -0.8rem 1.4rem rgb(42 4 69 / 42%),
      0 0.6rem 1.5rem rgb(19 3 32 / 38%);
  }

  .toe::after,
  .pad::after {
    position: absolute;
    inset: 8%;
    border: 1px solid rgb(255 255 255 / 11%);
    border-radius: inherit;
    content: "";
  }

  .toe {
    inline-size: 17.5%;
    block-size: 28.5%;
    border-radius: 58% 58% 48% 48%;
  }

  .toe--one {
    inset-block-start: 25%;
    inset-inline-start: 0;
    transform: rotate(-32deg);
  }

  .toe--two {
    inset-block-start: 8%;
    inset-inline-start: 18%;
    transform: rotate(-16deg);
  }

  .toe--three {
    inset-block-start: 0;
    inset-inline-start: 41.25%;
    block-size: 31%;
  }

  .toe--four {
    inset-block-start: 8%;
    inset-inline-end: 18%;
    transform: rotate(16deg);
  }

  .toe--five {
    inset-block-start: 25%;
    inset-inline-end: 0;
    transform: rotate(32deg);
  }

  .pad {
    inset-block-end: 2%;
    inset-inline-start: 18%;
    inline-size: 64%;
    block-size: 61%;
    border-radius: 48% 48% 43% 43% / 55% 55% 38% 38%;
    clip-path: polygon(50% 0, 65% 8%, 88% 34%, 100% 66%, 89% 88%, 67% 100%, 33% 100%, 11% 88%, 0 66%, 12% 34%, 35% 8%);
  }

  h1 {
    margin: 0;
    font-size: clamp(2rem, 10vw, 5rem);
    font-weight: 780;
    letter-spacing: -0.065em;
    line-height: 0.95;
  }

  h1 span {
    color: var(--violet-hot);
    font-weight: 450;
  }

  .tagline {
    margin: 0.9rem 0 0;
    color: var(--muted);
    font-size: clamp(0.78rem, 2.8vw, 0.95rem);
    letter-spacing: 0.14em;
  }
}

@layer motion {
  .paw {
    animation: breathe 4.8s ease-in-out infinite;
  }

  .orbit--outer {
    animation: turn 18s linear infinite;
  }

  .orbit--inner {
    animation: turn-reverse 13s linear infinite;
  }

  .ambient {
    animation: pulse 4.8s ease-in-out infinite;
  }

  @keyframes breathe {
    0%,
    100% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-0.65rem) scale(1.025);
    }
  }

  @keyframes turn {
    to {
      transform: rotate(1turn);
    }
  }

  @keyframes turn-reverse {
    to {
      transform: rotate(-1turn);
    }
  }

  @keyframes pulse {
    50% {
      opacity: 1;
      transform: scale(1.08);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

@media (min-width: 48rem) {
  .mark-wrap {
    inline-size: min(42vw, 23rem, 52svh);
  }

  .tagline {
    margin-block-start: 1.15rem;
  }
}

@media (orientation: landscape) and (max-height: 32rem) {
  .stage {
    --page-pad: clamp(0.75rem, 3vmin, 1.5rem);
  }

  .mark-wrap {
    inline-size: min(46vw, 48svh, 15rem);
    margin-block: clamp(0.55rem, 2svh, 0.9rem);
  }

  .tagline {
    margin-block-start: 0.65rem;
  }
}