/*
  Coming soon page
  The logo is layered: the base artwork plus the two dice as separate images,
  so the dice can be tossed onto the table when the page loads.
*/

.soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.5rem, 5vh, 4rem) var(--space-m) var(--space-xl);
  text-align: center;
  overflow-x: clip; /* dice start off to the side; never cause a sideways scroll */
}

/* ---------- Layered logo ---------- */
.soon__logo {
  position: relative;
  width: min(100%, 760px);
  aspect-ratio: 2816 / 1491;
}

.soon__logo-base {
  width: 100%;
}

/* The dice sit in a button so visitors can roll again (it always comes up snake eyes).
   Positions are percentages of the logo canvas, taken from the original artwork. */
.dice {
  position: absolute;
  left: 8.807%;
  top: 57.612%;
  width: 27.628%;
  height: 42.388%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dice:focus-visible {
  outline-offset: 6px;
  border-radius: 24px;
}

.die {
  position: absolute;
  transform-origin: 50% 55%;
}

.die--left {
  left: 0;
  top: 0;
  width: 61.183%;
}

.die--right {
  left: 38.303%;
  top: 16.772%;
  width: 61.697%;
}

@media (prefers-reduced-motion: no-preference) {
  /* Page load: both dice are thrown in from the upper left, bounce, and land on ones */
  .die {
    animation:
      die-toss 1150ms 250ms both,
      die-appear 160ms 250ms both;
  }

  .die--right {
    animation-delay: 380ms, 380ms;
  }

  /* Click to roll again. Two identical keyframe sets let the animation restart on every click. */
  .dice.is-rolling-a .die { animation: die-reroll-a 900ms both; }
  .dice.is-rolling-b .die { animation: die-reroll-b 900ms both; }
  .dice.is-rolling-a .die--right,
  .dice.is-rolling-b .die--right { animation-delay: 70ms; }
}

@keyframes die-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes die-toss {
  0%   { transform: translate(-150%, -230%) rotate(-340deg); animation-timing-function: cubic-bezier(0.45, 0, 0.9, 0.6); }
  46%  { transform: translate(-10%, 0) rotate(-24deg);       animation-timing-function: cubic-bezier(0.1, 0.6, 0.4, 1); }
  62%  { transform: translate(-4%, -20%) rotate(9deg);       animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  77%  { transform: translate(-1%, 0) rotate(-4deg);         animation-timing-function: cubic-bezier(0.1, 0.6, 0.4, 1); }
  88%  { transform: translate(0, -5%) rotate(1.5deg);        animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes die-reroll-a {
  0%   { transform: translate(0, 0) rotate(0deg);             animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  38%  { transform: translate(-18%, -110%) rotate(-200deg);   animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  68%  { transform: translate(0, 0) rotate(-372deg);          animation-timing-function: cubic-bezier(0.1, 0.6, 0.4, 1); }
  84%  { transform: translate(0, -12%) rotate(-357deg);       animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  100% { transform: translate(0, 0) rotate(-360deg); }
}

@keyframes die-reroll-b {
  0%   { transform: translate(0, 0) rotate(0deg);             animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  38%  { transform: translate(-18%, -110%) rotate(-200deg);   animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  68%  { transform: translate(0, 0) rotate(-372deg);          animation-timing-function: cubic-bezier(0.1, 0.6, 0.4, 1); }
  84%  { transform: translate(0, -12%) rotate(-357deg);       animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  100% { transform: translate(0, 0) rotate(-360deg); }
}

/* ---------- Headline: parchment lettering with the logo's gold and brown edge ---------- */
.soon__title {
  margin-top: clamp(1rem, 3vh, 2.25rem);
  font-size: var(--step-4);
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 1;
  color: var(--parchment);
  background: linear-gradient(180deg, #fff3d6 0%, var(--parchment) 45%, #f2bd6a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Stacked drop shadows build the same gold, bronze and brown edge as the logo lettering */
  filter:
    drop-shadow(0 0.025em 0 var(--gold))
    drop-shadow(0 0.03em 0 var(--bronze))
    drop-shadow(0 0.035em 0 var(--leather-deep))
    drop-shadow(0 0.08em 0.12em rgb(0 0 0 / 0.55));
  padding-bottom: 0.1em; /* room for the edge so it is never clipped */
}

.soon__lede {
  margin-top: var(--space-s);
  max-width: 34ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--parchment);
}

/* ---------- Email sign-up (placeholder until a mailing list provider is connected) ---------- */
.soon__signup {
  width: min(100%, 31rem);
  margin-top: var(--space-l);
}

.soon__signup-label {
  display: block;
  margin-bottom: var(--space-s);
  color: var(--parchment-dim);
}

.soon__note {
  margin: var(--space-s) auto 0;
  font-size: var(--step--1);
  font-style: italic;
  color: var(--parchment-dim);
}

@media (forced-colors: active) {
  .soon__title {
    -webkit-text-fill-color: CanvasText;
    background: none;
    filter: none;
  }
}