/* ============================================================
   Pourtek — Utility Classes & Interactive Tokens (.pt-*)
   A drop-in utility layer for hand-built HTML (decks, one-pagers,
   marketing, product surfaces) that complements the React bundle.
   All classes map onto the existing tokens in colors/typography/
   spacing.css — no new blues, no new type families.
   The :root block below adds ONLY functional values the base
   tokens don't carry: focus ring, glows, scrims, pour-green.
   ============================================================ */
:root {
  /* ---- Functional, interactive-only (dark product surfaces) ---- */
  --pour-green:       #2fb67a;   /* pour-in-progress fill ONLY */
  --focus-ring:       0 0 0 3px rgba(58,150,210,.35);
  --glow-blue:        0 0 0 1px rgba(58,150,210,.5), 0 0 24px rgba(58,150,210,.35);
  --glow-blue-strong: 0 0 0 1px rgba(58,150,210,.7), 0 0 40px rgba(58,150,210,.55);
  --glow-green:       0 0 0 1px rgba(47,182,122,.6), 0 0 28px rgba(47,182,122,.45);
  --grad-scrim:       linear-gradient(to top, rgba(26,26,26,.72), rgba(26,26,26,0) 60%); /* @kind other */
  --grad-glow-vignette: radial-gradient(60% 60% at 50% 45%, rgba(58,150,210,.28), transparent 70%); /* @kind other */
}

/* ============================================================
   Type helpers
   ============================================================ */
.pt-display {
  font-family: var(--font-display); font-weight: var(--fw-extra);
  font-size: clamp(56px, 6vw, 88px); line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.pt-lead { font-size: var(--text-lead); color: var(--text-muted); line-height: 1.5; }
.pt-eyebrow {
  font-size: var(--text-caption); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--pourtek-blue);
}
.pt-data { font-family: var(--font-mono); font-size: var(--text-base); font-weight: var(--fw-medium); }
.pt-link { color: var(--text-link); text-decoration: none; }
.pt-link:hover { text-decoration: underline; }

/* ============================================================
   Cards
   ============================================================ */
.pt-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--card-pad) 32px;
  box-shadow: var(--shadow-card);
}
.pt-card--hover { transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.pt-card--hover:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.pt-card--soft-blue { background: var(--pourtek-blue-050); border-color: var(--pourtek-blue-100); }
.pt-card--top-accent { border-top: 3px solid var(--pourtek-blue); }
.pt-card--image { padding: 0; overflow: hidden; }
.pt-card--image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.pt-card--image .pt-card__body { padding: var(--card-pad) 32px; }

.pt-feature-icon { width: 44px; height: 44px; color: var(--pourtek-blue); stroke-width: 1.75; }

.pt-metric .num { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-stat); color: var(--pourtek-blue); line-height: 1; letter-spacing: -.02em; }
.pt-metric .label { font-weight: var(--fw-semibold); margin-top: var(--space-2); }
.pt-metric .note { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); }

/* photo-backed stat tile */
.pt-stat-photo {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  min-height: 280px; display: flex; align-items: flex-end; color: #fff;
}
.pt-stat-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pt-stat-photo::after { content: ""; position: absolute; inset: 0; background: var(--grad-scrim); }
.pt-stat-photo > * { position: relative; z-index: 1; padding: 28px 32px; }

/* ============================================================
   Buttons
   ============================================================ */
.pt-btn {
  font-family: var(--font-body); font-size: var(--text-cta); font-weight: var(--fw-semibold);
  letter-spacing: .01em; border-radius: var(--radius-button);
  padding: 14px 26px; border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.pt-btn--primary { background: var(--pourtek-blue); color: #fff; }
.pt-btn--primary:hover { background: var(--pourtek-blue-600); }
.pt-btn--primary:active { background: var(--pourtek-blue-700); transform: translateY(1px); }
.pt-btn--secondary { background: var(--charcoal-700); color: #fff; }
.pt-btn--secondary:hover { background: var(--charcoal-400); }
.pt-btn--ghost { background: transparent; border-color: var(--pourtek-blue); color: var(--pourtek-blue); }
.pt-btn--ghost:hover { background: var(--pourtek-blue-050); border-color: var(--pourtek-blue-600); }
.pt-btn--pill { border-radius: var(--radius-pill); }
.pt-btn--icon { width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; }

/* interactive / product variants */
.pt-btn--glow { background: var(--pourtek-blue); color: #fff; box-shadow: var(--glow-blue); }
.pt-btn--glow:hover { box-shadow: var(--glow-blue-strong); background: var(--pourtek-blue); }
.pt-btn--tactile {
  background: var(--pourtek-blue); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 4px 0 var(--pourtek-blue-700), 0 6px 12px rgba(0,0,0,.3);
}
.pt-btn--tactile:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pourtek-blue-700); }
.pt-btn--sheen { position: relative; overflow: hidden; }
.pt-btn--sheen::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
}
.pt-btn--sheen:hover::after { animation: pt-sheen .7s var(--ease-standard) 1; }
@keyframes pt-sheen { to { left: 140%; } }

.pt-segment { display: inline-flex; background: var(--dash-panel); border-radius: var(--radius-pill); padding: 4px; }
.pt-segment button { border: 0; background: transparent; color: var(--gray-300); padding: 8px 18px; border-radius: var(--radius-pill); font: var(--fw-semibold) var(--text-sm)/1 var(--font-body); cursor: pointer; }
.pt-segment button[aria-selected="true"] { background: var(--pourtek-blue); color: #fff; }

/* ============================================================
   Inputs
   ============================================================ */
.pt-input {
  font-family: var(--font-body); font-size: var(--text-base);
  border: 1px solid var(--border-default); border-radius: var(--radius-input);
  padding: 12px 14px; background: #fff;
}
.pt-input:focus { outline: none; background: var(--pourtek-blue-050); box-shadow: var(--focus-ring); border-color: var(--pourtek-blue); }

/* ============================================================
   Badges / pills
   ============================================================ */
.pt-badge {
  display: inline-block; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--fw-semibold); padding: 6px 14px;
  background: var(--pourtek-blue-050); color: var(--pourtek-blue-700);
}

/* ============================================================
   Layout helpers
   ============================================================ */
.pt-container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-6); }
.pt-section { padding-block: var(--section-pad-y); }
.pt-section--muted { background: var(--surface-alt); }
.pt-section--soft-blue { background: var(--pourtek-blue-050); }
.pt-section--dark { background: var(--surface-dark); color: var(--text-on-dark); }
.pt-section--dark .pt-lead { color: var(--gray-300); }
.pt-grid { display: grid; gap: var(--block-gap); }

/* ============================================================
   INTERACTIVE / PRODUCT surfaces (dark only)
   ============================================================ */
.pt-hud {
  background: var(--dash-panel); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-card); padding: 22px 24px; color: #fff;
}
.pt-hud .pt-data { color: #fff; }
.pt-card--glow {
  background: var(--dash-panel); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-card); padding: 24px; color: #fff;
  transition: box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.pt-card--glow:hover, .pt-card--glow.is-active { border-color: rgba(58,150,210,.6); box-shadow: var(--glow-blue); }

/* guest pour-activation tile */
.pt-pour {
  position: relative; overflow: hidden; border-radius: var(--radius-panel);
  background: var(--dash-panel-2); border: 1px solid rgba(58,150,210,.35);
  color: #fff; padding: 28px; text-align: center; cursor: pointer; user-select: none;
}
.pt-pour .fill {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 0%;
  background: linear-gradient(to top, var(--pour-green), var(--pourtek-blue));
  opacity: .85; transition: height .12s linear; z-index: 0;
}
.pt-pour.is-pouring { box-shadow: var(--glow-green); }
.pt-pour > * { position: relative; z-index: 1; }

/* RFID tap-to-pour pulse */
.pt-rfid {
  position: relative; width: 120px; height: 120px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: var(--dash-panel-2); border: 1px solid rgba(58,150,210,.5);
}
.pt-rfid::before, .pt-rfid::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(58,150,210,.5); animation: pt-pulse 2.2s ease-out infinite;
}
.pt-rfid::after { animation-delay: 1.1s; }
@keyframes pt-pulse { 0% { transform: scale(1); opacity: .8 } 100% { transform: scale(1.8); opacity: 0 } }

/* ============================================================
   IMAGE effects
   ============================================================ */
.pt-img { border-radius: var(--radius-card); overflow: hidden; display: block; }
.pt-img--zoom img { transition: transform .6s var(--ease-standard); }
.pt-img--zoom:hover img { transform: scale(1.05); }
.pt-img--duotone img { filter: grayscale(.5) contrast(1.05); }
.pt-img--scrim { position: relative; }
.pt-img--scrim::after { content: ""; position: absolute; inset: 0; background: var(--grad-scrim); }
.pt-img--frame { position: relative; }
.pt-img--frame::before { content: ""; position: absolute; top: 14px; left: 14px; width: 36px; height: 36px; border-top: 3px solid var(--pourtek-blue); border-left: 3px solid var(--pourtek-blue); z-index: 2; }
.pt-glow-vignette { position: relative; }
.pt-glow-vignette::before { content: ""; position: absolute; inset: 0; background: var(--grad-glow-vignette); pointer-events: none; }
.pt-hotspot {
  position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--pourtek-blue);
  box-shadow: 0 0 0 0 rgba(58,150,210,.6); animation: pt-dot 2s ease-out infinite;
}
@keyframes pt-dot { 0% { box-shadow: 0 0 0 0 rgba(58,150,210,.6) } 100% { box-shadow: 0 0 0 18px rgba(58,150,210,0) } }

/* ============================================================
   Reveal-on-scroll (add .is-in when in viewport)
   ============================================================ */
.pt-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); }
.pt-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .pt-reveal { opacity: 1; transform: none; }
}

/* ============================================================
   DS GALLERY STAGE — framing for spec/guideline cards.
   Wraps a demo in a bordered "background card" with a header
   strip, full-width separator, and an optional dashboard-style
   dark container. Solves dark-on-dark / white-on-white blending.
   ============================================================ */
.ds-card {
  margin: 0; box-sizing: border-box; min-height: 100vh;
  padding: 22px; background: var(--ds-gallery); font-family: var(--font-body);
}
.ds-stage {
  background: var(--ds-frame); border: 1px solid var(--ds-frame-border);
  border-radius: var(--radius-panel); box-shadow: var(--shadow-card); overflow: hidden;
}
.ds-stage + .ds-stage { margin-top: 16px; }
.ds-stage__head {
  display: flex; align-items: center; gap: 10px; padding: 11px 18px;
  background: var(--ds-frame-head); border-bottom: 1px solid var(--ds-separator);
}
.ds-stage__head::before {
  content: ""; width: 4px; height: 15px; border-radius: 2px; flex: none;
  background: var(--ds-separator-accent);
}
.ds-stage__eyebrow {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ds-label);
}
.ds-stage__meta { margin-left: auto; font-family: var(--font-body); font-size: 11px; color: var(--text-faint); }
.ds-stage__body { padding: 20px 18px; background: var(--ds-frame); }
.ds-stage--tint .ds-stage__body { background: var(--ds-frame-tint); }
.ds-sep { height: 1px; width: 100%; background: var(--ds-separator); border: 0; margin: 0; }

/* dashboard-style dark container — for analytics / dark demos */
.ds-stage--dark { background: var(--ds-container); border-color: var(--ds-container-border); }
.ds-stage--dark .ds-stage__head { background: var(--ds-container-head); border-bottom-color: var(--ds-container-border); }
.ds-stage--dark .ds-stage__eyebrow { color: var(--pourtek-blue); }
.ds-stage--dark .ds-stage__meta { color: var(--dash-text-faint); }
.ds-stage--dark .ds-stage__body { background: var(--ds-container); }
.ds-stage--dark .ds-sep { background: var(--ds-container-border); }