/* Avallon Alt is a paid font (Sam Parrett). Drop the licensed file at
   fonts/AvallonAlt.woff2 (or .otf/.ttf) and it will be picked up. */
@font-face {
  font-family: "Avallon Alt";
  src: local("Avallon Alt"), local("AvallonAlt"),
       url("fonts/AvallonAlt.woff2") format("woff2"),
       url("fonts/AvallonAlt.otf") format("opentype"),
       url("fonts/AvallonAlt.ttf") format("truetype");
  font-display: swap;
}

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

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  background: #f6f4f0;
  color: #000000;
}

body {
  font-family: "Cormorant Garamond", Georgia, serif;
}

.frame {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
}

.dark {
  background: #000000;
  color: #f6f4f0;
}

.logo {
  width: clamp(120px, 30vw, 176px);
  height: auto;
  /* Blends the image's white background into the page color */
  mix-blend-mode: multiply;
}

.title {
  margin: 1rem 0 0;
  font-family: "Avallon Alt", "Pinyon Script", cursive;
  font-weight: normal;
  font-size: clamp(2.75rem, 9vw, 5.5rem);
  line-height: 1.1;
}

/* Down arrow: chevron shape cut from a gradient, so the gradient can
   sweep across it as a shine on hover */
.scroll-arrow {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  width: 48px;
  height: 48px;
  margin-left: -24px;
  background: linear-gradient(110deg, #000 40%, #fff 50%, #000 60%) 100% 0 / 300% 100%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: bob 2.4s ease-in-out infinite;
}

/* Random one-off glimmer, toggled from index.js */
.scroll-arrow.glimmer {
  animation: bob 2.4s ease-in-out infinite, shine 1.2s ease-in-out 1;
}

.scroll-arrow:hover,
.scroll-arrow:focus-visible {
  animation: bob 2.4s ease-in-out infinite, shine 1.2s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

@keyframes shine {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-arrow,
  .scroll-arrow.glimmer { animation: none; }
  .scroll-arrow:hover,
  .scroll-arrow:focus-visible { animation: none; background-position: 50% 0; }
}

footer {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.95rem;
  background: #000000;
  color: #f6f4f0;
}