/* Prints under the hair dryer: the proofs of a wedding photographer, printed on glossy paper and laid out on a linen
   table. The table and the prints are WebGL; the label, the dryer and its cord are HTML and SVG on top. */
:root {
  --table: #d9cfc1;         /* the linen of the table */
  --table-weave: #b9ab98;   /* the threads of the weave */
  --paper-back: #f6f3ee;    /* the back of the prints */
  --ink: #2c2420;           /* the words on the label */
  --muted: #74675d;         /* the smaller words */
  --accent: #a4553f;        /* the ampersand */
  --dryer: #e7a99c;         /* the body of the hair dryer */
  --dryer-light: #f7d3c9;   /* its lit top */
  --dryer-dark: #b9776b;    /* its shaded belly */
  --trim: #e9dfcf;          /* the nozzle, the handle and the cap */
  --trim-light: #fbf6ec;    /* their lit side */
  --cord: #efe7da;          /* the cord */
  --dryer-size: clamp(120px, 13vw, 200px); /* how wide the dryer is drawn */
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--table);
  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: 460px;
  overflow: hidden;
  background: var(--table);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .stage.is-blowing {
    cursor: none;
  }
}

.stage__table {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------------------------------------------------------------- the label of the proofs */
.label {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  top: 18px;
  pointer-events: none;
}

.label [data-line] {
  display: inline-block;
}

.label__kicker {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.label__title {
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-style: italic;
  font-weight: 420;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  font-size: clamp(40px, 11vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.label__amp {
  color: var(--accent);
  font-weight: 300;
}

.label__line {
  max-width: 34ch;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--muted);
}

.label__facts {
  display: none;
  margin: 18px 0 0;
  gap: 22px;
}

.label__facts div {
  display: grid;
  gap: 2px;
}

.label__facts dt {
  font-size: 11px;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.label__facts dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

/* on a wide screen the label sits in a column on the left and the prints fill the rest */
@media (min-aspect-ratio: 6/5) and (min-width: 760px) {
  .label {
    left: clamp(28px, 4.4vw, 72px);
    right: auto;
    top: 50%;
    width: clamp(240px, 25vw, 380px);
    translate: 0 -50%;
  }

  .label__kicker {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .label__title {
    font-size: clamp(58px, 6.4vw, 104px);
  }

  .label__line {
    margin-top: 16px;
    font-size: clamp(14px, 1.1vw, 16px);
  }

  .label__facts {
    display: flex;
  }
}

/* ---------------------------------------------------------------- the dryer and its cord */
.cord {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.cord path {
  fill: none;
  stroke: var(--cord);
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 6px 5px rgba(60, 40, 30, 0.22));
}

.dryer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 0;
  height: 0;
  pointer-events: none;
  visibility: hidden;
}

.dryer__svg {
  position: absolute;
  width: var(--dryer-size);
  height: calc(var(--dryer-size) * 260 / 340);
  left: calc(var(--dryer-size) * -110 / 340);
  top: calc(var(--dryer-size) * -100 / 340);
  overflow: visible;
  filter: drop-shadow(0 18px 14px rgba(60, 40, 30, 0.28));
}

.dryer__barrel {
  fill: url(#dryer-body);
}

.dryer__shine {
  fill: none;
  stroke: #fff;
  stroke-opacity: 0.55;
  stroke-width: 6;
  stroke-linecap: round;
}

.dryer__band,
.dryer__cap,
.dryer__nozzle,
.dryer__handle {
  fill: url(#dryer-trim);
}

.dryer__handle {
  stroke: color-mix(in srgb, var(--trim) 70%, #000);
  stroke-opacity: 0.25;
  stroke-width: 1.5;
}

.dryer__vents path,
.dryer__slot {
  stroke: color-mix(in srgb, var(--trim) 45%, #2a1d18);
  stroke-width: 3.5;
  stroke-linecap: round;
  fill: none;
}

.dryer__switch {
  fill: color-mix(in srgb, var(--trim) 70%, #2a1d18);
}

.dryer__switch-knob {
  fill: var(--dryer);
}

.dryer__air path {
  fill: none;
  stroke: url(#air-fade);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-dasharray: 18 22;
}

/* a faint warm shadow under each stream, so the white air reads on the pale linen */
.dryer__air--shade path {
  stroke: url(#air-shade);
  stroke-width: 5.2;
}

/* ---------------------------------------------------------------- the hint */
.hint {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4.4vmin, 44px);
  z-index: 2;
  margin: 0;
  translate: -50% 0;
  pointer-events: none;
  max-width: calc(100% - 32px);
}

.hint span {
  display: block;
  padding: 10px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--paper-back);
  font-size: 13px;
  font-weight: 600;
  font-stretch: 106%;
  letter-spacing: 0.01em;
  text-align: center;
}

@media (max-width: 520px) {
  .hint span {
    font-size: 12px;
    padding: 9px 14px;
  }
}