/* The gelato shop logo: a pastel shop wall under a striped awning, a waffle cone in its brass holder, and the name of
   the shop piped in gelato, glossy and layered in five flavours. Rich style: full palette, lots of small details. */
:root {
  --wall: #ffe7dc;          /* the wall of the shop, top */
  --wall-low: #ffd1c2;      /* the wall of the shop, bottom */
  --counter: #f6b9a6;       /* the counter line */
  --awning: #8fd6c3;        /* the mint stripes of the awning */
  --awning-2: #fff6ea;      /* the cream stripes of the awning */
  --ink: #4a2318;           /* the small text and the button */
  --hint: #9a5b48;          /* the caption */
  --fiordilatte: #fff4e2;   /* the first flavour: the cream everything starts in */
  --mango: #ffb53e;         /* the top layer */
  --pistachio: #a6c46f;     /* the middle layer */
  --strawberry: #f27b8c;    /* the layer under it */
  --chocolate: #6e3a22;     /* the bottom layer */
  --waffle: #e3a258;        /* the cone */
  --waffle-dark: #a9632a;   /* the grid of the cone */
  --brass: #d4a548;         /* the cone holder */
  --cherry: #d61f35;        /* the cherry */
  --stem: #5d7f2c;          /* the cherry stem */
  --sprinkle-1: #ff5c8a;    /* the sprinkles */
  --sprinkle-2: #49b6ff;
  --sprinkle-3: #ffd23f;
  --sprinkle-4: #7ed957;
  --sprinkle-5: #b07cff;
  --bag: #ff8fa6;           /* the stripes of the piping bag */
  --elastic: cubic-bezier(0.34, 1.9, 0.45, 1);
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: linear-gradient(180deg, var(--wall) 0%, var(--wall-low) 100%);
  color: var(--ink);
  font-family: 'Fredoka Variable', 'Avenir Next', Arial, sans-serif;
  overflow: hidden;
}

.scena {
  position: relative;
  height: var(--screen);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

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

/* the awning: mint and cream stripes with a scalloped edge */
.tenda {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26px;
  background: repeating-linear-gradient(90deg, var(--awning) 0 28px, var(--awning-2) 28px 56px);
  -webkit-mask: radial-gradient(14px 12px at 14px 14px, #000 98%, transparent) 0 0 / 28px 26px repeat-x,
    linear-gradient(#000, #000) 0 0 / 100% 14px no-repeat;
  mask: radial-gradient(14px 12px at 14px 14px, #000 98%, transparent) 0 0 / 28px 26px repeat-x,
    linear-gradient(#000, #000) 0 0 / 100% 14px no-repeat;
  filter: drop-shadow(0 3px 3px rgba(120, 50, 30, 0.12));
}

.marca {
  position: absolute;
  top: 36px;
  left: 24px;
  right: 24px;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  font-weight: 640;
  z-index: 2;
}
.marca__dida {
  color: var(--hint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.disegno {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.motto {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 74px;
  margin: 0;
  text-align: center;
  color: var(--hint);
  font-size: clamp(13px, 1.6vw, 16px);
  font-weight: 500;
  font-stretch: 96%;
}

.pillola {
  position: absolute;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fiordilatte);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  isolation: isolate;
}
.pillola::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--ink);
  box-shadow: 0 6px 14px -6px rgba(74, 35, 24, 0.6);
  transition: inset 0.6s var(--elastic);
}
.pillola__scritta {
  font-stretch: 86%;
  transition: font-stretch 0.6s var(--elastic);
}
.pillola__scritta::before {
  content: attr(data-testo);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-stretch: 112%;
}
@media (hover: hover) and (pointer: fine) {
  .pillola:hover::before { inset: -2px -7px; }
  .pillola:hover .pillola__scritta { font-stretch: 112%; }
}
.pillola:active::before { inset: 2px 3px; }
.pillola:focus-visible {
  outline: 2px solid var(--strawberry);
  outline-offset: 4px;
}

@media (max-height: 520px) {
  .tenda { height: 20px; }
  .marca { top: 26px; font-size: 13px; }
  .motto { bottom: 58px; font-size: 12px; }
  .pillola { bottom: 12px; min-height: 34px; }
}