/* ── Criterion Companion Page ── */

/* Section heading with icon */
.section-heading-icon {
  display: flex;
  align-items: center;
  gap: 14px;
}
.section-icon {
  width: 36px;
  height: 36px;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* Showcase frame (browser mockup) */
.criterion-showcase {
  max-width: 800px;
}
.showcase-frame {
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-code);
}
.showcase-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  background: rgba(0,0,0,0.25);
}
.showcase-bar .url {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}
.showcase-body img {
  width: 100%;
  display: block;
}
.figure-caption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* Feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.feature-item {
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}
.feature-item h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}
.feature-item p {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.75;
}
.feature-item code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--rust);
  background: var(--rust-dim);
  padding: 2px 6px;
  border-radius: 3px;
}

/* ============================================
   Icon Animations (from Criterion Web)
   Triggered on hover and on scroll-reveal
   ============================================ */

/* Clapperboard - clapper snaps */
.icon-clapperboard__clapper {
  transform-origin: 0% 43%;
  transform: rotate(-8deg) translateY(-3px);
}

@keyframes clapper-snap {
  0% { transform: rotate(-8deg) translateY(-3px); }
  25% { transform: rotate(-25deg) translateY(-3px); }
  50% { transform: rotate(2deg) translateY(-3px); }
  75% { transform: rotate(-12deg) translateY(-3px); }
  100% { transform: rotate(-8deg) translateY(-3px); }
}

.section-heading-icon:hover .icon-clapperboard__clapper,
.section-heading-icon.animate .icon-clapperboard__clapper {
  animation: clapper-snap 0.6s ease-in-out forwards;
}

.section-icon--clapperboard {
  overflow: visible;
}

/* Stars - twirl */
@keyframes stars-twirl {
  0% { transform: rotate(0deg); }
  40% { transform: scale(1.15) rotate(-20deg); }
  70% { transform: scale(1.05) rotate(5deg); }
  100% { transform: rotate(0deg); }
}

.section-heading-icon:hover .section-icon--stars,
.section-heading-icon.animate .section-icon--stars {
  animation: stars-twirl 0.5s ease-in-out forwards;
}

/* Heart - double beat */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.2); }
  50% { transform: scale(1); }
}

.section-heading-icon:hover .section-icon--heart,
.section-heading-icon.animate .section-icon--heart {
  animation: heartbeat 0.4s ease-in-out 2;
}

/* Chat Sparkle - bubbles separate + sparkles blink */
.icon-chat-sparkle__sparkle { opacity: 0; }

@keyframes bubble-back-move {
  0% { transform: translateX(0); }
  40% { transform: translateX(-1.5px); }
  100% { transform: translateX(0); }
}

@keyframes bubble-front-move {
  0% { transform: translateX(0); }
  40% { transform: translateX(1.5px); }
  100% { transform: translateX(0); }
}

@keyframes sparkle-blink-1 {
  0%, 100% { opacity: 0; }
  15%, 25% { opacity: 1; }
  35%, 45% { opacity: 0; }
  55%, 70% { opacity: 1; }
  85% { opacity: 0; }
}

@keyframes sparkle-blink-2 {
  0%, 100% { opacity: 0; }
  20%, 30% { opacity: 1; }
  40%, 55% { opacity: 0; }
  65%, 80% { opacity: 1; }
}

@keyframes sparkle-blink-3 {
  0%, 100% { opacity: 0; }
  10%, 22% { opacity: 1; }
  32%, 48% { opacity: 0; }
  58%, 75% { opacity: 1; }
}

.section-heading-icon:hover .icon-chat-sparkle__bubble-back,
.section-heading-icon.animate .icon-chat-sparkle__bubble-back {
  animation: bubble-back-move 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.section-heading-icon:hover .icon-chat-sparkle__bubble-front,
.section-heading-icon.animate .icon-chat-sparkle__bubble-front {
  animation: bubble-front-move 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.section-heading-icon:hover .icon-chat-sparkle__sparkle--1,
.section-heading-icon.animate .icon-chat-sparkle__sparkle--1 {
  animation: sparkle-blink-1 0.6s linear forwards;
}

.section-heading-icon:hover .icon-chat-sparkle__sparkle--2,
.section-heading-icon.animate .icon-chat-sparkle__sparkle--2 {
  animation: sparkle-blink-2 0.6s linear forwards;
}

.section-heading-icon:hover .icon-chat-sparkle__sparkle--3,
.section-heading-icon.animate .icon-chat-sparkle__sparkle--3 {
  animation: sparkle-blink-3 0.6s linear forwards;
}

@media (max-width: 768px) {
  .feature-grid { grid-template-columns: 1fr; gap: 0; }
  .criterion-showcase { max-width: 100%; }
}