/* The surprise party: a party-cake bakery's home page. A round window in the headline holds the mascot; little
   shapes hide all over the page and wake up near the pointer; a button throws a party. */
:root {
  --paper: #f4efe8;         /* the page */
  --ink: #1d1b22;           /* text and the window */
  --accent: #ff7a45;        /* the order button */
  --edge: clamp(18px, 3.2vw, 48px);
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Outfit Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px var(--edge);
}

.brand {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* the white pill of the menu, floating */
.pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 6px 24px -12px rgba(29, 27, 34, 0.35);
  font-size: 14px;
}

.pill a {
  padding: 8px 14px;
  border-radius: 999px;
  transition: background-color 0.2s;
}

@media (hover: hover) {
  .pill a:hover {
    background: #f1ece4;
  }

  .pill .pill__cta:hover {
    background: #ff6a30;
  }
}

.pill .pill__cta {
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
}

.pill a:focus-visible,
.surprise:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- the hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 90px var(--edge) 110px;
  overflow: hidden;
}

.shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* a hidden shape: the script makes it grow, turn twice and shrink away */
.shape {
  position: absolute;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  transform: scale(0);
  will-change: transform;
}

.title {
  position: relative;
  margin: 0;
  font-size: clamp(46px, 8.6vw, 132px);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-align: center;
}

.title__line {
  display: block;
  white-space: nowrap;
}

.title em {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* the round window sits in the line like a letter */
.window {
  position: relative;
  display: inline-block;
  width: 1.12em;
  height: 1.12em;
  margin: 0 0.06em;
  vertical-align: -0.16em;
  border-radius: 50%;
  background: var(--ink);
  overflow: hidden;
}

.mascot {
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 96%;
  height: auto;
  transform: translateX(-50%);
  overflow: visible;
}

.hero__foot {
  position: absolute;
  left: var(--edge);
  right: var(--edge);
  bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hero__note {
  margin: 0;
  font-size: 14px;
  opacity: 0.7;
}

.surprise {
  padding: 10px 16px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

@media (hover: hover) {
  .surprise:hover {
    background: var(--ink);
    color: var(--paper);
  }
}

@media (max-width: 760px) {
  .pill a:not(.pill__cta) {
    display: none;
  }

  .title {
    font-size: 15vw;
  }

  .hero__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}