/* Coffee Buddy – first-visit intro animation
 * No framework and no external animation library required.
 */

.cb-intro {
  --cb-intro-total: 5200ms;
  --cb-intro-motion: 3400ms;
  --cb-intro-green: #2f6a3a;
  --cb-intro-brown: #4b2f12;
  --cb-intro-cream: #f9f5ea;
  --cb-intro-gold: #f4bd3e;
}

.cb-intro,
.cb-intro * {
  box-sizing: border-box;
}

.cb-intro {
  position: absolute;
  inset: 0;
  z-index: 800;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  color: var(--cb-intro-brown);
  background:
    radial-gradient(circle at 50% 54%, rgba(255,255,255,.9) 0 24%, rgba(249,245,234,.8) 60%, rgba(239,233,218,.86) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(.84);
  backdrop-filter: blur(6px) saturate(.84);
  opacity: 0;
  pointer-events: none;
}

.cb-intro.cb-intro--running {
  animation: cb-intro-shell var(--cb-intro-total) linear both;
}

.cb-intro__map-lines,
.cb-intro__map-lines::before,
.cb-intro__map-lines::after {
  position: absolute;
  inset: -12%;
  content: "";
  pointer-events: none;
}

.cb-intro__map-lines {
  z-index: -2;
  opacity: .34;
  background:
    linear-gradient(27deg, transparent 0 33%, rgba(255,255,255,.92) 33.4% 35.4%, rgba(206,201,188,.42) 35.7% 36.2%, transparent 36.5% 100%),
    linear-gradient(113deg, transparent 0 53%, rgba(255,255,255,.86) 53.4% 55.3%, rgba(206,201,188,.38) 55.6% 56.1%, transparent 56.4% 100%);
  transform: rotate(-4deg) scale(1.08);
}

.cb-intro__map-lines::before {
  background:
    radial-gradient(circle at 20% 28%, rgba(91,139,84,.25) 0 7%, transparent 7.5%),
    radial-gradient(circle at 76% 78%, rgba(91,139,84,.22) 0 9%, transparent 9.5%),
    radial-gradient(circle at 84% 18%, rgba(91,139,84,.18) 0 5%, transparent 5.5%);
}

.cb-intro__map-lines::after {
  background-image: radial-gradient(rgba(75,47,18,.1) .7px, transparent .8px);
  background-size: 17px 17px;
  opacity: .3;
}

.cb-intro__skip {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 20;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid rgba(75,47,18,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 6px 18px rgba(57,42,22,.08);
  color: #4d493f;
  font: 600 13px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.cb-intro__skip:focus-visible {
  outline: 3px solid rgba(47,106,58,.34);
  outline-offset: 2px;
}

.cb-intro__scene {
  position: relative;
  width: min(92vw, 520px);
  height: min(72vh, 560px);
  min-height: 390px;
  display: grid;
  place-items: center;
  transform: translateY(clamp(34px, 6dvh, 64px));
}

.cb-intro__ground {
  position: absolute;
  left: 50%;
  top: 61%;
  width: min(76vw, 410px);
  height: min(23vw, 112px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(75,47,18,.15), rgba(75,47,18,.055) 42%, transparent 69%);
  opacity: 0;
}

.cb-intro--running .cb-intro__ground {
  animation: cb-intro-ground var(--cb-intro-motion) linear both;
}

.cb-intro__orbit {
  position: absolute;
  left: 50%;
  top: 48%;
  width: clamp(200px, 58vw, 300px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.cb-intro--running .cb-intro__orbit {
  animation: cb-intro-orbit-shell var(--cb-intro-motion) linear both;
}

.cb-intro__orbit-rotor {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
}

.cb-intro--running .cb-intro__orbit-rotor {
  animation: cb-intro-orbit-rotate var(--cb-intro-motion) cubic-bezier(.37,.08,.63,.96) both;
}

.cb-intro__orbit-anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateX(clamp(16px, 7vw, 34px));
}

.cb-intro__sniff-counter {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(165px, 52vw, 250px);
  transform-origin: 50% 50%;
}

.cb-intro--running .cb-intro__sniff-counter {
  animation: cb-intro-counter-rotate var(--cb-intro-motion) cubic-bezier(.37,.08,.63,.96) both;
}

.cb-intro__sniff {
  display: block;
  width: 100%;
  height: auto;
  transform: translate(-52%, -52%);
  filter: drop-shadow(0 13px 14px rgba(75,47,18,.16));
  user-select: none;
  -webkit-user-drag: none;
}

.cb-intro--running .cb-intro__sniff {
  animation: cb-intro-sniff-bob var(--cb-intro-motion) ease-in-out both;
}

.cb-intro__scent {
  position: absolute;
  left: calc(50% + clamp(62px, 18vw, 102px));
  top: calc(47% - clamp(36px, 10vw, 58px));
  width: 94px;
  height: 94px;
  opacity: 0;
}

.cb-intro--running .cb-intro__scent {
  animation: cb-intro-scent var(--cb-intro-motion) ease-out both;
}

.cb-intro__scent i {
  position: absolute;
  bottom: 3px;
  width: 14px;
  height: 48px;
  border: 4px solid rgba(75,47,18,.55);
  border-color: rgba(75,47,18,.55) transparent transparent transparent;
  border-radius: 50%;
  transform: rotate(78deg);
  opacity: .7;
}

.cb-intro__scent i:nth-child(1) { left: 8px; animation-delay: 0ms; }
.cb-intro__scent i:nth-child(2) { left: 37px; height: 60px; animation-delay: 80ms; }
.cb-intro__scent i:nth-child(3) { left: 67px; height: 43px; animation-delay: 150ms; }

.cb-intro--running .cb-intro__scent i {
  animation: cb-intro-wisp 720ms ease-in-out infinite alternate;
}

.cb-intro__cup-wrap {
  position: absolute;
  left: calc(50% + clamp(66px, 20vw, 112px));
  top: 48%;
  width: clamp(72px, 20vw, 108px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.1) rotate(16deg);
}

.cb-intro--running .cb-intro__cup-wrap {
  animation: cb-intro-cup var(--cb-intro-motion) cubic-bezier(.2,1.42,.42,1) both;
}

.cb-intro__cup-halo {
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,189,62,.34), rgba(244,189,62,.09) 48%, transparent 70%);
  transform: scale(.7);
}

.cb-intro--running .cb-intro__cup-halo {
  animation: cb-intro-halo var(--cb-intro-motion) ease-in-out both;
}

.cb-intro__cup {
  position: relative;
  width: 76%;
  height: auto;
  filter: drop-shadow(0 10px 10px rgba(75,47,18,.16));
  user-select: none;
  -webkit-user-drag: none;
}

.cb-intro__found {
  position: absolute;
  left: 50%;
  top: 53%;
  width: clamp(190px, 56vw, 270px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.64) rotate(-4deg);
  transform-origin: 62% 66%;
  filter: drop-shadow(0 16px 15px rgba(75,47,18,.17));
  user-select: none;
  -webkit-user-drag: none;
}

.cb-intro--running .cb-intro__found {
  animation: cb-intro-found var(--cb-intro-motion) cubic-bezier(.22,1.18,.4,1) both;
}

.cb-intro__pointer {
  position: absolute;
  left: 58%;
  top: 51%;
  width: clamp(38px, 10vw, 58px);
  height: 34px;
  opacity: 0;
  transform: rotate(-13deg);
  transform-origin: left center;
}

.cb-intro__pointer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 12px;
  top: 16px;
  border-top: 4px dotted rgba(47,106,58,.72);
}

.cb-intro__pointer::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10px;
  width: 13px;
  height: 13px;
  border-top: 4px solid rgba(47,106,58,.78);
  border-right: 4px solid rgba(47,106,58,.78);
  transform: rotate(45deg);
}

.cb-intro--running .cb-intro__pointer {
  animation: cb-intro-pointer var(--cb-intro-motion) ease-out both;
}

.cb-intro__tail-wag {
  position: absolute;
  left: calc(50% - clamp(92px, 26vw, 126px));
  top: 40%;
  width: 52px;
  height: 58px;
  opacity: 0;
  transform: rotate(-14deg);
}

.cb-intro__tail-wag i {
  position: absolute;
  width: 24px;
  height: 35px;
  border: 4px solid rgba(47,106,58,.72);
  border-color: rgba(47,106,58,.72) transparent transparent transparent;
  border-radius: 50%;
}

.cb-intro__tail-wag i:first-child { left: 2px; top: 15px; transform: rotate(-62deg); }
.cb-intro__tail-wag i:last-child { left: 19px; top: 2px; transform: rotate(-48deg) scale(.76); }

.cb-intro--running .cb-intro__tail-wag {
  animation: cb-intro-tail-wag var(--cb-intro-motion) ease-out both;
}

.cb-intro__sparkles {
  position: absolute;
  left: calc(50% + clamp(60px, 18vw, 96px));
  top: 42%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.cb-intro__sparkles span {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--cb-intro-gold);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(244,189,62,.42);
}

.cb-intro__sparkles span:nth-child(1) { left: 8%; top: 30%; }
.cb-intro__sparkles span:nth-child(2) { left: 73%; top: 4%; width: 7px; height: 7px; }
.cb-intro__sparkles span:nth-child(3) { left: 88%; top: 57%; width: 6px; height: 6px; }
.cb-intro__sparkles span:nth-child(4) { left: 52%; top: 84%; width: 8px; height: 8px; }
.cb-intro__sparkles span:nth-child(5) { left: 20%; top: 76%; width: 5px; height: 5px; }

.cb-intro--running .cb-intro__sparkles {
  animation: cb-intro-sparkles var(--cb-intro-motion) ease-out both;
}

.cb-intro__caption {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 5vh, 48px);
  transform: translateX(-50%);
  width: min(86vw, 420px);
  text-align: center;
  opacity: 0;
  font: 750 clamp(17px, 4.8vw, 23px)/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.02em;
  color: #44351e;
}

.cb-intro__caption small {
  display: block;
  margin-top: 6px;
  font-size: .62em;
  font-weight: 580;
  letter-spacing: 0;
  color: #6c685f;
}

.cb-intro--running .cb-intro__caption {
  animation: cb-intro-caption var(--cb-intro-motion) ease-out both;
}

@keyframes cb-intro-shell {
  0% { opacity: 0; }
  4%, 98% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes cb-intro-ground {
  0%, 7% { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
  15%, 98% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes cb-intro-orbit-shell {
  0%, 4% { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
  9%, 46% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  52% { opacity: 0; transform: translate(-50%, -50%) scale(1.02); }
  100% { opacity: 0; }
}

@keyframes cb-intro-orbit-rotate {
  0%, 9% { transform: rotate(-24deg); }
  15% { transform: rotate(24deg); }
  21% { transform: rotate(92deg); }
  27% { transform: rotate(160deg); }
  33% { transform: rotate(228deg); }
  39% { transform: rotate(296deg); }
  45%, 100% { transform: rotate(336deg); }
}

@keyframes cb-intro-counter-rotate {
  0%, 9% { transform: rotate(24deg); }
  15% { transform: rotate(-24deg); }
  21% { transform: rotate(-92deg); }
  27% { transform: rotate(-160deg) scaleX(-1); }
  33% { transform: rotate(-228deg) scaleX(-1); }
  39% { transform: rotate(-296deg); }
  45%, 100% { transform: rotate(-336deg); }
}

@keyframes cb-intro-sniff-bob {
  0%, 8% { transform: translate(-52%, -52%) scale(.92); }
  11% { transform: translate(-52%, -55%) rotate(-2deg) scale(.98); }
  14% { transform: translate(-52%, -50%) rotate(2deg) scale(1); }
  17% { transform: translate(-52%, -55%) rotate(-2deg) scale(.98); }
  20% { transform: translate(-52%, -50%) rotate(2deg) scale(1); }
  23% { transform: translate(-52%, -55%) rotate(-2deg) scale(.98); }
  26% { transform: translate(-52%, -50%) rotate(2deg) scale(1); }
  29% { transform: translate(-52%, -55%) rotate(-2deg) scale(.98); }
  32% { transform: translate(-52%, -50%) rotate(2deg) scale(1); }
  35% { transform: translate(-52%, -55%) rotate(-2deg) scale(.98); }
  39%, 46% { transform: translate(-52%, -52%) rotate(-1deg) scale(1.02); }
  52%, 100% { transform: translate(-52%, -52%) scale(.94); }
}

@keyframes cb-intro-scent {
  0%, 46% { opacity: 0; transform: translate(20px, 16px) scale(.55); }
  52% { opacity: .8; }
  60% { opacity: 1; transform: translate(0, 0) scale(1); }
  76% { opacity: .55; transform: translate(-8px, -8px) scale(1.05); }
  96%, 100% { opacity: 0; }
}

@keyframes cb-intro-wisp {
  from { transform: translateY(7px) rotate(76deg) scaleX(.9); }
  to { transform: translateY(-4px) rotate(86deg) scaleX(1.12); }
}

@keyframes cb-intro-cup {
  0%, 50% { opacity: 0; transform: translate(-50%, -50%) scale(.08) rotate(16deg); }
  58% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(-4deg); }
  63% { transform: translate(-50%, -50%) scale(.98) rotate(2deg); }
  68%, 97% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

@keyframes cb-intro-halo {
  0%, 54% { opacity: 0; transform: scale(.4); }
  63% { opacity: 1; transform: scale(1.06); }
  78% { opacity: .78; transform: scale(.97); }
  96% { opacity: .58; transform: scale(1.03); }
  100% { opacity: .58; transform: scale(1.03); }
}

@keyframes cb-intro-found {
  0%, 56% { opacity: 0; transform: translate(-50%, -50%) scale(.64) rotate(-3deg); }
  64% { opacity: 1; transform: translate(-50%, -52%) scale(1.06) rotate(1deg); }
  69% { transform: translate(-50%, -50%) scale(.98) rotate(-1deg); }
  74% { transform: translate(-50%, -51%) scale(1.02) rotate(1deg); }
  80%, 97% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

@keyframes cb-intro-pointer {
  0%, 62% { opacity: 0; transform: rotate(-13deg) scaleX(.1); }
  68% { opacity: 1; transform: rotate(-13deg) scaleX(1.06); }
  74%, 97% { opacity: .9; transform: rotate(-13deg) scaleX(1); }
  100% { opacity: .9; transform: rotate(-13deg) scaleX(1); }
}

@keyframes cb-intro-tail-wag {
  0%, 60% { opacity: 0; transform: rotate(-14deg) translateX(6px) scale(.7); }
  67% { opacity: 1; transform: rotate(-18deg) translateX(0) scale(1.02); }
  72% { transform: rotate(-8deg) scale(.94); }
  77% { transform: rotate(-20deg) scale(1); }
  82%, 97% { opacity: .88; transform: rotate(-10deg) scale(.96); }
  100% { opacity: .88; transform: rotate(-10deg) scale(.96); }
}

@keyframes cb-intro-sparkles {
  0%, 58% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-22deg); }
  66% { opacity: 1; transform: translate(-50%, -50%) scale(1.04) rotate(0); }
  73% { opacity: .74; transform: translate(-50%, -50%) scale(.94) rotate(10deg); }
  81% { opacity: 1; transform: translate(-50%, -50%) scale(1.02) rotate(16deg); }
  97% { opacity: .58; }
  100% { opacity: .58; transform: translate(-50%, -50%) scale(1.02) rotate(16deg); }
}

@keyframes cb-intro-caption {
  0%, 64% { opacity: 0; transform: translate(-50%, 12px); }
  70%, 97% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-height: 590px) {
  .cb-intro__scene { min-height: 330px; height: 82vh; transform: translateY(26px); }
  .cb-intro__caption { bottom: 15px; }
  .cb-intro__orbit { top: 45%; }
  .cb-intro__found { top: 48%; }
  .cb-intro__cup-wrap { top: 46%; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-intro.cb-intro--running {
    animation-duration: 850ms;
  }
  .cb-intro--running .cb-intro__orbit,
  .cb-intro--running .cb-intro__orbit-rotor,
  .cb-intro--running .cb-intro__sniff-counter,
  .cb-intro--running .cb-intro__sniff,
  .cb-intro--running .cb-intro__scent,
  .cb-intro--running .cb-intro__ground,
  .cb-intro--running .cb-intro__cup-wrap,
  .cb-intro--running .cb-intro__cup-halo,
  .cb-intro--running .cb-intro__found,
  .cb-intro--running .cb-intro__pointer,
  .cb-intro--running .cb-intro__tail-wag,
  .cb-intro--running .cb-intro__sparkles,
  .cb-intro--running .cb-intro__caption {
    animation: none !important;
  }
  .cb-intro__orbit,
  .cb-intro__scent,
  .cb-intro__pointer,
  .cb-intro__tail-wag,
  .cb-intro__sparkles { display: none; }
  .cb-intro__found,
  .cb-intro__cup-wrap,
  .cb-intro__caption,
  .cb-intro__ground { opacity: 1; }
  .cb-intro__found { transform: translate(-50%, -50%) scale(1); }
  .cb-intro__cup-wrap { transform: translate(-50%, -50%) scale(1); }
  .cb-intro__caption { transform: translateX(-50%); }
}