/**
 * Sika Maintenance Page — styles
 * Sibling to scripts/tailwind.js in the deployed `public` folder.
 */

/*
 * Design tokens for Sika colors
 */
:root {
  --brand-primary: #fcc500;
  --frost-gray: #f1f1f1;
}

@font-face {
  font-family: 'Sika';
  src: url('/fonts/klavika-light.woff2') format('woff2'),
       url('/fonts/klavika-light.woff')  format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sika';
  src: url('/fonts/klavika-regular.woff2') format('woff2'),
       url('/fonts/klavika-regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sika';
  src: url('/fonts/klavika-bold.woff2') format('woff2'),
       url('/fonts/klavika-bold.woff')  format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Sika', sans-serif;
}

/*
 * Mask kept separate from the <video> itself so that
 * resizing the video doesn't mess up the mobile look
 */
.hero-video-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * On mobile, video in shown through a circular window into the mask.
 * clamp(MIN, PREFERRED, MAX) makes the circle scale with the viewport
 */
@media (max-width: 767px) {
  :root {
    --circle-radius: clamp(120px, calc(70px + 20vw), 220px);
    /* Vertical reference point the circle's top edge sits at */
    --circle-top: 90px;
  }

  .hero-video-mask {
    clip-path: circle(var(--circle-radius) at 50% calc(var(--circle-top) + var(--circle-radius)));
  }

  .hero-video {
    position: absolute;
    left: 0;
    width: 100vw;
    height: calc(var(--circle-radius) * 2.35);
    top: calc(var(--circle-top) - var(--circle-radius) * 0.175);
    object-fit: cover;
    object-position: 50% 50%;
  }

  .circle-spacer {
    width: calc(var(--circle-radius) * 2);
  }
}
/*
 * Header diagonal
 */
.header-diagonal {
  --diagonal-x: 70px;
}

.header-diagonal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--frost-gray);
  clip-path: polygon(var(--diagonal-x) 0, 100% 0, 100% 100%, 0 100%);
  transform: scale(1.01);
}

@media (min-width: 1200px) {
  .header-diagonal {
    --diagonal-x: 110px;
  }
}