/* ── Splash cover: warm "sunrise over the ocean" entrance ─────────────
   Same mechanic as the original demo (hold ~2s, disperse, reveal the site
   underneath with a single clean opacity crossfade) but re-themed to the
   taproom's actual brand -- warm gold/sun into ocean-blue, not a dark
   cinematic slate. The site is fully rendered underneath the whole time;
   only the cover itself fades, so there's no double-brighten lag. */

.cover {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--black);
  background: radial-gradient(120% 90% at 50% -10%, #fff6de 0%, var(--yellow) 45%, var(--ocean-light) 100%);
}

.cover-logo {
  width: 120px; height: 120px;
  margin-bottom: 18px;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.15));
  animation: cover-logo-in 0.8s cubic-bezier(.22,1.4,.4,1) both;
}

@keyframes cover-logo-in {
  from { transform: scale(0.4) rotate(-10deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

.cover .eyebrow {
  letter-spacing: .24em; text-transform: uppercase; font-size: 12px;
  color: var(--wood-dark); margin-bottom: 14px; font-weight: 700;
}

.cover h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 8vw, 84px);
  line-height: 1; font-weight: 700; letter-spacing: -0.01em;
  margin: 0;
}

.cover h1 .line { display: block; will-change: transform, opacity, filter; }

.cover .sub {
  margin-top: 20px; font-size: 15px; color: var(--wood-dark); opacity: .85;
}

/* disperse: cover fades away over the already-rendered bright site */
.cover.disperse { opacity: 0; pointer-events: none; transition: opacity 1.1s ease; }
.cover.disperse .eyebrow, .cover.disperse .sub, .cover.disperse .cover-logo { opacity: 0; transition: opacity .5s ease; }
.cover.disperse .line { animation: fly 1.1s cubic-bezier(.5,0,.2,1) forwards; }
.cover.disperse .line:nth-child(1) { --dx: -18vw; --dy: -34vh; --rot: -14deg; }
.cover.disperse .line:nth-child(2) { --dx:  22vw; --dy:  -6vh;  --rot:  10deg; animation-delay: .07s; }
.cover.disperse .line:nth-child(3) { --dx:  -8vw; --dy:  40vh;  --rot:  -8deg; animation-delay: .14s; }
@keyframes fly {
  to { transform: translate(var(--dx), var(--dy)) scale(1.6) rotate(var(--rot)); opacity: 0; filter: blur(14px); }
}

/* ── The living bubble -- rides above the site, shy but catchable ───── */

.sp-bubble {
  position: fixed; left: 0; top: 0; transform: scale(0);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px 10px 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--yellow) 0%, var(--wood) 100%);
  color: var(--black); white-space: nowrap; cursor: pointer; z-index: 200;
  box-shadow: 0 10px 30px rgba(154,106,60,.4), inset 0 1px 0 rgba(255,255,255,.5);
  will-change: transform, left, top; user-select: none; -webkit-user-select: none;
}
@keyframes sp-pop-in {
  0%   { transform: scale(0)    rotate(-12deg); }
  60%  { transform: scale(1.18) rotate(6deg); }
  80%  { transform: scale(.94)  rotate(-3deg); }
  100% { transform: scale(1)    rotate(0); }
}
.sp-bubble.in { animation: sp-pop-in .7s cubic-bezier(.22,1.4,.4,1) forwards; }
@keyframes sp-caught { 0%,100% { transform: scale(1) rotate(0); } 25% { transform: scale(1.06) rotate(-4deg); } 75% { transform: scale(1.06) rotate(4deg); } }
.sp-bubble.tired { animation: sp-caught .5s ease-in-out infinite; }
.sp-bubble::after {
  content: ""; position: absolute; inset: -4px; border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(255,200,69,.6); animation: sp-glow 2.4s ease-out infinite;
}
@keyframes sp-glow {
  0% { box-shadow: 0 0 0 0 rgba(255,200,69,.6); }
  70% { box-shadow: 0 0 0 18px rgba(255,200,69,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,200,69,0); }
}
.sp-scoop {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  background: var(--white);
  display: grid; place-items: center; overflow: hidden;
  animation: sp-bob 1.6s ease-in-out infinite;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.sp-scoop img { width: 100%; height: 100%; object-fit: cover; }
@keyframes sp-bob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-8deg); } }
.sp-bubble .sp-txt b { display: block; font-size: 13.5px; font-weight: 700; }
.sp-bubble .sp-txt small { display: block; font-size: 11px; opacity: .85; margin-top: 1px; }

.sp-card {
  position: fixed; z-index: 210; width: 260px; padding: 20px; border-radius: 22px;
  background: var(--white); color: var(--black);
  box-shadow: 0 24px 60px rgba(0,0,0,.3); transform: scale(0); transform-origin: left bottom;
}
.sp-card.show { animation: sp-pop-in .55s cubic-bezier(.22,1.4,.4,1) forwards; }
.sp-card .sp-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; margin-bottom: 8px; }
.sp-card .sp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sp-card h3 { font-family: var(--font-display); margin: 2px 0; font-size: 18px; }
.sp-card .sp-pink { color: var(--ocean-deep); font-weight: 700; }
.sp-card p { font-size: 13.5px; line-height: 1.5; color: #555; margin-top: 8px; }
.sp-card .sp-go {
  display: inline-block; margin-top: 14px; padding: 10px 16px; border-radius: 999px;
  background: var(--yellow); color: var(--black); font-weight: 700; font-size: 13px; text-decoration: none;
}
.sp-card .sp-x { position: absolute; top: 12px; right: 14px; font-size: 18px; color: #b9c2c7; cursor: pointer; }

@media (max-width: 640px) {
  .cover {
    padding: 24px;
  }

  .cover-logo {
    width: 88px;
    height: 88px;
    margin-bottom: 14px;
  }

  .cover .sub {
    font-size: 13px;
    max-width: 280px;
  }

  .sp-bubble {
    max-width: calc(100vw - 24px);
    padding-right: 16px;
  }

  .sp-bubble .sp-txt b,
  .sp-bubble .sp-txt small {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sp-card {
    width: min(260px, calc(100vw - 24px));
  }
}