/* ============================================================================
   "Study Setting" animated cards  ·  Commute / Lunch-break / Late nights
   Namespaced under .ifi-cards
   ============================================================================ */

.ifi-cards {
  --ifi-bg-card: #243017;
  --ifi-gold: #c19a2e;
  --ifi-gold-bright: #e0b23a;
  --ifi-cream: #f0ebe0;
  --ifi-cream-dim: rgba(240, 235, 224, 0.62);
  --ifi-cream-faint: rgba(240, 235, 224, 0.16);
  --ifi-sil-fg: #f0ebe0;
  --ifi-sil-mid: #bfb8a3;
  --ifi-sil-back: rgba(240, 235, 224, 0.24);
  --ifi-glow: #e0b23a;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  color: var(--ifi-cream);
  -webkit-font-smoothing: antialiased;
}
.ifi-cards *,
.ifi-cards *::before,
.ifi-cards *::after {
  box-sizing: border-box;
}

.ifi-cards .ifi-card {
  position: relative;
  margin: 0;
  background: var(--ifi-bg-card);
  border: 1px solid var(--ifi-cream-faint);
  padding: 20px 20px 18px;
}
.ifi-cards .ifi-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 420 / 560;
  overflow: hidden;
}
.ifi-cards .ifi-scene svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ifi-cards .ifi-tick {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 3;
  pointer-events: none;
}
.ifi-cards .ifi-tick::before,
.ifi-cards .ifi-tick::after {
  content: "";
  position: absolute;
  background: var(--ifi-cream-faint);
}
.ifi-cards .ifi-tick::before { width: 14px; height: 1px; }
.ifi-cards .ifi-tick::after  { width: 1px; height: 14px; }
.ifi-cards .ifi-tick.tl { top: 8px; left: 8px; }
.ifi-cards .ifi-tick.tl::before,
.ifi-cards .ifi-tick.tl::after { top: 0; left: 0; }
.ifi-cards .ifi-tick.tr { top: 8px; right: 8px; }
.ifi-cards .ifi-tick.tr::before,
.ifi-cards .ifi-tick.tr::after { top: 0; right: 0; }
.ifi-cards .ifi-tick.bl { bottom: 78px; left: 8px; }
.ifi-cards .ifi-tick.bl::before,
.ifi-cards .ifi-tick.bl::after { bottom: 0; left: 0; }
.ifi-cards .ifi-tick.br { bottom: 78px; right: 8px; }
.ifi-cards .ifi-tick.br::before,
.ifi-cards .ifi-tick.br::after { bottom: 0; right: 0; }

.ifi-cards .ifi-tag {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 4;
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ifi-gold-bright);
}

.ifi-cards .ifi-dim {
  position: relative;
  height: 16px;
  margin: 12px 2px 0;
}
.ifi-cards .ifi-dim__line {
  position: absolute;
  left: 0; right: 0; top: 8px;
  height: 1px;
  background: rgba(240, 235, 224, 0.3);
}
.ifi-cards .ifi-dim__cap {
  position: absolute;
  top: 1px;
  width: 1px;
  height: 14px;
  background: var(--ifi-cream-dim);
}
.ifi-cards .ifi-dim__cap.l { left: 0; }
.ifi-cards .ifi-dim__cap.r { right: 0; }
.ifi-cards .ifi-dim__cap::after {
  content: "";
  position: absolute;
  top: 6px; left: -3px;
  width: 7px; height: 1px;
  background: var(--ifi-cream-dim);
}

.ifi-cards .ifi-label-mobile { display: none; }
.ifi-cards .ifi-caption { margin-top: 16px; }
.ifi-cards .ifi-caption h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  color: var(--ifi-cream);
  letter-spacing: -0.01em;
}
.ifi-cards .ifi-caption p {
  margin: 5px 0 0;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ifi-cream-dim);
}

.ifi-cards .fg   { fill: var(--ifi-sil-fg); }
.ifi-cards .mid  { fill: var(--ifi-sil-mid); }
.ifi-cards .back { fill: var(--ifi-sil-back); }
.ifi-cards .gold { fill: var(--ifi-glow); }
.ifi-cards .knock { fill: var(--ifi-bg-card); }
.ifi-cards .limb {
  fill: none;
  stroke: var(--ifi-sil-fg);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ifi-cards .mid-line {
  fill: none;
  stroke: var(--ifi-sil-mid);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ifi-cards .gold-line {
  fill: none;
  stroke: var(--ifi-glow);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes ifi-scrollX    { from { transform: translateX(0); }    to { transform: translateX(-300px); } }
@keyframes ifi-cloudDrift { from { transform: translateX(-110px); } to { transform: translateX(380px); } }
@keyframes ifi-steamRise  { 0% { opacity: 0; transform: translateY(8px); } 25% { opacity: 0.5; } 100% { opacity: 0; transform: translateY(-22px); } }
@keyframes ifi-tailSwish  { 0%, 100% { transform: rotate(-11deg); } 50% { transform: rotate(12deg); } }
@keyframes ifi-haloPulse  { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes ifi-starDrift  { from { transform: translateX(0); }    to { transform: translateX(-132px); } }
@keyframes ifi-twinkle    { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.2; } }
@keyframes ifi-screenScroll { from { transform: translateY(0); } to { transform: translateY(-276px); } }
@keyframes ifi-sway       { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(2.5px) rotate(0.3deg); } }

.ifi-cards .scroll       { animation: ifi-scrollX 28s linear infinite; }
.ifi-cards .cloud        { animation: ifi-cloudDrift 72s linear infinite; }
.ifi-cards .steam        { animation: ifi-steamRise 4.6s ease-in-out infinite; }
.ifi-cards .tail         { transform-box: fill-box; transform-origin: 8% 94%; animation: ifi-tailSwish 4s ease-in-out infinite; }
.ifi-cards .halo         { animation: ifi-haloPulse 5s ease-in-out infinite; }
.ifi-cards .starfield    { animation: ifi-starDrift 60s linear infinite; }
.ifi-cards .star         { animation: ifi-twinkle 4s ease-in-out infinite; }
.ifi-cards .screenscroll { animation: ifi-screenScroll 14s linear infinite; }
.ifi-cards .figure-sway  { transform-box: fill-box; transform-origin: 50% 100%; animation: ifi-sway 6.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .ifi-cards .scroll,
  .ifi-cards .cloud,
  .ifi-cards .steam,
  .ifi-cards .tail,
  .ifi-cards .halo,
  .ifi-cards .starfield,
  .ifi-cards .star,
  .ifi-cards .screenscroll,
  .ifi-cards .figure-sway { animation: none !important; }
}

/* ---- mobile: compact 3-up row ------------------------------------------ */
@media (max-width: 980px) {
  .ifi-cards-section { padding-block: 32px 36px !important; }
  .ifi-cards-section .section-title { font-size: 20px !important; margin-bottom: 20px !important; }
  .ifi-cards-section .section-eyebrow { font-size: 11px !important; }
  .ifi-cards {
    gap: 10px;
  }
  .ifi-cards .ifi-card {
    padding: 8px 8px 10px;
  }
  .ifi-cards .ifi-tag {
    font-size: 5px;
    top: 3px;
    left: 8px;
    letter-spacing: 0.08em;
  }
  .ifi-cards .ifi-tick { width: 9px; height: 9px; }
  .ifi-cards .ifi-tick::before { width: 9px; }
  .ifi-cards .ifi-tick::after  { height: 9px; }
  .ifi-cards .ifi-dim { margin-top: 6px; height: 10px; }
  .ifi-cards .ifi-caption { margin-top: 6px; min-height: 18px; }
  .ifi-cards .ifi-caption h3 { display: none; }
  .ifi-cards .ifi-caption p  { display: none; }
  .ifi-cards .ifi-label-mobile {
    display: block;
    font-family: "Space Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--ifi-cream);
    text-align: center;
  }
}