@import url('https://unpkg.com/normalize.css') layer(normalize);
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Manrope:700|Manrope:400');

@layer normalize, base, variables, layout, demo, positioning, anchoring, boxes, tweaks, images, debug, team-masking, team-demo;

/* Variables layer for all theme colors and properties */
@layer variables {
  :root {
    /* Hero section variables */
    --text: hsl(0, 0%, 99%);
    --textDim: hsl(0, 0%, 60%);
    --background: hsl(0, 0%, 7%);

    --primary: #FF5722;       /* orange-400 */
    --primaryBg: #1a0602;      /* dark translucent bg, ~1% of orange-400 */
    --primaryHi: rgba(255, 87, 34, 0.25);  /* highlight */
    --primaryFg: #FFCCBC;      /* light orange foreground */

    --secondary: #FF3D00;      /* orange-600 */
    --secondaryFg: #FFAB91;    /* lighter orange foreground */
    --secondaryBg: rgba(255, 61, 0, 0.05);
    --secondaryHi: rgba(255, 61, 0, 0.5);

    --accent: #FF4500;         /* orange-500 */
    --accentBg: rgba(255, 69, 0, 0.01);
    --accentHi: rgba(255, 69, 0, 0.25);

    /* Fluid section variables */
    --shadow-color: hsl(0 0% 15% / 0.34);

    /* Animation variables */
    --elastic-out: linear(
      0 0%,
      0.6832 7.89%,
      0.9171 11.07%,
      1.0251 12.99%,
      1.1058 14.9%,
      1.1619 16.86%,
      1.1945 18.91%,
      1.2024 20.02%,
      1.2043 21.18%,
      1.1907 23.72%,
      1.1598 26.27%,
      1.0604 32.59%,
      1.0172 35.84%,
      0.9839 39.49%,
      0.967 43.26%,
      0.9639 45.77%,
      0.9661 48.59%,
      0.9963 60.54%,
      1.0054 67.42%,
      1 100%
    );
    
    --elastic: linear(
      0 0%,
      0.2178 2.1%,
      1.1144 8.49%,
      1.2959 10.7%,
      1.3463 11.81%,
      1.3705 12.94%,
      1.3726 13.7%,
      1.3643 14.48%,
      1.3151 16.2%,
      1.0317 21.81%,
      0.941 24.01%,
      0.8912 25.91%,
      0.8694 27.84%,
      0.8698 29.21%,
      0.8824 30.71%,
      1.0122 38.33%,
      1.0357 40.52%,
      1.046 42.71%,
      1.0416 45.7%,
      0.9961 53.26%,
      0.9839 57.54%,
      0.9853 60.71%,
      1.0012 68.14%,
      1.0056 72.24%,
      0.9981 86.66%,
      1 100%
    );
    
    /* Font variables */
    --font-size-min: 16;
    --font-size-max: 20;
    --font-ratio-min: 1.2;
    --font-ratio-max: 1.33;
    --font-width-min: 375;
    --font-width-max: 1500;

    --footer-m: 4rem;
  }
}

/* Base layer for fundamental styling */
@layer base {
  html {
    color-scheme: dark;
  }

  [data-theme='light'] {
    color-scheme: light only;
    --shadow-color: hsl(0 0% 58% / 0.34);
  }

  [data-theme='dark'] {
    color-scheme: dark only;
    --shadow-color: hsl(0 0% 15% / 0.34);
  }

  /* Fluid typography calculation */
  :where(.fluid) {
    --fluid-min: calc(
      var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
    );
    --fluid-max: calc(
      var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
    );
    --fluid-preferred: calc(
      (var(--fluid-max) - var(--fluid-min)) /
        (var(--font-width-max) - var(--font-width-min))
    );
    --fluid-type: clamp(
      (var(--fluid-min) / 16) * 1rem,
      ((var(--fluid-min) / 16) * 1rem) -
        (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
        (var(--fluid-preferred) * var(--variable-unit, 100vi)),
      (var(--fluid-max) / 16) * 1rem
    );
    font-size: var(--fluid-type);
  }

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

  body {
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 400;
    background-color: var(--background);
    color: var(--text);
    padding: 0 10%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Utilities */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

/* Layout layer for structure */
@layer layout {
  .page-container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .hero-container {
    position: relative;
    width: 100%;
    height: 90vh;
    margin-bottom: 10vh;
    overflow: hidden;
  }

  .fluid-section {
    position: relative;
    width: 100%;
    height: 100vh;
    margin-top: 10vh;
    padding: 4rem 0;
    overflow: hidden;
  }

  /* Navigation */
  nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    color: var(--textDim);
    width: 100%;
    box-sizing: border-box;
    z-index: 9999;
  }

  .menu:hover {
    color: var(--text);
    cursor: pointer;
  }

  .sitename {
    font-weight: bold;
  }
}

/* Hero section specific styling */
@layer hero {
  .grid {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
  }

  .grid-svg {
    height: 80%;
    width: 80%;
    position: relative;
    z-index: 1;
  }

  .blur {
    height: 12rem;
    width: 12rem;
    background-color: var(--primary);
    filter: blur(100px);
    border-radius: 100px;
    z-index: 0;
    position: absolute;
  }

  .title {
    font-size: 10rem;
    font-weight: 700;
    letter-spacing: -0.8rem;
    display: flex;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    position: absolute;
    justify-content: center;
    align-self: center;
    height: 100%;
    z-index: 1000;
  }
  
  .title > p {
    margin: 0;
    line-height: 10rem;
    width: auto;
  }

  .title > p:nth-child(1){
    align-self: flex-start;
  }

  .title > p:nth-child(2){
    color: var(--primary);
    align-self: flex-end;
  }

  .title > p:nth-child(3){
    align-self: flex-end;
  }

  .material-icons {
    display: none;
    fill: var(--text);
  }

  .button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    height: 50px;
    width: 160px;
    z-index: 9999;
  }

  .button button {
    height: 50px;
    width: 160px;
    clip-path: path("M 0 25 C 0 -5, -5 0, 80 0 S 160 -5, 160 25, 165 50 80 50, 0 55, 0 25");
    border: none;
    border-radius: 13px;
    background-color: var(--primaryBg);
    box-shadow: 0px -3px 15px 0px var(--primaryHi) inset;
    color: var(--primaryFg);
    font-family: "Manrope";
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    transform: translateY(0px);
    transition: all 0.2s ease;
  }

  span {
    width: 100px;
    height: 60px;
    background-color: var(--primaryHi);
    border-radius: 100%;
    filter: blur(20px);
    position: absolute;
    bottom: -50%;
    transition: all 0.2s ease;
  }

  .button:hover > span {
    opacity: 60%;
  }

  .button:hover > button {
    transform: translateY(5px);
  }

  .button.first {
    top: 12%;
    right: 20%;
  }

  .button.sec {
    bottom: 13%;
    right: 11%;
  }

  .button.sec > button {
    background-color: var(--accentBg);
    box-shadow: 0px -3px 15px 0px var(--accentHi) inset;
    color: var(--accentFg);
  }

  .button.sec > span {
    background-color: var(--accentHi);
  }

  .button.third {
    bottom: 25%;
    left: 15%;
  }

  .button.third > button {
    background-color: var(--secondaryBg);
    box-shadow: 0px -3px 15px 0px var(--secondary) inset;
    color: var(--secondaryFg);
  }

  .button.third > span {
    background-color: var(--secondaryHi);
  }

  .top-right {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    opacity: 50%;
  }

  .bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    opacity: 50%;
  }
}

/* Fluid section styling */
@layer demo {
    .fluid-section {
      --font-level: 4.5;
      font-family: 'Manrope', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      text-align: center;
      line-height: 1;
      background-color: var(--background);
    }
    
    .fluid-section h2 {
      font-size: 0.5em;
      margin-bottom: 1em;
      color: var(--text);
    }
    
    .container {
      position: relative;
    }
    
    .holding {
      pointer-events: none;
      width: 100%;
      height: 1lh;
      position: absolute;
      top: 0lh;
    }
  
    .scope {
      width: 100%;
      height: 100%;
      position: relative;
    }
  
    .product-list {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      list-style-type: none;
      padding: 0;
      margin: 0;
      text-align: center;
    }
    
    .product-item {
      display: inline-block;
    }
  
    .product-list:has(.product-item:is(:hover, :focus-within)) + .holding {
      opacity: 1;
    }
  
    .product-item:is(:hover, :focus-within) .product-link {
      opacity: 1;
      scale: 1 1.15;
    }
    
    .product-link {
      display: inline-block;
      color: inherit;
      outline-width: 0;
      outline-color: #0000;
      text-decoration: none;
      opacity: 0.3;
      transition-property: opacity, scale;
      transition-duration: 0.2s, 0.875s;
      transition-timing-function: ease, var(--elastic);
    }
}
  

/* Images styling */
@layer images {
  .box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.2em;
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0.25s 0s;
    mix-blend-mode: plus-lighter;
    box-shadow: 0px 0.2px 0.2px var(--shadow-color),
      0.1px 1.4px 1.6px -0.4px var(--shadow-color),
      0.1px 2.7px 3px -0.7px var(--shadow-color),
      0.2px 4.4px 5px -1.1px var(--shadow-color),
      0.3px 7px 7.9px -1.4px var(--shadow-color),
      0.4px 10.9px 12.3px -1.8px var(--shadow-color),
      0.6px 16.6px 18.7px -2.1px var(--shadow-color),
      0.9px 24.4px 27.5px -2.5px var(--shadow-color);
  }
  
  .box {
    display: grid;
    isolation: isolate;
  }

  .container:has(li:nth-of-type(1):hover) .box img:nth-of-type(1),
  .container:has(li:nth-of-type(2):hover) .box img:nth-of-type(2),
  .container:has(li:nth-of-type(3):hover) .box img:nth-of-type(3),
  .container:has(li:nth-of-type(4):hover) .box img:nth-of-type(4),
  .container:has(li:nth-of-type(5):hover) .box img:nth-of-type(5) {
    opacity: var(--opacity, 1);
    z-index: 2;
    transition-delay: 0s;
  }
}

/* Tweaks for animations and transformations */
@layer tweaks {
  .box {
    transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%))
      rotate(calc(var(--r) * 1deg))
      translate(
        calc(var(--px, 0) * var(--prx, 0%)),
        calc(var(--py, 0) * var(--pry, 0%))
      );
    transition: translate 0.2s, scale 0.2s, transform 0.8s var(--elastic-out);
  }
  
  .holder:nth-of-type(1) .box {
    --prx: -80%;
    --pry: 15%;
  }
  
  .holder:nth-of-type(2) .box {
    --prx: 25%;
    --pry: -35%;
  }
  
  .holder:nth-of-type(3) .box {
    --prx: 30%;
    --pry: 35%;
  }
}

/* Box positioning */
@layer boxes {
  .holder {
    width: 2lh;
    aspect-ratio: 1;
    position: absolute;
    left: 50%;
    top: 50%;
  }

  .box {
    width: 100%;
    height: 100%;
    scale: 0;
  }

  [data-use-anchor='false'] {
    .holder:nth-of-type(1) {
      --offset-x: calc(-150% - (var(--start-width) * 0.5px));
      translate: var(--offset-x) -50%;
    }

    .holder:nth-of-type(2) {
      --offset-x: calc(50% + (var(--start-width) * 0.5px));
      translate: var(--offset-x) -50%;
    }

    .holder:nth-of-type(3) {
      --offset-x: -50%;
      bottom: 100%;
      top: unset;
      translate: var(--offset-x) -50%;
    }

    .holder:nth-of-type(1) .box {
      --offset-x: calc((var(--active-offset) * -0.5px));
      translate: var(--offset-x) 0%;
    }

    .holder:nth-of-type(2) .box {
      --offset-x: calc(0% + (var(--active-offset) * 0.5px));
      translate: var(--offset-x) 0%;
    }

    .holder:nth-of-type(3) .box {
      --offset-x: 0%;
      translate: var(--offset-x) 0%;
    }
  }

  .product-list:has(.product-item:is(:hover, :focus-within)) + .holding .box {
    scale: 1;
  }

  @supports (anchor-name: --active) {
    [data-use-anchor='true'] {
      .holder:nth-of-type(1) {
        left: unset;
        right: 100%;
        top: 50%;
        translate: -50% -50%;
      }
      
      .holder:nth-of-type(2) {
        left: 100%;
        top: 50%;
        translate: 50% -50%;
      }
      
      .holder:nth-of-type(3) {
        left: 50%;
        bottom: 100%;
        top: unset;
        translate: -50% -50%;
      }
    }
  }
}

/* Anchoring and positioning for fluid section */
@layer anchoring {
  @supports (anchor-name: --active) {
    [data-use-anchor='true'] {
      /* We do this in JavaScript land so we get persistence */
      /* li:is(:hover, :focus-within) {
        anchor-name: --active;
      } */
      .holding {
        position-anchor: --active;
        top: anchor(top);
        left: 50%;
        translate: -50% 0;
        width: anchor-size(width);
        transition: top 0.2s, width 0.2s;
      }
    }
  }
}

@layer positioning {
  [data-use-anchor='false'] {
    .holding {
      left: 50%;
      translate: -50% 0;
      top: calc(var(--start-index) * 1lh);
      transition: translate var(--translate-speed);
    }
    
    .scope {
      translate: 0% calc(var(--active-index, 0) * 1lh);
      transition: width 0.2s, translate var(--translate-speed);
    }
  }
}

@layer team-masking {
    .team .container {
      /* this is the config */
      --size: 70;
      --border: 8;
      --column: 40;
      --movement: 0.72;
      --transition: 0.18;
      --ease: ease-out;
    }
  
    [data-ltr='true'] .team .team-list .team-item:not(:first-of-type) .avatar-holder {
        --rad-x: calc(
          var(--circle) - (var(--column) * 1px) - (var(--border) * 1px)
        );
    }
  
    [data-ltr='false'] .team .team-list .team-item:not(:last-of-type) .avatar-holder {
        --rad-x: calc(
          var(--circle) + (var(--column) * 1px) - (var(--border) * 1px)
        );
    }
  
    [data-ltr='true'] .team .team-list .team-item:not(:first-of-type) .avatar-holder,
    [data-ltr='false'] .team .team-list .team-item:not(:last-of-type) .avatar-holder {
      --circle: calc(((var(--border) * 2px) + (var(--size) * 1px)) * 0.5);
      mask-image: radial-gradient(
        var(--circle) var(--circle) at var(--rad-x, 0) 50%,
        #0000 calc(var(--circle) - 0.5px),
        #fff var(--circle)
      );
      mask-size: 100% 100%;
      mask-position: 0 calc(var(--size) * 1px);
      transition: mask-position calc(var(--transition) * 1s) var(--ease);
    }
  
    [data-ltr='true'] .team .team-list .team-item:hover + .team-item .avatar-holder,
    [data-ltr='false'] .team .team-list .team-item:has(+ .team-item:hover) .avatar-holder {
      mask-position: 0 0;
      /* by default it's at size * 1px so you are going to size * movement */
      mask-position: 0 calc(var(--size) * ((1 - var(--movement)) * 1px));
    }
  
    .team .team-list {
      .team-item {
        position: relative;
        pointer-events: none;
  
        &::before {
          content: '';
          width: 100%;
          aspect-ratio: 1;
          bottom: 0;
          position: absolute;
          pointer-events: all;
        }
  
        & .avatar {
          pointer-events: all;
          transition: translate calc(var(--transition) * 1s) var(--ease);
        }
  
        /* when it comes to translation and mask position */
        /* movement equates to either 100% or .1px for the position */
        &:hover .avatar {
          translate: 0 calc(var(--movement) * -100%);
        }
      }
    }
}

@layer team-demo {
    .team .team-list.items {
      align-items: center;
      display: flex;
      gap: calc(var(--size) * 0.5px);
      height: calc((var(--size) + (var(--size) * 0.5)) * 1px);
      padding-inline: calc(var(--size) * 0.25px);
      border-radius: calc(var(--size) * 2px);
      position: relative;
    }
  
    [data-ringed='true'] {
      .team li {
        &:hover .name span {
          translate: 0 0;
        }
        .name {
          width: calc(var(--size) * 1px);
          aspect-ratio: 1;
          border-radius: 50%;
          bottom: 0;
          translate: -50% calc(var(--movement) * -100%);
  
          span {
            offset-path: border-box;
            offset-distance: calc((var(--offset) + var(--i)) * 1ch);
            offset-anchor: 50% 150%;
            position: absolute;
            transition: translate calc(var(--transition) * 1s) var(--ease);
            translate: 0 100%;
          }
        }
      }
    }
    
    [data-ringed='false'] {
      .team li {
        &:hover .name {
          translate: -50% -50%;
        }
  
        .name {
          bottom: calc((var(--size) * (1 + var(--movement))) * 1px);
          translate: -50% 50%;
          span {
            translate: 0 -150%;
          }
        }
      }
    }
  
    .team .team-list.items {
      align-content: end;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: calc(var(--column) * 1px);
      height: calc(var(--column) * 1px);
      list-style-type: none;
      margin: 0;
      padding: 0;
      translate: calc((var(--size) - var(--column)) * 0.5px) 0;
  
      .team-item {
        align-content: end;
        aspect-ratio: 1 / 3;
        display: grid;
        position: relative;
        width: calc(var(--size) * 1px);
        translate:
          /* 0 */ calc((var(--size) - var(--column)) * -0.5px)
          calc((var(--size) - var(--column)) * 0.5px);
  
        .avatar-holder {
          position: absolute;
          inset: 0;
          align-content: end;
          display: grid;
        }
  
        &:nth-of-type(1) img {
          filter: contrast(1.2);
        }
  
        &:hover .name {
          filter: blur(0px);
          opacity: 1;
        }
  
        .name {
          transition-property: filter, opacity, translate;
          transition-timing-function: var(--ease);
          transition-duration: calc(var(--transition) * 1s);
          text-align: center;
          text-transform: uppercase;
          font-weight: 400;
          font-family: monospace;
          position: absolute;
          left: 50%;
          filter: blur(4px);
          opacity: 0;
        }
  
        .avatar {
          display: inline-block;
          width: 100%;
          aspect-ratio: 1;
          border-radius: 50%;
          position: relative;
          overflow: hidden;
  
          img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: color-mix(in hsl, canvas, canvasText);
          }
        }
      }
    }
}

/* Debug layer - only active when data-debug='true' */
@layer debug {
  [data-debug='true'] {
    img {
      --opacity: 0.2;
    }
    
    .holder {
      outline: 0.1em dashed hsl(10 100% 50% / 0.2);
      outline-offset: 0.1em;
    }
    
    .box {
      outline: dashed red 0.1em;
    }
    
    .holding {
      outline: hsl(10 100% 50% / 0.5) dashed 0.1em;
      outline-offset: 0.1em;
    }
    
    .scope {
      outline: red dashed 0.1em;
      outline-offset: 0em;
    }
  }
}
  
@media screen and (max-width: 1000px) {
    :root {
      --footer-m: 3rem;
    }
}
  
@media screen and (max-width: 700px) {
    footer {
      flex-direction: column;
      padding: 5rem 20vw;
    }
    .col {
      width: 100%;
    }
}

/* Media queries for responsiveness */
@media screen and (max-width: 1000px) {
    .title {
        font-size: 7rem;
        }
        
    .title > p {
        line-height: 5rem;
        letter-spacing: -0.3rem;
    }
    
    nav > :not(.sitename, .material-icons) {
        display: none;
    }
    
    nav {
        justify-content: space-between;
    }
    
    .material-icons {
        display: flex;
        align-items: center;
    }
}

@media screen and (max-width: 630px) {
    body {
        padding: 0;
    }

    nav {
        padding: 1rem;
    }

    .title {
        font-size: 4rem;
    }
}