@layer pages {
  html {
    overflow-x: clip;
    background: oklch(95.5% 0.03 340);
  }

  body {
    --punk: oklch(64% 0.25 354);
    --tape: oklch(94% 0.06 95 / 0.8);

    display: grid;
    place-items: center;
    overflow-x: clip;
    padding: var(--space-64) var(--space-32);
    background:
      radial-gradient(ellipse at center, var(--color-paper) 15%, transparent 70%),
      radial-gradient(
          circle,
          color-mix(in oklch, var(--punk) 30%, transparent) 1.4px,
          transparent 2px
        )
        0 0 / 14px 14px,
      oklch(95.5% 0.03 340);

    @media (max-width: 600px) {
      padding-inline: var(--space-20);
    }
  }

  main {
    position: relative;
    flex: none;
    inline-size: min(360px, 100%);
    padding: var(--space-32) var(--space-24) var(--space-20);
    border: 2px solid var(--color-ink);
    border-radius: 2px;
    background: var(--color-paper);
    box-shadow: 10px 10px 0 var(--color-ink);
    rotate: -1.5deg;

    &::before,
    &::after {
      content: '';
      position: absolute;
      z-index: 1;
      inline-size: 110px;
      block-size: 28px;
      background: var(--tape);
      clip-path: polygon(
        4% 0,
        96% 0,
        100% 20%,
        96% 40%,
        100% 60%,
        96% 80%,
        100% 100%,
        4% 100%,
        0 80%,
        4% 60%,
        0 40%,
        4% 20%
      );
    }

    &::before {
      inset-block-start: -12px;
      inset-inline-start: -36px;
      rotate: -34deg;
    }

    &::after {
      inset-block-end: -22px;
      inset-inline-end: -44px;
      rotate: -28deg;
    }

    @media (prefers-reduced-motion: no-preference) {
      animation: drop-in 700ms ease-out;

      &.denied {
        animation:
          drop-in 700ms ease-out,
          shake 480ms 700ms ease-in-out;
      }
    }
  }

  @keyframes drop-in {
    0% {
      opacity: 0;
      translate: 0 -100dvh;
      rotate: 9deg;
    }

    70% {
      opacity: 1;
      translate: 0 var(--space-24);
      rotate: -4deg;
    }

    88% {
      translate: 0 calc(-1 * var(--space-8));
      rotate: -0.5deg;
    }

    100% {
      translate: 0;
      rotate: -1.5deg;
    }
  }

  @keyframes shake {
    20% {
      translate: -12px 0;
    }

    40% {
      translate: 10px 0;
    }

    60% {
      translate: -7px 0;
    }

    80% {
      translate: 4px 0;
    }
  }

  .sticker {
    position: absolute;
    z-index: 2;
    inset-block-start: -104px;
    inset-inline-end: -76px;
    inline-size: 140px;
    rotate: 8deg;
    filter: drop-shadow(3px 0 0 var(--color-paper)) drop-shadow(-3px 0 0 var(--color-paper))
      drop-shadow(0 3px 0 var(--color-paper)) drop-shadow(0 -3px 0 var(--color-paper))
      drop-shadow(3px 5px 3px color-mix(in oklch, var(--color-ink) 30%, transparent));

    & svg {
      display: block;
      inline-size: 100%;
      block-size: auto;
      overflow: visible;
    }

    & .can-cap {
      fill: var(--color-ink);
    }

    & .can-body {
      fill: var(--color-paper);
      stroke: var(--color-ink);
      stroke-width: 7;
    }

    & .can-liquid {
      fill: var(--color-green);
    }

    & .can-shine {
      fill: var(--color-paper);
      opacity: 0.4;
    }

    & .can-glass {
      fill: none;
      stroke: var(--color-cyan);
      stroke-linecap: round;
      stroke-width: 3;
    }

    & .fizz circle {
      fill: none;
      stroke: var(--color-paper);
      stroke-width: 2;
    }

    & .bubbles circle {
      fill: var(--color-green);
      stroke: var(--color-green-edge);
      stroke-width: 1.5;
    }

    & .banner {
      fill: var(--color-ink);
    }

    & .banner-text {
      font: italic 700 30px var(--font-text);
      letter-spacing: 0.02em;
    }

    & .web {
      fill: var(--color-paper);
    }

    & .energy {
      fill: var(--color-green);
    }

    @media (prefers-reduced-motion: no-preference) {
      & .can-liquid {
        animation: slosh 900ms ease-out;
      }

      & :is(.fizz, .bubbles) circle {
        animation: fizz 600ms ease-out backwards;

        &:nth-child(2) {
          animation-delay: 120ms;
        }

        &:nth-child(3) {
          animation-delay: 240ms;
        }

        &:nth-child(4) {
          animation-delay: 360ms;
        }
      }

      & .bubbles circle {
        animation-delay: 300ms;

        &:nth-child(2) {
          animation-delay: 420ms;
        }

        &:nth-child(3) {
          animation-delay: 520ms;
        }
      }

      &:hover {
        & .can-liquid {
          animation-name: slosh-again;
        }

        & :is(.fizz, .bubbles) circle {
          animation-name: fizz-again;
        }
      }
    }

    &:focus-visible {
      outline-color: var(--punk);
    }

    @media (max-width: 600px) {
      inset-block-start: -72px;
      inset-inline-end: -20px;
      inline-size: 112px;
    }
  }

  @keyframes slosh {
    0% {
      translate: -50px 10px;
    }

    40% {
      translate: -20px -6px;
    }

    70% {
      translate: -8px 3px;
    }
  }

  @keyframes slosh-again {
    0% {
      translate: -50px 10px;
    }

    40% {
      translate: -20px -6px;
    }

    70% {
      translate: -8px 3px;
    }
  }

  @keyframes fizz {
    0% {
      opacity: 0;
      translate: 0 40px;
    }
  }

  @keyframes fizz-again {
    0% {
      opacity: 0;
      translate: 0 40px;
    }
  }

  .burst {
    position: absolute;
    z-index: 2;
    inset-block-end: -56px;
    inset-inline-start: -60px;
    display: grid;
    place-items: center;
    inline-size: 92px;
    block-size: 92px;
    padding: var(--space-16);
    background-color: var(--punk);
    color: var(--color-paper);
    font: 700 11px / 1.15 var(--font-text);
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
    rotate: -14deg;
    clip-path: polygon(
      50% 0%,
      60.9% 9.4%,
      75% 6.7%,
      79.7% 20.3%,
      93.3% 25%,
      90.6% 39.1%,
      100% 50%,
      90.6% 60.9%,
      93.3% 75%,
      79.7% 79.7%,
      75% 93.3%,
      60.9% 90.6%,
      50% 100%,
      39.1% 90.6%,
      25% 93.3%,
      20.3% 79.7%,
      6.7% 75%,
      9.4% 60.9%,
      0% 50%,
      9.4% 39.1%,
      6.7% 25%,
      20.3% 20.3%,
      25% 6.7%,
      39.1% 9.4%
    );

    @media (max-width: 600px) {
      inset-block-end: -56px;
      inset-inline-start: -14px;
      inline-size: 80px;
      block-size: 80px;
    }
  }

  .cutout > span {
    display: inline-block;
    margin-inline-end: 1px;
    padding-inline: 3px;
    background-color: var(--color-ink);
    box-shadow: 1px 1px 0 color-mix(in oklch, var(--color-ink) 30%, transparent);
    color: var(--color-paper);
    font: 700 1em / 1.2 var(--font-text);
    text-transform: uppercase;
    rotate: -4deg;

    &:nth-child(even) {
      rotate: 3deg;
    }

    &:nth-child(3n) {
      rotate: -1deg;
      translate: 0 2px;
    }

    &:nth-child(4n) {
      rotate: 6deg;
    }

    &:nth-child(6n + 2) {
      outline: 1px solid var(--color-ink);
      outline-offset: -1px;
      background-color: var(--color-paper);
      color: var(--color-ink);
      font: italic 600 1.15em / 1.05 var(--font-display);
      text-transform: none;
    }

    &:nth-child(6n + 3) {
      background-color: var(--color-green);
      color: var(--color-green-ink);
      font: 500 0.9em / 1.35 var(--font-mono);
    }

    &:nth-child(6n + 4) {
      background-color: oklch(92% 0.13 100);
      color: var(--color-ink);
      font: italic 700 1.2em / 1 var(--font-display);
      text-transform: none;
    }

    &:nth-child(6n + 5) {
      background-color: var(--punk);
    }

    &:nth-child(6n) {
      background-color: var(--color-cyan-soft);
      color: var(--color-ink);
      font: 400 0.95em / 1.3 var(--font-mono);
    }
  }

  .headline {
    margin-block: 0 var(--space-24);
    font-size: 21px;
    line-height: 1.6;
    word-spacing: 0.5em;
    rotate: -2deg;
  }

  form {
    display: grid;
    margin: 0;
  }

  label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4) var(--space-12);
    margin-block-end: var(--space-8);
    font-size: 14px;
  }

  .aside {
    color: var(--punk);
    font: italic 400 var(--text-small) / 1 var(--font-display);
    rotate: -3deg;
  }

  input:is([type='email'], [type='password']) {
    margin-block-end: var(--space-20);
    padding: var(--space-8) var(--space-12);
    border: 2px solid var(--color-ink);
    border-radius: 0;
    background-color: var(--color-paper);
    color: var(--color-ink);

    &:focus {
      background-color: var(--color-input-focus);
    }

    &:focus-visible {
      outline: 3px solid var(--punk);
      outline-offset: 2px;
    }

    &:user-invalid {
      border-color: var(--color-danger);
    }
  }

  .button {
    margin-block-start: var(--space-4);
    padding-block: var(--space-12);
    border: 2px solid var(--color-ink);
    border-radius: 0;
    box-shadow: 5px 5px 0 var(--color-ink);
    font: 700 1.1em / 1.25 var(--font-text);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    rotate: 0.6deg;

    &:not(:disabled):hover {
      box-shadow: 7px 7px 0 var(--color-ink);
      translate: -2px -2px;
    }

    &:not(:disabled):active {
      box-shadow: 0 0 0 var(--color-ink);
      translate: 5px 5px;
    }

    &:focus-visible {
      outline: 3px solid var(--punk);
      outline-offset: 4px;
    }
  }

  .fine {
    margin-block: var(--space-20) 0;
    color: var(--color-muted);
    font: 400 var(--text-micro) / 1.4 var(--font-mono);
    text-align: center;
  }

  .stamp {
    position: absolute;
    z-index: 3;
    inset-block-end: var(--space-48);
    inset-inline-end: calc(-1 * var(--space-16));
    padding: 0 var(--space-12);
    border: 3px solid var(--color-danger);
    border-radius: 6px;
    color: var(--color-danger);
    font: 700 34px / 1.2 var(--font-text);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85;
    mix-blend-mode: multiply;
    rotate: -16deg;
    pointer-events: none;

    @media (prefers-reduced-motion: no-preference) {
      animation: stamp 180ms 1180ms ease-in both;
    }
  }

  @keyframes stamp {
    0% {
      opacity: 0;
      scale: 2.4;
    }
  }
}