/* ============================================================
   Cold Ritual Landing — extras layered on the design system
   ============================================================ */

html { scroll-behavior: smooth; }
body { margin: 0; }

/* Generic helpers used across variants */
.cr-frame {
  width: 100%;
  height: 100%;
  background: var(--cr-cream);
  font-family: var(--font-body);
  color: var(--cr-text);
  overflow: hidden;
  position: relative;
}

/* uppercase eyebrow with thin rule trailing it */
.eyebrow-rule {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cr-mid);
  font-weight: 500;
}
.eyebrow-rule::after {
  content: '';
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--cr-mid);
}
.eyebrow-rule.light { color: rgba(250,246,239,0.6); }
.eyebrow-rule.light::after { background: rgba(250,246,239,0.4); }

/* Bouncing chev cue */
@keyframes cr-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.cr-bob { animation: cr-bob 1.8s ease-in-out infinite; }

/* Slow shimmer over tinted photo placeholders so they don't read flat */
@keyframes cr-shimmer { 0%,100% { opacity: 0.55; } 50% { opacity: 0.85; } }
.cr-photo-grain {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(58,26,8,0.10) 0%, transparent 60%);
  pointer-events: none;
  animation: cr-shimmer 8s ease-in-out infinite;
}

/* FAQ open state (already in components.css; we add a clean dark variant) */
.faq-item.dark { background: rgba(255,255,255,0.05); border-color: rgba(250,246,239,0.15); }
.faq-item.dark .faq-q { color: var(--cr-cream); }
.faq-item.dark .faq-a { color: rgba(250,246,239,0.65); }
.faq-item.dark .faq-chev { color: rgba(250,246,239,0.65); }

/* Sticker-style "tag" used in Variant B */
.cr-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--cr-cream);
  border: 1.5px solid var(--cr-dark);
  font-size: 13px;
  font-weight: 600;
  color: var(--cr-dark);
  box-shadow: 2px 3px 0 var(--cr-dark);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.cr-tag:hover { transform: translate(-1px, -1px); box-shadow: 3px 4px 0 var(--cr-dark); }
.cr-tag:active { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--cr-dark); }
.cr-tag .dot { width: 10px; height: 10px; border-radius: 50%; }

/* Sticker card (rotated, hard shadow) */
.cr-sticker {
  background: var(--cr-cream);
  border: 1.5px solid var(--cr-dark);
  border-radius: 14px;
  box-shadow: 4px 6px 0 var(--cr-dark);
  transition: transform var(--t-base) var(--ease-out);
}
.cr-sticker:hover { transform: translate(-2px,-2px); }

/* "Polaroid" testimonial card */
.cr-polaroid {
  background: var(--cr-cream);
  padding: 14px 14px 22px;
  box-shadow: 0 8px 24px rgba(58,26,8,0.12);
  border-radius: 4px;
}

/* Subtle dotted divider */
.cr-dot-divider {
  display: flex; align-items: center; gap: 10px; color: var(--cr-mid);
  font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
}
.cr-dot-divider::before, .cr-dot-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--cr-cream-3);
}

/* In-cup liquid (variant C) */
@keyframes cr-fill { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes cr-bob-cup { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* generic shake */
@keyframes cr-shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }

/* ribbon underline for nav active state */
.cr-ribbon {
  position: relative;
}
.cr-ribbon::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--cr-dark);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.cr-ribbon:hover::after, .cr-ribbon.active::after { transform: scaleX(1); }

/* Hide scrollbars inside artboards (the canvas already does this for *) */

/* Marquee for the "currently brewing" tape */
@keyframes cr-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cr-marquee { display: flex; animation: cr-marquee 32s linear infinite; }

/* Variant C cup */
.cup-svg { filter: drop-shadow(0 12px 22px rgba(58,26,8,0.25)); }


/* ============================================================
   FlavourReel — ice cube drift + caption fade
   ============================================================ */
.fr-ice { transform-origin: center; transform-box: fill-box; }
.fr-ice-1 { animation: fr-drift1 7.4s ease-in-out infinite; }
.fr-ice-2 { animation: fr-drift2 8.6s ease-in-out infinite; }
.fr-ice-3 { animation: fr-drift3 6.8s ease-in-out infinite; }
.fr-ice-4 { animation: fr-drift4 9.2s ease-in-out infinite; }
.fr-ice-5 { animation: fr-drift5 7.9s ease-in-out infinite; }

@keyframes fr-drift1 {
  0%, 100% { transform: translate(150px, 180px) rotate(0deg); }
  50%      { transform: translate(154px, 174px) rotate(-3deg); }
}
@keyframes fr-drift2 {
  0%, 100% { transform: translate(230px, 130px) rotate(18deg); }
  50%      { transform: translate(226px, 136px) rotate(22deg); }
}
@keyframes fr-drift3 {
  0%, 100% { transform: translate(180px, 100px) rotate(-12deg); }
  50%      { transform: translate(184px, 96px)  rotate(-9deg); }
}
@keyframes fr-drift4 {
  0%, 100% { transform: translate(115px, 240px) rotate(28deg); }
  50%      { transform: translate(112px, 246px) rotate(32deg); }
}
@keyframes fr-drift5 {
  0%, 100% { transform: translate(265px, 215px) rotate(-22deg); }
  50%      { transform: translate(268px, 220px) rotate(-18deg); }
}

.fr-surface {
  transform-box: fill-box;
  transform-origin: center;
  animation: fr-surface-wobble 4.5s ease-in-out infinite;
}
@keyframes fr-surface-wobble {
  0%, 100% { transform: scaleY(1)    translateY(0); }
  50%      { transform: scaleY(0.985) translateY(0.4px); }
}

@keyframes fr-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}