/* ═══════════════════════════════════════════════════════════════════════
   PNC BREW — MICRO-INTERACTIONS  ·  micro.css  v4  MASTER
   Awwwards-grade. Zero conflicts with style.css.
   Every effect audited against the DOM and existing animations.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 2. HERO HEADLINE — blur-clear word stagger ─────────────────────── */
/* style.css has no animation on .hero-headline or its children —       */
/* safe to animate .brew-hl-word spans inserted by micro.js             */

.hero-headline { perspective: 900px; }
.brew-hl-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px) rotateX(5deg);
  filter: blur(3px);
  will-change: transform, opacity, filter;
  animation: brewHlIn 1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes brewHlIn {
  to { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
}


/* ── 3. HERO SUB — blur-clear on load ───────────────────────────────── */
/* style.css sets no animation on .hero-sub — safe                      */

.hero-sub {
  opacity: 0;
  filter: blur(4px);
  animation: heroSubIn 1.1s cubic-bezier(.16,1,.3,1) 0.7s both;
}
@keyframes heroSubIn {
  to { opacity: 1; filter: blur(0); }
}


/* ── 4. HERO EYEBROW — tracking expand on load ──────────────────────── */
/* style.css has .hero-eyebrow but no animation — safe                  */

.hero-eyebrow {
  animation: eyebrowExpand 1.4s cubic-bezier(.16,1,.3,1) 0.2s both;
}
@keyframes eyebrowExpand {
  from { letter-spacing: 0.06em; opacity: 0.4; }
  to   { opacity: 1; }
}


/* ── 5. HERO WATERMARK — breathing after entry ──────────────────────── */
/* style.css sets: animation: driftIn 2s … both                         */
/* We EXTEND that chain — no conflict, micro.css loads after style.css   */

.hero-wm-text {
  animation:
    driftIn 2s cubic-bezier(.16,1,.3,1) both,
    wmBreathe 9s 2.5s ease-in-out infinite;
}
@keyframes wmBreathe {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.82; }
}


/* ── 6. HERO COORD — gold resolve on load ───────────────────────────── */

.hero-coord-label {
  animation: coordIn 1.8s cubic-bezier(.16,1,.3,1) 0.9s both;
}
@keyframes coordIn {
  from { opacity: 0.2; letter-spacing: 0.22em; }
  to   { opacity: 1; }
}
.hero-coord-line {
  animation: coordLineIn 1.4s cubic-bezier(.16,1,.3,1) 1.1s both;
}
@keyframes coordLineIn {
  from { transform: scaleX(0.2); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}


/* ── 7. HERO STRIP PILLS — fill sweep on hover ──────────────────────── */

.hs-pill {
  position: relative;
  overflow: hidden;
  transition:
    color 0.28s cubic-bezier(.16,1,.3,1),
    border-color 0.28s cubic-bezier(.16,1,.3,1),
    letter-spacing 0.3s cubic-bezier(.16,1,.3,1);
}
.hs-pill::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s cubic-bezier(.16,1,.3,1);
  z-index: 0;
}
.hs-pill > * { position: relative; z-index: 1; }
@media (hover:hover) {
  .hs-pill:hover::after { transform: scaleX(1); }
  .hs-pill:hover {
    color: var(--dark) !important;
    border-color: transparent !important;
    letter-spacing: 0.28em;
  }
}


/* ── 8. HERO SCROLL LINE — fades when scrolled ──────────────────────── */

.hero-scroll { transition: opacity 0.4s ease; }
.hero-scroll.hidden { opacity: 0; pointer-events: none; }


/* ── 9. BLOOM PARTICLES — float loop ────────────────────────────────── */
/* style.css uses @keyframes bloom-rise for .bloom-p                    */
/* We do NOT override the animation — only speed-up on hero hover       */

@media (hover:hover) {
  .hero:hover .bloom-p {
    animation-duration: 1.8s !important;
  }
}


/* ── 10. HERO CURSOR WARM GLOW ──────────────────────────────────────── */
/* JS sets --gx / --gy on the hero. This renders the glow.              */

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse 55% 40% at var(--gx, 50%) var(--gy, 80%),
    rgba(184,134,11,0.07) 0%,
    transparent 70%
  );
  transition: background 0.1s;
}


/* ── 12. CERT TAGS — spring pop with sibling dim ────────────────────── */

@media (hover:hover) {
  .cert-tag {
    transition:
      background 0.2s ease,
      border-color 0.2s ease,
      transform 0.28s cubic-bezier(.34,1.56,.64,1),
      color 0.2s ease;
  }
  .cert-tag:hover {
    background: rgba(248,244,236,0.95);
    border-color: rgba(92,61,46,0.22);
    transform: translateY(-3px) scale(1.04);
    color: var(--ink);
  }
  .tasting:has(.cert-tag:hover) .cert-tag:not(:hover) {
    opacity: 0.5;
    transition: opacity 0.3s ease;
  }
}


/* ── 14. PRODUCT NAME — scroll entry reveal ─────────────────────────── */
/* Has .reveal class in HTML — handled by script.js + style.css reveal  */
/* Extra: no additional CSS needed; handled by .reveal system           */


/* ── 16. SOURCE HEADLINE — entry reveal ─────────────────────────────── */
/* .source-headline has .reveal class — handled by reveal system        */
/* Extra: title bold stagger                                             */

.sc-title {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.7s cubic-bezier(.16,1,.3,1) 0.15s,
    transform 0.7s cubic-bezier(.16,1,.3,1) 0.15s;
}
.sc-title.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ── 17. SOURCE TEXT — curtain sweep unveil ─────────────────────────── */
/* .sc-text is the source paragraph — position:relative + overflow:hidden */
/* added here since style.css doesn't set them on this element           */

.sc-text {
  position: relative;
  overflow: hidden;
}
.sc-text::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--dark);
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.sc-text.visible::after {
  transform: scaleX(0);
}


/* ── 18. SOURCE STATS — hover lift + count-up handled by JS ─────────── */

@media (hover:hover) {
  .source-stats > div {
    transition: transform 0.3s cubic-bezier(.16,1,.3,1);
  }
  .source-stats > div:hover { transform: translateY(-3px); }
  .ss-val { transition: color 0.25s ease; }
  .source-stats > div:hover .ss-val { color: rgba(248,244,236,0.98); }
  .ss-key {
    transition:
      letter-spacing 0.35s cubic-bezier(.16,1,.3,1),
      color 0.25s ease;
  }
  .source-stats > div:hover .ss-key {
    letter-spacing: 0.34em;
    color: rgba(248,244,236,0.42);
  }
}


/* ── 19. QTY CARDS — spring click + sibling dim ─────────────────────── */

.qty-card {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.28s cubic-bezier(.34,1.56,.64,1),
    border-color 0.22s ease,
    background 0.22s ease;
}
.qty-card::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--cocoa);
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 0;
}
.qty-card > * { position: relative; z-index: 1; }
.qty-card.spring {
  animation: qtySpring 0.4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes qtySpring {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
@media (hover:hover) {
  .qty-cards:has(.qty-card.selected) .qty-card:not(.selected) {
    opacity: 0.52;
    transform: scale(0.97);
    transition: opacity 0.28s ease, transform 0.28s ease;
  }
}


/* ── 21. ORDER BUTTON — fill sweep ──────────────────────────────────── */

.btn-order:not(:disabled) {
  position: relative;
  overflow: hidden;
}
.btn-order:not(:disabled)::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--cocoa);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.34s cubic-bezier(.16,1,.3,1);
  z-index: 0;
}
.btn-order:not(:disabled) > * { position: relative; z-index: 1; }
@media (hover:hover) {
  .btn-order:not(:disabled):hover::after { transform: scaleX(1); }
}
.btn-order:not(:disabled) { transition: color 0.28s ease; }


/* ── 22. PROGRESS BAR SHIMMER ───────────────────────────────────────── */

#prog, #prog-r {
  background:
    linear-gradient(
      90deg,
      var(--gold) 0%,
      rgba(184,134,11,0.55) 50%,
      var(--gold) 100%
    );
  background-size: 200% 100%;
  animation: progressShimmer 2.2s linear infinite;
}
@keyframes progressShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ── 23. FORM — focus depth and inactive dim ────────────────────────── */

.form-row input,
.form-row select {
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.2s cubic-bezier(.16,1,.3,1);
}
.form-row input:focus,
.form-row select:focus { transform: translateY(-1px); }
.form-row label {
  transition:
    color 0.25s ease,
    letter-spacing 0.3s cubic-bezier(.16,1,.3,1);
}
.form-row:focus-within label {
  color: var(--cocoa-mid);
  letter-spacing: 0.32em;
}
@supports selector(:has(*)) {
  .form-group:has(.form-row:focus-within) .form-row:not(:focus-within) {
    opacity: 0.52;
    transition: opacity 0.3s ease;
  }
}


/* ── 24. TICKER — hover speed-up ────────────────────────────────────── */

@media (hover:hover) {
  .ticker:hover .ticker-inner { animation-duration: 18s !important; }
}


/* ── 25. FOOTER LINKS — centre-out underline ────────────────────────── */

.footer-link {
  position: relative;
  overflow: hidden;
}
.footer-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 1px;
  background: rgba(248,244,236,0.38);
  transition:
    left 0.28s cubic-bezier(.16,1,.3,1),
    right 0.28s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover) {
  .footer-link:hover::after { left: 12px; right: 12px; }
}


/* ── 27. DESK BANNER CTA ─────────────────────────────────────────────── */

@media (hover:hover) and (min-width:769px) {
  .desk-banner-link:hover .desk-banner-cta {
    letter-spacing: 0.06em;
    transition: letter-spacing 0.25s cubic-bezier(.16,1,.3,1);
  }
  .desk-banner-link:hover .desk-banner-sub {
    opacity: 0.9;
    transition: opacity 0.25s ease;
  }
}


/* ── REDUCED MOTION SAFETY NET ──────────────────────────────────────── */

@media (prefers-reduced-motion:reduce) {
  .brew-hl-word,
  .hero-sub,
  .hero-eyebrow,
  .hero-coord-label,
  .hero-coord-line,
  .hero-wm-text,
  .sc-title,
  .qty-card.spring {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  /* bloom-p — style.css already has prefers-reduced-motion guard        */
  .sc-text::after,
  .step-title::after,
  .tasting-note::before,
  .qty-card::before,
  .sr-item::before,
  .sr-hero-link::after,
  .footer-link::after,
  .btn-order:not(:disabled)::after,
  .hero::after { display: none !important; }
  .sc-text { overflow: visible; }
  @keyframes progressShimmer { 0%, 100% { opacity: 0; } }
}

/* ── TASTING LIST ROWS — editorial hover kinetics ──────────────────
   Replaces dead .tasting-note/.tn-* block. Pairs with style.css     */

@media (hover:hover) {
  .tl-row {
    cursor:none!important;
    position: relative;
  }
  /* Subtle left-margin gold rule draws in */
  .tl-row::before {
    content: '';
    position: absolute;
    left: -var(--g, 24px);
    top: 0; bottom: 0;
    width: 2px;
    background: var(--cocoa);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.44s cubic-bezier(.16,1,.3,1);
  }
  .tl-row:hover::before { transform: scaleY(1); }

  /* Number ticks to cocoa and opens spacing */
  .tl-num {
    transition: color 0.28s ease, letter-spacing 0.35s cubic-bezier(.16,1,.3,1);
  }
  .tl-row:hover .tl-num {
    color: var(--cocoa);
    letter-spacing: 0.34em;
  }

  /* Name: Fraunces optical-size shift — from tight display → large optical */
  .tl-name {
    transition:
      letter-spacing 0.38s cubic-bezier(.16,1,.3,1),
      font-variation-settings 0.5s cubic-bezier(.16,1,.3,1);
  }
  .tl-row:hover .tl-name {
    letter-spacing: -0.025em;
    font-variation-settings: 'opsz' 144, 'WONK' 1;
  }

  /* Meta: type label lifts; when text resolves */
  .tl-when {
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.16,1,.3,1);
  }
  .tl-row:hover .tl-when {
    opacity: 0.78;
    transform: translateY(-1px);
  }
}

/* ── SOURCE STATS — lift on hover (restored after strip) ───────────── */
@media (hover:hover) {
  .source-stats > div {
    transition: transform 0.3s cubic-bezier(.16,1,.3,1);
  }
  .source-stats > div:hover { transform: translateY(-3px); }
  .ss-val { transition: color 0.25s ease, letter-spacing 0.3s cubic-bezier(.16,1,.3,1); }
  .source-stats > div:hover .ss-val {
    color: rgba(248,244,236,0.98);
    letter-spacing: -0.05em;
  }
  .ss-key {
    transition: letter-spacing 0.35s cubic-bezier(.16,1,.3,1), opacity 0.25s ease;
  }
  .source-stats > div:hover .ss-key {
    letter-spacing: 0.34em;
    opacity: 0.42;
  }
}


/* ── SOURCE GRID — dim sibling column on hover ──────────────────────── */
@supports selector(:has(*)) {
  @media (hover:hover) {
    .source-grid:has(.source-col:first-child:hover) .source-col:last-child {
      opacity: 0.45;
      transition: opacity 0.35s ease;
    }
    .source-grid:has(.source-col:last-child:hover) .source-col:first-child {
      opacity: 0.45;
      transition: opacity 0.35s ease;
    }
    .source-col {
      transition: opacity 0.35s ease;
    }
  }
}


/* ── ORDER WHY LIST — left rule draws on hover ──────────────────────── */
@media (hover:hover) {
  .order-why li {
    transition: color 0.25s ease, padding-left 0.3s cubic-bezier(.16,1,.3,1);
    position: relative;
  }
  .order-why li::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 1px;
    background: rgba(196,149,10,0.55);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.38s cubic-bezier(.16,1,.3,1);
  }
  .order-why li:hover {
    color: rgba(248,244,236,0.82);
    padding-left: 1.9em;
  }
  .order-why li:hover::after { transform: scaleY(1); }
}


/* ── ORDER METHOD — subtle lift on hover ───────────────────────────── */
@media (hover:hover) {
  .order-method {
    transition:
      border-color 0.28s ease,
      background 0.28s ease;
  }
  .order-method:hover {
    border-color: rgba(196,149,10,0.28);
    background: rgba(248,244,236,0.02);
  }
  .order-method:hover .order-method-label {
    color: rgba(196,149,10,0.65);
    transition: color 0.28s ease;
  }
  .order-method:hover p {
    color: rgba(248,244,236,0.75);
    transition: color 0.28s ease;
  }
}


/* ── FRESHNESS SEAL — pulse on hover ───────────────────────────────── */
@media (hover:hover) {
  .freshness-seal:hover .freshness-arc {
    animation-duration: 5s !important;
  }
  .freshness-seal:hover .freshness-core {
    transform: scale(1.04);
    transition: transform 0.35s cubic-bezier(.34,1.56,.64,1);
  }
}


/* ── MANIFESTO COPY — subtle tracking shift on hover ───────────────── */
@media (hover:hover) {
  .manifesto-copy {
    transition: letter-spacing 0.55s cubic-bezier(.16,1,.3,1), opacity 0.35s ease;
  }
  .manifesto-copy:hover {
    letter-spacing: -0.025em;
    opacity: 1;
  }
}


/* ── MANIFESTO STATS — number optical lift ─────────────────────────── */
@media (hover:hover) {
  .ms-item {
    transition: transform 0.3s cubic-bezier(.16,1,.3,1);
  }
  .ms-item:hover { transform: translateY(-4px); }
  .ms-num {
    transition:
      letter-spacing 0.35s cubic-bezier(.16,1,.3,1),
      color 0.28s ease;
  }
  .ms-item:hover .ms-num {
    letter-spacing: -0.07em;
    color: rgba(248,244,236,1);
  }
  .ms-label {
    transition: opacity 0.28s ease, letter-spacing 0.35s cubic-bezier(.16,1,.3,1);
  }
  .ms-item:hover .ms-label {
    opacity: 0.65;
    letter-spacing: 0.3em;
  }
}


/* ── BATCH EMAIL INPUT — gold glow on focus ─────────────────────────── */
.batch-email-row input[type="email"]:focus {
  box-shadow: 0 0 0 3px rgba(196,149,10,0.15);
  border-color: rgba(196,149,10,0.7) !important;
}
.batch-notify-btn {
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(.16,1,.3,1) !important;
}
@media (hover:hover) {
  .batch-notify-btn:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
  }
}
.batch-notify-btn:focus-visible {
  outline: 2px solid rgba(196,149,10,0.8);
  outline-offset: 3px;
}


/* ── FOOTER CREED — breath on hover ────────────────────────────────── */
@media (hover:hover) {
  .ft-creed {
    transition: letter-spacing 0.5s cubic-bezier(.16,1,.3,1), color 0.3s ease;
  }
  .ft-creed:hover {
    letter-spacing: 0.34em;
    color: rgba(248,244,236,0.38);
  }
}

/* ═══ NAV LINKS — FINAL UNIFORM SIZE (16px everywhere, all pages) ═══ */
.nav-link{
  font-family:"Courier New",monospace!important;
  font-size:16px!important;
  font-weight:700!important;
  letter-spacing:0.18em!important;
  padding:10px 18px!important;
  margin:0 2px!important;
  line-height:1.2!important;
}