/* PASS36 — civic motion + restrained metallic accents
   Purpose: make the Maine flag palette feel less stuffy while keeping the site serious, readable, and fast.
   This file is visual/behavioral only. It does not alter bill-form text. */
:root{
  --jt-steel-100:#f8fbff;
  --jt-steel-200:#dce5ef;
  --jt-steel-300:#aab8c8;
  --jt-steel-500:#6f7d8d;
  --jt-steel-700:#303b49;
  --jt-metal-line:rgba(220,229,239,.46);
  --jt-metal-soft:rgba(248,251,255,.18);
  --jt-motion-ease:cubic-bezier(.2,.75,.22,1);
}
html{scroll-behavior:smooth;}
body{
  background-attachment:fixed;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(118deg, transparent 0 18%, rgba(255,255,255,.035) 18.3%, transparent 19.2% 100%),
    radial-gradient(600px 280px at 86% 2%, rgba(255,232,79,.10), transparent 64%),
    radial-gradient(720px 320px at 7% 14%, rgba(170,184,200,.10), transparent 60%);
  mix-blend-mode:screen;
}
/* Sparse reveal hooks: JS only adds these to important page elements. */
.jt-reveal{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:
    opacity .72s var(--jt-motion-ease),
    transform .72s var(--jt-motion-ease),
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;
  transition-delay:var(--jt-delay,0ms);
  will-change:opacity,transform;
}
.jt-reveal.jt-in{
  opacity:1;
  transform:translate3d(0,0,0);
}
/* Hero should feel alive once, not loop forever. */
.jt-motion-ready .hero h1,
.jt-motion-ready .page-hero h1,
.jt-motion-ready .initiative-hero h1{
  text-shadow:0 2px 0 rgba(0,0,0,.18), 0 22px 48px rgba(0,0,0,.28);
}
.jt-motion-ready .hero h1::after,
.jt-motion-ready .page-hero h1::after,
.jt-motion-ready .initiative-hero h1::after{
  content:"";
  display:block;
  width:clamp(92px,18vw,220px);
  height:3px;
  margin-top:16px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--maine-gold,#ffe84f), var(--jt-steel-100), transparent);
  box-shadow:0 0 30px rgba(255,232,79,.24);
  transform-origin:left center;
  animation:jt-hero-line .95s var(--jt-motion-ease) both;
}
@keyframes jt-hero-line{
  from{opacity:0; transform:scaleX(.18) translateY(4px);}
  to{opacity:1; transform:scaleX(1) translateY(0);}
}
/* Metallic civic surface: a quiet strength/conviction accent, not chrome gimmick. */
.card-lite,.callout,.identity-card,.route-sequence-card,.lane-companion-card,.reader-card,.bill-section,.micro,
.packet-use-card,.page-purpose-card,.scoreboard-stat,.final-readiness-card,.public-pill,.proof-card,.resource-card,.issue-card{
  position:relative;
  overflow:hidden;
}
.card-lite::before,.callout::before,.identity-card::before,.route-sequence-card::before,.lane-companion-card::before,.reader-card::before,
.packet-use-card::before,.page-purpose-card::before,.scoreboard-stat::before,.final-readiness-card::before,.proof-card::before,.resource-card::before,.issue-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 19%, transparent 80%, rgba(170,184,200,.10)),
    linear-gradient(90deg, rgba(255,232,79,.16), rgba(220,229,239,.14), rgba(255,22,60,.055));
  opacity:.36;
  mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
}
.jt-main-point{
  border-color:rgba(255,232,79,.34) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.jt-main-point::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--maine-gold,#ffe84f),var(--jt-steel-200),rgba(255,232,79,.42));
  box-shadow:0 0 30px rgba(255,232,79,.22);
  pointer-events:none;
}
.jt-constructive-point{border-color:rgba(62,111,62,.56) !important;}
.jt-constructive-point::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--maine-green,#3e6f3e),rgba(255,255,255,.55));
  pointer-events:none;
}
.jt-accountability-point{border-color:rgba(255,22,60,.46) !important;}
.jt-accountability-point::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--maine-red,#ff163c),rgba(255,255,255,.48));
  box-shadow:0 0 26px rgba(255,22,60,.18);
  pointer-events:none;
}
/* Centerpiece actions get the gold/steel treatment. */
.btn-primary,.btn-accent,.tws-cta,.focused-nav .nav-links a.primary,.initiative-page .btn.primary,
.hero-actions-condensed .btn:first-child,.actions .btn.primary{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn-primary::after,.btn-accent::after,.tws-cta::after,.focused-nav .nav-links a.primary::after,.initiative-page .btn.primary::after,
.hero-actions-condensed .btn:first-child::after,.actions .btn.primary::after{
  content:"";
  position:absolute;
  inset:-45% -70%;
  background:linear-gradient(115deg, transparent 36%, rgba(255,255,255,.72) 48%, rgba(220,229,239,.38) 52%, transparent 64%);
  transform:translateX(-58%) rotate(3deg);
  opacity:0;
  z-index:-1;
}
.jt-motion-ready .btn-primary::after,.jt-motion-ready .btn-accent::after,.jt-motion-ready .tws-cta::after,
.jt-motion-ready .focused-nav .nav-links a.primary::after,.jt-motion-ready .initiative-page .btn.primary::after,
.jt-motion-ready .hero-actions-condensed .btn:first-child::after,.jt-motion-ready .actions .btn.primary::after{
  animation:jt-button-sheen 1.25s .55s ease-out 1 both;
}
.btn-primary:hover::after,.btn-primary:focus-visible::after,.btn-accent:hover::after,.btn-accent:focus-visible::after,
.tws-cta:hover::after,.tws-cta:focus-visible::after,.initiative-page .btn.primary:hover::after,.initiative-page .btn.primary:focus-visible::after{
  animation:jt-button-sheen .95s ease-out 1 both;
}
@keyframes jt-button-sheen{
  0%{opacity:0; transform:translateX(-58%) rotate(3deg);}
  18%{opacity:.55;}
  100%{opacity:0; transform:translateX(58%) rotate(3deg);}
}
/* Bill reader: make expansion feel intentional and readable. */
.bill-section summary{
  transition:border-color .28s ease, background .28s ease, transform .28s var(--jt-motion-ease);
}
.bill-section summary:hover,
.bill-section summary:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(255,232,79,.60) !important;
}
.bill-section[open]{
  box-shadow:0 22px 68px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.bill-section[open] summary{
  background:
    linear-gradient(180deg,rgba(255,232,79,.13),rgba(255,255,255,.045)),
    linear-gradient(90deg,rgba(255,232,79,.08),rgba(220,229,239,.05)) !important;
}
/* Homepage and initiative page should visually guide visitors to the centerpiece. */
a[href$="initiative"],a[href="initiative.html"],a[href="/initiative"],a[href="https://jtforme.com/initiative"]{
  text-underline-offset:3px;
}
.jt-motion-ready a[href$="initiative"].jt-focus-link,
.jt-motion-ready a[href="initiative.html"].jt-focus-link,
.jt-motion-ready a[href="/initiative"].jt-focus-link{
  box-shadow:0 0 0 1px rgba(255,232,79,.30), 0 18px 48px rgba(255,232,79,.16) !important;
}
/* A tiny civic pulse for section labels only after they enter the viewport. */
.kicker.jt-in,.meta.jt-in,.status-label.jt-in{
  animation:jt-label-settle .7s var(--jt-motion-ease) 1 both;
}
@keyframes jt-label-settle{
  from{letter-spacing:.11em; opacity:.65;}
  to{letter-spacing:.055em; opacity:1;}
}
@media (hover:hover){
  .jt-main-point:hover,.jt-constructive-point:hover,.jt-accountability-point:hover{
    transform:translateY(-2px);
  }
}
@media (max-width:768px){
  body::before{background:radial-gradient(400px 180px at 92% 0%, rgba(255,232,79,.10), transparent 62%);}
  .jt-reveal{transform:translate3d(0,10px,0); transition-duration:.58s;}
  .jt-motion-ready .hero h1::after,
  .jt-motion-ready .page-hero h1::after,
  .jt-motion-ready .initiative-hero h1::after{
    width:132px;
    height:2px;
    margin-top:12px;
  }
  .jt-main-point::after,.jt-constructive-point::after,.jt-accountability-point::after{width:3px;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto !important;}
  .jt-reveal{opacity:1 !important; transform:none !important; transition:none !important;}
  .jt-motion-ready .hero h1::after,
  .jt-motion-ready .page-hero h1::after,
  .jt-motion-ready .initiative-hero h1::after,
  .jt-motion-ready .btn-primary::after,
  .jt-motion-ready .btn-accent::after,
  .jt-motion-ready .tws-cta::after,
  .kicker.jt-in,.meta.jt-in,.status-label.jt-in{
    animation:none !important;
  }
}