/* ============================================================
   ty-blog-masthead — navy hero band with a floating-chip layer.
   Only visual rules; markup/text/heading levels are unchanged.
   `section.b-masthead` (0,1,1) intentionally out-ranks the template's
   `.b-masthead` rules, so the template CSS stays untouched.
   ============================================================ */
section.b-masthead {
  --tym-nav: 64px;                 /* fixed site nav sits over the top of the band */
  position: relative;
  overflow: hidden;
  background: #080032;
  padding: calc(var(--tym-nav) + 72px) 0 120px;
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
/* Content stays in the existing .b-inner container (same edges as the filter box) */
section.b-masthead > .b-inner { position: relative; z-index: 2; }

.b-masthead .b-masthead__eyebrow {
  font-family: inherit;
  font-size: 13px; font-weight: 500; line-height: 1.3;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: #B9A9FF;
  margin: 0 0 16px;
}
.b-masthead .b-masthead__title {
  font-family: inherit;
  font-size: 48px; line-height: 1.15; font-weight: 700; letter-spacing: normal;
  color: #fff;
  max-width: 620px;
  margin: 0 0 16px;
}
.b-masthead .b-masthead__sub {
  font-family: inherit;
  font-size: 18px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 600px;
  margin: 0;
}

/* ---------- Light ---------- */
.tym-glow {
  position: absolute; z-index: 0;
  right: -100px; top: -200px;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(104, 71, 245, 0.45) 0%, rgba(104, 71, 245, 0) 65%);
  pointer-events: none;
}

/* ---------- Floating chips ---------- */
/* Aligned to the .b-inner content box; top is measured from the visible
   top of the band (just below the fixed nav). */
.tym-float {
  position: absolute; z-index: 1;
  top: var(--tym-nav); bottom: 0; left: 0; right: 0;
  max-width: var(--ty-content-max, 1200px);
  margin: 0 auto;
  padding: 0 48px;
  pointer-events: none;
}
.tym-float__box { position: relative; height: 100%; }

.tym-chip {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);           /* fallback without blur */
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 14px; font-weight: 500; line-height: 1.2;
  white-space: nowrap;
  animation: tym-floaty var(--tym-dur, 7s) ease-in-out var(--tym-delay, 0s) infinite;
  will-change: transform;
}
@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  .tym-chip {
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
.tym-chip__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tym-dot); }
.tym-chip__stars { display: flex; gap: 2px; color: #FFC857; }
.tym-chip__stars svg { display: block; width: 16px; height: 16px; }

.tym-chip--sm {
  gap: 6px; padding: 8px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}
@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  .tym-chip--sm { background: rgba(255, 255, 255, 0.05); }
}
.tym-chip--sm .tym-chip__dot { width: 6px; height: 6px; }

/* Positions (right / top), duration 6–9s, negative delay 0 to -6s */
.tym-chip--1  { right: 40px;  top: 40px;  --tym-dur: 7s;   --tym-delay: 0s; }
.tym-chip--2  { right: 230px; top: 64px;  --tym-dur: 8.2s; --tym-delay: -2.1s;  --tym-dot: #7CE3B1; }
.tym-chip--3  { right: 20px;  top: 120px; --tym-dur: 6.4s; --tym-delay: -4.3s;  --tym-dot: #B9A9FF; }
.tym-chip--4  { right: 380px; top: 150px; --tym-dur: 8.8s; --tym-delay: -1.2s;  --tym-dot: #FF8FA3; }
.tym-chip--5  { right: 170px; top: 150px; --tym-dur: 7.6s; --tym-delay: -5.4s;  --tym-dot: #FFC857; }
.tym-chip--6  { right: 0;     top: 212px; --tym-dur: 6.8s; --tym-delay: -3.1s;  --tym-dot: #8FD3FF; }
.tym-chip--7  { right: 250px; top: 232px; --tym-dur: 9s;   --tym-delay: -0.6s;  --tym-dot: #7CE3B1; }
.tym-chip--8  { right: 90px;  top: 296px; --tym-dur: 7.2s; --tym-delay: -4.8s;  --tym-dot: #B9A9FF; }
.tym-chip--9  { right: 300px; top: 320px; --tym-dur: 8.4s; --tym-delay: -2.7s;  --tym-dot: #FFC857; }
.tym-chip--10 { right: 30px;  top: 370px; --tym-dur: 6.2s; --tym-delay: -1.8s;  --tym-dot: #8FD3FF; }
.tym-chip--11 { right: 210px; top: 392px; --tym-dur: 7.9s; --tym-delay: -5.9s;  --tym-dot: #FF8FA3; }
.tym-chip--12 { right: 330px; top: 410px; --tym-dur: 6.6s; --tym-delay: -3.6s;  --tym-dot: #7CE3B1; }

@keyframes tym-floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Lowest chip (#12) ends ~445px below the band top; keep the band tall
   enough that no chip reaches under the filter box (which rises 64px). */
@media (min-width: 1280px) {
  section.b-masthead { min-height: calc(var(--tym-nav) + 590px); }
}

/* 1100–1279: small chips off; the text column gives the big chips room */
@media (max-width: 1279.98px) {
  .tym-chip--sm { display: none; }
  .b-masthead .b-masthead__title { max-width: min(620px, calc(100% - 430px)); }
  .b-masthead .b-masthead__sub   { max-width: min(600px, calc(100% - 430px)); }
}

/* Below 1100: no chips at all; navy + light stay */
@media (max-width: 1099.98px) {
  .tym-float { display: none; }
  .b-masthead .b-masthead__title { max-width: 620px; }
  .b-masthead .b-masthead__sub   { max-width: 600px; }
}

/* Theme breakpoint (grid/nav) */
@media (max-width: 940px) {
  section.b-masthead { padding: calc(var(--tym-nav) + 48px) 0 96px; }
  .b-masthead .b-masthead__eyebrow { font-size: 12px; }
  .b-masthead .b-masthead__title   { font-size: 32px; }
  .b-masthead .b-masthead__sub     { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .tym-chip { animation: none; will-change: auto; }
}