/* ============================================================================
   The holding page. One word, going and coming back.
   ============================================================================ */

:root{
  --paper:#f3ead4; --felt:#1d3a2c; --felt-lo:#15291f;
  --phos:#34ff6e;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}
html{
  color-scheme:dark;background-color:var(--felt-lo);
  background-image:
    radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.04) 0%, rgba(0,0,0,0) 50%),
    radial-gradient(ellipse at 50% 50%, var(--felt) 0%, var(--felt-lo) 70%, #0c1a13 100%);
}
body{min-height:100dvh;background:transparent;overflow:hidden;
  font-family:"IBM Plex Mono",ui-monospace,monospace}

/* felt grain, same as the board so the two feel like one place */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:.18;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.6) 100%)}

.hold{position:relative;z-index:1;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,4vh,44px);padding:24px}

#mark{display:block;width:min(92vw,900px);height:clamp(120px,26vh,260px)}

.under{
  font-size:clamp(.62rem,1.9vw,.86rem);
  letter-spacing:.44em;text-transform:uppercase;
  color:rgba(243,234,212,.34);
  padding-left:.44em;                /* balance the trailing letter-space */
  animation:breathe 5.5s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{opacity:.5}
  50%{opacity:1;color:rgba(52,255,110,.55)}
}

@media (prefers-reduced-motion:reduce){
  .under{animation:none}
}