/* The Advent calendar: a printed winter street with 24 windows cut into the cardboard. The days gone open on their
   hinges and the card bends; the days to come are sealed; today's window has its own snow. */
:root {
  --page: #ffffff;          /* the page */
  --card: #f1e7d3;          /* the calendar's cardboard */
  --card-edge: #d8c7a6;
  --ink: #2b1f1a;           /* text */
  --muted: #7d6a58;
  --sky: #1d2754;           /* the night sky, from the top down to the warm horizon */
  --sky-mid: #3d3f7a;
  --dusk: #e0906a;
  --star: #fff1c9;
  --snow: #fbf8f1;          /* snow, and its blue shade */
  --snow-shade: #c9d2e8;
  --hill: #cdd4ea;
  --brick: #b2432f;         /* the shop */
  --brick-dark: #86301f;
  --trim: #f2e5c8;
  --roof: #3a3048;
  --wood: #2d5144;          /* the shop front and the front door */
  --plaster: #ead7b5;       /* the bakery next door */
  --fir: #23503f;           /* the fir tree */
  --fir-dark: #163a2e;
  --gold: #e7b44a;          /* gold foil */
  --red: #c4372c;           /* ribbons, curtains */
  --core: #e9dfcb;          /* the inside of the cardboard */
  --cw: min(500px, calc(100vw - 32px));   /* the calendar's width */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Fraunces Variable', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

/* ---------------------------------------------------------------- the calendar */
.advent {
  position: relative;
  width: var(--cw);
}

.advent__card {
  position: relative;
  padding: 10px 10px 0;
  border-radius: 24px;
  background: linear-gradient(160deg, #f6eedd, var(--card) 60%, #e9dcc2);
  box-shadow:
    0 0 0 1px rgba(90, 60, 30, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -2px 0 rgba(120, 90, 50, 0.12) inset,
    0 30px 60px -28px rgba(60, 35, 20, 0.45),
    0 60px 120px -60px rgba(60, 35, 20, 0.35);
}

.advent__scene {
  position: relative;
  aspect-ratio: 520 / 600;
  border-radius: 15px;
  overflow: hidden;
  background: var(--sky);
  box-shadow: 0 0 0 1px rgba(40, 25, 15, 0.25);
}

.advent__art,
.advent__snow,
.advent__grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.advent__art {
  display: block;
}

.advent__art text {
  font-family: 'Fraunces Variable', Georgia, serif;
}

/* the paper the street is printed on */
.advent__grain {
  background-size: 160px 160px;
}


/* ---------------------------------------------------------------- the windows */
.advent__doors {
  position: absolute;
  inset: 0;
  perspective: var(--depth, 1200px);
  perspective-origin: 50% 42%;
}

.door {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline: none;
}

/* a finger gets a little more room than the drawing */
.door::before {
  content: '';
  position: absolute;
  inset: -4px;
}

.door:focus-visible::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 6px;
  box-shadow: 0 0 0 2px #fff4cf, 0 0 0 4px var(--ink);
  pointer-events: none;
}

.door.is-round:focus-visible::after {
  border-radius: 50%;
}

/* GSAP rattles this one; the leaves inside it turn on their hinges */
.door__rig {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.door__niche,
.door__gift,
.door__cast {
  position: absolute;
  pointer-events: none;
}

.door__niche {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.door__gift {
  overflow: visible;
}

/* the shadow an open window throws on the wall beside its hinge */
.door__cast {
  top: 4%;
  bottom: -2%;
  width: 46%;
  opacity: 0;
  background: linear-gradient(90deg, rgba(20, 10, 20, 0), rgba(20, 10, 20, 0.42));
  filter: blur(2px);
}

.door__cast.is-l {
  right: 100%;
}

.door__cast.is-r {
  left: 100%;
  transform: scaleX(-1);
}

/* a leaf, cut into strips that bend one after the other like cardboard */
.leaf {
  position: absolute;
  top: 0;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(0.4px);
}

.leaf.is-r {
  transform: translateZ(0.4px) scaleX(-1);
}

.strip {
  position: absolute;
  top: 0;
  height: 100%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
}

.slice {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -0.6px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.slice.is-back {
  transform: rotateY(180deg);
}

/* a shut window is a flat drawing: no back, no 3D layers */
.door.is-shut .slice.is-back {
  display: none;
}

.face {
  position: absolute;
  top: 0;
  height: 100%;
  display: block;
  overflow: visible;
}

.leaf.is-r .face {
  transform: scaleX(-1);
}

/* the numbers: gold foil on the print */
.num {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-weight: 760;
  font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 1;
  fill: url(#av-gold);
  stroke: #3b2416;
  stroke-linejoin: round;
  paint-order: stroke;
}

.door.is-today .num {
  fill: url(#av-sheen);
}

.num.is-ink {
  fill: #253055;
  stroke: #fff6d8;
}

/* ---------------------------------------------------------------- the gift that jumps out */
.advent__pop {
  position: absolute;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  aspect-ratio: 520 / 600;
  pointer-events: none;
  z-index: 3;
}

.pop {
  position: absolute;
  overflow: visible;
  filter: drop-shadow(0 6px 6px rgba(40, 20, 10, 0.35));
}

.spark {
  position: absolute;
  width: 3%;
  aspect-ratio: 1;
  fill: #fff4c8;
  overflow: visible;
}

/* ---------------------------------------------------------------- the line below */
.advent__foot {
  display: flex;
  align-items: baseline;
  gap: 6px 16px;
  min-height: 74px;
  padding: 14px 8px 16px;
}

.advent__date {
  flex: none;
  margin: 0;
  min-width: 7.2em;
  font-size: 23px;
  font-style: italic;
  font-weight: 560;
  font-variation-settings: 'opsz' 48, 'SOFT' 60, 'WONK' 1;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.advent__line {
  margin: 0;
  font-size: 15px;
  font-weight: 420;
  font-variation-settings: 'opsz' 14;
  line-height: 1.35;
  color: var(--muted);
}

.advent__line b {
  font-weight: 650;
  color: var(--ink);
}

.advent__line svg {
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.3em;
  vertical-align: -0.12em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.advent__date span,
.advent__line span {
  display: inline-block;
}

@media (max-width: 520px) {
  .advent__card {
    padding: 7px 7px 0;
    border-radius: 20px;
  }

  .advent__scene {
    border-radius: 13px;
  }

  .advent__pop {
    top: 7px;
    left: 7px;
    width: calc(100% - 14px);
  }

  .advent__foot {
    flex-direction: column;
    gap: 3px;
    min-height: 84px;
    padding: 12px 8px 14px;
  }

  .advent__date {
    font-size: 20px;
  }

  .advent__line {
    font-size: 14px;
  }
}