/* ════════════════════════════════════════════════════════════════
   Take Markets — shared motion layer (Clear-Junction-style)
   Palette-agnostic. SEO- & print-safe. Pure CSS, no deps.
   Reveal hiding is gated on html.tm-reveal (added by JS only when
   the page is visible + animations on) so no-JS / hidden-tab /
   print / reduced-motion always show fully-rendered content.
════════════════════════════════════════════════════════════════ */
:root{
  --tm-accent: var(--pp, var(--gold, #E8334A));
  --tm-rv-dist: 18px;
  --tm-rv-dur: .7s;
}
html.tm-bold{ --tm-rv-dist: 34px; --tm-rv-dur: .9s; }

/* ── scroll reveal ── */
html.tm-reveal .tm-rv{
  opacity:0; transform:translateY(var(--tm-rv-dist));
  transition:opacity var(--tm-rv-dur) cubic-bezier(.22,1,.36,1),
             transform var(--tm-rv-dur) cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
html.tm-reveal .tm-rv.tm-in{ opacity:1; transform:none; }

/* ── hero connecting-lines canvas ── */
.tm-fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.3s ease}
.tm-fx.lit{opacity:1}
html.tm-anim-off .tm-fx, html.tm-motif-off .tm-fx{display:none}

/* ── nav scroll state ── */
nav{transition:height .35s cubic-bezier(.22,1,.36,1),background .35s ease,box-shadow .35s ease,border-color .35s ease}
nav.tm-scrolled{box-shadow:0 8px 30px rgba(0,0,0,.10)}

/* ── logo lock-in (classes added by JS only when an svg mark exists) ── */
html.logo-armed nav a svg{opacity:0}
nav a svg .tm-lk{transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .55s ease;will-change:transform}
nav a svg .tm-lk-red{transition-delay:.1s}
html.logo-armed .tm-lk-navy{transform:translate(-70px,-70px)}
html.logo-armed .tm-lk-red{transform:translate(70px,70px)}
nav a:hover .tm-lk-navy{transform:translate(-10px,-10px)}
nav a:hover .tm-lk-red{transform:translate(10px,10px)}

/* ── refined hover micro-interactions ── */
.card,.rc,.pc{transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease,background .25s ease,border-color .25s ease}
.card:hover,.rc:hover,.pc:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(0,0,0,.12)}
.nav-cta,.cta-btn,.cta,.gate-btn{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,background .18s ease,opacity .15s ease}
.nav-cta:hover,.cta-btn:hover,.cta:hover,.gate-btn:hover{transform:translateY(-1px)}
.nav-cta:hover,.gate-btn:hover{box-shadow:0 8px 22px rgba(232,51,74,.26)}

/* ── animations OFF / print: never strand content ── */
html.tm-anim-off .tm-rv{opacity:1!important;transform:none!important}
html.tm-anim-off nav a svg .tm-lk{transform:none!important;opacity:1!important}
@media print{ .tm-rv{opacity:1!important;transform:none!important} .tm-fx{display:none!important} #TWK{display:none!important} }
@media(prefers-reduced-motion:reduce){ .tm-fx{display:none} html.tm-reveal .tm-rv{opacity:1;transform:none} }

/* ── vanilla Tweaks panel ── */
#TWK{position:fixed;right:18px;bottom:18px;z-index:9000;width:250px;background:rgba(8,17,31,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);color:#fff;font-family:'Inter','Jost',sans-serif;display:none;box-shadow:0 24px 64px rgba(0,0,0,.45)}
#TWK.show{display:block}
#TWK .twk-hd{display:flex;align-items:center;justify-content:space-between;padding:.7rem .9rem;border-bottom:1px solid rgba(255,255,255,.08)}
#TWK .twk-hd span{font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75)}
#TWK .twk-close{background:none;border:none;color:rgba(255,255,255,.45);cursor:pointer;font-size:.72rem;padding:.2rem;line-height:1}
#TWK .twk-close:hover{color:var(--tm-accent)}
#TWK .twk-body{padding:.4rem .9rem .85rem}
#TWK .twk-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.05)}
#TWK .twk-row:last-child{border-bottom:none}
#TWK .twk-row label{font-size:.72rem;font-weight:400;color:rgba(255,255,255,.82)}
#TWK .twk-sw{width:38px;height:20px;border-radius:20px;background:rgba(255,255,255,.16);border:none;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
#TWK .twk-sw::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .22s cubic-bezier(.22,1,.36,1)}
#TWK .twk-sw.on{background:var(--tm-accent)}
#TWK .twk-sw.on::after{transform:translateX(18px)}
#TWK .twk-seg{display:flex;border:1px solid rgba(255,255,255,.16);border-radius:3px;overflow:hidden;flex-shrink:0}
#TWK .twk-seg button{background:none;border:none;color:rgba(255,255,255,.55);font-family:'Inter','Jost',sans-serif;font-size:.62rem;font-weight:500;padding:.3rem .62rem;cursor:pointer;transition:all .18s}
#TWK .twk-seg button.on{background:var(--tm-accent);color:#fff}