/*  ==========================================================
    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));
}

.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));
  }
}

.btn.border {
  background: transparent;
  border: 2px solid oklch(var(--color-primary));
  box-shadow: var(--shadow-primary-around);
  will-change: background-color;
  transition: background-color var(--anim-fast) ease;

  &::before,
  &::after {
    content: unset !important;
  }

  &.is-active {
    background-color: oklch(var(--color-primary));
    color: oklch(var(--color-dark));
  }
}

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

.simple-btn {
  --__icon-width: var(--space-xl);
  --__gap: var(--space-m-l);
  --__btn-pad: 1em;

  position: relative;
  max-inline-size: unset;
  min-inline-size: 100% !important;
  display: flex;
  align-items: center;
  gap: var(--__gap, 2em);
  padding: var(--__btn-pad);
  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 :is(i, *:has(svg)) {
    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);
  }

  & :is(i, *:has(svg)) {
    min-inline-size: var(--__icon-width);
    min-block-size: var(--__icon-width);
    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;
    left: calc(
      var(--__icon-width) + var(--__btn-pad) + (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;
  fill: oklch(var(--color-primary)); /* SVG */
  z-index: 2;

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

  --flow-space: 3em;

  & :is(i, svg) {
    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;
    cursor: not-allowed;
  }
}

[disabled] {
  padding: var(--space-s);
  background: oklch(var(--color-dark-gray));
  color: oklch(var(--color-light-gray));
  border: 2px solid oklch(var(--color-light-gray));
  cursor: not-allowed;
  user-select: none;

  &:hover {
    background: oklch(var(--color-dark-gray));
    box-shadow: none;
  }
}

.btn[disabled]::before,
.btn[disabled]::after {
  content: unset;
}

.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;
}

.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;
    flex-grow: 1;
    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);
    }
  }

  & :is(i, svg) {
    --__padding: 0.25em;

    position: relative;
    inline-size: calc(1em + var(--__padding) * 2);
    block-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, ", ");
}

.border-list li {
  padding-block-start: var(--flow-space, 1em);
  border-block-start: 1px solid oklch(var(--color-light-gray) / 0.25);
}

.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);

  & :is(i, svg) {
    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);

    & :is(i, svg) {
      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;
    }
  }
}

.blur-up {
  animation: skeleton-loading var(--anim-slow) linear forwards infinite;
}

.blur-up.loaded {
  filter: none;
  animation: none;
}

@keyframes skeleton-loading {
  from {
    filter: blur(15px);
    scale: 1.005;
  }
  to {
    filter: blur(10px);
    scale: 1;
  }
}

/* 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%;

  & > * {
    --flow-space: 0.5rem;
  }
}

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

  padding: var(--__input-padding-block) var(--__input-padding-inline) !important;
  background-color: transparent;
  color: oklch(var(--color-light));
  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,
#error-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;
}

#error-field {
  --__color: var(--color-error-light);

  padding: 1em;
}

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

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

#share {
  padding: var(--space-2xs) var(--space-s);

  & svg {
    fill: oklch(var(--color-primary));
  }
}

.inline-video {
  border: 2px solid oklch(var(--color-primary));
  border-radius: var(--border-radius);
  padding: 0;

  & video {
    margin-inline: auto;
    display: block;
    width: min(1080px, 100%);
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: inherit;
  }
}

.qr-container {
  inline-size: var(--space-3xl);
  padding: 0.25em;
  background-color: oklch(var(--color-light));
  border-radius: var(--border-radius);
}

.signature-logo {
  inline-size: var(--space-2xl);

  &.hero {
    inline-size: var(--space-6xl);
  }
}

/* ? PageSpeed */
#analysis-preloader,
#analysis-details,
#analysis-share,
#analysis-error,
#analysis-https-warning {
  display: none;
}

#analysis-error {
  padding: 1em;
  background: oklch(var(--color-error-light));
  border-radius: var(--border-radius);
}

.analysis-spinner {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: var(--neumorph-shadow-up);

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(
      transparent,
      transparent,
      oklch(var(--color-primary)),
      transparent,
      transparent
    );
    animation: spin var(--anim-slow) linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 2.5px;
    border-radius: inherit;
    background: oklch(var(--color-dark));
    box-shadow: var(--neumorph-shadow-down);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.analysis-step {
  color: oklch(var(--color-light-gray));
}

.analysis-step-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: oklch(var(--color-light-gray));
  transition: background 0.3s;
}

.analysis-step.is-active {
  color: oklch(var(--color-orange));
}

.analysis-step.is-active .analysis-step-dot {
  background: oklch(var(--color-orange));
}

.analysis-step.is-done {
  color: oklch(var(--color-primary));
}

.analysis-step.is-done .analysis-step-dot {
  background: oklch(var(--color-primary));
}

.score-meter-container {
  min-inline-size: 120px;
  align-self: center;
}

.analysis-text {
  flex: 1 1 75%;
}

.analysis-screenshot-wrap img {
  inline-size: 250px;
  block-size: 250px;
  object-fit: contain;
}

/* ? 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);
}