/* ============================================================
   Doorbin — home: the mark draws, the oo becomes the way in
   ============================================================ */

/* The home palette lives in these two values. Everything on the page — the
   mark, the doors, the stickers, the sound toggle — draws from them, so
   swapping them swaps the whole page. No filter is involved, which means a
   background photograph added later keeps its own colours. */
.home {
  --home-bg:  #f4f2ed;
  --home-ink: #111111;
  position: relative;
  height: 320vh;
  background-color: var(--home-bg);   /* colour only: an image can layer on top */
  color: var(--home-ink);
  font-family: Jost, 'Helvetica Neue', Helvetica, sans-serif;
}
.home a { color: var(--home-ink); }
.home a:hover { color: #5a5a5a; }

.stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 64px);
}

@keyframes db-draw { from { stroke-dashoffset: 101; } to { stroke-dashoffset: 0; } }
  @keyframes db-pop { from { transform: scale(0); } to { transform: scale(1); } }
  @keyframes db-part-left { from { transform: translateX(44.75px); } to { transform: translateX(0); } }
  @keyframes db-part-right { from { transform: translateX(-44.75px); } to { transform: translateX(0); } }
  @keyframes db-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes db-rise { from { transform: translateY(var(--db-drop, 46px)); } to { transform: translateY(0); } }
  @keyframes db-turn-cover {
    0% { d: path("M128 52C112 34 76 22 40 22L40 182C76 182 112 192 128 208Z"); }
    27% { d: path("M128 53.3C113.5 37.2 82.8 30.7 52 35.7L52 183.3C82.8 182.7 113.5 191.8 128 207.7Z"); }
    39% { d: path("M128 54.7C119.7 39.9 103.4 38.3 86.8 47.7L86.8 186.3C103.4 184.4 119.7 192.1 128 207.3Z"); }
    50% { d: path("M128 56C129.9 42 133.4 44 137 57L137 192C133.4 188 129.9 193 128 207Z"); }
    61% { d: path("M128 57.3C141.5 43.3 165.3 47.6 189.8 63.1L189.8 200.9C165.3 193.7 141.5 194.7 128 206.7Z"); }
    73% { d: path("M128 58.7C151.3 43.8 190.1 49.3 230.4 66.3L230.4 212.7C190.1 201.3 151.3 197.2 128 206.3Z"); }
    100% { d: path("M128 60C156 44 200 50 246 68L246 226C200 210 156 200 128 206Z"); }
  }
  @keyframes db-turn-page {
    0% { d: path("M128 52C112 34 76 22 40 22L40 182C76 182 112 192 128 208Z"); }
    27% { d: path("M128 52C114.9 35.5 85.6 26 56.3 28L56.3 176C85.6 178 114.9 190.5 128 208Z"); }
    39% { d: path("M128 52C121.4 36.6 106.6 28.9 91.8 32.4L91.8 171.6C106.6 175.1 121.4 189.4 128 208Z"); }
    50% { d: path("M128 52C129.6 37 133.3 30 137 34L137 170C133.3 174 129.6 189 128 208Z"); }
    61% { d: path("M128 52C137.4 36.6 158.6 28.9 179.8 32.4L179.8 171.6C158.6 175.1 137.4 189.4 128 208Z"); }
    73% { d: path("M128 52C142.7 35.5 175.7 26 208.7 28L208.7 176C175.7 178 142.7 190.5 128 208Z"); }
    100% { d: path("M128 52C144 34 180 22 216 22L216 182C180 182 144 192 128 208Z"); }
  }
  @keyframes db-spread { from { d: path("M128 52C112 34 76 22 40 22L40 182C76 182 112 192 128 208Z"); } to { d: path("M128 60C100 44 56 50 10 68L10 226C56 210 100 200 128 206Z"); } }
  @keyframes db-tilt { from { transform: rotate(4deg); } to { transform: rotate(0deg); } }
  @keyframes db-mark {
    0% { transform: translateY(-68px) scaleY(0.62); animation-timing-function: cubic-bezier(0.24, 0.58, 0.3, 1); }
    56% { transform: translateY(6px) scaleY(1.07); animation-timing-function: cubic-bezier(0.4, 0, 0.35, 1); }
    79% { transform: translateY(-1.8px) scaleY(0.985); animation-timing-function: cubic-bezier(0.4, 0, 0.35, 1); }
    100% { transform: translateY(0) scaleY(1); }
  }
  @keyframes db-bob { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(45deg) translate(2.5px, 2.5px); } }
  /* phones: a quarter down on every element, so the hero has real air around it */
  @media (min-width: 761px) and (max-width: 1024px) {
    [data-habitat] { font-size: 15px !important; }
  }
  @media (max-width: 760px) {
    [data-db-mark], [data-habitat] { width: 62% !important; }
    [data-anim="welcome"] { margin-bottom: 26px !important; font-size: 9px !important; letter-spacing: 0.32em !important; }
    [data-habitat] { margin-top: 16px !important; font-size: 13px !important; letter-spacing: 0.02em !important; }
    [data-lines] { padding: 0 22px !important; max-width: 34ch !important; font-size: 12.5px !important; line-height: 1.5 !important; }
    [data-anim="cue"] { bottom: 28px !important; font-size: 8px !important; letter-spacing: 0.24em !important; }
    [data-anim="cue"] svg { width: 15px !important; }
    [data-anim="tagline"] { bottom: 34px !important; font-size: 8px !important; }
    [data-sound] { top: 16px !important; right: 16px !important; width: 30px !important; height: 30px !important; gap: 0 !important; }
    [data-soundlbl] { display: none !important; }
  }
  @media (max-width: 420px) {
    [data-db-mark], [data-habitat] { width: 68% !important; }
    [data-habitat] { font-size: 11.5px !important; }
  }

/* the enter screen: nothing of the home sequence runs behind it */
/* the enter screen shares the home palette */
.gate {
  background-color: #f4f2ed;
  color: #111111;
}
.gate__enter {
  border-color: rgba(17, 17, 17, 0.42) !important;
  color: #111111 !important;
}
.gate__enter:hover { background: #111111 !important; color: #f4f2ed !important; }
.sound-btn:hover { opacity: 0.85 !important; }
body.is-gated { overflow: hidden; }