/* ==========================================================================
   "At a glance" — The Thermogenic Method (animated Venn with callouts)
   Markup: the <section class="section method" data-method> block in index.html
   Behaviour + caption copy: assets/js/method.js
   Desktop (900px+): callouts around the Venn. Phones: Venn on top, callouts as
   a list underneath. A light page only needs to override the --m-* values.
   ========================================================================== */
.method {
  --m-circle: rgba(255, 255, 255, .03);
  --m-circle-on: rgba(227, 59, 54, .15);
  --m-stroke: rgba(255, 255, 255, .3);
  --m-overlap: #f3a6a9;
  --m-rule: rgba(255, 255, 255, .24);
  --m-orbit: rgba(255, 255, 255, .16);
  --m-pill: rgba(255, 255, 255, .05);
  position: relative;
  overflow: hidden;
  background: radial-gradient(50% 36% at 50% 48%, rgba(227, 59, 54, .14), rgba(227, 59, 54, 0) 70%), var(--bg);
}
.method .m-sub { text-align: center; color: var(--ink-2); font-size: 17px; margin: -12px 0 22px; }

/* ---------- Stage (one SVG: Venn + desktop callouts) ---------- */
.m-stage { width: 100%; max-width: 520px; margin: 0 auto; }
.m-stage svg { display: block; width: 100%; height: auto; overflow: visible; -webkit-user-select: none; user-select: none; }
.m-callouts { display: none; }

.m-circle { fill: var(--m-circle); stroke: var(--m-stroke); stroke-width: 2; cursor: pointer; transition: fill .35s ease, stroke .35s ease, opacity .35s ease; }
.m-circle.is-lit { fill: var(--m-circle-on); stroke: var(--accent); filter: drop-shadow(0 0 22px rgba(227, 59, 54, .4)); }
.m-circle.is-dim { opacity: .5; }
.m-circle:focus { outline: none; }
.m-circle:focus-visible { stroke: var(--accent); stroke-width: 3; }

.m-label, .m-olabel, .m-core-text { font-family: var(--font-display); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.m-label { font-weight: 800; font-size: 26px; letter-spacing: .08em; fill: var(--ink); transition: opacity .3s ease; }
.m-olabel { font-weight: 800; font-size: 13px; letter-spacing: .1em; fill: var(--m-overlap); transition: opacity .3s ease; }
.m-core-text { font-weight: 800; font-size: 13px; letter-spacing: .08em; fill: #fff; }
.m-hit { cursor: pointer; outline: none; }
.m-hit rect { fill: transparent; }
.m-hit:focus-visible rect { stroke: var(--accent); stroke-width: 2; }
.m-core path { fill: var(--accent); }
.m-core:focus-visible path { stroke: #fff; stroke-width: 2; }

/* Callouts (desktop) */
.m-co { transition: opacity .3s ease; }
.m-co-tag { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: .16em; fill: var(--accent); }
.m-co-txt { font-family: var(--font-body); font-weight: 600; font-size: 18px; fill: var(--ink); }
.m-co path { fill: none; stroke: var(--m-rule); stroke-width: 1.5; stroke-linejoin: round; }

.is-dim { opacity: .28; }
.m-olabel.is-dim { opacity: .45; }
.m-circle.is-dim { opacity: .5; }

/* Spinning orbit + pulsing core (from the rings concept) */
.m-orbit { transform-box: view-box; transform-origin: 280px 266px; animation: mSpin 48s linear infinite; }
.m-orbit .ring { fill: none; stroke: var(--m-orbit); stroke-width: 1.2; stroke-dasharray: 5 7; }
.m-orbit .dot { fill: var(--accent); filter: drop-shadow(0 0 6px rgba(227, 59, 54, .9)); }
.m-core { transform-box: fill-box; transform-origin: center; animation: mGlow 2.8s ease-in-out infinite; }

/* ---------- Phone note card (rotates with the tour) ---------- */
.m-pop { margin: 14px 0 0; min-height: 214px; }
.m-pop-card {
  position: relative; overflow: hidden; padding: 20px 22px 24px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--accent);
  box-shadow: 0 18px 40px -20px rgba(227, 59, 54, .45);
  transition: opacity .3s ease;
}
.m-pop.is-empty .m-pop-card { opacity: 0; }
.m-pop.pop .m-pop-card { animation: mCard .45s cubic-bezier(.2, .8, .2, 1) both; }
.m-pop-k { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.m-pop-t { margin: 6px 0 12px; font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.05; letter-spacing: -.02em; }
.m-pop-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.m-pop-items li { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; font-weight: 600; line-height: 1.3; }
.m-pop-items li::before {
  content: ""; flex: 0 0 16px; height: 16px; margin-top: 3px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.m-pop-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; opacity: .8; }
.m-pop.touring .m-pop-bar { animation: mBar var(--tour-ms, 3000ms) linear both; }
@keyframes mCard { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Caption bar ---------- */
.m-caption { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.m-pill { display: none !important; } /* phones use the note card instead */
.m-pill {
  flex: 1; min-width: 0; min-height: 60px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; border-radius: 22px; background: var(--m-pill); border: 1px solid var(--line);
}
.m-pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: 0 0 9px; }
.m-cap-t { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .08em; color: var(--accent); }
.m-cap-d { font-size: 15px; color: var(--ink-2); flex: 1 1 200px; }
.m-pill.swap .m-cap-t, .m-pill.swap .m-cap-d { opacity: 0; }
.m-cap-t, .m-cap-d { transition: opacity .2s ease; }
.m-pill { transition: opacity .3s ease; }
.m-pill.is-empty { opacity: 0; }

/* Eyebrow in white for this section */
.method .eyebrow { color: var(--ink); }

/* Title on one line on phones */
@media (max-width: 699px) { .method .h2 { white-space: nowrap; font-size: min(6.6vw, 30px); letter-spacing: -.02em; } }

/* Closing line */
.m-close { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 6vw, 30px); line-height: 1.15; letter-spacing: -.01em; text-align: center; margin: 30px 0 0; }

/* ---------- Entrance (JS adds .armed, then .in when scrolled into view) ---------- */
.m-in-t, .m-in-l, .m-in-r, .m-fade, .m-core-wrap { transform-box: fill-box; transform-origin: center; }
.method.armed .m-in-t, .method.armed .m-in-l, .method.armed .m-in-r { opacity: 0; transform: scale(.45) rotate(-40deg); }
.method.armed .m-fade, .method.armed .m-orbit-wrap, .method.armed .m-co-txt { opacity: 0; }
.method.armed .m-core-wrap { opacity: 0; transform: scale(.3); }
.method.armed .m-co path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.method.in .m-in-t { animation: mIn 1s cubic-bezier(.2, .8, .2, 1) .1s both; }
.method.in .m-in-l { animation: mIn 1s cubic-bezier(.2, .8, .2, 1) .3s both; }
.method.in .m-in-r { animation: mIn 1s cubic-bezier(.2, .8, .2, 1) .5s both; }
.method.in .m-fade { animation: mFade .6s ease .95s both; }
.method.in .m-fade.d2 { animation-delay: 1.25s; }
.method.in .m-core-wrap { animation: mPop .7s cubic-bezier(.2, .8, .2, 1) 1.1s both; }
.method.in .m-orbit-wrap { animation: mFade 1s ease 1.4s both; }
.method.in .m-co path { animation: mDraw .55s ease 1.35s both; }
.method.in .m-co-txt { animation: mFade .6s ease 1.6s both; }

@keyframes mIn { from { opacity: 0; transform: scale(.45) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes mFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mPop { 0% { opacity: 0; transform: scale(.3); } 70% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes mGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(227, 59, 54, 0)); } 50% { filter: drop-shadow(0 0 16px rgba(227, 59, 54, .85)); } }
@keyframes mSpin { to { transform: rotate(360deg); } }

/* ---------- Desktop: callouts around the Venn ---------- */
@media (min-width: 900px) {
  .method .wrap { max-width: 1180px; }
  .m-stage { max-width: 1120px; }
  .m-callouts { display: inline; }
  .m-pop { display: none; }
  .m-pill { display: flex !important; }
  .m-caption { max-width: 820px; margin: 18px auto 0; }
  .m-pill { border-radius: 999px; padding: 12px 28px; flex-wrap: nowrap; }
  .m-cap-t { font-size: 16px; white-space: nowrap; }
  .m-cap-d { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .m-orbit, .m-core { animation: none; }
}