/* Important declarations in this layer supersede the legacy unlayered monogram rules. */
@layer tr-neon-masthead {
  /* Carry the mark into the hero so it belongs to the composition, rather than
     reading as a separate banner above it. */
  .hero-copy::before {
    content: "";
    display: block;
    width: min(210px, 52vw);
    aspect-ratio: 548 / 333;
    margin: 0 0 22px;
    border: 1px solid rgba(223,126,158,.28);
    border-radius: 10px;
    background: #0d0b10 url("/assets/site/tr-neon-logo-20260911.png") center / 92% auto no-repeat;
    box-shadow: inset 0 0 28px rgba(223,126,158,.08), 0 0 22px rgba(223,126,158,.12);
    mix-blend-mode: screen;
    opacity: .86;
    filter: brightness(1.06) saturate(1.05) contrast(1.04);
    animation: tr-neon-panel-cycle 12s steps(12,end) infinite;
  }
  .catalog-review::before { display: none; }
  @keyframes tr-neon-panel-cycle {
    0%, 8% { opacity: .74; filter: brightness(.92) saturate(.96); }
    12% { opacity: .98; filter: brightness(1.16) saturate(1.12); }
    18% { opacity: .82; filter: brightness(1) saturate(1); }
    26% { opacity: .96; filter: brightness(1.12) saturate(1.08); }
    34%, 42% { opacity: .68; filter: brightness(.86) saturate(.9); }
    48% { opacity: .9; filter: brightness(1.06) saturate(1.04); }
    58% { opacity: .78; filter: brightness(.94) saturate(.96); }
    66% { opacity: 1; filter: brightness(1.2) saturate(1.15); }
    74%, 86% { opacity: .72; filter: brightness(.9) saturate(.92); }
    92%, 100% { opacity: .88; filter: brightness(1.02) saturate(1); }
  }
  /* On the landing hero the mark lives in the composition itself; avoid a
     second competing copy in the navigation bar. */
  body:has(.hero-copy) header :is(.tr-neon-brand, .home-unified-brand) {
    display: none !important;
  }
  header :is(.tr-neon-brand, .home-unified-brand) {
    --tr-neon-width: 220px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    isolation: auto !important;
    mix-blend-mode: screen !important;
    filter: brightness(1.18) saturate(1.12) contrast(1.08) !important;
    background: transparent !important;
  }
  header :is(.tr-neon-brand, .home-unified-brand) > :is(.brand-text, .brand-copy, .tr-brand-copy) {
    display: none !important;
  }
  header :is(.tr-neon-brand, .home-unified-brand) > :is(.mono, .mark, .brand-mark, .guide-monogram, .tr-nav-logo-mark, img) {
    display: block !important;
    position: relative !important;
    width: var(--tr-neon-width) !important;
    height: calc(var(--tr-neon-width) * 333 / 548) !important;
    aspect-ratio: 548 / 333 !important;
    flex: 0 0 var(--tr-neon-width) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    background: transparent !important;
    animation: none !important;
    filter: brightness(1.18) saturate(1.12) contrast(1.08) !important;
    transform: none !important;
    isolation: auto !important;
    mix-blend-mode: screen !important;
  }
  header :is(.tr-neon-brand, .home-unified-brand) img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
    object-position: center !important;
    clip-path: none !important;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 76%, transparent 94%), linear-gradient(to bottom, transparent, #000 12%, #000 77%, transparent 98%) !important;
    mask-image: linear-gradient(to right, transparent, #000 9%, #000 76%, transparent 94%), linear-gradient(to bottom, transparent, #000 12%, #000 77%, transparent 98%) !important;
    -webkit-mask-composite: source-in !important;
    mask-composite: intersect !important;
    mix-blend-mode: screen !important;
    filter: none !important;
    animation: none !important;
    transform: none !important;
  }
  header:has(.tr-neon-brand) {
    height: auto !important;
    min-height: 0 !important;
  }
  header:has(.tr-neon-brand) :is(nav.nav, .nav.tr-nav-shell, .ep-nav) {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto !important;
    z-index: auto !important;
    padding-block: 14px !important;
    isolation: auto !important;
  }
  @media (max-width: 900px) {
    header :is(.tr-neon-brand, .home-unified-brand) { --tr-neon-width: 190px !important; }
  }
  @media (max-width: 600px) {
    header :is(.tr-neon-brand, .home-unified-brand) { --tr-neon-width: 156px !important; }
    .hero-copy::before { width: min(180px, 58vw); margin-bottom: 18px; }
  }
  @media (max-width: 360px) {
    header :is(.tr-neon-brand, .home-unified-brand) { --tr-neon-width: 142px !important; }
  }
}
@layer tr-neon-masthead {
  .hero-photo .hero-brand-overlay{position:absolute;z-index:2;left:clamp(8%,11vw,16%);top:clamp(8%,10vw,17%);width:clamp(180px,22vw,330px);height:auto;opacity:.78;mix-blend-mode:screen;filter:brightness(1.15) saturate(1.2) drop-shadow(0 0 16px rgba(255,62,143,.45));-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 82%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 82%,transparent);mask-image:linear-gradient(to right,transparent,#000 10%,#000 82%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 82%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect;animation:tr-hero-logo-breathe 7s ease-in-out infinite;pointer-events:none}
  @keyframes tr-hero-logo-breathe{0%,100%{opacity:.58;transform:scale(.98);filter:brightness(.95) saturate(1.05) drop-shadow(0 0 10px rgba(255,62,143,.3))}50%{opacity:.9;transform:scale(1.02);filter:brightness(1.25) saturate(1.25) drop-shadow(0 0 22px rgba(255,62,143,.6))}}
  @media(max-width:640px){.hero-photo .hero-brand-overlay{left:9%;top:8%;width:clamp(150px,42vw,220px)}}
}