/*  ==========================================================
    BLOCKS
    ========================================================== */

/**
 * The block layer is where styles for specific components such as cards, avatars, and buttons are set up.
 * An example of a block is styles created for a team card element.
 *
 * # What should a block do?
 *   - Extend the work already done by the global CSS, composition and utility layers
 *   - Apply a collection of design tokens within a concise group
 *   - Create a namespace or specificity boost to control a specific context
 *
 * # What should NOT a block do
 *   - Grow to anything larger than a handful of CSS rules (max 80-100 lines)
 *   - Solve more than one contextual problem. For example: styling a card and a button in one file
 */
 
html {
  background-color: oklch(var(--color-dark));
  background: radial-gradient(
    circle at var(--radial-gradient-center, 15vh 20vh),
    oklch(var(--color-dark-gray)),
    oklch(from oklch(var(--color-dark)) 1% c h)
  ) fixed no-repeat;
  color: oklch(var(--color-light));
  --bg-clr: oklch(var(--color-dark-gray));
}
 
/* ? Typography */
.eyebrow {
  position: relative;
  color: oklch(var(--color-primary));

  & + * {
    --flow-space: 0.1em;
  }
}

/* ? Btns and links style */
@property --__glow-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.btn {
  --__conic-gradient: from var(--__glow-angle, 0deg), var(--glow-gradient);
  --neumorph-shadow-size: 4px;
  --neumorph-shadow-blur: 8px;

  position: relative;
  display: block;
  max-inline-size: fit-content;
  padding: var(--space-s) var(--space-m);
  color: oklch(var(--color-light));
  text-decoration: none;
  font-variant: small-caps;
  background:
    linear-gradient(
        var(--bg-clr, oklch(var(--color-dark))),
        var(--bg-clr, oklch(var(--color-dark)))
      )
      padding-box,
    conic-gradient(var(--__conic-gradient)) border-box;
  border: 2px solid transparent;
  border-radius: var(--border-radius);
  box-shadow: var(--neumorph-shadow-up);
  cursor: pointer;
  isolation: isolate;
  transition-property: box-shadow, background-color;
  transition-duration: var(--anim-medium);
  animation: border-rotation var(--__timing, 7500ms) linear infinite;
  z-index: 2;

  --flow-space: 1.75em;

  &:hover {
    background-color: oklch(var(--color-primary));
    box-shadow: 0 0 20px 5px oklch(var(--color-primary) / 0.5);
  }

  &::before,
  &::after {
    content: "";
    position: absolute;
    border-radius: inherit;
  }

  &::before {
    background: var(--bg-clr, oklch(var(--color-dark)));
    inset: var(--__glow-thickness, 0.25em);
    filter: blur(var(--__glow-spread, 0.25em));
    z-index: -1;
  }

  &::after {
    inset: calc(-1 * var(--__glow-thickness, 0.25em));
    background: conic-gradient(var(--__conic-gradient));
    filter: blur(var(--__glow-spread, 0.25em));
    opacity: var(--__glow-intensity, 0.75);
    z-index: -2;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes border-rotation {
    100% {
      --__glow-angle: 360deg;
    }
  }
}

.btn.secondary {
    background: oklch(var(--color-primary));
    color: oklch(var(--color-dark));
    font-weight: var(--fw-bold);
    border: 2px solid oklch(var(--color-dark-gray));
    box-shadow: var(--shadow-primary-around);
    will-change: background-color, color;
    transition: background-color, color;
    transition-duration: var(--anim-fast);
    
    &::before, &::after {
        content: unset !important;
    }
    
    &:hover {
        background: transparent;
        color: oklch(var(--color-light));
    }
}

li:has(.simple-btn) {
  max-inline-size: unset;
}

.simple-btn {
  --__gap: var(--space-m-l);

  max-inline-size: unset;
  min-inline-size: 100% !important;
  display: flex;
  align-items: center;
  gap: var(--__gap, 2em);
  padding: 1em;
  background: oklch(var(--color-dark-gray));
  color: oklch(var(--color-light));
  border: 1px solid oklch(var(--color-medium-gray));
  border-radius: var(--border-radius);

  &:hover i {
    box-shadow:
      0 0 5px oklch(var(--color-primary) / 0.75),
      0 0 10px oklch(var(--color-primary) / 0.75),
      0 0 15px oklch(var(--color-primary) / 0.75),
      0 0 20px oklch(var(--color-primary) / 0.75);
  }

  & i {
    position: relative;
    min-inline-size: var(--space-xl);
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25em;
    color: oklch(var(--color-primary)) !important;
    font-size: var(--step-2);
    border-radius: 100vw;
    box-shadow: var(--neumorph-shadow-up);
    transition: box-shadow var(--anim-fast);

    &::after {
      content: "";
      position: absolute;
      inset-block: 0;
      right: calc(-1 * (var(--__gap, 2em) / 2));
      inline-size: 1px;
      background: oklch(var(--color-light-gray) / 0.25);
    }
  }
}

@property --__btn-radius {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

li:has(.article-btn) {
  max-inline-size: unset !important;
}

li:last-of-type .article-btn {
  text-align: end;
  justify-content: flex-end;
}

.article-btn {
  position: relative;
  max-inline-size: unset !important;
  padding: var(--space-s);
  display: flex;
  align-items: center;
  gap: 1em;
  color: oklch(var(--color-primary));
  background-color: oklch(var(--color-dark));
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  z-index: 2;

  &:focus-visible {
    outline-offset: -0.5ch;
  }

  --flow-space: 3em;

  & i {
    font-size: var(--step-5);
  }

  &.inactive {
    display: none;
  }
}

#navNext {
    justify-content: flex-end;
    text-align: end;
}

.article-btn::after {
  --__radius: 65%;

  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--__btn-x, 50%) var(--__btn-y, 50%),
    oklch(var(--color-dark-gray)) 0%,
    transparent calc(var(--__radius) - 2%)
  );
  clip-path: circle(
    var(--__btn-radius, 0%) at var(--__btn-x, 50%) var(--__btn-y, 50%)
  );
  opacity: 0;
  transition:
    --__btn-radius var(--anim-medium),
    opacity var(--anim-fast);
  z-index: -1;
}

.article-btn:hover::after {
  --__btn-radius: var(--__radius, 50%);
  opacity: 1;
}

.pager li {
  flex-grow: 1;

  &.numbers {
    flex-grow: 0.5;
    
    & > * {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  & .disabled {
    padding: var(--space-s);
    background: oklch(var(--color-dark-gray));
    color: oklch(var(--color-light-gray));
    user-select: none;
  }
}

.neumorphism-up {
  --neumorph-shadow-size: 4px;
  --neumorph-shadow-blur: 8px;
  --neumorph-shadow-up:
    var(--neumorph-shadow-size, 4px) var(--neumorph-shadow-size, 4px) var(--neumorph-shadow-blur, 8px) oklch(var(--color-darkest) / 0.5),
	calc(-1 * var(--neumorph-shadow-size, 4px)) calc(-1 * var(--neumorph-shadow-size, 4px)) var(--neumorph-shadow-blur, 8px) oklch(var(--color-light) / 0.1);

  box-shadow:
    var(--neumorph-shadow-size, 4px) var(--neumorph-shadow-size, 4px) var(--neumorph-shadow-blur, 8px) oklch(var(--color-darkest) / 0.5),
	calc(-1 * var(--neumorph-shadow-size, 4px)) calc(-1 * var(--neumorph-shadow-size, 4px)) var(--neumorph-shadow-blur, 8px) oklch(var(--color-light) / 0.1);
}

.neumorphism-down {
  --neumorph-shadow-size: 4px;
  --neumorph-shadow-blur: 8px;
  --neumorph-shadow-down:
	inset var(--neumorph-shadow-size, 4px) var(--neumorph-shadow-size, 4px) var(--neumorph-shadow-blur, 8px) oklch(var(--color-darkest) / 0.5),
	inset calc(-1 * var(--neumorph-shadow-size, 4px)) calc(-1 * var(--neumorph-shadow-size, 4px)) var(--neumorph-shadow-blur, 8px) oklch(var(--color-light) / 0.1);

  box-shadow:
	inset var(--neumorph-shadow-size, 4px) var(--neumorph-shadow-size, 4px) var(--neumorph-shadow-blur, 8px) oklch(var(--color-darkest) / 0.5),
	inset calc(-1 * var(--neumorph-shadow-size, 4px)) calc(-1 * var(--neumorph-shadow-size, 4px)) var(--neumorph-shadow-blur, 8px) oklch(var(--color-light) / 0.1);
}

.neumorphism-up-down {
  --neumorph-shadow-size: 4px;
  --neumorph-shadow-blur: 8px;
  --neumorph-shadow-up-down:
    var(--neumorph-shadow-size, 4px) var(--neumorph-shadow-size, 4px) var(--neumorph-shadow-blur, 8px) oklch(var(--color-darkest) / 0.5),
	calc(-1 * var(--neumorph-shadow-size, 4px)) calc(-1 * var(--neumorph-shadow-size, 4px)) var(--neumorph-shadow-blur, 8px) oklch(var(--color-light) / 0.1),
	inset var(--neumorph-shadow-size, 4px) var(--neumorph-shadow-size, 4px) var(--neumorph-shadow-blur, 8px) oklch(var(--color-darkest) / 0.5),
	inset calc(-1 * var(--neumorph-shadow-size, 4px)) calc(-1 * var(--neumorph-shadow-size, 4px)) var(--neumorph-shadow-blur, 8px) oklch(var(--color-light) / 0.1);

  box-shadow:
    var(--neumorph-shadow-size, 4px) var(--neumorph-shadow-size, 4px) var(--neumorph-shadow-blur, 8px) oklch(var(--color-darkest) / 0.5),
	calc(-1 * var(--neumorph-shadow-size, 4px)) calc(-1 * var(--neumorph-shadow-size, 4px)) var(--neumorph-shadow-blur, 8px) oklch(var(--color-light) / 0.1),
	inset var(--neumorph-shadow-size, 4px) var(--neumorph-shadow-size, 4px) var(--neumorph-shadow-blur, 8px) oklch(var(--color-darkest) / 0.5),
	inset calc(-1 * var(--neumorph-shadow-size, 4px)) calc(-1 * var(--neumorph-shadow-size, 4px)) var(--neumorph-shadow-blur, 8px) oklch(var(--color-light) / 0.1);
}

.ico-btn i {
  inline-size: 2em;
  aspect-ratio: 1;
  padding: 0.5em;
  background: oklch(var(--color-primary));
  border-radius: 50%;
  color: oklch(var(--color-light));
  font-size: var(--step-2);
}

.has-bg-img {
  position: relative;
}

.has-bg-img.opaque::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: oklch(var(--color-light) / 0.25);
  z-index: -1;
}

.has-bg-img.more-opaque::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: oklch(var(--color-light) / 0.5);
  z-index: -1;
}

.has-bg-img.very-opaque::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: oklch(var(--color-light) / 0.75);
  z-index: -1;
}

.has-bg-img.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: oklch(var(--color-dark) / 0.25);
  z-index: -1;
}

.has-bg-img.dark.more-opaque::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: oklch(var(--color-dark) / 0.5);
  z-index: -1;
}

.has-bg-img.dark.very-opaque::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: oklch(var(--color-dark) / 0.75);
  z-index: -1;
}

.is-bg-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
}

.fixed-img {
  inline-size: 100dvi;
  block-size: 100dvb;
  background: fixed center/cover no-repeat;
  z-index: -3;
}

.meta dt {
  color: oklch(var(--color-light-gray));
  font-size: smaller;
}

.header {
  position: fixed;
  inset: 0;
  bottom: unset;
  background: oklch(var(--color-dark));
  z-index: 10;
  isolation: isolate;

  --flex-justify-content: space-between;

  & .btn {
    /* ! Remove useless vertical spacing */
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    /* ? Short version:  */
    text-box: trim-both cap alphabetic;
  }
}

/* ? Header menu */
.header-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25em;
}

.menu-container-underlay {
  position: fixed;
  inset: 0;
  display: none;
  background: oklch(var(--color-light) / 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
}

.main-nav {
  gap: var(--space-xl-m);
}

.menu-container {
  position: fixed;
  inset: 0;
  display: none;
  padding-block: var(--space-xl-4xl) !important;
  background-color: oklch(var(--color-dark-gray));
  overflow: auto;
  translate: 100% 0;
  /* ! usefull on Landscape or Ultra Wide */
  z-index: -1;

  --flex-gap: var(--space-2xl);

  & .menu {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    gap: var(--inverse-clamp);

    & a {
      inline-size: 100%;
      block-size: 100%;
      font-size: var(--step-2);
      font-size: var(--step-ultra) !important;
      font-weight: var(--fw-black);
    }
  }
}

@media screen and (min-width: 1240px) {
  .menu-container {
    box-shadow: 0 -25px 75px oklch(var(--color-dark) / 0.25);
    left: 50%;

    --flex-justify-content: flex-start !important;

    & .menu {
      align-items: flex-start;
    }
  }
}

/* Menu effect */
.menu-container ul {
  @media (hover) {
    & > li:not(:visited) {
      scale: 1 !important;
      opacity: 1 !important;
      transition:
        scale var(--anim-bounce),
        opacity var(--anim-fast);
    }

    &:has(> li:hover) > li:not(:hover),
    &:has(> li:focus-within) > li:not(:focus-within) {
      scale: 0.75 !important;
      opacity: 0.25 !important;
    }
  }
}

.language-switcher {
  padding: 0.25em;
  display: grid;
  grid-template-columns: 2em 2em;
  gap: 0.5em;
  background: oklch(var(--color-dark));
  background: linear-gradient(
    145deg,
    oklch(var(--color-dark)),
    oklch(var(--color-dark-gray))
  );
  border: 0.5px solid oklch(var(--color-dark));
  border-radius: 999em;
  box-shadow: var(--neumorph-shadow-up-down);
  z-index: 15;

  & > li {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    text-align: center;
    border-radius: 100vw;
  }

  & a {
    text-decoration: none;
  }

  & .active {
    background: oklch(var(--color-dark-gray));
    background: linear-gradient(
      145deg,
      oklch(var(--color-dark-gray)),
      oklch(var(--color-dark))
    );
    color: oklch(var(--color-light)) !important;
    box-shadow: var(--neumorph-shadow-up);
    will-change: box-shadow;
    transition: box-shadow var(--anim-fast);

    &:hover {
      box-shadow: 0 0 10px oklch(var(--color-primary));
    }
  }
}

.header-logo img {
  inline-size: 80px;
  inline-size: clamp(80px, 15vi, 160px);
}

/* ? Hamburger menu */
.hamburger-menu {
  padding: 0.75em;
  align-self: stretch;
  background: transparent;
}

.header-logo,
.hamburger-menu {
  position: relative;
  width: fit-content;
  cursor: pointer;
  z-index: 15;
}

.hamburger-menu span {
  --inline-size: 2rem;
  --block-size: 2px;
  --space: 6px;

  display: block;
  inline-size: var(--inline-size);
  block-size: var(--block-size);
  background: oklch(var(--color-primary));
  border-radius: 2px;
  transition: all var(--anim-fast);
}

.hamburger-menu > span + span {
  margin-block-start: var(--space);
}

.hamburger-menu span:nth-of-type(2) {
  inline-size: calc(var(--inline-size) * 0.75);
}

.hamburger-menu span:nth-of-type(3) {
  inline-size: calc(var(--inline-size) * 0.5);
}

/** Hamburger animation */
.hamburger-menu.active span {
  inline-size: var(--inline-size);
}

.hamburger-menu.active span:first-of-type {
  translate: 0 calc(var(--space) + var(--block-size));
  rotate: 45deg;
}

.hamburger-menu.active span:nth-of-type(2) {
  opacity: 0;
}

.hamburger-menu.active span:last-of-type {
  translate: 0 calc(-1 * (var(--space) + var(--block-size)));
  rotate: -45deg;
}

.hamburger-menu.active span:first-of-type {
  translate: 0 calc(var(--space) + var(--block-size));
}

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: var(--lines, 2);
  -webkit-line-clamp: var(--lines, 2);
  overflow: hidden;
}

.profile-img {
  justify-self: end;
  align-self: flex-start;
  inline-size: min(600px, 100%);

  & img {
    aspect-ratio: 1;
  }
}

/* ? Box & cards */
.boxed {
  padding-inline: var(--biggest-element-font-size, var(--step-0));
  padding-block-start: calc(
    var(--biggest-element-font-size, var(--step-0)) / var(--heading-line-height)
  );
  padding-block-end: var(--biggest-element-font-size, var(--step-0));
  border-radius: calc(
    var(--biggest-element-font-size, var(--step-0)) / var(--heading-line-height)
  );
}

@property --gradient-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@property --gradient-stop {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 1%;
}

.card {
  position: relative;
  background-color: oklch(var(--color-dark));
  background-image: radial-gradient(
    circle at 0% 0%,
    oklch(var(--gradient-color, var(--color-primary)) / var(--gradient-opacity))
      var(--gradient-stop),
    var(--bg-clr) 45%
  );
  background-origin: border-box;
  border: 1px solid oklch(var(--color-light) / 0.05);
  border-radius: var(--border-radius);
  color: oklch(var(--color-light));
  overflow: hidden;
  transition:
    --gradient-opacity var(--anim-fast),
    --gradient-stop var(--anim-fast),
    box-shadow var(--anim-fast);
  z-index: 2;

  --subgrid-gap: 0;

  & figure {
    border-radius: var(--border-radius);
  }

  & img {
    transition: scale var(--anim-fast);
  }

  &:hover img {
    scale: 1.05;
  }
}

.card:hover {
  --gradient-opacity: 0.25;
  --gradient-stop: 5%;
  box-shadow: 0 0 15px oklch(var(--color-dark) / 0.5);
}

.error-border {
  --gradient-color: var(--color-error-light);
}

[data-num]::after {
  content: attr(data-num);
  position: absolute;
  right: 0;
  bottom: 0;
  font-family: var(--accent-font, system-ui);
  font-size: calc(var(--step-7) * 4);
  font-weight: var(--fw-black);
  color: oklch(var(--color-light-gray) / 0.05);
  transition: color var(--anim-fast);
  z-index: -1;

  /* ! Remove useless vertical spacing on number */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  /* ? Short version:  */
  text-box: trim-both cap alphabetic;
}

.text-error::selection,
.error-border ::selection {
    background-color: oklch(var(--color-error-light));
    color: oklch(var(--color-light));
}

[data-num]:hover::after {
  color: oklch(var(--color-primary) / 0.125);
}

.card.accent[data-num]::after {
  color: oklch(var(--color-primary) / 0.25);
}

.card.accent:hover[data-num]::after {
  color: oklch(var(--color-primary));
}

/* On hover the img exits and .more-info enters  */
.fade-content {
  position: relative;
  background-color: oklch(var(--color-dark));
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: scale var(--anim-medium) var(--fade-card-anim);

  & .more-info {
    translate: 100% 0;
    opacity: 0;
    will-change: translate, opacity;
    transition: translate, opacity;
    transition-duration: var(--anim-medium);
    transition-timing-function: var(--fade-card-anim);
  }

  & img {
    position: absolute;
    right: 0;
    bottom: 0;
    inline-size: 400px;
    block-size: 400px;
    transition: translate, scale, opacity, filter;
    transition-duration: var(--anim-medium);
    transition-timing-function: var(--fade-card-anim);
    z-index: -1;
  }

  & .cta {
    justify-self: end;
    align-self: end;
  }

  &:hover {
    scale: 1.0125 !important;

    & .more-info {
      translate: 0 0;
      opacity: 1;
      transition-delay: calc(var(--anim-medium) / 5);
    }

    & img {
      translate: 75% 75%;
      scale: 3;
      opacity: 0.5;
      filter: blur(10px);
    }
  }
}

.stack-card {
  --neumorph-shadow-size: -6px;
  --neumorph-shadow-blur: 6px;

  border-radius: 30%;
  corner-shape: squircle;
  user-select: none;
}

.stack-element {
  --neumorph-shadow-size: 3px;
  --neumorph-shadow-blur: 4px;
    
  border-start-end-radius: 0;
  border-end-start-radius: 0;
  font-size: var(--step--1);
  will-change: color, box-shadow, border-color;
  transition: color, box-shadow, border-color;
  transition-duration: var(--anim-fast);

  &:hover {
    color: oklch(var(--color-primary)) !important;
    border-color: oklch(var(--color-primary)) !important;
    
    --neumorph-shadow-blur: 10px;
  }
}

/* fullscreen tall cards, entering on scroll from the side */
.fullscreen-card-wrapper {
  /* var() are not accepted in the container query, so I need fixed values */
  --grid-min-item-size: 65ch;
  --gap: 2.5rem;
  --flex-gap: calc(var(--padding-block-end, var(--space-4xl-5xl)) * 2);
  
  & .sentinel {
      height: 0;
      block-size: 0;
      scroll-margin-top: 0;
  }
    
  @container grid-auto-fit (inline-size > calc(65ch * 2 + 2.5rem)) {
    .fullscreen-card-text {
      position: sticky;
      top: 0;
      align-self: start; /* needed for sticky to work inside of a grid */
    }
  
    .fullscreen-card-container {
      /*padding-block: var(--padding-block-start, var(--space-4xl-5xl));*/
  
      & .stacking-card {
        padding: var(--space-4xl-5xl) var(--space-2xl);
      }
    }
  }
}

.fullscreen-card-container {
  padding-block: 0;
  background: oklch(var(--color-dark-gray));
  z-index: 2;
}

.stacking-card {
  padding: var(--space-4xl-5xl) var(--space-m);
  max-inline-size: unset;
  inline-size: 100%;
  min-block-size: 100vb;
  background-color: oklch(var(--color-dark-gray));
  border-radius: 0;
  overflow: hidden;
  z-index: 1;

  &[data-num]::after {
    bottom: var(--space-m);
    font-size: calc(var(--step-ultra) * 15);
    color: oklch(var(--color-primary) / 0.5);
    z-index: -10;
  }

  &:hover {
    &[data-num]::after {
      color: oklch(var(--color-primary) / 0.75);
    }
  }

  & i {
    --__padding: 0.25em;
      
    position: relative;
    inline-size: calc(1em + var(--__padding) * 2);
    aspect-ratio: 1;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--__padding);
    color: oklch(var(--color-primary)) !important;
    box-shadow: var(--neumorph-shadow-up-down);
    font-size: var(--step-4);
    border-radius: 100vw;
  }
}

.inline-list {
  --__separator: attr(data-separator, ", ");
}

.inline-list * {
  display: inline;
}

.inline-list > *:not(:last-child)::after {
  content: var(--__separator, ", ");
}

.grid-auto-fit:has(.dl-card) {
  --grid-row-height: 1fr;
}

.dl-card {
  max-inline-size: unset;
  box-shadow: var(--neumorph-shadow-up-down);
  border: 1px solid oklch(var(--color-dark-gray));
  will-change: background, border, box-shadow;
  transition: background, border, box-shadow;
  transition-duration: var(--anim-slow);

  & i {
      opacity: 0;
      transition: opacity var(--anim-fast);
  }

  &:hover {
    background: oklch(var(--color-primary) / 0.05);
    border: 1px solid oklch(var(--color-primary));
    box-shadow: var(--neumorph-shadow-up);
    
    & i {
        opacity: 1;
    }
  }
}

.service-detail {
    & [data-num]::after {
        top: -0.15em;
        bottom: unset;
    }
    
    & .portfolio-img {
        display: flex;
        flex-direction: column;
        grid-row: span 2;
        order: 3;
        
        & .img-container {
            border-radius: var(--border-radius) var(--border-radius) 0 0;
            overflow: hidden;
        }
        
        & .img-desc {
            border-radius: 0 0 var(--border-radius) var(--border-radius);
            flex-grow: 1;
        }
        
        & img {
            aspect-ratio: 16 / 9;
            object-fit: cover;
            will-change: scale;
            transition: scale var(--anim-fast);
        }
        
        &:hover img {
            scale: 1.025;
        }
    }
    
    @container grid-auto-fit (inline-size > calc(32rem * 2 + 2.5rem)) {
        .portfolio-img {
            order: initial;
            
            --lines: 6;
        }
    }
}

.fade-card-container {
  container: fade-card-container / inline-size;

  & .more-info,
  img {
    display: none;

    @container fade-card-container (inline-size > 1600px) {
      display: block;
    }
  }
}

/* Marquee */
.marquee-container {
    user-select: none;
    
    --padding-block-start: var(--space-s-2xl);
    --padding-inline-end: 0;
    --padding-block-end: var(--space-s-2xl);
    --padding-inline-start: 0;
	--flow-space: 0.75em;
}

.marquee {
	--__gap: 1em;

	max-width: 100%;
	display: flex;
	gap: var(--__gap);
	font-size: var(--step-7);
	line-height: 1;
	text-transform: uppercase;
	
}

.marquee-inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--__gap);

	& span {
      font-weight: var(--fw-black);
    }
    
	& .dot {
	  font-weight: var(--fw-light);
	  color: oklch(var(--color-light-green));
      rotate: 180deg;
	} 
}

/* Animated part */
.marquee[data-animated="true"] {
	overflow: hidden;
}

.marquee[data-animated="true"] .marquee-inner {
	width: max-content;
	flex-wrap: nowrap;
	white-space: nowrap;
	animation: scroll var(--__speed, 90s) var(--__direction, forwards) linear infinite;
}

.marquee[data-direction="right"] {
	--__direction: reverse;
	
	& .dot {
      rotate: 0deg;
    }
}

.marquee[data-speed="slow"] {
	--__speed: 150s;
}

.marquee[data-speed="medium"] {
	--__speed: 120s;
}

.marquee[data-speed="fast"] {
	--__speed: 90s;
}

@keyframes scroll {
	to {
		transform: translate(calc(-50% - 0.5 * var(--__gap)));
	}
}

/* ? Footer */
footer {
  background: oklch(from oklch(var(--color-dark)) 1% c h) !important;

  --padding-block-end: calc(var(--inverse-clamp) * 2);

  & .copyright {
    font-size: var(--step--2);

    & * {
      max-inline-size: unset;
    }
  }
}

/* ? Form */
.form-container {
  --__input-padding-block: 1em;
  --__input-padding-inline: 1em;

  position: relative;
  z-index: 1;

  & label {
    cursor: pointer;
  }

  & .privacy {
    --flex-gap: 0.5em;
  }
}

.form-section {
  position: relative;
  width: 100%;
}

.form-section > :is(input, select, textarea) {
  --__shadow-length: 8px;

  padding: calc(0.25em + var(--__input-padding-block))
    var(--__input-padding-inline) var(--__input-padding-block)
    var(--__input-padding-inline) !important;
  background-color: transparent;
  color: oklch(var(--color-light));
  /*border: 1px solid oklch(var(--color-medium-gray));*/
  box-shadow: var(--neumorph-shadow-down);
}

.form-section label {
  color: oklch(var(--color-primary));
  font-size: var(--step--1);
}

/* Autocomplete bg */
.form-section
  :is(
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active
  ) {
  -webkit-box-shadow: 0 0 0px 1000px oklch(var(--color-light-green)) inset !important;
  box-shadow: 0 0 0px 1000px oklch(var(--color-light-green)) inset !important;
  -webkit-text-fill-color: oklch(var(--color-dark)) !important;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid oklch(var(--color-medium-gray));
  border-radius: var(--border-radius);
  background-color: transparent;
}

input[type="checkbox"]:checked {
  background-color: oklch(var(--color-primary));
  background: center/cover no-repeat
    url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l4 4 6-6' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  border: 1px solid oklch(var(--color-primary));
}

#message-field {
  padding: 0.5em 0.75em;
  background: oklch(var(--__color, gray) / 0.1);
  border: 1px solid oklch(var(--__color, gray));
  border-radius: var(--border-radius);
  color: oklch(var(--__color, black));
  /* Overwrite data-anim defaults */
  opacity: 1;
  translate: 0 0;
}

.social-icons {
  font-size: var(--step-5);

  --flex-justify-content: flex-start;
}

/* ? Cookie banner */
#cookieBannerBottomLeft,
#cookieBannerSimple,
#cookieBannerDetailed {
  background: oklch(var(--color-dark));
  color: oklch(var(--color-primary));
  border: 0.5px solid oklch(var(--color-dark));
  box-shadow: 0 0 5px oklch(var(--color-primary) / 0.5);
  font-family: var(--main-font, system-ui) !important;
}

#cookieBannerSimple,
#cookieBannerDetailed {
  color: oklch(var(--color-light)) !important;
}

#cookieBannerDetailed#cookieBannerDetailed {
  max-height: 70svb !important;
  overflow-y: auto !important;
}

.cookieBannerClose {
  color: oklch(var(--color-primary)) !important;
}

#cookieBannerSimpleDesc#cookieBannerSimpleDesc,
.cookieBanner.cookieBanner p,
.cookieOption.cookieOption .desc {
  /*max-inline-size: var(--text-length) !important;*/
  color: oklch(var(--color-light)) !important;
  font-size: var(--step--2) !important;
  line-height: var(--base-line-height) !important;
  letter-spacing: var(--tracking) !important;
  font-family: var(--main-font, system-ui) !important;
  font-weight: var(--fw-medium) !important;
  text-rendering: optimizeSpeed !important;
  text-wrap: pretty !important;
  word-break: auto-phrase !important;
}

#cookieBannerSimpleTitle#cookieBannerSimpleTitle,
#cookieBannerDetailedTitle#cookieBannerDetailedTitle,
.cookieOption.cookieOption .title {
  /*max-inline-size: var(--heading-length) !important;*/
  color: oklch(var(--color-light)) !important;
  font-size: var(--step--1) !important;
  line-height: var(--heading-line-height) !important;
  letter-spacing: var(--tracking-s) !important;
  font-family: var(--accent-font, system-ui) !important;
  font-weight: var(--fw-medium) !important;
  text-rendering: optimizeLegibility !important;
  text-wrap: balance !important;
  word-break: auto-phrase !important;
}

.cookieOption.cookieOption .title {
  color: oklch(var(--color-primary)) !important;
}

#cookieBannerSimpleDesc#cookieBannerSimpleDesc,
#cookieBannerDetailedDesc#cookieBannerDetailedDesc {
  margin: 0 !important;
  /* remove the defaults */
  margin-block-start: 1em !important;
  margin-block-end: 2em !important;
}

.cookieBanner.cookieBanner :is(a, :visited) {
  font-family: var(--main-font, system-ui) !important;
  color: oklch(var(--color-primary)) !important;
  word-break: break-all;
}

.cookieBanner.cookieBanner button {
  --neumorph-shadow-size: 3px;
  --neumorph-shadow-blur: 6px;

  margin-inline-end: 1em !important;
  font-family: var(--main-font, system-ui) !important;
  color: oklch(var(--color-light)) !important;
  background-color: oklch(var(--color-dark)) !important;
  border: 1px solid oklch(var(--color-primary)) !important;
}

.cookieBanner.cookieBanner .primary,
input:not(:disabled):checked + .cookieOptionSlider {
  background-color: oklch(var(--color-primary)) !important;
  color: oklch(var(--color-dark)) !important;
  font-weight: var(--fw-bold);
}

.cookieOption.cookieOption {
  --neumorph-shadow-size: 3px;
  --neumorph-shadow-blur: 6px;

  background: oklch(var(--color-dark));
  background: linear-gradient(
    145deg,
    oklch(var(--color-dark)),
    oklch(var(--color-dark-gray))
  );
  border-radius: var(--border-radius);
  box-shadow: var(--neumorph-shadow-up);
}

#cookieBannerDetailed#cookieBannerDetailed
  input:is(:disabled):checked
  + .cookieOptionSlider,
.cookieOptionSlider.cookieOptionSlider {
  background: oklch(var(--color-dark));
  background: linear-gradient(
    145deg,
    oklch(var(--color-dark)),
    oklch(var(--color-dark-gray))
  );
  border: 0.5px solid oklch(var(--color-dark));
  border-radius: var(--border-radius);
  box-shadow: var(--neumorph-shadow-up-down);
}

#cookieBannerDetailed#cookieBannerDetailed
  input:checked
  + .cookieOptionSlider:before {
  background: oklch(var(--color-primary));
  box-shadow: var(--neumorph-shadow-up);
}

.cookieOptionSlider.cookieOptionSlider:before {
  background: oklch(var(--color-darkest));
  box-shadow: var(--neumorph-shadow-up);
}