/* Design: bento-goo. The live home page (/) and /designs/bento-goo.
   Loaded after app.css and bento.css (shell.sql `base` + `design`
   params). bento.css gives the grid, tiles and colours. This file adds:
   - flat, ink-outlined blobs in the side margins, outside the content
     column, slowly changing shape (wide screens only; phones have no room)
   - curved shade lines on links and projects: each tile's shade is a
     quarter-ellipse from a different corner, with a hard edge that grows
     on hover. The intro tile stays flat.
   - blob icons that wobble on hover.
   Colour → --tblr-* vars; sizes, radii, shadows, type → Open Props. */

/* Typed so the shade's edge can transition on hover.
   Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/@property */
@property --goo-reach {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 62%;
}

/* The blobs sit outside the content column, past the screen edge on
   narrow screens. Clip them at the page wrapper (full viewport width) so
   there's no sideways scroll. On <body> this would be handed to the
   viewport and not reliably clip.
   Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#clip */
body:has(.profile[data-variant="bento-goo"]) .page-wrapper { overflow-x: clip; }

:is(.profile, .projects)[data-variant="bento-goo"] {
  /* isolation: z-index -1 blobs stay inside this section, behind its tiles.
     Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/isolation */
  position: relative;
  isolation: isolate;

  &::before,
  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    aspect-ratio: 1;
    border: var(--bento-ink) solid var(--tblr-border-color);
    box-shadow: var(--bento-shadow-lift);
    pointer-events: none;
    animation: bento-goo-morph 16s var(--ease-in-out-3) infinite alternate;
  }

  /* Curved shade: a quarter-ellipse centred on --goo-at (a corner, set
     per tile below), with a hard edge at --goo-reach. */
  & :is(.profile-link, .projects-item) {
    background:
      radial-gradient(
        ellipse 100% 90% at var(--goo-at, 100% 100%),
        color-mix(in oklab, var(--bento-base) 80%, var(--tblr-border-color)) 0 var(--goo-reach),
        transparent var(--goo-reach)
      ),
      var(--bento-base);
  }
  & :is(.profile-link, .projects-item) {
    transition:
      transform .25s var(--ease-spring-3),
      box-shadow .15s var(--ease-out-3),
      --goo-reach .5s var(--ease-out-3);

    &:hover,
    &:focus-visible { --goo-reach: 90%; }
  }
  & :is(.profile-link-icon, .projects-item-icon) {
    inline-size: var(--size-8);
    block-size: var(--size-8);
    border-radius: var(--goo-blob, var(--radius-blob-1));
  }
  & :is(.profile-link, .projects-item):is(:hover, :focus-visible) :is(.profile-link-icon, .projects-item-icon) {
    animation: bento-goo-wobble 1.6s var(--ease-in-out-2) infinite;
  }
}
/* Blobs sit in the side margins: `inset-inline-end: calc(100% + gap)`
   puts a blob's right edge a gap's width left of the section's left
   edge (and the mirror for the right side), so none sit behind content. */
.profile[data-variant="bento-goo"] {
  &::before {
    inline-size: var(--size-14);
    inset-block-start: var(--size-2);
    inset-inline-end: calc(100% + var(--size-5));
    background: var(--tblr-yellow);
  }
  &::after {
    inline-size: var(--size-13);
    inset-block-end: calc(-1 * var(--size-8));
    inset-inline-start: calc(100% + var(--size-5));
    background: var(--tblr-teal);
    animation-delay: -6s;
    animation-direction: alternate-reverse;
  }
  /* Flat intro tile: no shade, no band. */
  & .profile-intro { background: var(--bento-base); }
  & li:nth-child(5n + 1) { --goo-at: 100% 100%; --goo-blob: var(--radius-blob-1); }
  & li:nth-child(5n + 2) { --goo-at: 0% 100%;   --goo-blob: var(--radius-blob-2); }
  & li:nth-child(5n + 3) { --goo-at: 100% 0%;   --goo-blob: var(--radius-blob-3); }
  & li:nth-child(5n + 4) { --goo-at: 50% 125%;  --goo-blob: var(--radius-blob-4); }
  & li:nth-child(5n + 5) { --goo-at: 0% 0%;     --goo-blob: var(--radius-blob-5); }
}
.projects[data-variant="bento-goo"] {
  &::before {
    inline-size: var(--size-13);
    inset-block-start: var(--size-6);
    inset-inline-start: calc(100% + var(--size-5));
    background: var(--tblr-lime);
    animation-delay: -3s;
  }
  &::after {
    inline-size: var(--size-12);
    inset-block-end: calc(-1 * var(--size-6));
    inset-inline-end: calc(100% + var(--size-5));
    background: var(--tblr-green);
    animation-delay: -10s;
    animation-direction: alternate-reverse;
  }
  & .projects-item {
    &:nth-child(4n + 1) { --goo-at: 100% 100%; --goo-blob: var(--radius-blob-3); }
    &:nth-child(4n + 2) { --goo-at: 50% 125%;  --goo-blob: var(--radius-blob-1); }
    &:nth-child(4n + 3) { --goo-at: 0% 100%;   --goo-blob: var(--radius-blob-5); }
    &:nth-child(4n + 4) { --goo-at: 100% 0%;   --goo-blob: var(--radius-blob-2); }
  }
}
@keyframes bento-goo-morph {
  0%   { border-radius: var(--radius-blob-1); rotate: 0deg; }
  33%  { border-radius: var(--radius-blob-3); }
  66%  { border-radius: var(--radius-blob-2); }
  100% { border-radius: var(--radius-blob-5); rotate: 30deg; }
}
@keyframes bento-goo-wobble {
  0%, 100% { border-radius: var(--goo-blob, var(--radius-blob-1)); }
  25%      { border-radius: var(--radius-blob-2); }
  50%      { border-radius: var(--radius-blob-4); }
  75%      { border-radius: var(--radius-blob-3); }
}

@media (prefers-reduced-motion: reduce) {
  :is(.profile, .projects)[data-variant="bento-goo"]::before,
  :is(.profile, .projects)[data-variant="bento-goo"]::after,
  :is(.profile, .projects)[data-variant="bento-goo"] :is(.profile-link-icon, .projects-item-icon) { animation: none !important; }
}