/* Talent Brew — animated "brewing" loading overlay. 10 randomised variants. */

:root {
  --brew-crema: #e8c78a;
  --brew-bean: #4a2f1f;
  --brew-liquid: #6b3a1f;
  --brew-liquid-light: #9c5a2e;
  --brew-cream: #f5e9d8;
  --brew-steam: rgba(255, 255, 255, .55);
}

/* Page navigation stays non-blocking. Turbo only reveals this bar when its
   own progress delay is exceeded. */
.turbo-progress-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--tb-brand, #5b5bd6), #8585ef, var(--tb-mint, #22a67a));
  box-shadow: 0 1px 8px rgba(91, 91, 214, .28);
}

.brew-loader-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23, 32, 51, .38);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  visibility: hidden;
  transition: opacity .14s ease, visibility 0s linear .14s;
}
.brew-loader-overlay.is-visible { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.brew-loader-overlay.no-transition { transition: none; }
.brew-loader-overlay.no-transition,
.brew-loader-overlay.no-transition .brew-loader-card { transition: none !important; }

.brew-loader-card {
  width: 212px; padding: 1.5rem 1.4rem 1.3rem;
  border-radius: var(--tb-radius-lg, 30px);
  background: var(--tb-surface-solid, #fff);
  box-shadow: var(--tb-shadow, 0 24px 70px rgba(39,39,92,.13));
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  transform: translateY(5px) scale(.985);
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.brew-loader-overlay.is-visible .brew-loader-card { transform: translateY(0) scale(1); }

.brew-loader-stage {
  position: relative; width: 108px; height: 108px;
  display: flex; align-items: center; justify-content: center;
}
.brew-loader-stage svg { display: block; overflow: visible; }
.brew-loader-variant { display: none; width: 100%; height: 100%; align-items: center; justify-content: center; }
.brew-loader-variant.is-active { display: flex; }

.brew-loader-caption {
  min-height: 1.3rem; font-size: .8rem; font-weight: 650; color: var(--tb-muted, #647087);
  text-align: center; letter-spacing: .01em;
}
.brew-loader-brand {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tb-brand, #5b5bd6); opacity: .8;
}

/* Shared cup/vessel outline used by several variants */
.brew-cup-outline { fill: none; stroke: var(--tb-ink, #172033); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.brew-liquid-fill { fill: var(--brew-liquid); }

@media (prefers-reduced-motion: reduce) {
  .brew-loader-overlay, .brew-loader-card { transition: none; }
  .brew-loader-stage * { animation: none !important; }
  .brew-loader-variant.is-active::after {
    content: ''; width: 14px; height: 14px; border-radius: 50%;
    background: var(--tb-brand, #5b5bd6); opacity: .7;
  }
}

@media (prefers-reduced-motion: no-preference) {

/* 1 — Drip: droplet falls, cup level rises */
.brew-v-drip .drop { animation: brewDripFall 1.1s cubic-bezier(.6,0,1,.4) infinite; }
.brew-v-drip .fill { animation: brewCupRise 4.4s linear infinite; }
@keyframes brewDripFall {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  70% { transform: translateY(34px); opacity: 1; }
  71% { opacity: 0; }
  100% { transform: translateY(34px); opacity: 0; }
}
@keyframes brewCupRise {
  0% { transform: translateY(0); }
  95%, 100% { transform: translateY(-26px); }
}

/* 2 — French press: plunger presses down and lifts */
.brew-v-press .plunger { animation: brewPlunge 1.6s cubic-bezier(.5,0,.5,1) infinite; transform-origin: center top; }
.brew-v-press .grounds { animation: brewSwirlSlow 3s linear infinite; transform-origin: 34px 62px; }
@keyframes brewPlunge {
  0%, 15% { transform: translateY(0); }
  50% { transform: translateY(30px); }
  85%, 100% { transform: translateY(0); }
}
@keyframes brewSwirlSlow { to { transform: rotate(360deg); } }

/* 3 — Pour spiral: stream draws a spiral path into grounds */
.brew-v-pour .stream { stroke-dasharray: 90; animation: brewPourStream 1.4s ease-in-out infinite; }
.brew-v-pour .kettle { animation: brewKettleTilt 1.4s ease-in-out infinite; transform-origin: 20px 20px; }
@keyframes brewPourStream {
  0% { stroke-dashoffset: 90; opacity: 0; }
  10% { opacity: 1; }
  60% { stroke-dashoffset: 0; opacity: 1; }
  90%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes brewKettleTilt {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-14deg); }
}

/* 4 — Steam rise: three ribbons drift up and fade */
.brew-v-steam .wisp { animation: brewSteamRise 2.4s ease-in infinite; }
.brew-v-steam .wisp:nth-child(2) { animation-delay: .5s; }
.brew-v-steam .wisp:nth-child(3) { animation-delay: 1s; }
@keyframes brewSteamRise {
  0% { transform: translateY(0) translateX(0) scaleY(.6); opacity: 0; }
  20% { opacity: .8; }
  100% { transform: translateY(-38px) translateX(6px) scaleY(1.15); opacity: 0; }
}

/* 5 — Bean grind: beans fall and spin into a funnel */
.brew-v-grind .bean { animation: brewBeanFall 1.5s cubic-bezier(.55,0,.85,.4) infinite; }
.brew-v-grind .bean:nth-child(2) { animation-delay: .3s; }
.brew-v-grind .bean:nth-child(3) { animation-delay: .6s; }
.brew-v-grind .funnel { animation: brewJiggle 1.5s ease-in-out infinite; }
@keyframes brewBeanFall {
  0% { transform: translateY(-30px) rotate(0deg); opacity: 0; }
  15% { opacity: 1; }
  85% { transform: translateY(28px) rotate(260deg); opacity: 1; }
  100% { transform: translateY(30px) rotate(280deg); opacity: 0; }
}
@keyframes brewJiggle {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1.5px); }
  75% { transform: translateX(1.5px); }
}

/* 6 — Foam swirl: rosette sweeps into a cup */
.brew-v-foam .rosette { stroke-dasharray: 140; animation: brewRosetteDraw 2.6s ease-in-out infinite; }
@keyframes brewRosetteDraw {
  0% { stroke-dashoffset: 140; opacity: .3; }
  50% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -140; opacity: .3; }
}

/* 7 — Percolate: bubbles rise through a carafe */
.brew-v-percolate .bubble { animation: brewBubbleRise 1.8s ease-in infinite; }
.brew-v-percolate .bubble:nth-child(2) { animation-delay: .45s; }
.brew-v-percolate .bubble:nth-child(3) { animation-delay: .9s; }
.brew-v-percolate .bubble:nth-child(4) { animation-delay: 1.3s; }
@keyframes brewBubbleRise {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-46px) scale(1); opacity: 0; }
}

/* 8 — Kettle boil: wobble + steam puffs + heat glow */
.brew-v-kettle .kettle-body { animation: brewWobble 1s ease-in-out infinite; transform-origin: 50% 90%; }
.brew-v-kettle .puff { animation: brewPuff 1.6s ease-out infinite; }
.brew-v-kettle .puff:nth-child(3) { animation-delay: .5s; }
.brew-v-kettle .heat { animation: brewHeatPulse 1s ease-in-out infinite; }
@keyframes brewWobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}
@keyframes brewPuff {
  0% { transform: translateY(0) scale(.5); opacity: 0; }
  25% { opacity: .9; }
  100% { transform: translateY(-24px) scale(1.3); opacity: 0; }
}
@keyframes brewHeatPulse {
  0%, 100% { opacity: .25; }
  50% { opacity: .6; }
}

/* 9 — Tea steep: bag dips, colour diffuses */
.brew-v-tea .bag { animation: brewDip 1.8s ease-in-out infinite; transform-origin: top center; }
.brew-v-tea .diffuse { animation: brewDiffuse 1.8s ease-in-out infinite; }
@keyframes brewDip {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(14px); }
}
@keyframes brewDiffuse {
  0%, 40% { r: 2; opacity: 0; }
  70% { opacity: .55; }
  100% { r: 24; opacity: 0; }
}

/* 10 — Espresso: shot rises, crema swirls on top */
.brew-v-espresso .shot { animation: brewShotRise 2.2s ease-out infinite; }
.brew-v-espresso .crema { animation: brewCremaSpin 2.2s linear infinite; transform-origin: 54px 40px; }
@keyframes brewShotRise {
  0% { transform: translateY(0); }
  70%, 100% { transform: translateY(-22px); }
}
@keyframes brewCremaSpin {
  0% { transform: rotate(0deg); opacity: 0; }
  70% { opacity: 1; }
  100% { transform: rotate(300deg); opacity: 1; }
}

} /* prefers-reduced-motion: no-preference */

@media (max-width: 420px) {
  .brew-loader-card { width: 190px; padding: 1.4rem 1.1rem 1.2rem; }
  .brew-loader-stage { width: 92px; height: 92px; }
}