/* Vetulo: coming-soon page, the night version. Ivory from the logo, its accent turned to gold, on a charcoal ground. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ivory: #f3efe6;
  --navy: #111a28;
  /* The accent: gold, as polished metal. A dark edge, a bright band, a deeper band, as a reflection runs. */
  --gilt: #7a5710, #d6aa3a 20%, #fff6cc 40%, #f1cf68 54%, #a2761b 74%, #ecca62 90%, #8a6515;
  --night: #14161b; /* charcoal laid on thick, a little toward the logo's navy */
  --serif: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Jost", "Century Gothic", Futura, system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo.out */
  --gutter: clamp(1.5rem, 5vw, 4.5rem);
  --glow: 0.16; /* how strong the fire is just now; debate.js breathes it */
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--ivory);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* The scene: drawn small on a canvas, softened here, with paper tooth laid over it. */
.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.scene canvas {
  position: absolute;
  inset: -24px; /* so the blur has something to sample at the edges */
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  filter: blur(1.1px);
}
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--tooth);
  background-position: var(--tx, 0) calc(var(--tx, 0px) * 1.7); /* shifts with the boil */
}

/* Masthead above, headline and address below, on one screen. */
.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  justify-items: start;
  padding: clamp(1.75rem, 5vh, 3.5rem) var(--gutter) clamp(2rem, 6vh, 4rem);
}

.logo {
  margin: 0;
  line-height: 0;
}
.logo svg {
  display: block;
  width: clamp(9.5rem, 15vw, 12.5rem);
  height: auto;
}
/* A glint crosses the gold now and then. At rest it waits off to the left, out of sight. */
.logo .glint {
  transform: translateX(-120px) skewX(-20deg);
}

/* The sound switch, opposite the logo. Four gold bars rise and fall while the music plays. */
.sound {
  position: absolute;
  top: calc(clamp(1.75rem, 5vh, 3.5rem) - 0.25rem);
  right: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem; /* tap target */
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: 500 0.75rem/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.sound[hidden] {
  display: none;
}
.sound i {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 0.9rem;
}
.sound b {
  width: 2px;
  height: 100%;
  background: linear-gradient(#fff6cc, #f1cf68 40%, #c0902c);
  transform: scaleY(0.2);
  transform-origin: bottom;
  transition: transform 0.6s var(--ease-out);
}
.sound[aria-pressed="true"] b {
  transform: scaleY(0.75);
}
.sound[aria-pressed="true"] b:nth-child(2n) {
  transform: scaleY(1);
}
.sound[aria-pressed="true"]:not([data-playing]) b {
  opacity: 0.6; /* on, but waiting for the visitor's first move */
}
.sound:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 6px;
}

/* "Coming" upright, "soon" in italic beneath it, both from the same left edge.
   The fire lights the letters, and debate.js says where it is. Each letter is brightest and warmest where it is
   nearest the fire and falls into shade away from it; it takes a warm edge on the side that faces the fire and a
   dim one on the side that does not; and the whole breathes with the flame. */
.soon {
  grid-row: 3;
  margin: 0 0 0 -0.045em; /* optical: the bowl of the C lines up with the logo */
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(4.5rem, 11.6vw, 11.25rem);
  line-height: 0.78;
  letter-spacing: -0.04em;
  font-kerning: normal;
  font-feature-settings: "kern", "liga", "dlig";
  display: flex; /* the two lines, stacked; as flex items their margins do not run together */
  flex-direction: column;
  align-items: flex-start;
  filter: brightness(calc(0.86 + var(--glow) * 0.9))
    drop-shadow(calc(var(--ux, 0.8) * 0.007em) calc(var(--uy, 0.6) * 0.007em) 0 rgb(255 184 108 / calc(0.25 + var(--glow) * 3.2)))
    drop-shadow(calc(var(--ux, 0.8) * -0.009em) calc(var(--uy, 0.6) * -0.009em) 0 #4b4238)
    drop-shadow(0 0 0.3em rgb(236 176 128 / var(--glow)));
}
.soon span,
.soon em {
  display: block;
  /* Room all round, taken back by the margin: a letter is only painted where its line's box reaches. */
  padding: 0.24em 0.14em;
  margin: -0.24em -0.14em;
}
.soon em {
  padding-bottom: 0.32em; /* and room for the italic's tail */
  margin-bottom: -0.24em;
  margin-left: -0.1em; /* optical: the s sits under the C */
  font-weight: 300;
  letter-spacing: -0.025em;
}
.soon ::selection {
  color: var(--night);
  background: var(--ivory);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .soon span,
  .soon em {
    color: transparent;
    background: radial-gradient(circle at var(--lx, 130%) var(--ly, 170%), #fff0d4 var(--near, 22rem), #ebe3d3 calc(var(--near, 22rem) * 0.45 + var(--far, 70rem) * 0.55), #a9a092 var(--far, 70rem));
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.contact {
  grid-row: 4;
  margin: clamp(1.5rem, 4.5vh, 2.75rem) 0 0;
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.07em;
}
.contact a {
  display: inline-block;
  padding: 0.75rem 0; /* tap target */
  color: inherit;
  /* The gold rule under it is the one accent, the logo's metal. */
  text-decoration: none;
  background: linear-gradient(90deg, var(--gilt)) no-repeat 0 calc(100% - 0.4rem) / 100% 1.5px;
  transition: background-position 0.4s var(--ease-out), background-size 0.4s var(--ease-out);
}
.contact a:hover {
  background-position: 0 calc(100% - 0.5rem);
  background-size: 100% 2.5px;
}
a:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 6px;
  border-radius: 1px;
}

@media (orientation: portrait) {
  /* The text keeps the top of the wall; the shadows have the bottom. */
  .stage {
    grid-template-rows: auto auto auto 1fr;
  }
  .soon {
    grid-row: 2;
    margin-top: clamp(2.25rem, 8vh, 5rem);
  }
  .contact {
    grid-row: 3;
  }
}

/* The words come into focus once. The logo stays put, so the page is solid from the first paint. */
@media (prefers-reduced-motion: no-preference) {
  .soon span,
  .soon em,
  .contact a {
    animation: focus 1.9s var(--ease-out) both;
  }
  .soon em {
    animation-delay: 0.32s;
  }
  .logo .glint {
    animation: glint 7s cubic-bezier(0.6, 0, 0.3, 1) 1.5s infinite;
  }
  @keyframes glint {
    0%,
    66% {
      transform: translateX(-120px) skewX(-20deg);
    }
    100% {
      transform: translateX(960px) skewX(-20deg);
    }
  }
  .sound[data-playing] b {
    animation: level 0.9s ease-in-out infinite alternate;
  }
  .sound[data-playing] b:nth-child(2) {
    animation-duration: 0.7s;
  }
  .sound[data-playing] b:nth-child(3) {
    animation-duration: 1.2s;
  }
  .sound[data-playing] b:nth-child(4) {
    animation-duration: 0.8s;
  }
  @keyframes level {
    from {
      transform: scaleY(0.25);
    }
    to {
      transform: scaleY(1);
    }
  }
  /* The drawing comes up out of the paper. */
  .scene {
    animation: develop 2.8s var(--ease-out) both;
  }
  @keyframes develop {
    from {
      opacity: 0;
    }
  }
  .contact a {
    animation-delay: 0.9s;
  }
  @keyframes focus {
    from {
      opacity: 0;
      transform: translateY(0.14em);
      filter: blur(0.09em);
    }
  }
}

/* Debug only (?t= and ?strip= in debate.js): skip every entrance, so a frozen frame shows the finished page. */
.frozen * {
  animation: none !important;
}