@import 'typography.css';
@import 'page-header.css';
@import 'speakers-overview.css';
@import 'speaker-header.css';

/* Variables: */
:root {
  --mode: light;

  @media (prefers-color-scheme: dark) {
    --mode: dark;
  }

  @media (prefers-color-scheme: light) {
    --mode: light;
  }

  --design-size: 1440;
  --max-width-size: 1920;
  --max-width: 1920px;
  --vw: 100 / var(--design-size) * 1vw;
  --rem: 0.0625rem;
  --max-rem: var(--max-width)/var(--design-size);
  --column-count: 12;
  --grid-columns: repeat(var(--column-count), 1fr);
  @media (max-width: 768px) {
    --grid-columns: repeat(6, 1fr);
  }


  --padding-inline: clamp(calc(var(--rem) * 8), calc(var(--vw) * 24), calc(var(--max-rem) * 24));
  --padding-block: clamp(calc(var(--rem) * 60), calc(var(--vw) * 120), calc(var(--max-rem) * 120));
  --gap: clamp(calc(var(--rem) * 8), calc(var(--vw) * 20), calc(var(--max-rem) * 20));
  --vertical-gap: clamp(calc(var(--rem) * 32), calc(var(--vw) * 40), calc(var(--max-rem) * 40));

  --font-family: 'BM Gaudi', impact, sans-serif;

  --c-dark: #111;
  --c-light: #ececec;
  --c-yellow: #FFCE2E;

  --color-background: #E0E0FF;
  --color-text: var(--c-dark);


  --ease-back: cubic-bezier(0.34, 1.3, 0.64, 1);

  --celestial-width: max(calc(var(--rem) * 125), calc(var(--vw) * 400));
  --shadow-color: radial-gradient(circle at center, red, #F49201);
  --speaker-overlay-color: radial-gradient(circle at 10% 0%, red, #F49201 50%);
  --mix-blend-mode: lighten;

  interpolate-size: allow-keywords;

}

* {
  box-sizing: border-box;
  margin: 0;
  font-weight: 400;
}

html {
  container-type: scroll-state;
  container-name: scroller;
}


@container scroller scroll-state(scrolled: block-end) {
  .header .fronteers-logo-link g.letter-container {
    --translate-x: 100%;
  }
}

/* utitlity */
.sr-only:not(:focus):not(:active) {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  /* for IE only */
  clip-path: inset(50%);
}

html {
  background: var(--c-background);
  container-name: scroller;
  container-type: scroll-state;
  @container style(--mode: dark) {
    body {
      --color-background: var(--c-dark);
      --color-text: var(--c-light);
      --mix-blend-mode: darken;
    }

    @supports (color: color-mix(in srgb, red, green)) {
      color: color-mix(in oklch, var(--c-light) 85%, var(--c-dark));
    }

    .page-header {
      .page-header-moon {
        display: block;
        transition: display allow-discrete 0.3s var(--ease-back);

        img {
          translate: 0 0;
          opacity: 1;
          transition: opacity 0.2s var(--ease-back);

          @media (prefers-reduced-motion: no-preference) {
            transition: translate 0.3s var(--ease-back), opacity 0.1s var(--ease-back);

            @starting-style {
              opacity: 0;
              translate: 0 -100%;
            }
          }
        }
      }

      .dark-svg {
        .svg {
          clip-path: inset(0 0 0 0);
          transform: translateX(0) !important;
        }

        .e,
        .r {
          opacity: 1;
        }
      }
    }
  }
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

.stars-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;

  @media (prefers-color-scheme: dark) {
    opacity: 1;
  }
}


.header {
  position: fixed;
  top: 0;
  z-index: 10;

  pointer-events: none;

  width: 100%;

  padding-inline: var(--padding-inline);
  padding-block: 0.75rem;

  .header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--gap);

    .button {
      border: 1px solid var(--color-text);
      padding: 0.5em 1em;
      border-radius: 0.25em;
      text-decoration: none;
      text-transform: uppercase;
      width: max-content;
      max-width: 100%;
      color: var(--color-text);
      transition: background-color 0.3s ease-out, color 0.3s ease-out;

      &:hover {
        background-color: var(--color-text);
        color: var(--color-background);
      }
    }
  }

  .fronteers-icon-logo {
    line-height: 0;
    height: 100%;

    svg {
      height: 100%;
      width: auto;
    }
  }

  .dark-mode-switch {
    justify-self: end;
    position: relative;

    input {
      position: absolute;
      top: 0;
      right: 0;
      width: calc(var(--rem) * 20);
      height: calc(var(--rem) * 20);
      opacity: 0;

      &:checked {
        &~label {
          &::before {
            translate: 0 0;
          }

          .dark-mode-active {
            display: block;
          }

          .light-mode-active {
            display: none;
          }
        }
      }
    }

    label {
      position: relative;
      display: flex;
      gap: 0.75rem;

      &::after {
        content: '';
        width: calc(var(--rem) * 20);
        aspect-ratio: 1;
        background-color: var(--c-yellow);
        border-radius: 50%;
        filter: blur(3px);
        display: block;
      }

      &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: calc(var(--rem) * 20);
        aspect-ratio: 1;
        background-color: var(--c-dark);
        border-radius: 50%;
        display: block;
        z-index: 1;
        translate: 0 -250%;
        transition: translate 0.3s var(--ease-back);
      }

      .dark-mode-active {
        display: none;
      }
    }
  }

  a,
  button,
  input,
  label {
    pointer-events: auto;
  }

  .fronteers-logo-link {
    position: fixed;
    width: max(calc(var(--rem) * 32), calc(var(--vw) * 32));
    top: 50%;
    right: -2px;
    transform: translateY(-50%);
    z-index: 10;

    @media (max-width: 768px) {
      display: none !important;
    }

    svg {
      width: 100%;
      height: auto;
    }

    .letter-container {
      --translate-x: 0%;
      transform-box: fill-box;
      transform-origin: center;
      transition: transform 0.4s ease-out;
      transform: translateX(var(--translate-x));
      transition-delay: calc(sibling-index() * 0.04s);
    }
  }
}


footer {
  margin-top: clamp(calc(var(--rem) * 32), calc(var(--vw) * 32), calc(var(--max-rem) * 32));
  padding: var(--padding-inline);
}