/* ============================================================
   RipRift — How it works (.how) + Feature callouts (.feat)
   Namespaced section styles. Tokens & components live in
   base.css — nothing here redefines them.
   ============================================================ */

/* ------------------------------------------------------------
   HOW IT WORKS
   ------------------------------------------------------------ */

.how-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Faint connector hairline behind the panels (multi-column only) */
.how-steps::before {
  content: "";
  position: absolute;
  top: 105px; left: 6%; right: 6%;
  height: 1px;
  display: none;
  background: linear-gradient(90deg,
    transparent,
    rgba(63, 193, 232, 0.16) 28%,
    rgba(63, 193, 232, 0.16) 72%,
    transparent);
}
@media (min-width: 641px) {
  .how-steps::before { display: block; }
}

.how-step {
  position: relative;
  padding: 30px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 42%),
    var(--panel);
}
/* Hover transitions only after reveal, so they never fight
   the [data-reveal] transition defined in base.css. */
.how-step.revealed {
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
  transition-delay: 0s;
}
.how-step:hover {
  transform: translateY(-4px);
  border-color: var(--border-hi);
}

.how-step-num {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(63, 193, 232, 0.45);
  margin-bottom: 10px;
}
.how-step h3 { font-size: 21px; margin-bottom: 10px; }
.how-step p { font-size: 15px; color: var(--text-2); line-height: 1.6; }

/* ---------- Step visuals (pure CSS art) ---------- */

.how-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
  margin-bottom: 24px;
}

/* Step 1 — floating booster with ambient glow */

.how-pack { animation: how-float-y 6s var(--ease) infinite; }
.how .booster { width: 96px; }

.how-pack-glow {
  position: absolute;
  left: 50%; bottom: 2px;
  width: 120px; height: 22px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(63, 193, 232, 0.30), transparent 70%);
  filter: blur(5px);
  animation: how-glow-pulse 6s var(--ease) infinite;
}
@keyframes how-float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes how-glow-pulse {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.5; transform: translateX(-50%) scale(0.86); }
}

/* Step 2 — pack mid-rip */

.how-rip {
  position: relative;
  width: 150px;
  height: 140px;
}
/* Each half carries its own half of the real pack artwork, then a clip-path
   cuts the torn edge across it. */
.how-rip-half {
  position: absolute;
  left: 50%; top: 50%;
  width: 78px;
  aspect-ratio: var(--pack-ar-half);
  background-image: var(--pack-src);
  background-repeat: no-repeat;
  background-size: 100% 200%;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.6));
}
.how-rip-top {
  z-index: 2;
  background-position: top center;
  transform: translate(-58%, -104%) rotate(-8deg);
  clip-path: polygon(0 0, 100% 0, 100% 58%, 89% 78%, 75% 58%, 61% 82%, 47% 60%, 33% 84%, 19% 62%, 7% 80%, 0 60%);
}
.how-rip-bottom {
  z-index: 1;
  background-position: bottom center;
  transform: translate(-42%, 18%) rotate(6deg);
  clip-path: polygon(0 24%, 9% 4%, 22% 26%, 36% 2%, 50% 28%, 64% 4%, 78% 28%, 91% 6%, 100% 22%, 100% 100%, 0 100%);
}
.how-rip .rc-card.mini { position: absolute; left: 50%; top: 50%; z-index: 3; }
.how-peek-1 { transform: translate(-78%, -86%) rotate(-12deg); }
.how-peek-2 { transform: translate(4%, -46%) rotate(10deg); }

.how-rip-seam {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 4;
  width: 106px; height: 2px;
  transform: translate(-50%, -50%) rotate(-1deg);
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(63, 193, 232, 0.9) 30%,
    rgba(63, 193, 232, 0.9) 70%,
    transparent);
  filter: blur(0.5px);
  animation: how-seam-pulse 3.4s var(--ease) infinite;
}
.how-rip-seam::after { /* halo around the tear */
  content: "";
  position: absolute;
  inset: -8px -12px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(63, 193, 232, 0.30), transparent 72%);
  filter: blur(4px);
}
@keyframes how-seam-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Step 3 — mini collection grid */

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 34px);
  gap: 6px;
}

/* Miniaturized rc-card overrides (rip peeks + collection grid) */
.how .rc-card.mini { width: 26px; }
.how .how-grid .rc-card { width: 34px; }
.how .rc-card.mini,
.how .how-grid .rc-card {
  border-radius: 5px;
  box-shadow:
    0 8px 18px -8px rgba(0, 0, 0, 0.65),
    0 0 14px -6px color-mix(in srgb, var(--rar) 55%, transparent);
}
.how .rc-card.mini::before,
.how .how-grid .rc-card::before { inset: 3px; border-radius: 3px; }

.how .how-grid .rc-card.is-new {
  border-color: rgba(63, 193, 232, 0.55);
  animation: how-new-pulse 2.8s var(--ease) infinite;
}
@keyframes how-new-pulse {
  0%, 100% {
    box-shadow:
      0 0 10px -2px rgba(63, 193, 232, 0.30),
      0 8px 18px -8px rgba(0, 0, 0, 0.65);
  }
  50% {
    box-shadow:
      0 0 20px 1px rgba(63, 193, 232, 0.60),
      0 8px 18px -8px rgba(0, 0, 0, 0.65);
  }
}

/* ------------------------------------------------------------
   FEATURE CALLOUTS
   ------------------------------------------------------------ */

.feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.feat-card {
  position: relative;
  padding: 26px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
/* Top-edge turquoise hairline, brightens on hover */
.feat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(63, 193, 232, 0.55), transparent);
  opacity: 0.35;
  transition: opacity 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* See .how-step.revealed note above. */
.feat-card.revealed {
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
  transition-delay: 0s;
}
.feat-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-hi);
}
.feat-card:hover::before {
  opacity: 1;
  box-shadow: 0 0 14px rgba(63, 193, 232, 0.45);
}

.feat-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--teal-tint);
  border: 1px solid rgba(7, 85, 115, 0.35);
  margin-bottom: 18px;
}
.feat-icon svg { width: 20px; height: 20px; }

.feat-card h3 { font-size: 16.5px; font-weight: 600; margin-bottom: 8px; }
.feat-card p { font-size: 14px; color: var(--text-2); line-height: 1.55; }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 1024px) {
  .how-steps { gap: 20px; }
  .how-step { padding: 24px; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .how-steps {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
  .how-step { padding: 26px; }
  .feat-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
}