@font-face {
  font-family: "Parchi Two";
  src: url("fonts/ParchiTwo.woff2") format("woff2"),
       url("fonts/ParchiTwo.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --paper: #efe7d8;
  --cream: #f4ecdc;
  /* The walkman nearly fills the screen, leaving a little paper around it. */
  --easel: min(90vh, 94vw);
}

@supports (height: 100dvh) {
  :root { --easel: min(90dvh, 94vw); }
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

html { background-color: var(--paper); }

body {
  background-color: var(--paper);
  /* Paper grain: inline SVG turbulence, no external assets */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 0 0.15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  overflow: hidden;
}

.stage {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.easel {
  position: relative;
  width: var(--easel);
  aspect-ratio: 1;
}

/* Sits one layer above the painting, centered on it (and the screen). */
.brand {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: "Parchi Two", sans-serif;
  font-weight: 400;
  /* SQUIRCLE comes out ~59% of the painting's width, inside the blue body on those lines. */
  font-size: calc(var(--easel) * 0.16);
  line-height: 0.95;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cream);
  text-shadow: 0 2px 10px rgba(16, 30, 60, 0.35);
}

.brand .word { display: block; }

.brand .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em) scale(0.85);
  filter: blur(6px);
  transition:
    opacity .45s ease,
    transform .6s cubic-bezier(.2, 1.4, .4, 1),
    filter .45s ease;
  transition-delay: calc(var(--i) * 45ms);
}

.brand.is-alive .letter {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .brand .letter { transition: none; }
}

#painting {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
}