/* The turning mosaic: a ceramics studio's wall of square tiles. The script lays the tiles and turns them in 3D;
   here live the colours, the page and how a tile is put together (front, back and four clay edges). */
:root {
  --plaster: #ece4d6;       /* the wall around the mosaic and the page */
  --ink: #2b231d;           /* text */
  --grout: #d6cbb9;         /* the gaps between the tiles */
  --clay: #c4825a;          /* the fired clay you see on a tile's edges while it turns */
  --cobalt: #1f3c8c;        /* front: the blue of the pattern */
  --navy: #14224f;          /* front: the dark blue */
  --cream: #f5efe2;         /* front: the white glaze */
  --ochre: #d8972f;         /* front: the yellow of the stars */
  --terracotta: #b4512c;    /* back: the glaze behind the title */
  --back-ink: #f6ead6;      /* back: the title and the vase */
  --edge: clamp(16px, 3.4vw, 48px);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--plaster);
  color: var(--ink);
  font-family: 'DM Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

.studio {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  height: 100svh;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px var(--edge) 10px;
  font-size: 15px;
}

.brand {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: 21px;
  font-weight: 620;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.bar__nav {
  display: flex;
  gap: clamp(12px, 2.4vw, 32px);
}

.bar__nav a {
  display: inline-block;
  transition: transform 0.45s cubic-bezier(0.34, 1.8, 0.5, 1), color 0.25s;
}

@media (hover: hover) {
  /* a nav link leans like a tile starting to turn */
  .bar__nav a:hover {
    color: var(--terracotta);
    transform: perspective(200px) rotateY(-18deg);
  }
}

/* ---------------------------------------------------------------- the wall */
.wall-frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 6px var(--edge);
  /* a finger on the wall plays with the tiles instead of moving the page */
  touch-action: none;
}

.wall {
  position: relative;
  /* the size is set by the script, from the number of tiles that fit */
  background: var(--grout);
  border-radius: 6px;
  box-shadow: 0 0 0 8px var(--grout), 0 24px 50px -30px rgba(43, 35, 29, 0.45);
  perspective: 1500px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tile {
  --thick: 7px;
  position: absolute;
  transform-style: preserve-3d;
}

/* at rest a tile is flat and shows one face only (the script turns it back into a box when it moves) */
.tile.is-flat {
  transform-style: flat;
}

.is-flat .face {
  transform: none;
}

.is-flat .edge,
.is-flat .face--back,
.is-flat.show-back .face--front {
  display: none;
}

.is-flat.show-back .face--back {
  display: block;
}

.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 3px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.face--front {
  transform: translateZ(calc(var(--thick) / 2));
  background: var(--cream) var(--front, none) no-repeat;
  background-size: var(--front-size, 200% 200%);
}

.face--back {
  transform: rotateY(180deg) translateZ(calc(var(--thick) / 2));
  /* the picture of the whole wall, moved so that this tile shows its own square of it */
  background: var(--terracotta) var(--art, none) no-repeat;
  background-size: var(--art-size, 100% 100%);
}

/* the gloss of the glaze: a soft stripe of light that slides across while the tile turns */
.glaze {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.34) 46%, transparent 60%) no-repeat;
  background-size: 300% 100%;
  background-position: 50% 0;
  pointer-events: none;
}

/* the shade: a face turned away from the light gets darker (the script sets how much, straight on the element:
   a CSS variable changed on every tile at every frame would make the browser restyle the whole wall) */
.shade {
  position: absolute;
  inset: 0;
  background: #1a120c;
  opacity: 0;
  pointer-events: none;
}

/* the clay body, seen only on the edges */
.edge {
  position: absolute;
  background: var(--clay);
}

.edge--l,
.edge--r {
  top: 0;
  width: var(--thick);
  height: 100%;
  transform: rotateY(90deg);
}

.edge--l {
  left: calc(var(--thick) / -2);
}

.edge--r {
  left: calc(100% - var(--thick) / 2);
}

.edge--t,
.edge--b {
  left: 0;
  width: 100%;
  height: var(--thick);
  transform: rotateX(90deg);
}

.edge--t {
  top: calc(var(--thick) / -2);
}

.edge--b {
  top: calc(100% - var(--thick) / 2);
}

/* without motion the tiles do not turn: the back fades in over the front */
.is-still .tile {
  transform-style: flat;
}

.is-still .face {
  transform: none;
}

.is-still .face--back {
  opacity: var(--fade, 0);
}

.is-still .edge {
  display: none;
}

/* ---------------------------------------------------------------- the hint */
.hint {
  margin: 0;
  padding: 14px var(--edge) 20px;
  font-size: 14px;
  text-align: center;
  color: rgba(43, 35, 29, 0.62);
}

@media (max-width: 560px) {
  .bar {
    padding-top: 16px;
    font-size: 13px;
  }

  .brand {
    font-size: 17px;
  }

  .tile {
    --thick: 5px;
  }
}