/* page-tier-escalation.css — visual escalation by page-tier.
   Higher tier = more visible dazzle. Pure CSS, no JS overhead. */

/* Tier 2 — lanes & case-studies. Subtle garnet sweep between sections. */
body[data-tier="2"] .lane-section + .lane-section::before,
body[data-tier="2"] section + section::before {
  content: '';
  display: block;
  height: 1px;
  margin: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(170, 26, 51, 0.4) 30%,
    rgba(214, 58, 82, 0.7) 50%,
    rgba(170, 26, 51, 0.4) 70%,
    transparent 100%);
  background-size: 200% 100%;
  animation: tier-sweep 8s linear infinite;
  opacity: 0.7;
}

/* Tier 3 — reports. Doubled accent + faint glow. */
body[data-tier="3"] section + section::before,
body[data-tier="3"] .gg-article-wrap > * + *::before {
  content: '';
  display: block;
  height: 2px;
  margin: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(170, 26, 51, 0.5) 20%,
    rgba(214, 58, 82, 0.9) 50%,
    rgba(170, 26, 51, 0.5) 80%,
    transparent 100%);
  background-size: 200% 100%;
  animation: tier-sweep 6s linear infinite;
  opacity: 0.85;
  box-shadow: 0 0 12px rgba(170, 26, 51, 0.5);
}

@keyframes tier-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Tier 2/3 — slightly larger fall on .reveal entrance.
   Kept the dramatic-blur idea out of this rule on purpose: .reveal
   switched to a CSS-only keyframe (main.css revealIn) and never gets
   a `.visible`/`.active` class added by JS, so a static `filter: blur`
   here would persist forever and freeze every hero. The keyframes
   below carry the blur in the animation itself so it always lifts. */
@keyframes tierRevealIn2 {
  from { opacity: 0; transform: translateY(50px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes tierRevealIn3 {
  from { opacity: 0; transform: translateY(70px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
body[data-tier="2"] .reveal {
  animation: tierRevealIn2 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
body[data-tier="3"] .reveal {
  animation: tierRevealIn3 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Tier 3 — shimmer overlay on H1 (extra dazzle on report titles) */
body[data-tier="3"] h1, body[data-tier="3"] .hc-hero h1 {
  position: relative;
  background: linear-gradient(90deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.85) 35%,
    var(--garnet-main, #aa1a33) 50%,
    rgba(255, 255, 255, 0.85) 65%,
    #ffffff 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tier3-headline-shimmer 8s linear infinite;
}

@keyframes tier3-headline-shimmer {
  0%   { background-position: 250% center; }
  100% { background-position: -250% center; }
}

/* Reduced motion bypass */
@media (prefers-reduced-motion: reduce) {
  body[data-tier="2"] section + section::before,
  body[data-tier="3"] section + section::before,
  body[data-tier="3"] h1 {
    animation: none !important;
  }
  body[data-tier="2"] .reveal,
  body[data-tier="3"] .reveal {
    transform: none;
    filter: none;
    transition: opacity 200ms linear;
  }
}