/**
 * Layers 
 *
 * reset - for resetting user agent styles
 * base - for default and base style values and setting custom properties
 * layout - for general and default layout
 * components - for uniform, non changing components 
 * utilities - for flexible, customizable styles with default defined values
 * general - overall general styles
 * 
 **/

@layer reset, base, layout, components, utilities, general;

@layer reset {
  * {
    margin: 0;
    padding: 0;
  }

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

  html {
    scroll-behavior: smooth;
  }

  img,
  picture,
  svg,
  iframe,
  video {
    display: block;
    max-width: 100%;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    max-width: 100%;
    min-width: 0px;
  }
}

@layer base {
  :root {
    --clr-light-neutral: #fafafa;
    --clr-dark-neutral: #333333;

    --clr-primary: #931930;

    --max-screen-width: 1920px;
    --spacing: 2em;

    /* z-index layers */
    --zi-loader: 99999;
    --zi-flash: 10000;

    --preload-delay: 1000ms;
  }

  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
      sans-serif;
    color: var(--clr-text);

    isolation: isolate;
  }
}

@layer components {
  #preloader {
    position: fixed;
    inset: 0;
    height: 100dvh;
    background-color: hsl(from var(--clr-primary) h s l / 1);

    place-content: center;
    place-items: center;
    z-index: var(--zi-loader);

    &::after {
      content: "";
      display: block;
      height: 50px;
      aspect-ratio: 1 / 1;

      margin: auto;
      background-color: var(--clr-light-neutral);

      border-radius: 100vw;

      animation: preload var(--preload-delay) ease-in-out infinite both;
    }

    [data-loading="false"] & {
      animation: preloaded 500ms ease-in-out var(--preload-delay) forwards;
    }
  }

  @keyframes preload {
    from {
      scale: 0;
      opacity: 1;
    }
    to {
      scale: 1;
      opacity: 0;
    }
  }

  @keyframes preloaded {
    to {
      opacity: 0;
      visibility: hidden;
      z-index: -1;
    }
  }
}

@layer utilities {
  .sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
  }

  .wrapper {
    width: min(
      var(--max-width, var(--max-screen-width)),
      calc(100% - (var(--margin, (var(--spacing) * 2))))
    );
    margin-inline: auto;
  }
}