/* CiberPenal website — responsive layer.
   Inline styles set the desktop layout; these media queries override the
   class-hooked containers at smaller widths (!important beats inline styles). */

/* default: desktop nav visible, toggle hidden */
.cp-nav-toggle { display: none; }
.cp-mobile-menu { display: none; }

/* ---- Premium entrance reveal (triggered by body.cp-ready) ---- */
.cp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  will-change: opacity, transform;
}
body.cp-ready .cp-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cp-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Scroll-reveal (triggered by motion.js adding .in) ---- */
.cp-anim {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 85ms);
  will-change: opacity, transform;
}
.cp-anim.in { opacity: 1; transform: none; }
.cp-parallax { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .cp-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Auto media carousel ---- */
.cp-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cp-marquee-track { display: flex; align-items: center; gap: 72px; width: max-content; animation: cpMarquee 26s linear infinite; }
.cp-marquee:hover .cp-marquee-track { animation-play-state: paused; }
@keyframes cpMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cp-marquee-track { animation: none; } }

/* ---- Pulse dot (live radar) ---- */
@keyframes cpPulse {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* ---- Microinteractions: area cards ---- */
.cp-grid-3 a .cp-card,
.cp-grid-3 a [class*="Card"] { transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out); }
.cp-grid-3 a:hover .cp-card,
.cp-grid-3 a:hover [class*="Card"] { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--teal-300); }

/* ---- Quiz options ---- */
.cp-quiz-opt:hover { border-color: var(--teal-400) !important; background: var(--surface-accent-soft) !important; transform: translateX(4px); }
.cp-quiz-opt:active { transform: scale(0.99); }

/* ---- Timeline responsive ---- */
@media (max-width: 1000px) {
  .cp-timeline { grid-template-columns: 1fr 1fr !important; }
  .cp-tl-line { display: none !important; }
}

/* ---- Tablet ---- */
@media (max-width: 1000px) {
  .cp-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .cp-foot-grid { grid-template-columns: 1fr 1fr 1fr !important; }
}

/* ---- Below 900px: collapse nav to hamburger ---- */
@media (max-width: 900px) {
  .cp-nav-desktop { display: none !important; }
  .cp-header-phone { display: none !important; }
  .cp-header-cta { display: none !important; }
  .cp-nav-toggle { display: inline-flex !important; }
  .cp-mobile-menu { display: block !important; }

  .cp-hero-grid { grid-template-columns: 1fr !important; }
  .cp-hero-portrait { display: none !important; }
  .cp-split { grid-template-columns: 1fr !important; }
  .cp-grid-3 { grid-template-columns: 1fr 1fr !important; }
  .cp-foot-grid { grid-template-columns: 1fr 1fr !important; }
  .cp-legal-grid { grid-template-columns: 1fr !important; }
  .cp-legal-toc { display: none !important; }
}

/* ---- Phone ---- */
@media (max-width: 600px) {
  .cp-grid-2 { grid-template-columns: 1fr !important; }
  .cp-grid-3 { grid-template-columns: 1fr !important; }
  .cp-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .cp-foot-grid { grid-template-columns: 1fr 1fr !important; }
  .cp-hero-title { font-size: 2.6rem !important; }
  .cp-hero-stats { gap: var(--space-5) !important; }
  .cp-foot-bottom { flex-direction: column !important; }
  .cp-urgent-label { display: none; }            /* shrink FAB to icon on phones */
  .cp-urgent { padding: 12px !important; }
}

@media (max-width: 380px) {
  .cp-grid-4 { grid-template-columns: 1fr !important; }
  .cp-foot-grid { grid-template-columns: 1fr !important; }
}