/* ---------- Motion layer (Eric 11/8: "motion design elements instead of basic section dividers ... a stunning page with
   minimal feels of greatness of the Massachusetts Republicans").
   One hue: State House gold (+ pale tint); no multi-hue shimmer. Every element moves within 2 s of arriving.
   Elements get .rv from motion.js ONLY when they start below the fold, so nothing is ever hidden without the script. */
:root { --gold: #B8A05A; --gold-l: #E2D597; --gold-d: #8E7A3E; --gold-glint: rgba(255, 248, 222, .95); }

/* reveal: rise + fade, staggered within a parent */
.rv { opacity: 0; transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(min(var(--i, 0), 6) * 90ms); }
.rv.in { opacity: 1; transform: none; }

/* ---------- Commonwealth ribbon: replaces the flat colour bars between sections ---------- */
main section, .band { position: relative; }
.hero::after { display: none; }                          /* the old 8-px navy|red bar */
.ribbon { position: absolute; left: 0; right: 0; top: 0; height: 52px; transform: translateY(-50%); z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 18px; pointer-events: none; }
.ribbon span { position: relative; flex: 0 1 min(34vw, 400px); height: 2px; overflow: hidden;
  background: linear-gradient(90deg, rgba(10,42,94,0), var(--navy) 38%, var(--gold)); }
.ribbon span:last-child { background: linear-gradient(90deg, var(--gold), var(--red) 62%, rgba(200,16,46,0)); }
.ribbon span::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  background: linear-gradient(90deg, rgba(255,248,222,0), var(--gold-glint), rgba(255,248,222,0));
  transform: translateX(-130%); animation: gpribglint 6s ease-in-out infinite .9s; }
.ribbon span:last-child::after { animation-delay: 1.55s; }  /* the glint passes through the dome, left to right */
.ribbon i { flex: none; width: 42px; height: 50px; background: url(/wp-content/themes/gpgop/img/dome_mark.svg) center / contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(10,42,94,.22)); animation: gpdome 6s ease-in-out infinite .9s; }
@keyframes gpribglint { 0% { transform: translateX(-130%); } 40% { transform: translateX(290%); } 100% { transform: translateX(290%); } }
@keyframes gpdome { 0%, 34%, 100% { filter: drop-shadow(0 6px 10px rgba(10,42,94,.22)) brightness(1); }
  42% { filter: drop-shadow(0 6px 14px rgba(184,160,90,.55)) brightness(1.12); } }
/* draw-in: rules grow outward from the dome, the dome rises in */
.ribbon.rv { opacity: 1; transform: translateY(-50%); }
.ribbon.rv span { transform: scaleX(0); transition: transform 1.3s cubic-bezier(.2,.7,.2,1) .15s; }
.ribbon.rv span:first-child { transform-origin: right center; }
.ribbon.rv span:last-child { transform-origin: left center; }
.ribbon.rv.in span { transform: scaleX(1); }
.ribbon.rv i { opacity: 0; transform: translateY(12px) scale(.85); transition: opacity .9s, transform .9s cubic-bezier(.2,.7,.2,1); }
.ribbon.rv.in i { opacity: 1; transform: none; }
.band .ribbon span:first-child { background: linear-gradient(90deg, rgba(184,160,90,0), var(--gold)); }

/* ---------- gold rule on cards: replaces the alternating red / navy top bars ---------- */
.cards > div, .cards > div:nth-child(2n), .three > a { position: relative; border-top: 1px solid var(--line); }
.cards > div::after, .three > a::after { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--gold-d), var(--gold) 30%, var(--gold-l) 50%, var(--gold) 70%, var(--gold-d));
  background-size: 260% 100%; animation: gprule 7s linear infinite; }
.cards > div.rv::after, .three > a.rv::after { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2,.7,.2,1) .3s; }
.cards > div.rv.in::after, .three > a.rv.in::after { transform: scaleX(1); }
@keyframes gprule { from { background-position: 230% 0; } to { background-position: -60% 0; } }
.cards > div { transition: transform .25s, box-shadow .25s; }
.cards > div:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -26px rgba(10,42,94,.55); }
.cards > div.rv, .three > a.rv { transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
  transition-delay: calc(min(var(--i, 0), 6) * 110ms); }

/* ---------- heritage watermark: the dome, faint, behind the cream sections, drifting with the scroll ---------- */
main section.alt { overflow-x: clip; }
main section.alt::before { content: ""; position: absolute; right: -40px; top: 60px; width: min(44vw, 500px); aspect-ratio: 104 / 124;
  background: var(--navy); opacity: .045; pointer-events: none; transform: translateY(var(--py, 0px));
  -webkit-mask: url(/wp-content/themes/gpgop/img/dome_mark.svg) center / contain no-repeat;
          mask: url(/wp-content/themes/gpgop/img/dome_mark.svg) center / contain no-repeat; }
main section.alt > .wrap { position: relative; z-index: 1; }

/* ---------- the navy tour box: a slow gold arc instead of the static red ring ---------- */
.tour .box::before { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%;
  border: 20px solid rgba(255,255,255,.06); z-index: 0; }
.tour .box::after { border: none; width: 200px; height: 200px; right: -60px; top: -60px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(226,213,151,0) 0 52%, rgba(226,213,151,.15) 62%, rgba(226,213,151,.75) 86%, var(--gold) 94%, rgba(226,213,151,0) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 20px), #000 calc(100% - 19px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 20px), #000 calc(100% - 19px));
  animation: gpspin 14s linear infinite; }
@keyframes gpspin { to { transform: rotate(360deg); } }

/* ---------- contact band: soft gold light drifting across the navy ---------- */
.band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(226,213,151,.22), rgba(226,213,151,0) 72%) no-repeat;
  background-size: 60% 140%; animation: gplight 15s ease-in-out infinite alternate; }
@keyframes gplight { from { background-position: -10% 40%; } to { background-position: 110% 60%; } }
.band .wrap { z-index: 1; }
.band { overflow: visible; }                              /* the band clipped the half of its ribbon above its top edge */
.band::before, .band::after { border-radius: 0; }
.site-foot { border-top: 1px solid rgba(226,213,151,.35); }

@media (max-width: 860px) {
  .ribbon { height: 44px; gap: 12px; }
  .ribbon i { width: 36px; height: 42px; }
  .ribbon span { flex-basis: 34vw; }
  .tour .box::before, .tour .box::after { width: 130px; height: 130px; right: -50px; top: -50px; }
  main section.alt::before { width: 70vw; right: -24vw; opacity: .04; }
}
.band .ribbon i { background-image: url(/wp-content/themes/gpgop/img/dome_mark_rev.svg); }   /* white columns on navy */

/* ---------- Listening Tour emblem: upper-right gutter CTA to the tour map (home page) ---------- */
.tour-emblem { position: fixed; right: 16px; top: 190px; z-index: 40; width: 104px; text-decoration: none; display: flex;
  flex-direction: column; align-items: center; gap: 6px; filter: drop-shadow(0 14px 22px rgba(7,28,64,.35));
  transition: transform .3s cubic-bezier(.2,.7,.2,1); animation: teIn .9s cubic-bezier(.2,.7,.2,1) .4s both; }
.tour-emblem svg { width: 104px; height: 104px; display: block; overflow: visible; }
/* full size only where the side gutter is wide enough to hold it: (viewport - 1180 content) / 2 >= 150 px */
@media (min-width: 1500px) { .tour-emblem { right: 26px; width: 118px; } .tour-emblem svg { width: 118px; height: 118px; } }
.tour-emblem:hover { transform: translateY(-4px) scale(1.04); }
.te-disc { fill: var(--navy); }
.te-ring { fill: none; stroke: #b8a05a; stroke-width: 2.5; }
.te-inner { fill: none; stroke: rgba(226,213,151,.45); stroke-width: 1; }
.te-spin { transform-origin: 60px 60px; animation: teSpin 28s linear infinite; }
.te-spin text { font: 700 8.6px var(--sans); letter-spacing: .14em; fill: #e2d597; }
.te-label { white-space: nowrap; font: 700 11.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); background: #fff;
  padding: 5px 10px; border-radius: 999px; box-shadow: 0 6px 14px -8px rgba(7,28,64,.5); border: 1px solid rgba(184,160,90,.6); }
.tour-emblem:hover .te-ring { stroke: #e2d597; }
@keyframes teSpin { to { transform: rotate(360deg); } }
@keyframes teIn { from { opacity: 0; transform: translateY(-10px) scale(.9); } to { opacity: 1; transform: none; } }
/* gutter under ~130 px (below 1440 px wide): smaller, lower-right corner instead of over the text column */
@media (max-width: 1439px) {
  .tour-emblem { top: auto; bottom: 18px; right: 14px; width: 84px; }
  .tour-emblem svg { width: 84px; height: 84px; }
  .te-label { display: none; }
}