@font-face {
  font-family: 'Century Gothic';
  src: url(https://mwdesign.la/fonts/CenturyGothic-Regular.ttf);
}

  /* Outline to 'join' particles */
@property --stroke-width {
  syntax: '<length> | <length-percentage>';
  inherits: true;
  initial-value: 1px;
}

  /* Hozizontal offset for particle position in image */
@property --translate-x {
  syntax: '<length> | <length-percentage>';
  inherits: true;
  initial-value: 0;
}

  /* Vertical offset for particle position in image */
@property --translate-y {
  syntax: '<length> | <length-percentage>';
  inherits: true;
  initial-value: 0;
}

  /* Horizontal offset for particle & work-example layout */
@property --offset-x {
  syntax: '<length> | <length-percentage>';
  inherits: true;
  initial-value: 0;
}

  /* Vertical offset for particles & work-example layout */
@property --offset-y {
  syntax: '<length> | <length-percentage>';
  inherits: true;
  initial-value: 0;
}

  /* Vertical offset for page blurbs */
@property --blurb-offset-y {
  syntax: '<length> | <length-percentage>';
  inherits: true;
  initial-value: 0;
}

  /* Particle rotation */
@property --rotate {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

  /* Page primary color */
@property --color {
  syntax: '<color>';
  inherits: true;
  initial-value: hsl(24, 100%, 50%);
}

  /* Height of layout pages */
@property --page-height {
  syntax: '<length> | <length-percentage>';
  inherits: true;
  initial-value: 100svh;
}

  /* Page change trigger */
@property --page-change-trigger {
  syntax: '<length> | <length-percentage>';
  inherits: true;
  initial-value: 100svh;
}

  /* Blurb out trigger */
@property --blurb-out-trigger {
  syntax: '<length> | <length-percentage>';
  inherits: true;
  initial-value: 100svh;
}

  /* Example out trigger */
@property --example-out-trigger {
  syntax: '<length> | <length-percentage>';
  inherits: true;
  initial-value: 100svh;
}

  /* Current page for scroll trigger */
@property --page {
  syntax: '<integer>';
  initial-value: 1;
  inherits: true;
}

@property --blurb-in {
  syntax: '<integer>';
  initial-value: 1;
  inherits: true;
}

  /* Current blurb for scroll out trigger */
@property --blurb-out {
  syntax: '<integer>';
  initial-value: 0;
  inherits: true;
}

  /* Main page margin top */
@property --margin-top {
  syntax: '<length>';
  inherits: true;
  initial-value: 10svh;
}

  /* Main page margin bottom */
@property --margin-bottom {
  syntax: '<length>';
  inherits: true;
  initial-value: 10svh;
}

  /* Main page margin left */
@property --margin-left {
  syntax: '<length>';
  inherits: true;
  initial-value: max(10svh, calc((100vw - 1200px)/ 2));
}

  /* Main page margin right */
@property --margin-right {
  syntax: '<length>';
  inherits: true;
  initial-value: max(10svh, calc((100vw - 1200px)/ 2));
}

  /* Width of particle container */
@property --particle-container-width {
  syntax: '<length>';
  inherits: true;
  initial-value: min(calc(100vw - 20svh), calc(160svh / 2));
}

  /* Transition duration */
@property --duration {
  syntax: '<time>';
  inherits: true;
  initial-value: 0ms;
}

  /* Particle & work example preview scale */
@property --scale {
  syntax: '<number> | <percentage>';
  inherits: true;
  initial-value: 1;
}

  /* Work example grayscale */
@property --grayscale {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

  /* Work example hex base unit size */
@property --base {
  syntax: '<length>';
  inherits: true;
  initial-value: 1;
}

  /* Work example calculated scale */
@property --oss {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

  /* Work example calculated horizontal offset */
@property --osx {
  syntax: '<length> | <length-percentage>';
  inherits: true;
  initial-value: 1;
}

  /* Work example calculated vertical offset scale */
@property --osy {
  syntax: '<length> | <length-percentage>';
  inherits: true;
  initial-value: 1;
}

  /* Work example opacity */
@property --opacity {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

  /* Work example padding at start for layout placement */
@property --padding-start {
  syntax: '<length> | <length-percentage>';
  inherits: true;
  initial-value: 100svh;
}

  /* Work example preview height (1.2 scale for growth animation) */
@property --preview-height {
  syntax: '<length> | <length-percentage>';
  inherits: true;
  initial-value: 10svh;
}

@property --transparency {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 100%;
}

  /* Element child count */
@property --child-count {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

  /* Element sibling index sibling-index() */
@property --sibling-index {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/* Triggers */
@keyframes page-1 {
  to {
    --page: 1;
  }
}

@keyframes page-2 {
  to {
    --page: 2;
  }
}

@keyframes page-3 {
  to {
    --page: 3;
  }
}

@keyframes page-4 {
  to {
    --page: 4;
  }
}

@keyframes page-5 {
  to {
    --page: 5;
  }
}

@keyframes page-6 {
  to {
    --page: 6;
  }
}

@keyframes page-7 {
  to {
    --page: 7;
  }
}

@keyframes page-8 {
  to {
    --page: 8;
  }
}

@keyframes page-9 {
  to {
    --page: 9;
  }
}

*:has(:last-child:nth-last-child(1)) {
  --child-count: 1;
}

*:has(:last-child:nth-last-child(2)) {
  --child-count: 2;
}

*:has(:last-child:nth-last-child(3)) {
  --child-count: 3;
}

*:has(:last-child:nth-last-child(4)) {
  --child-count: 4;
}

*:has(:last-child:nth-last-child(5)) {
  --child-count: 5;
}

*:has(:last-child:nth-last-child(6)) {
  --child-count: 6;
}

*:has(:last-child:nth-last-child(7)) {
  --child-count: 7;
}

*:has(:last-child:nth-last-child(8)) {
  --child-count: 8;
}

*:has(:last-child:nth-last-child(9)) {
  --child-count: 9;
}

*:has(:last-child:nth-last-child(10)) {
  --child-count: 10;
}

*:has(:last-child:nth-last-child(11)) {
  --child-count: 11;
}

*:has(:last-child:nth-last-child(12)) {
  --child-count: 12;
}

*:has(:last-child:nth-last-child(13)) {
  --child-count: 13;
}

*:has(:last-child:nth-last-child(14)) {
  --child-count: 14;
}

*:has(:last-child:nth-last-child(15)) {
  --child-count: 15;
}

*:has(:last-child:nth-last-child(16)) {
  --child-count: 16;
}

*:has(:last-child:nth-last-child(17)) {
  --child-count: 17;
}

*:has(:last-child:nth-last-child(18)) {
  --child-count: 18;
}

*:has(:last-child:nth-last-child(19)) {
  --child-count: 19;
}

*:has(:last-child:nth-last-child(20)) {
  --child-count: 20;
}

*:has(:last-child:nth-last-child(21)) {
  --child-count: 21;
}

*:has(:last-child:nth-last-child(22)) {
  --child-count: 22;
}

*:has(:last-child:nth-last-child(23)) {
  --child-count: 23;
}

*:has(:last-child:nth-last-child(24)) {
  --child-count: 24;
}

*:has(:last-child:nth-last-child(25)) {
  --child-count: 25;
}

*:has(:last-child:nth-last-child(26)) {
  --child-count: 26;
}

*:has(:last-child:nth-last-child(27)) {
  --child-count: 27;
}

*:has(:last-child:nth-last-child(28)) {
  --child-count: 28;
}

*:has(:last-child:nth-last-child(29)) {
  --child-count: 29;
}

*:has(:last-child:nth-last-child(30)) {
  --child-count: 30;
}

*:has(:last-child:nth-last-child(32)) {
  --child-count: 32;
}

*:has(:last-child:nth-last-child(32)) {
  --child-count: 32;
}

*:nth-child(1) {
  --sibling-index: 1;
}

*:nth-child(2) {
  --sibling-index: 2;
}

*:nth-child(3) {
  --sibling-index: 3;
}

*:nth-child(4) {
  --sibling-index: 4;
}

*:nth-child(5) {
  --sibling-index: 5;
}

*:nth-child(6) {
  --sibling-index: 6;
}

*:nth-child(7) {
  --sibling-index: 7;
}

*:nth-child(8) {
  --sibling-index: 8;
}

*:nth-child(9) {
  --sibling-index: 9;
}

*:nth-child(10) {
  --sibling-index: 10;
}

*:nth-child(11) {
  --sibling-index: 11;
}

*:nth-child(12) {
  --sibling-index: 12;
}

*:nth-child(13) {
  --sibling-index: 13;
}

*:nth-child(14) {
  --sibling-index: 14;
}

*:nth-child(15) {
  --sibling-index: 15;
}

*:nth-child(16) {
  --sibling-index: 16;
}

*:nth-child(17) {
  --sibling-index: 17;
}

*:nth-child(18) {
  --sibling-index: 18;
}

*:nth-child(19) {
  --sibling-index: 19;
}

*:nth-child(20) {
  --sibling-index: 20;
}

*:nth-child(21) {
  --sibling-index: 21;
}

*:nth-child(22) {
  --sibling-index: 22;
}

*:nth-child(23) {
  --sibling-index: 23;
}

*:nth-child(24) {
  --sibling-index: 24;
}

*:nth-child(25) {
  --sibling-index: 25;
}

*:nth-child(26) {
  --sibling-index: 26;
}

*:nth-child(27) {
  --sibling-index: 27;
}

*:nth-child(28) {
  --sibling-index: 28;
}

*:nth-child(29) {
  --sibling-index: 29;
}

*:nth-child(30) {
  --sibling-index: 30;
}

*:nth-child(31) {
  --sibling-index: 31;
}

*:nth-child(32) {
  --sibling-index: 32;
}

html {
  --c-gray-1: hsl(224, 24%, 8%);
  --c-gray-2: hsl(224, 20%, 16%);
  --c-gray-3: hsl(224, 16%, 24%);
  --c-gray-4: hsl(224, 12%, 32%);
  --c-gray-5: hsl(224, 8%, 40%);
  --c-gray-6: hsl(224, 4%, 48%);
  --c-orange: hsl(24, 100%, 50%);
  --c-teal: hsl(165, 65%, 50%);
  --c-blue: hsl(212, 86%, 50%);
  --c-purple: hsl(260, 86%, 60%);
  --c-red: hsl(0, 85%, 50%);
  --c-white: hsl(224, 50%, 92%);

  --duration: 1000ms;  
  --background-color: var(--c-gray-1);

  --max-width: 1600px;

  --margin-top: 10svh;
  --margin-bottom: 10svh;
  --margin-left: max(10svh, calc((100vw - var(--max-width) ) / 2));
  --margin-right: max(10svh, calc((100vw - var(--max-width) ) / 2));
  --content-width: min(calc(100svw - 2 * var(--margin-left)), var(--max-width));

  --page-height: max(800px, 120svh);
  --page-change-trigger: var(--page-height);
  --blurb-out-trigger: var(--page-height);
  --blurb-out-offset: -39svh;
  --example-out-trigger: var(--page-height);
  --example-out-offset: -19svh;

  @media (orientation: portrait) {
    --margin-left: 3.2rem;
    --margin-right: 3.2rem;
    --blurb-out-offset: -35svh;
    --example-out-offset: 10svh;
    --page-height: 90svh;
  }

  timeline-trigger: --page-1 view() 99svh 99999svh,
                    --page-2 view() 101svh 99999svh,
                    --page-3 view() calc(2 * var(--page-change-trigger) + 1svh)  99999svh,
                    --page-4 view() calc(3 * var(--page-change-trigger) + 1svh)  99999svh,
                    --page-5 view() calc(4 * var(--page-change-trigger) + 1svh)  99999svh,
                    --page-6 view() calc(5 * var(--page-change-trigger) + 1svh)  99999svh,
                    --page-7 view() calc(6 * var(--page-change-trigger) + 1svh)  99999svh,
                    --page-8 view() calc(7 * var(--page-change-trigger) + 1svh)  99999svh,
                    --page-9 view() calc(8 * var(--page-change-trigger) + 1svh)  99999svh;

  @media (prefers-reduced-motion: reduce) {
    --duration: 0ms;
  }

  --particle-container-width: min(calc(100vw - 2 * var(--margin-left)), calc(160svh / 2));

  ::selection {
    color: var(--color);
    background-color: black;
  }
}            

body {
  overflow-x: clip;
  background-color: var(--background-color);
}

#root {
  animation-name: page-1, page-2, page-3, page-4, page-5, page-6, page-7, page-8, page-9;
  animation-duration: 1ms;
  animation-fill-mode: forwards;

  container-type: inline-size;
  container-name: root;

  animation-trigger: --page-1 play-forwards play-backwards, 
                     --page-2 play-forwards play-backwards, 
                     --page-3 play-forwards play-backwards, 
                     --page-4 play-forwards play-backwards, 
                     --page-5 play-forwards play-backwards,
                     --page-6 play-forwards play-backwards,
                     --page-7 play-forwards play-backwards,
                     --page-8 play-forwards play-backwards,
                     --page-9 play-forwards play-backwards;
}


  /*****************/
 /* LANDSCAPE NAV */
/*****************/

#nav-container { 
  anchor-name: --nav-container;
  container-name: nav-container;
  container-type: scroll-state;

  position: fixed;
  z-index: 1;

  top: calc(var(--margin-top) + (var(--particle-container-width) * .23));
  right: var(--margin-right);

  justify-items: end;
  font-family: 'Century Gothic';
  color: var(--color);
     
  transition: all var(--duration) 0s, 
              top var(--duration) 0s,
              z-index var(--duration) var(--duration) allow-discrete;

  & > ul {
    list-style: none;
    height: 100%;
    display: grid;
    grid-auto-flow: column;

    @media (orientation: portrait) {
      display: none;
    }

    & > li {
      display: inline-grid;
      height: 100%;
      place-items: center;
    }
  }
}

#nav-main {
  font-size: 1.4rem;
  height: 2em;
  column-gap: 1.2em;

  & > li {
    &:nth-child(1) {
      anchor-name: --nav-main-1;
    }

    &:nth-child(2) {
      anchor-name: --nav-main-2;
    }

    &:nth-child(3) {
      anchor-name: --nav-main-3;
    }

    &:nth-child(4) {
      anchor-name: --nav-main-4;
    }
  }
} 

#nav-sub {
  font-size: 1rem;
  height: 2em;
  width: 0px;
  overflow-x: clip;
  opacity: 0;
  
  margin-top: .2rem;
  margin-right: 40ch;
  

  interpolate-size: allow-keywords;
  transition-property: width, opacity, margin-right;
  transition-duration: 600ms;

  & > li {
    position: relative;
    left: .6em;
    padding-inline: .6em;

    &:nth-child(1) {
      anchor-name: --nav-sub-1;
    }

    &:nth-child(2) {
      anchor-name: --nav-sub-2;
    }

    &:nth-child(3) {
      anchor-name: --nav-sub-3;
    }

    &:nth-child(4) {
      anchor-name: --nav-sub-4;
    }

    &:nth-child(5) {
      anchor-name: --nav-sub-5;
    }

    &:nth-child(6) {
      anchor-name: --nav-sub-6;
    }
  }
} 

#nav-main-selector, 
#nav-sub-selector {
  interpolate-size: allow-keywords;
  position: absolute;

  pointer-events: none;
  mix-blend-mode: difference;

  transition: --color, left, width, opacity;
  transition-duration: var(--duration), var(--duration), var(--duration), 200ms;

  background-color: var(--color);
}

#nav-main-selector {
  position-anchor: --nav-main-1;

  top: anchor(top);
  left: calc(anchor(left) - .5em);

  height: 2em;
  width: calc(anchor-size(width) + 1em);

  transform: skewX(-30deg);
  border-radius: .1rem; 
}

#nav-sub-selector {
  --left-offset: -.2em;
  top: anchor(bottom);
  left: calc(anchor(left) - var(--left-offset));

  height: .2rem;
  width: calc(anchor-size(width) - .4em);
  
  transform: skewX(30deg);
}

h1 {
  position: fixed;
  position-anchor: --nav-container;
  bottom: calc(anchor(top) + .2rem);
  justify-self: anchor-center;

  margin-bottom: -0.6rem;

  font-size: 2.4rem;
  color: var(--color);
  line-height: 1em;

  transition: margin-bottom 400ms, color var(--duration);

  & sub {
    font-size: 1.4rem;
    position: relative;
    top: -.6rem;
  }

  @media (orientation: portrait) {
    display: none;
  }
}


/* Page in */
@container root style(--page: 1) {
  #nav-main-selector {
    position-anchor: --nav-main-1;
  }
  
  #nav-sub-selector {
    --left-offset: 5.8em;
    position-anchor: --nav-sub-1;
    opacity: 0;
  }
}

/* Page in */
@container root style(--page: 2) or style(--page: 3) or style(--page: 4) or style(--page: 5) or style(--page: 6) or style(--page: 7) {
  h1 {
    margin-bottom: 4rem;
  }

  #nav-container {
    top: .6rem;
  }

  #nav-main-selector {
    position-anchor: --nav-main-2;
  }

  #nav-sub {
    width: auto;
    opacity: 1;
    margin-right: 0;
  }
}

/* Page in */
@container root style(--page: 2) {
  #nav-sub-selector {
    position-anchor: --nav-sub-1;
  }
}

/* Page in */
@container root style(--page: 3) {
  #nav-sub-selector {
    position-anchor: --nav-sub-2;
  }
}

/* Page in */
@container root style(--page: 4) {
  #nav-sub-selector {
    position-anchor: --nav-sub-3;
  }
}

/* Page in */
@container root style(--page: 5) {
  #nav-sub-selector {
    position-anchor: --nav-sub-4;
  }
}

/* Page in */
@container root style(--page: 6) {
  #nav-sub-selector {
    position-anchor: --nav-sub-5;
  }
}

/* Page in */
@container root style(--page: 7) {
  #nav-sub-selector {
    position-anchor: --nav-sub-6;
  }
}

/* Page in */
@container root style(--page: 8) {
  #nav-container {
    top: .6rem;
  }

  #nav-main-selector {
    position-anchor: --nav-main-3;
    width: calc(anchor-size(width) + 1em);
  }
  
  #nav-sub-selector {
    position-anchor: --nav-sub-6;
    --left-offset: 4.2em;
    opacity: 0;
  }
}

/* Page in */
@container root style(--page: 9) {
  #nav-container {
    top: .6rem;
  }

  #nav-main-selector {
    position-anchor: --nav-main-4;
    width: calc(anchor-size(width) + 1em);
  }
  
  #nav-sub-selector {
    opacity: 0;
  }
}

#nav-container:has(#nav-main > li:nth-child(1):hover), #nav-container:has(#nav-main > li:nth-child(1):focus-within) {
  #nav-main-selector {
    position-anchor: --nav-main-1;
  }
}

#nav-container:has(#nav-main > li:nth-child(2):hover), 
#nav-container:has(#nav-main > li:nth-child(2):focus-within), 
#nav-container:has(#nav-sub:hover),
#nav-container:has(#nav-sub:focus-within) {
  #nav-main-selector {
    position-anchor: --nav-main-2;
  }

  #nav-sub {
    width: auto;
    opacity: 1;
    margin-right: 0;
  }

  #nav-sub-selector {
    --left-offset: -.2em;
  }
}

#nav-container:has(#nav-main > li:nth-child(3):hover), #nav-container:has(#nav-main > li:nth-child(3):focus-within) {
  #nav-main-selector {
    position-anchor: --nav-main-3;
  }
}

#nav-container:has(#nav-main > li:nth-child(4):hover), #nav-container:has(#nav-main > li:nth-child(4):focus-within) {
  #nav-main-selector {
    position-anchor: --nav-main-4;
  }
}

#nav-container:has(#nav-sub > li:nth-child(1):hover), #nav-container:has(#nav-sub > li:nth-child(1):focus-within) {
  #nav-sub-selector {
    position-anchor: --nav-sub-1;
    opacity: 1;
  }
}

#nav-container:has(#nav-sub > li:nth-child(2):hover), #nav-container:has(#nav-sub > li:nth-child(2):focus-within) {
  #nav-sub-selector {
    position-anchor: --nav-sub-2;
    opacity: 1;
  }
}

#nav-container:has(#nav-sub > li:nth-child(3):hover), #nav-container:has(#nav-sub > li:nth-child(3):focus-within) {
  #nav-sub-selector {
    position-anchor: --nav-sub-3;
    opacity: 1;
  }
}

#nav-container:has(#nav-sub > li:nth-child(4):hover), #nav-container:has(#nav-sub > li:nth-child(4):focus-within) {
  #nav-sub-selector {
    position-anchor: --nav-sub-4;
    opacity: 1;
  }
}

#nav-container:has(#nav-sub > li:nth-child(5):hover), #nav-container:has(#nav-sub > li:nth-child(5):focus-within) {
  #nav-sub-selector {
    position-anchor: --nav-sub-5;
    opacity: 1;
  }
}

#nav-container:has(#nav-sub > li:nth-child(6):hover), #nav-container:has(#nav-sub > li:nth-child(6):focus-within) {
  #nav-sub-selector {
    position-anchor: --nav-sub-6;
    opacity: 1;
  }
}

  /****************/
 /* PORTRAIT NAV */
/****************/

#overlay {
  display: none;
  inset: 0;
  position: fixed;
  background-color: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(.4rem);
  opacity: 0;

  z-index: 5;

  transition-property: display, opacity, overlay; 
  transition-duration: var(--duration);
  transition-behavior: allow-discrete;
  transition-delay: var(--delay, 0ms);
}

@keyframes nav-button-1 {
  50% {
    clip-path: path('M 0,4 L 10,4 L 10,6 L 0,6 Z');
    rotate: 0deg;
  }

  100% {
    clip-path: path('M 0,4 L 10,4 L 10,6 L 0,6 Z');
    rotate: 45deg;
  }
}

@keyframes nav-button-2 {
  50% {
    clip-path: path('M 0,4 L 10,4 L 10,6 L 0,6 Z');
  }

  51%, 100% {
    clip-path: path('M 5,4 L 5,4 L 5,6 L 5,6 Z');
  }
}

@keyframes nav-button-3 {
  50% {
    clip-path: path('M 0,4 L 10,4 L 10,6 L 0,6 Z');
    rotate: 0deg;
  }

  100% {
    clip-path: path('M 0,4 L 10,4 L 10,6 L 0,6 Z');
    rotate: -45deg;
  }
}

@keyframes nav-button-1-rev {
  50% {
    clip-path: path('M 0,4 L 10,4 L 10,6 L 0,6 Z');
    rotate: 0deg;
  }

  0% {
    clip-path: path('M 0,4 L 10,4 L 10,6 L 0,6 Z');
    rotate: 45deg;
  }
}

@keyframes nav-button-2-rev {
  51% {
    clip-path: path('M 0,4 L 10,4 L 10,6 L 0,6 Z');
  }

  50%, 0% {
    clip-path: path('M 5,4 L 5,4 L 5,6 L 5,6 Z');
  }
}

@keyframes nav-button-3-rev {
  50% {
    clip-path: path('M 0,4 L 10,4 L 10,6 L 0,6 Z');
    rotate: 0deg;
  }

  0% {
    clip-path: path('M 0,4 L 10,4 L 10,6 L 0,6 Z');
    rotate: -45deg;
  }
}

#portrait-nav-button {
  aspect-ratio: 1;
  width: 2rem;
  
  position: fixed;
  bottom: .6rem;
  right: .6rem;
  z-index: 20;

  display: grid;
  place-items: center;

  transition-property: right, --color;
  transition-duration: var(--duration);
}

#portrait-nav-button > svg > path {
  animation-duration: 600ms;
  animation-fill-mode: forwards;
  transform-box: fill-box;
  transform-origin: center;
  fill: var(--color);
}

html:has(#portrait-nav-container:popover-open) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

#root:has(#portrait-nav-container:popover-open) {
  #portrait-nav-button {
    right: calc(60vw + .6rem);
  }

  #portrait-nav-button > svg > path {
    &:nth-of-type(1) {
      animation-name: nav-button-1;
    }

    &:nth-of-type(2) {
      animation-name: nav-button-2;
    }

    &:nth-of-type(3) {
      animation-name: nav-button-3;
    }
  }

  #overlay {
    display: block;
    opacity: 1;
    --blur: .4rem;
  }
}

#root:has(#portrait-nav-container:not(:popover-open)) {
  #portrait-nav-button > svg > path {
    &:nth-of-type(1) {
      animation-name: nav-button-1-rev;
    }

    &:nth-of-type(2) {
      animation-name: nav-button-2-rev;
    }

    &:nth-of-type(3) {
      animation-name: nav-button-3-rev;
    }
  }
}

#portrait-nav-container:popover-open {
  left: 40vw;
}

#portrait-nav-container {
  width: 60vw;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 100vw;
  border: 0;
  border-left: .2rem solid var(--color);
  
  color: var(--color);
  background-color: var(--background-color);

  display: grid;
  place-items: center;

  font-size: 2rem;
  font-family: 'Century Gothic';

  transition: overlay var(--duration) allow-discrete,
              display var(--duration) allow-discrete,
              left var(--duration);

  & ul {
    list-style: none;

    & ul {
      padding-left: 1em;
      font-size: 1.4rem;
    }
  }
}

@starting-style {
  #portrait-nav-container:popover-open {
    left: 100vw;
  }

  #overlay {
    opacity: 0;
    --blur: 0rem;
  }
}

@media (orientation: landscape) {
  #portrait-nav-button, #portrait-nav-container {
    display: none;
  }
}

  /********/
 /* MAIN */
/********/

main {
  display: grid;
  margin-inline: auto;
  width: min(calc(100svw - var(--margin-left) - var(--margin-right)), var(--max-width));
  font-family: 'Century Gothic';
  
  overflow-x: clip;
}

main > [page] {
  --base: clamp(1rem, 2vmax, 1.2rem);
 
  --preview-height: calc(20.78 * var(--base));
  --init-preview-height: var(--preview-height);
  --padding-start: 100lvh;

  --offset-x: 0;
  --offset-y: 60svh;  
  --scale: 1;

  --grayscale: 0.9;
  --opacity: 1;

  --blurb-outer-width: calc(var(--content-width) - var(--particle-container-width) - 1rem);
  --blurb-inner-width: var(--blurb-outer-width);
  --blurb-offset-y: 20svh;


  height: var(--page-height);
  /* overflow: clip; */

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;

  transition: opacity var(--duration);


  @media (orientation: portrait) {
    --preview-height: calc(0.866 * var(--content-width));
    --base: calc(var(--content-width) * 0.04);
    --blurb-offset-y: 0svh;
    --offset-y: 42svh; 
  }

  & > * {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  &.left, &:not(.right):not(.center) {
    justify-content: start;
    justify-items: start;

    --line-anchor-justify: start;
  }

  &.right {
    @media (orientation: landscape) {
      justify-items: end;
      justify-content: end;

      --line-anchor-justify: end;

      [blurb] p {
        right: calc(-1 * (var(--blurb-outer-width) - var(--blurb-inner-width)));
      }
    }
  }
  
  &:has([work-example]:not([closing]) input[toggle]:hover) { 
    --scale: 1.2;
  }
}


@keyframes blurb-header-out {
  to {
    opacity: 0;
    translate: 0 -100%
  }
}
 
  /**************/
 /* PAGE BLURB */
/**************/

[blurb] {
  position: relative;

  width: var(--blurb-outer-width);
  height: 100%;

  padding-top: var(--blurb-offset-y);

  transition: --blurb-offset-y var(--duration), opacity var(--duration);
  
  @media (orientation: portrait) {
    
  }


  & > * {
    width: 100%;
  }

  p {
    display: inline-block;

    position: relative;

    margin-top: 1.4rem;
    
    width: var(--blurb-inner-width);

    text-align: justify;
    font-size: clamp(1rem, 1vmax, 1rem);

    word-break: unset;
    word-wrap: unset;
    overflow-wrap: unset;
    hyphens: unset;

    opacity: 0;
    color: var(--c-gray-5);

    transition-property: opacity;
    transition-duration: var(--duration);
    transition-delay: calc(var(--header-char-count) * 60ms + (var(--sibling-index) * 120ms));

  }
}

[blurb] > header {
  display: grid;
  grid-template-rows: 3rem;
  grid-auto-rows: 3rem;

  color: var(--color);
  transition-property: --color, margin-top, opacity;
  transition-duration: var(--duration);

  font-size: clamp(3rem, 4vmax, 4rem);
  font-weight: bold;

  position: relative;

  height: var(--header-height);

  h2 {
    grid-column: 1 / -1;
    grid-row: 1 / -1;

    anchor-name: --heading;

    width: max-content;
    min-height: 3rem;

    display: inline-block;
  }

  span {
    display: inline-block;
    position: absolute;
    white-space-collapse: preserve;
    margin: 0;
    padding: 0;
    opacity: 0;
    margin-top: .2em;

    transition: opacity, margin-top;
    transition-duration: var(--duration);
    transition-delay: calc(var(--sibling-index) * 60ms);
    
    anchor-name: --letter;
    position-anchor: --letter;
    left: anchor(--letter right);
    top: anchor(--letter top);

    &.space {
      min-width: .6ch;
    }

    &.nudge {
      padding-left: 0.03em;
    }

    &.nudge-lg {
      padding-left: 0.07em;
    }

    &.space + span:not(.new-line) {
      anchor-name: --letter;
    } 

    &:first-child, &.new-line {
      anchor-name: --line-start, --letter;
      top: anchor(--line-start bottom);
      left: anchor(--line-start left);
      margin-left: var(--offset-x);
    }
  }
}

@media (orientation: portrait) {
  [blurb] {
    width: var(--content-width);

    header {
      font-size: 2rem;
    }

    & > header, & > p {
      width: var(--content-width);
    }
  }
}

  /****************/
 /* WORK EXAMPLE */
/****************/

@media (orientation: landscape) {
  html, [work-example] {
    scrollbar-width: none;
  }
}

html:has([work-example] input[toggle]:checked) {
  #nav-container {
    z-index: -1 !important;
    transition: all var(--duration) 0s, z-index 0s 0s allow-discrete !important;
  } 
}

[work-example] {
  --gap: 2rem;
  --oss: calc(var(--scale) - 1);
  --osx: calc(var(--margin-left) + var(--offset-x) + (var(--base) * 2));
  --osy: calc(var(--padding-start) + (var(--preview-height) / 2));
  --delay: calc(var(--header-char-count) * 60ms + 400ms);

  display: grid;
  grid-template-columns: var(--margin-left) 1fr var(--margin-left);
  grid-template-rows: var(--preview-height) max-content var(--margin-left);
  row-gap: var(--gap);

  translate: 0 var(--translate-y);
  opacity: 0;

  width: 100%;
  
  background-color: #fff;

  scroll-behavior: smooth;
  transition-behavior: allow-discrete;
  transition: opacity var(--duration) var(--delay), 
              --preview-height var(--duration), 
              --padding-start var(--duration), 
              --scale var(--duration), 
              --grayscale var(--duration), 
              --opacity var(--duration), 
              z-index var(--duration), 
              --offset-x var(--duration),
              --offset-y var(--duration),
              --translate-y var(--duration) var(--delay);

  position: absolute;
  z-index: 2;  
  inset-inline: 0;

  margin-top: calc(-1 * var(--padding-start) + var(--offset-y, 0));
  padding-block-start: var(--padding-start);

  clip-path: polygon(
              calc(((0 * var(--base)) - var(--oss) * (10 * var(--base))) + var(--osx))    var(--osy), 
              calc(((5 * var(--base)) - var(--oss) * (5 * var(--base))) + var(--osx))      calc((var(--osy) - 8.66 * var(--base)) - var(--oss) * (8.66 * var(--base)) + 1px), 
              calc(((15 * var(--base)) + var(--oss) * (5 * var(--base))) + var(--osx))     calc((var(--osy) - 8.66 * var(--base)) - var(--oss) * (8.66 * var(--base)) + 1px), 
              calc(((20 * var(--base)) + var(--oss) * (10 * var(--base))) + var(--osx))    var(--osy),
              calc(((15 * var(--base)) + var(--oss) * (5 * var(--base))) + var(--osx))     calc((var(--osy) + 8.66 * var(--base)) + (var(--oss) * 8.66 * var(--base)) - 1px), 
              calc(((5 * var(--base)) - var(--oss) * (5 * var(--base))) + var(--osx))      calc((var(--osy) + 8.66 * var(--base)) + (var(--oss) * 8.66 * var(--base)) - 1px)
              ); 
  
  filter: grayscale(var(--grayscale));

  &::after {
    transition: --opacity 650ms 350ms;

    content: '';
    display: block;
    position: fixed;
    inset: 0; 
    z-index: 4;
    background-color: hsl(224, 100%, 65%);
    mix-blend-mode: overlay;
    opacity: var(--opacity, 1);

    pointer-events: none;
  }

  /* Preview */
  & > [preview] {
    display: grid;
    grid-column: 2 / 3;
    anchor-name: --preview;

    align-content: end;
    justify-content: start;

    position: relative;

    color: var(--c-gray-6);
    background-color: var(--c-gray-2);

    overflow: clip;

    img {
      position: absolute;

      left: var(--offset-x);

      border: 1px solid var(--c-gray-2);
      height: var(--preview-height);
      anchor-name: --preview-img;
      object-fit: contain;
    }

    & > label[toggle] {
      display: block;
      position: absolute;
      position-anchor: --preview-img;
      anchor-name: --preview-toggle;
      inset: anchor(inside);
      cursor: pointer;
    }

    & > aside {
      position: absolute;
      position-anchor: --preview-img;
      opacity: 0;

      display: grid;

      grid-template-columns: 1fr;
      grid-template-rows: max-content;
      
      & > * {
        width: max-content;
        grid-column: 1 / 2;
        max-width: calc(100% - 1.15 * var(--preview-height));
      }

      & h3 {
        color: var(--color);
        font-size: 1.4rem;
      }
        
      @media (orientation: landscape) {
        height: var(--preview-height);
        width: 0;
        transition: opacity var(--duration);
        padding: var(--gap);
      }

      @media (orientation: portrait) {
        left: anchor(left);
        bottom: anchor(bottom);

        background-color: inherit;
        padding: 0.2rem;

        font-size: 0.8rem;

        height: 0;
        transition: height var(--duration);
        interpolate-size: allow-keywords;

        & h3 {
          font-size: 1rem;
        }
      }
    } 
  }

  /* Header */
  & > header {
    position: absolute;
    position-anchor: --preview;
    bottom: anchor(top);
    left: anchor(left);
    width: anchor-size(width);

    display: grid;
    align-items: end;
    justify-content: start;

    z-index: -1;

    overflow-x: clip;

    @media (orientation: portrait) {
      bottom: anchor(top);
      left: anchor(left);
    }

    & > h2 {
      --delay: 0s;
      translate: 0 100%;
      transition: translate var(--duration) var(--delay);

      font-size: clamp(3rem, 4vmax, 3.5rem);
      font-weight: bold;
      line-height: 80%;
      text-transform: uppercase;

      color: var(--c-gray-1);

      position: relative;
      left: -4px;

      @media (orientation: portrait) {
        font-size: 3rem;
      }
    }
  }

  /* Body */
  & > [body] {
    grid-column: 2 / 3;

    p {
      text-align: justify;
    }

    p:not(:last-child) {
      margin-block-end: var(--gap);
    }
  }

  /* Close Button */
  & > aside {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    padding-top: 1rem;
    
    & > input[toggle] {
      position: sticky;
      top: 1rem;
      right: 1rem;
      margin-right: 1rem;
      

      display: block;
      aspect-ratio: 1;
      width: 2rem;

      justify-self: end;
      
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' stroke='%23101219' stroke-linecap='butt' stroke-width='2'%3E%3Cpath d='M 8.5,1.5 L 1.5,8.5' /%3E%3Cpath d='M 1.5,1.5 L 8.5,8.5' /%3E%3C/svg%3E");
      cursor: pointer;

      transition: scale 200ms;

      @media (orientation: portrait) {
        right: .6rem;
        margin-right: .6rem;
      }
    }
  }
  
    /* Hover */
  @media (hover: hover) {
    &:not([closing]):has(input[toggle]:hover) { 
      --grayscale: 0;

      &::after {
        transition: --opacity 200ms;
        --opacity: 0;
      }
    }
  }
  
    /* Open */
  &:has(input[toggle]:checked), &[closing] {
    --scale: 24;
    --grayscale: 0;
    --preview-height: var(--init-preview-height);

    position: fixed;    
    z-index: 5;
    inset: 0;

    height: 100vh;
    width: 100vw;
    margin-top: 0;
    padding-block-start: calc(var(--padding-start) + var(--padding-offset));

    opacity: 1;

    overflow-y: scroll;
    overscroll-behavior-y: contain;

    transition-delay: 100ms; /* Allow time for JS --osy Calc */

    [preview] img {
      transition: left 600ms 0s;
    }

    @media (orientation: portrait) {
      --open-preview-height: var(--preview-height);

      [preview] aside {
        height: auto;
      }
    }

    &::after {
      --opacity: 0;
    }    

    & header > h2 {
      --delay: 600ms;
      translate: 0 0;
    }

    & > aside > input[toggle] {
      top: calc(-1 * var(--padding-start) + 1rem);

      &:hover {
        scale: 1.2;
      }
    }

    [preview] {
      padding-left: 0;

      aside {
        opacity: 1;
      }

      label {
        display: none;
      }
    }
  }  
}

[work-example] + a {
  --delay: calc(var(--header-char-count) * 60ms + 400ms);

  translate: 0 var(--translate-y);
  opacity: 0;

  position: relative;
  top: calc(var(--offset-y) + var(--preview-height) - (2 * var(--base)) + (var(--base) * (var(--scale) - 1) * 8.5));
  left: calc(var(--offset-x) + (var(--base) * 7));
  z-index: 1;

  justify-self: start;

  height: max-content;

  color: var(--color);
  cursor: pointer;

  transition: opacity var(--duration) var(--delay), --translate-y var(--duration) var(--delay), top var(--duration), left var(--duration);

  label {
    display: inline-grid;
    padding-top: .4rem;
    height: 1.6rem;
    cursor: pointer;

    font-size: 1rem;

    grid-template-columns: 1fr;
    grid-template-rows: max-content max-content;
    column-gap: .6rem;
    align-items: center;

    span {
      max-width: calc(0.5 * var(--preview-height));
    }

    span:nth-child(2) {
      font-size: .8rem;
      color: var(--c-gray-6);

      span {
        color: var(--color);
      }
    }

    &::before, &::after {
      display: inline-block;
      content: '';
      height: calc(var(--preview-height) - 2px);
      aspect-ratio: .728;
      translate: 0 calc(-0.65rem - 50%); 
      transition: opacity var(--duration), 
                  scale var(--duration), 
                  translate var(--duration),
                  transform 400ms var(--duration);

      background-image: linear-gradient(60deg, transparent 40%, var(--color) 40.5%, var(--color) 50%, transparent 50.5%), 
                        linear-gradient(300deg, transparent 49.5%, var(--color) 50%, var(--color) 59.5%, transparent 60%);
      background-size: 100% 50.5%, 100% 50%;
      background-position: 0 0, 0 100%;
      background-repeat: no-repeat;

      scale: 50%;
      opacity: 0;

      position: absolute;

      clip-path: polygon(0 0, 69.8% 0, 69.8% 100%, 0 100%);

      @media (orientation: portrait) {
      }
    }

    &::before {
      @media (orientation: portrait) {
      }
    }

    &::after {
      @media (orientation: portrait) {
      }
    }
  }
}

@media (orientation: landscape) {
  [page].left {
    --offset-x: calc((var(--blurb-inner-width) - var(--preview-height)) / 2);

    [blurb] {
      --offset-x: 0;
    }

    [preview] aside {
      left: anchor(right);
    }

    &:has([work-example] input[toggle]:hover) {      
      [work-example], [work-example] + a {
        --offset-x: calc(((var(--blurb-inner-width) - var(--preview-height)) / 2) - 4rem);
      }
      
      [work-example] + a  {
        left: calc(var(--offset-x) + (var(--base) * 6));

        label {
          &::before, &::after {
            opacity: 1;
            scale: 1;
          }

          &::before {
            translate: 80% calc(-0.65rem - 50%);
          }

          &::after {
            translate: 80% calc(-0.65rem - 50%);
            transform: translateX(30%);
          }
        }
      }
    }
    
    [work-example]:has([toggle]:checked) [preview] {
      img {
        left: 0;
      }
    }
  }
  
  [page].right {
    --offset-x: calc(var(--particle-container-width) + 1rem + (var(--blurb-inner-width) - var(--preview-height)) / 2);

    [preview] aside {
      right: anchor(left);
      justify-content: end;

      & > * {
        text-align: right;
        align-self: start;
        justify-self: end;
      }
    }

    [work-example] + a label {
      &::before, &::after {
        rotate: 180deg;
      }
    }

    &:has([work-example] input[toggle]:hover) {      
      [work-example], [work-example] + a {
        --offset-x: calc((var(--particle-container-width) + 1rem + (var(--blurb-inner-width) - var(--preview-height)) / 2) + 4rem);
      }
      
      [work-example] + a  {
        left: calc(var(--offset-x) + (var(--base) * 6));

        label {
          &::before, &::after {
            opacity: 1;
            scale: 1;
          }

          &::before {
            translate: -100% calc(-0.65rem - 50%);
          }

          &::after {
            translate: -100% calc(-0.65rem - 50%);
            transform: translateX(30%);
          }
        }
      }
    }

    [work-example]:has([toggle]:checked) [preview] {
      img {
        left: calc(100% - 1.15 * var(--preview-height));
      }
    }
  }
}



  /*********/
 /* PAGES */
/*********/

  #home {
    --blurb-offset-y: 50svh;
    --page-height: 80svh;

    @media (orientation: portrait) {
      --blurb-offset-y: 30svh;
    }
  }

  #ux {

  }

  #web {
    
  }

  #print {
    
  }

  #branding {
    
  }

  #marketing { 
    
  }

  #analytics {
    
  }

  #about {
    --page-height: 100svh;
  }

  #contact {
    --page-height: 100svh;

    
      /* TODO: Overscroll bug? */
    @media (orientation: portrait) {
      height: 280svh;

      article {
        height: calc(80svh - 3.2rem);


        top: 20svh;
        position: sticky;
      }
    }

    & form {
      display: grid;
      grid-template-columns: 14ch 1fr;
      grid-template-rows: repeat(11, 2rem) max-content repeat(2, 3rem);

      margin-block-start: 3rem;

      opacity: var(--opacity);
      transition: --opacity var(--duration) calc(var(--header-char-count) * 60ms);

      > div {
        grid-column: 1 / 3;

        opacity: 0;

        transition: opacity 400ms;

        color: var(--color);
        text-transform: uppercase;
        font-size: .8rem;

        text-align: right;

        &::before {
          content: '!';
          display: inline-grid;
          background-color: var(--color);
          color: var(--background-color);
          width: .7rem;
          height: .7rem;
          border-radius: 50%;
          font-weight: bold;
          place-content: center;
          font-size: .6rem;
          margin-right: .4rem; 

          position: relative;
          top: -.1rem;
        }

        &.visible {
          opacity: 1;
        }
      }

      * {
        transition: --color var(--duration);
      }

      label {
        position: relative;
        z-index: 2;

        display: grid;
        background-color: var(--color);
        color: var(--background-color);
        font-size: 1.2rem;
        text-align: right;

        grid-template-rows: 1fr;
        grid-template-columns: 1fr;

        span {
          display: grid;
          align-content: center;
          justify-content: start;
          padding-inline: .4rem;
          grid-row: 1 / 2;
          grid-column: 1 / 2;

        }

        &::before {
          content: '';
          display: block;
          width: 100%;
          height: 2rem;
          background-color: var(--color);

          transform: skew(-30deg) translatex(.6rem);


          grid-column: 1 / 2;
          grid-row: 1 / 2;

          z-index: -1;
        }
      }

      input:autofill {
        -webkit-text-fill-color: #ff6600;
        box-shadow: 0 0 0 40rem var(--background-color) inset;
      }

      input::placeholder {
        color: transparent;
        user-select: none;
      }

      input:invalid:not(:placeholder-shown):not(:focus-within) {
        & + div {
          opacity: 1;
        }
      }

      input, select, textarea {
        font-family: 'Century Gothic';
        border: 1px solid var(--color);
        color: var(--color);
        padding-inline: 1.4rem .4rem;
      }

      input, select {
        align-content: center;
        align-items: center;
      }

      select {
        cursor: pointer;

        &::picker-icon {
          display: none;
        }

        &::picker(select) {
          border: none;
          background-color: transparent;
          overflow-x: clip;
        }

        option {
          background-color: var(--background-color);
          color: var(--color);
          padding-block: .2rem;
          padding-inline: .4rem;
          transition: outline 400ms;

          margin-left: 1rem;
          width: calc(100% - 1rem);

          border-inline: 1px solid var(--color);

          outline: 1px solid transparent;

          &:first-child {
            border-block-start: 1px solid var(--color);
          }
        }

        option:hover {
          outline: 1px solid var(--color);
        }

        option:checked {
          background-color: var(--color);
          color: var(--background-color);
        }

        option::checkmark {
          display: none;
        }
      }

      textarea {
        grid-column: 2 / 3;
        grid-row: 11 / span 2;
        padding-block: .4rem;
        box-sizing: border-box;

        width: 100%;
        height: 100%;
        min-height: 4rem;
        resize: vertical; 

        scrollbar-width: thin;
        scrollbar-color: var(--color) transparent;

        &::-webkit-resizer {
          border-top: 100px solid transparent;
          border-right: 100px solid var(--color);
        }
      }

      input[type='submit'] {
        transition: color, background-color, --color;
        transition-duration: var(--duration);

        background-color: var(--color);
        color: var(--background-color);
        text-align: center;

        border: 1px solid var(--color);

        grid-column: 1 / 3;
        font-size: 1.4rem;
      }
    }

    form.error {
      input[type='submit'] {
        color: var(--c-red);
        --color: var(--c-red);
        background-color: var(--background-color);
      }
    }

    form.submitted {
      input[type='submit'] {
        color: var(--color);
        background-color: var(--background-color);
      }
    }

  }



  /*************/
 /* SCROLLBAR */
/*************/

html:has(#scrollbar [thumb][control]) {
  user-select: none;
}

html:has([work-example] input[toggle]:checked) {
  #scrollbar * {
    --color: var(--c-gray-2);
  }
}

#scrollbar {
  --width: .8rem;
  --height: var(--width);
  --padding: .8rem;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: calc(var(--width) * .3) calc(var(--width) * .7) 1fr calc(var(--width) * .3) calc(var(--width) * .7);

  position: fixed;
  inset: var(--padding) var(--padding) var(--padding) auto;

  width: var(--width);
  height: calc(100dvh - (var(--padding) * 2));

  
  &:not(:has([thumb][control])) {
    transition: --offset var(--duration);
  }

  & * {
    grid-column: 1 / 2;
    transition: --color var(--duration), scale 400ms;
    border-radius: 0.1rem;
  }

  button {
    width: var(--width);
    aspect-ratio: 1;
    background-color: var(--color);
    position: relative;
    z-index: 2;
    
    transform: skewY(-30deg);
  }

  [up] {
    grid-row: 1 / 3;
  }

  [down] {
    grid-row: 4 / 6;
  }

  [thumb] {
    position: relative;
    width: var(--width);
    height: var(--height);
    background-color: var(--color);
    top: var(--offset);

    transition: height calc(.5 * var(--duration)), --color var(--duration), scale 400ms;

    transform: skewY(-30deg);
  }
  
  [track] {
    grid-row: 2 / 5;
    overflow-y: clip;

    &::before {
      content: '';
      display: block;
      background-color: var(--color);
      width: 100%;
      height: calc(var(--offset) + 1rem);
      z-index: -1;
      position: absolute;
      opacity: .6;
    }
  }
}

@media (orientation: portrait) {
  #scrollbar, #scrollbar * {
    display: none;
    height: 0;
  }
}

  /*************/
 /* PARTICLES */
/*************/

#particle-container {
  --color: var(--c-orange);
  --stroke-color: var(--color);
  --stroke-width: 1px;

  container-name: particle-container;
  container-type: size;

  position: fixed;
  z-index: -1;
  
  height: 80svh;
  top: var(--margin-top);
  left: var(--margin-left);
  
  transition-duration: var(--duration);

  @media (orientation: landscape) {
    aspect-ratio: 1.4;
  }

  @media (orientation: portrait) {
    --margin-top: 3.2rem;
    --margin-left: 10svh;
    --margin-right: 10svh;
    width: calc(100% - 20svh);
  }
  
  & > svg {
    fill: var(--color);
  }
}

[particle] {
  --translate: calc(var(--offset-x, 0) + var(--translate-x, 0)) calc(var(--offset-y, 0) + var(--translate-y, 0));
  --scale: 1;
  
  clip-path: path('M 50,0 L 50,0 Q 50,0 50,0 Q 100,86.6 100,86.6 L 0,86.6 Q 50,0 50,0 Q 50,0 50,0 Z');
  
  position: absolute;

  rotate: var(--rotate, 0deg);
  translate: var(--translate, 0 0);
  scale: var(--scale-x, var(--scale)) var(--scale-y, var(--scale));
  background-color: var(--color);
  
  transition-timing-function: auto;
  transition-duration: var(--duration);

  transform-box: fill-box;
  transform-origin: center;
}