/* ===========================================================================
   Golden State Solar Guide — animated education theme (LIGHT, USA-flag palette).
   Loaded only on learn.html on top of mcsolar.css. Bright white canvas that
   matches the rest of the site: navy-blue structure, red accents, blue current
   flow — plus the SVG animation keyframes that drive the explainer scenes.
   =========================================================================== */

:root {
  --g-navy:  #0a3161;   /* structure / DC / frames */
  --g-blue:  #1d4ed8;   /* current flow / electrons / AC */
  --g-blue2: #2f6bdc;
  --g-red:   #b31942;   /* energy out / accents */
  --g-red2:  #d81e3f;
  --g-ink:   #10203a;
  --g-muted: #6b7a90;
  --g-line:  #e4e9f1;
  --g-stage: #eef4fc;   /* light "stage" panel */
  --g-stage2:#e2ecf9;
}

body { background:
  radial-gradient(1100px 560px at 82% -8%, #eaf2ff 0%, rgba(234,242,255,0) 60%),
  radial-gradient(820px 460px at -2% 0%, #fdeef2 0%, rgba(253,238,242,0) 55%),
  #ffffff;
  color: var(--g-ink);
}
.guide { max-width: 1180px; margin: 0 auto; padding: 0 24px 64px; }

/* ---- Hero ---------------------------------------------------------------- */
.g-hero { text-align: center; padding: 56px 10px 26px; position: relative; }
.g-hero .kicker { color: var(--g-blue); font-weight: 700; letter-spacing: .2em;
                  text-transform: uppercase; font-size: 12px; }
.g-hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 5vw, 52px);
             line-height: 1.04; margin: 12px 0 12px; letter-spacing: -.03em; color: var(--g-ink); }
.g-hero h1 .accent { color: var(--g-blue); }
.g-hero p { color: var(--g-muted); font-size: 16.5px; max-width: 62ch; margin: 0 auto; }
.g-hero .sunwrap { width: 138px; height: 138px; margin: 4px auto 10px; }

/* ---- Scene layout -------------------------------------------------------- */
.scene { display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: center;
         padding: 30px; margin: 24px 0; border-radius: 20px;
         background: #fff; border: 1px solid var(--g-line);
         box-shadow: 0 1px 2px rgba(10,49,97,.04), 0 16px 44px rgba(10,49,97,.08);
         opacity: 0; transform: translateY(24px); }
.scene.in { animation: sceneIn .7s cubic-bezier(.2,.7,.2,1) forwards; }
.scene:nth-child(even) .stage { order: 2; }
.scene .copy .num { display:inline-flex; align-items:center; justify-content:center;
  width: 32px; height: 32px; border-radius: 10px; font-family: var(--display); font-weight: 800; font-size: 15px;
  background: var(--blue-soft); color: var(--g-navy); margin-bottom: 13px; }
.scene .copy h2 { font-family: var(--display); font-weight: 700; font-size: 25px; margin: 0 0 10px;
                  letter-spacing: -.02em; color: var(--g-ink); }
.scene .copy p { color: var(--ink-2); font-size: 14.5px; line-height: 1.65; margin: 0 0 12px; }
.scene .copy p b { color: var(--g-navy); }
.scene .copy .pts { list-style: none; padding: 0; margin: 0; }
.scene .copy .pts li { font-size: 13.5px; color: var(--g-muted); padding: 5px 0 5px 22px; position: relative; }
.scene .copy .pts li::before { content: "▸"; position: absolute; left: 2px; color: var(--g-red); font-weight: 700; }
.scene .copy .pts li b { color: var(--g-ink); }
.stage { background: linear-gradient(165deg, var(--g-stage), var(--g-stage2));
         border: 1px solid #d7e3f5; border-radius: 16px; padding: 16px;
         position: relative; overflow: hidden; }
.stage svg { width: 100%; height: auto; display: block; }
.stage .cap { position:absolute; bottom:10px; left:0; right:0; text-align:center;
              font-size: 11.5px; color: var(--g-muted); }

@keyframes sceneIn { to { opacity: 1; transform: none; } }

/* ---- Triple cards (scale / configs) -------------------------------------- */
.g-section { margin: 44px 0 8px; text-align: center; }
.g-section h2 { font-family: var(--display); font-weight: 800; font-size: 28px; margin: 0;
                letter-spacing: -.02em; color: var(--g-ink); }
.g-section p { color: var(--g-muted); font-size: 14.5px; max-width: 70ch; margin: 8px auto 0; }
.triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; }
.tcard { background: #fff; border: 1px solid var(--g-line); border-radius: 16px; padding: 16px;
         box-shadow: 0 1px 2px rgba(10,49,97,.04), 0 12px 34px rgba(10,49,97,.07); }
.tcard .stage { margin-bottom: 13px; }
.tcard h3 { font-family: var(--display); font-weight: 700; margin: 2px 0 4px; font-size: 17px; color: var(--g-ink); }
.tcard .scale-tag { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
                    color: var(--g-blue); }
.tcard p { font-size: 12.8px; color: var(--ink-2); line-height: 1.55; margin: 6px 0 0; }
.tcard p b { color: var(--g-navy); }
.tcard .pts { list-style:none; padding:0; margin:8px 0 0; }
.tcard .pts li { font-size: 12px; color: var(--g-muted); padding: 3px 0 3px 16px; position: relative; }
.tcard .pts li::before { content:"·"; position:absolute; left:5px; color: var(--g-red); font-weight:900; }

/* ---- Reference directory (light) ----------------------------------------- */
.g-dir { margin-top: 48px; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px; margin-top: 16px; }
.g-card { background: #fff; border: 1px solid var(--g-line); border-radius: 14px; padding: 16px 17px;
          box-shadow: 0 1px 2px rgba(10,49,97,.04), 0 10px 28px rgba(10,49,97,.06); }
.g-card .bh { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.g-card .bh b { font-family: var(--display); font-weight: 700; font-size: 14.5px; color: var(--g-ink); }
.g-card .bt { display:flex; align-items:center; gap:6px; flex:none; }
.g-card .cfgtag { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
                  padding:3px 8px; border-radius:999px; background:var(--blue-soft); color:var(--g-blue); white-space:nowrap; }
.g-card .rank { font-size:9.5px; font-weight:800; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.g-card .rank.r1 { background:var(--g-navy); color:#fff; }
.g-card .rank.r2 { background:#dbe6f7; color:var(--g-navy); }
.g-card .rank.r3 { background:var(--red-soft); color:var(--g-red); }
.share-note { font-size:11.5px; color:var(--g-muted); margin:6px 0 0; }
.tcard .makers { font-size:11.5px; color:var(--ink-2); margin-top:8px; }
.tcard .makers b { color:var(--g-navy); }
.g-card .tag { font-size: 10px; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
               padding: 3px 8px; border-radius: 999px; }
.g-card .tag.panel{ background:var(--blue-soft); color:var(--g-navy); }
.g-card .tag.inv{ background:var(--blue-soft); color:var(--g-blue); }
.g-card .tag.batt{ background:var(--red-soft); color:var(--g-red); }
.g-card p { font-size: 12.3px; color: var(--ink-2); line-height: 1.55; margin: 0 0 9px; }
.g-card .flag { display:inline-block; font-size:10.5px; font-weight:700; color:var(--g-red);
                background:var(--red-soft); border:1px solid #f4c4d0; border-radius:7px; padding:2px 8px; margin-bottom:8px; }
.g-card .links { font-size: 12px; color: var(--g-muted); }
.g-card .links a { color: var(--g-blue); font-weight: 700; }
.g-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.g-links a { font-size:13px; font-weight:600; padding:9px 14px; border:1px solid var(--g-line);
             border-radius:999px; background:#fff; color:var(--g-ink); }
.g-links a:hover { border-color: var(--g-blue); background: var(--blue-soft); color: var(--g-blue); text-decoration:none; }

/* embedded live third-party data charts (Our World in Data) */
.owid-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; margin-top: 20px; }
.owid-card iframe { margin-top: 10px; display: block; }
@media (max-width: 760px) { .owid-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   ANIMATIONS
   ========================================================================= */
/* sun */
.sun-core { transform-origin: center; animation: sunPulse 3.4s ease-in-out infinite; }
.sun-ray  { transform-origin: center; animation: sunPulse 3.4s ease-in-out infinite; }
@keyframes sunPulse { 0%,100%{ opacity:.9; transform:scale(1);} 50%{ opacity:1; transform:scale(1.06);} }
.sun-rays { transform-origin: center; animation: spin 26s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* photons falling */
.photon { animation: photon 1.8s linear infinite; }
@keyframes photon {
  0%   { opacity: 0; transform: translateY(-8px); }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(96px); }
}

/* electrons travelling along a motion path */
.electron { offset-rotate: 0deg; animation: orbit 3.2s linear infinite; }
@keyframes orbit { to { offset-distance: 100%; } }

/* marching-ants current flow */
.flow { stroke-dasharray: 7 9; animation: flow 1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -16; } }
.flow.rev { animation-direction: reverse; }

/* DC dots moving steadily */
.dcdot { animation: dcmove 2.4s linear infinite; }
@keyframes dcmove { from { transform: translateX(0); opacity:0;} 8%{opacity:1;} 92%{opacity:1;} to { transform: translateX(86px); opacity:0;} }

/* AC sine dot tracing the wave */
.acdot { offset-rotate: 0deg; animation: orbit 1.6s linear infinite; }

/* inverter H-bridge switching blink */
.switch { animation: blink 0.9s steps(1) infinite; }
.switch.b { animation-delay: .45s; }
@keyframes blink { 0%,49%{ opacity:1;} 50%,100%{ opacity:.18;} }

/* cloud drifting for the shade demo */
.cloud { animation: drift 7s ease-in-out infinite; }
@keyframes drift { 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(118px); } }

/* output bars reacting to shade (timed to the cloud's mid-point at 50%) */
.bar { transform-origin: bottom; transform: scaleY(1); }
.bar.dip   { animation: dip   7s ease-in-out infinite; }   /* one shaded panel */
.bar.dipAll{ animation: dipAll 7s ease-in-out infinite; }  /* whole string drops */
@keyframes dip    { 0%,38%{ transform:scaleY(1);} 50%{ transform:scaleY(.18);} 62%,100%{ transform:scaleY(1);} }
@keyframes dipAll { 0%,30%{ transform:scaleY(1);} 50%{ transform:scaleY(.28);} 70%,100%{ transform:scaleY(1);} }

/* daily production scene: sun arcs across the sky, a marker sweeps the curve */
.sunarc { offset-rotate: 0deg; animation: arcmove 9s ease-in-out infinite; }
@keyframes arcmove { 0%{ offset-distance:0%; } 100%{ offset-distance:100%; } }
.daysweep { animation: sweep 9s ease-in-out infinite; }
@keyframes sweep { 0%{ transform: translateX(0); } 100%{ transform: translateX(360px); } }
.dayfill { transform-origin: left center; animation: dayfill 9s ease-in-out infinite; }
@keyframes dayfill { 0%{ transform: scaleX(0);} 100%{ transform: scaleX(1);} }

/* battery storage scene: 8s day/night cycle — day elements charge, night elements discharge */
.phaseA { animation: dayEl 8s ease-in-out infinite; }
.phaseB { animation: nightEl 8s ease-in-out infinite; }
@keyframes dayEl   { 0%,40%{ opacity:1; }   55%,90%{ opacity:.1; } 100%{ opacity:1; } }
@keyframes nightEl { 0%,40%{ opacity:.1; }  55%,90%{ opacity:1; }  100%{ opacity:.1; } }
.batfill { transform-box: fill-box; transform-origin: bottom; animation: batcharge 8s ease-in-out infinite; }
@keyframes batcharge { 0%{ transform:scaleY(.2);} 40%,55%{ transform:scaleY(1);} 90%{ transform:scaleY(.25);} 100%{ transform:scaleY(.2);} }

/* gentle float for buildings/sun in scale cards */
.float { animation: floaty 5s ease-in-out infinite; }
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-4px);} }
.glowpulse { animation: glowp 2.6s ease-in-out infinite; }
@keyframes glowp { 0%,100%{ opacity:.5;} 50%{ opacity:1;} }
.spin-slow { transform-origin:center; animation: spin 9s linear infinite; }

@media (max-width: 880px){
  .scene { grid-template-columns: 1fr; }
  .scene:nth-child(even) .stage { order: 0; }
  .triple { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; }
  .scene { opacity: 1; transform: none; }
}

/* ---- Dark mode ----------------------------------------------------------- */
[data-theme="dark"] { --g-navy:#7fb0ff; --g-blue:#83b0ff; --g-ink:#e9eefb; --g-muted:#9fb0cc; --g-line:#28324c; }
[data-theme="dark"] body { background:
  radial-gradient(1100px 560px at 82% -8%, #10203f 0%, rgba(16,32,63,0) 60%),
  radial-gradient(820px 460px at -2% 0%, #241224 0%, rgba(36,18,36,0) 55%), #0b1220; }
[data-theme="dark"] .scene, [data-theme="dark"] .tcard, [data-theme="dark"] .g-card { background:#151f37; border-color:#28324c; }
[data-theme="dark"] .g-hero h1, [data-theme="dark"] .scene .copy h2, [data-theme="dark"] .g-section h2,
[data-theme="dark"] .tcard h3, [data-theme="dark"] .g-card .bh b { color:#e9eefb; }
[data-theme="dark"] .g-links a { background:#151f37; color:#dbe6ff; }
[data-theme="dark"] .g-card .rank.r1 { background:#1d4ed8; color:#fff; }
[data-theme="dark"] .g-card .rank.r2 { background:#26324c; color:#cdd9f2; }
[data-theme="dark"] .stage { --g-muted:#5a6b85; background:linear-gradient(165deg,#eef4fc,#e2ecf9); border-color:#d7e3f5; }