/* Bead curtain: a sun-bleached plaster front, a dark warm doorway with the title inside, and a curtain of strands
   of wooden, glass and shell beads drawn on a canvas. The beads together draw a sun over the sea. */
:root {
  --wall: #f2e2c4;          /* the plaster front of the kiosk */
  --wall-shade: #e4cda5;    /* the shade under the roof and around the door */
  --sand: #e9cf9b;          /* the sand in front */
  --ink: #2b3a3c;           /* the words on the wall */
  --interior: #3a2219;      /* inside, behind the curtain */
  --lamp: #f2a75a;          /* the warm light inside */
  --title: #fbeedb;         /* the title inside */
  --frame: #8a5a36;         /* the wooden door frame and the rod */
  --cord: #5b3b26;          /* the cord the beads are strung on */
  --wood: #c48a52;          /* the wooden beads */
  --wood-dark: #8d5a31;     /* the darker wooden beads */
  --sun: #f5b433;           /* the glass beads of the sun */
  --ray: #f7d36b;           /* the glass beads of the sun's rays */
  --sea: #2f9fb0;           /* the glass beads of the sea */
  --deep: #1d5f86;          /* the glass beads of the deep sea */
  --shell: #fbf3e6;         /* the shells and the foam */
  --board: #e86f4f;         /* the surfboard */
  --leaf: #5f8f6b;          /* the agave in its pot */
  --pot: #c76a43;           /* the pot */
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--wall);
  color: var(--ink);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  background:
    linear-gradient(to bottom, var(--wall-shade) 0, var(--wall) 9%, var(--wall) 100%);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* the painted line above the door */
.sign {
  position: absolute;
  left: 0;
  right: 0;
  top: 6.5%;
  text-align: center;
}

.sign__line {
  display: inline-block;
  margin: 0;
  padding: 0.55em 1.2em 0.5em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: clamp(11px, 1.25vw, 14px);
  font-weight: 640;
  font-stretch: 112%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* the doorway */
.door {
  --w: min(46vw, 560px);
  position: absolute;
  left: calc(50% - var(--w) / 2);
  width: var(--w);
  top: 17%;
  bottom: 14%;
}

.inside {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  padding: 8% 7% 10%;
  background: var(--interior);
  color: var(--title);
  text-align: center;
}

.inside__glow {
  position: absolute;
  left: 50%;
  top: -30%;
  width: 150%;
  aspect-ratio: 1;
  translate: -50% 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--lamp) 55%, transparent), transparent);
  opacity: 0.55;
  pointer-events: none;
}

.inside__title {
  position: relative;
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  max-width: 58%;
  font-size: calc(var(--w) * 0.098);
  font-weight: 640;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.inside__title .char {
  display: inline-block;
}

.inside__line {
  position: relative;
  max-width: 50%;
  margin: 0;
  font-size: clamp(12px, calc(var(--w) * 0.027), 15px);
  line-height: 1.4;
  opacity: 0.82;
}

.inside__board {
  position: relative;
  margin: 0.6em 0 0;
  padding: 0.5em 1em;
  border: 1.5px solid color-mix(in srgb, var(--title) 55%, transparent);
  border-radius: 6px;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.door__frame {
  position: absolute;
  inset: -14px -14px 0;
  border: 14px solid var(--frame);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 10px 0 rgb(0 0 0 / 0.18);
  pointer-events: none;
}

/* the props beside the door */
.prop {
  position: absolute;
  bottom: 13%;
  overflow: visible;
}

.prop--board {
  height: 46%;
  right: calc(50% + min(46vw, 560px) / 2 + 3.5vw);
  rotate: -7deg;
  transform-origin: 50% 100%;
}

.board__body {
  fill: var(--board);
}

.board__stripe {
  fill: var(--wall);
}

.board__line {
  fill: none;
  stroke: rgb(0 0 0 / 0.16);
  stroke-width: 2;
}

.prop--plant {
  height: 24%;
  left: calc(50% + min(46vw, 560px) / 2 + 3vw);
}

.plant__leaves {
  fill: var(--leaf);
  transform-origin: 60px 100px;
}

.plant__pot {
  fill: var(--pot);
}

.plant__rim {
  fill: color-mix(in srgb, var(--pot) 80%, black);
}

.sand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14%;
  background: var(--sand);
  box-shadow: 0 -3px 0 color-mix(in srgb, var(--sand) 70%, black);
}

.curtain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.walk {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.walk:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 18px;
}

.hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4.6%;
  margin: 0;
  text-align: center;
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 560;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}

@media (max-width: 640px) {
  .door {
    --w: 74vw;
    top: 19%;
  }

  .prop {
    display: none;
  }

  .sign {
    top: 7%;
  }
}