/*
Theme Name: GoMaxoo Academy Cinematic
Theme URI: https://academy.gomaxoo.com
Author: GoMaxoo Digital Pvt. Ltd.
Description: Single-page cinematic front page for GoMaxoo Academy — a scroll-driven landing page with a live-laptop hero, kinetic type, and section reveals built on GSAP/ScrollTrigger. Implemented from the "GoMaxoo Academy - Cinematic v2" Claude Design handoff.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gomaxoo-academy-cinematic
*/

/* ------------------------------------------------------------------
   Base — ported verbatim from the design's <helmet><style> block.
   Section/element-level layout stays inline on the markup itself
   (as in the source design) so this file only carries the globals,
   keyframes and responsive overrides that don't belong inline.
------------------------------------------------------------------ */

* { box-sizing: border-box; }

html {
  overflow-x: clip;
  max-width: 100%;
}

body {
  margin: 0;
  background: #0F1B33;
  font-family: 'Source Sans 3', sans-serif;
  color: #F7F5EF;
  overflow-x: clip;
}

a {
  color: #2BA893;
  text-decoration: none;
}

a:hover {
  color: #D4A94A;
}

::selection {
  background: #D4A94A;
  color: #0F1B33;
}

button {
  font: inherit;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes spinSlow {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

@media (min-width: 761px) and (max-height: 800px) {
  [data-hero-stats] { display: none !important; }
  [data-hero-stage] { padding-top: 88px !important; }
}

@media (max-width: 760px) {
  [data-trainer-photo] { margin: 26px auto 8px !important; flex: 0 0 250px !important; width: 250px; height: 250px !important; }
  [data-trainer-photo] > div { width: 190px !important; height: 190px !important; }
  [data-trainer-body] { margin-top: 26px !important; gap: 34px !important; }
  [data-bento-grid] { grid-template-columns: 1fr !important; }
  [data-bento-grid] > div { grid-column: span 1 !important; }
  [data-hero-section] { height: auto !important; }
  [data-hero-stage] { position: static !important; height: auto !important; padding: 110px 5vw 60px !important; }
  [data-hero-grid] { grid-template-columns: 1fr !important; gap: 44px !important; }
  [data-hero-stats] { margin-top: 26px !important; }
  [data-photo-strip] { grid-template-columns: 1fr !important; }
  [data-photo-strip] > div { height: 190px !important; }
  [data-compare-grid] { grid-template-columns: 1fr !important; row-gap: 8px; }
  [data-compare-vs] { display: none !important; }
}

/* ------------------------------------------------------------------
   Module picker ("Every Module Produces Something") — real markup
   replaces the design tool's sc-for/{{ }} templating; see main.js.
------------------------------------------------------------------ */

.module-tab {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 13.5px;
  padding: 13px 20px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: #C9CEDB;
  border: 1.5px solid rgba(247, 245, 239, 0.2);
}

.module-tab.is-active {
  background: #D4A94A;
  color: #0F1B33;
  border: 1.5px solid #D4A94A;
}

.module-stage-card {
  background: #16233F;
  border-radius: 16px;
  padding: 26px 24px;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(247, 245, 239, 0.1);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.module-stage-card.is-in {
  opacity: 1;
  transform: translateY(0);
}

.module-stage-card.is-use {
  border-color: rgba(212, 169, 74, 0.45);
}

/* ------------------------------------------------------------------
   FAQ accordion — plain <details>/<summary>, no JS dependency.
------------------------------------------------------------------ */

.faq-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(247, 245, 239, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: #D4A94A;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  border-color: rgba(212, 169, 74, 0.6);
}

.faq-answer {
  font-size: 15.5px;
  line-height: 1.7;
  color: #C9CEDB;
  margin: 16px 0 0;
  padding-right: 46px;
}