/* Trawa Romero — premium progressive-enhancement layer. */

.tr-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90;
  background: linear-gradient(90deg, var(--gold), var(--pink), var(--pink-strong));
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  @keyframes trProgressGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .tr-progress { animation: trProgressGrow linear both; animation-timeline: scroll(root); }
}
@supports not (animation-timeline: scroll()) { .tr-progress { display: none; } }

@supports (animation-timeline: view()) {
  @keyframes trDrift { from { transform: translateY(26px); } to { transform: translateY(-26px); } }
  body.tr-home-v3 .tr-spec-img img {
    animation: trDrift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
    height: 112%;
  }
  @keyframes trWipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  body.tr-home-v3 .tr-spec-img {
    animation: trWipe cubic-bezier(.16, .84, .28, 1) both;
    animation-timeline: view();
    animation-range: entry 10% entry 65%;
  }
}

.tr-term {
  position: relative; cursor: help;
  text-decoration: underline dotted rgba(223, 126, 158, .55);
  text-underline-offset: 3px;
}
#trTermPop {
  position: fixed; z-index: 90; width: 236px;
  padding: 16px 16px 14px; border-radius: 12px;
  background: linear-gradient(160deg, rgba(20,21,24,.96), rgba(8,9,11,.98));
  border: 1px solid var(--gold-line);
  box-shadow: 0 26px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(223,126,158,.08);
  opacity: 0; pointer-events: none;
  transform: perspective(700px) rotateX(-14deg) translateY(10px) scale(.92);
  transform-origin: center bottom;
  transition: opacity .28s ease, transform .38s cubic-bezier(.2,.9,.25,1.35);
}
#trTermPop.is-on { opacity: 1; transform: perspective(700px) rotateX(0) translateY(0) scale(1); }
#trTermPop .tp-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
#trTermPop .tp-orb {
  position: relative; width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, var(--c) 0%, color-mix(in srgb, var(--c) 55%, #050506) 70%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 0 18px 1px color-mix(in srgb, var(--c) 65%, transparent);
  animation: tpOrbPulse 2.6s ease-in-out infinite;
}
#trTermPop .tp-orb::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--c) 70%, transparent);
  animation: tpRing 7s linear infinite;
}
@keyframes tpOrbPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.28); } }
@keyframes tpRing { to { transform: rotate(360deg); } }
#trTermPop .tp-name { font-family: var(--serif); font-size: 16.5px; color: var(--cream); line-height: 1.1; }
#trTermPop .tp-tag { display: block; margin-top: 2px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--c); font-weight: 700; }
#trTermPop .tp-note { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

@media (max-width: 640px) {
  #trTermPop {
    left: 12px !important; right: 12px; bottom: 12px !important; top: auto !important;
    width: auto; max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tr-progress { display: none; }
  #trTermPop { transition: opacity .18s ease; transform: none !important; }
  #trTermPop .tp-orb, #trTermPop .tp-orb::after { animation: none; }
  body.tr-home-v3 .tr-spec-img,
  body.tr-home-v3 .tr-spec-img img { animation: none !important; }
}