/*
Theme Name: UA Blog
Theme URI: https://unified-automation.net/
Author: Unified Automation SRL
Description: Dark industrial child theme for the Unified Automation Blog - automation knowledge, how-tos and field notes on PLC, SCADA, MES and robotics.
Template: twentytwentyfive
Version: 3.0
Text Domain: ua-blog
*/

/* ============================================================
   0. BRAND TOKENS
   ============================================================ */
:root {
  --ua-navy:        #0a1826;
  --ua-surface:     #10263c;
  --ua-surface-2:   #16324c;
  --ua-steel:       #1d4260;
  --ua-line:        #234a6b;
  --ua-amber:       #ff8a1f;
  --ua-amber-soft:  #ffb056;
  --ua-amber-dim:   rgba(255, 138, 31, 0.14);
  --ua-blue:        #3aa0ff;
  --ua-blue-dim:    rgba(58, 160, 255, 0.14);
  --ua-green:       #3ddc97;
  --ua-red:         #ff5f56;
  --ua-text:        #e9eff6;
  --ua-muted:       #9db0c4;
  --ua-radius:      14px;
  --ua-shadow:      0 18px 45px rgba(0, 0, 0, 0.45);
  --ua-ease:        cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   1. BASE
   ============================================================ */
body {
  background: var(--ua-navy);
  color: var(--ua-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--ua-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ua-line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.05;
}
.wp-site-blocks { position: relative; z-index: 1; }
a { color: var(--ua-amber); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ua-amber-soft); }

.entry-content p { line-height: 1.78; }
.entry-content h2 {
  margin-top: 2.8rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--ua-line);
  letter-spacing: -0.01em;
}
.entry-content h3 { margin-top: 2rem; color: var(--ua-amber-soft); }

/* ============================================================
   2. ANIMATED HERO
   ============================================================ */
.ua-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--ua-radius);
  padding: 4.2rem 2.4rem;
  margin-bottom: 3rem;
  background:
    radial-gradient(1100px 380px at 12% -10%, rgba(255, 138, 31, 0.22), transparent 60%),
    radial-gradient(900px 340px at 88% 110%, rgba(58, 160, 255, 0.20), transparent 60%),
    linear-gradient(140deg, var(--ua-surface) 0%, var(--ua-navy) 100%);
  border: 1px solid var(--ua-line);
  box-shadow: var(--ua-shadow);
}
.ua-hero::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 138, 31, 0.10) 60deg, transparent 140deg);
  animation: ua-sweep 14s linear infinite;
  pointer-events: none;
}
@keyframes ua-sweep { to { transform: rotate(360deg); } }
.ua-hero h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.8rem;
}
.ua-hero p { color: var(--ua-muted); max-width: 60ch; margin: 0; }
.ua-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ua-amber);
  border: 1px solid var(--ua-amber-dim);
  background: var(--ua-amber-dim);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}

/* ============================================================
   3. KNOWLEDGE CARDS
   ============================================================ */
.ua-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
}
.ua-card {
  position: relative;
  background: linear-gradient(160deg, var(--ua-surface) 0%, var(--ua-navy) 130%);
  border: 1px solid var(--ua-line);
  border-radius: var(--ua-radius);
  padding: 1.6rem 1.5rem 1.35rem;
  overflow: hidden;
  transition: transform 0.45s var(--ua-ease), border-color 0.45s var(--ua-ease), box-shadow 0.45s var(--ua-ease);
}
.ua-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--ua-amber), var(--ua-blue));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--ua-ease);
}
.ua-card:hover {
  transform: translateY(-6px);
  border-color: var(--ua-amber);
  box-shadow: var(--ua-shadow);
}
.ua-card:hover::before { transform: scaleY(1); }
.ua-card h3 { margin: 0 0 0.6rem; font-size: 1.18rem; line-height: 1.35; }
.ua-card h3 a { color: var(--ua-text); text-decoration: none; }
.ua-card:hover h3 a { color: var(--ua-amber-soft); }
.ua-card p { color: var(--ua-muted); font-size: 0.95rem; margin: 0 0 1.1rem; }
.ua-readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ua-amber);
  text-decoration: none;
}
.ua-readmore span { transition: transform 0.35s var(--ua-ease); }
.ua-card:hover .ua-readmore span { transform: translateX(6px); }

/* ============================================================
   4. CATEGORY PILLS
   ============================================================ */
.ua-pills { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.6rem 0 2.4rem; }
.ua-pill {
  font-size: 0.82rem;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--ua-line);
  background: var(--ua-surface);
  color: var(--ua-muted);
  text-decoration: none;
  transition: all 0.3s var(--ua-ease);
}
.ua-pill:hover, .ua-pill.is-active {
  color: var(--ua-navy);
  background: var(--ua-amber);
  border-color: var(--ua-amber);
  transform: translateY(-2px);
}

/* ============================================================
   5. READING PROGRESS + TOC
   ============================================================ */
#ua-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 9999;
  background: linear-gradient(90deg, var(--ua-amber), var(--ua-blue));
  transition: width 0.1s linear;
}
.ua-toc {
  background: var(--ua-surface);
  border: 1px solid var(--ua-line);
  border-left: 3px solid var(--ua-amber);
  border-radius: var(--ua-radius);
  padding: 1.2rem 1.4rem;
  margin: 2rem 0;
}
.ua-toc-title {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ua-amber);
  margin-bottom: 0.7rem;
}
.ua-toc ol { margin: 0; padding-left: 1.15rem; }
.ua-toc li { margin: 0.32rem 0; }
.ua-toc a { color: var(--ua-muted); text-decoration: none; }
.ua-toc a:hover, .ua-toc a.is-current { color: var(--ua-amber); }

/* ============================================================
   6. CALLOUTS
   ============================================================ */
.ua-note, .ua-warning, .ua-tip {
  border-radius: var(--ua-radius);
  padding: 1.1rem 1.3rem;
  margin: 1.7rem 0;
  border: 1px solid var(--ua-line);
  border-left-width: 4px;
  background: var(--ua-surface);
}
.ua-note    { border-left-color: var(--ua-blue);  background: linear-gradient(90deg, var(--ua-blue-dim), transparent 55%); }
.ua-warning { border-left-color: var(--ua-red);   background: linear-gradient(90deg, rgba(255,95,86,0.14), transparent 55%); }
.ua-tip     { border-left-color: var(--ua-green); background: linear-gradient(90deg, rgba(61,220,151,0.14), transparent 55%); }
.ua-note strong, .ua-warning strong, .ua-tip strong { display: block; margin-bottom: 0.3rem; }

/* ============================================================
   7. STEP CARDS
   ============================================================ */
.ua-step { counter-increment: ua-step; position: relative; padding-left: 3.2rem; margin: 1.6rem 0; }
.ua-step::before {
  content: counter(ua-step);
  position: absolute;
  left: 0; top: 0;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ua-amber);
  color: var(--ua-navy);
  font-weight: 700;
}
.ua-steps { counter-reset: ua-step; }

/* ============================================================
   8. CODE BLOCKS
   ============================================================ */
.wp-block-code, pre {
  position: relative;
  background: #071320;
  border: 1px solid var(--ua-line);
  border-radius: var(--ua-radius);
  padding: 1.3rem 1.2rem 1.2rem;
  overflow-x: auto;
}
.ua-copy {
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  font-size: 0.72rem;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--ua-line);
  background: var(--ua-surface-2);
  color: var(--ua-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s var(--ua-ease), color 0.3s;
}
.wp-block-code:hover .ua-copy, pre:hover .ua-copy { opacity: 1; }
.ua-copy:hover { color: var(--ua-amber); border-color: var(--ua-amber); }
.ua-copy.is-done { color: var(--ua-green); border-color: var(--ua-green); }

/* ============================================================
   9. SCROLL REVEAL
   ============================================================ */
.ua-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ua-ease), transform 0.7s var(--ua-ease);
}
.ua-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ua-reveal { opacity: 1; transform: none; transition: none; }
  .ua-hero::after { animation: none; }
  .ua-card { transition: none; }
}

/* ============================================================
   10. META + FOOTER
   ============================================================ */
.ua-meta {
  display: flex; flex-wrap: wrap; gap: 0.9rem;
  color: var(--ua-muted);
  font-size: 0.85rem;
  margin-bottom: 1.6rem;
}
.ua-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.ua-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  border-top: 1px solid var(--ua-line);
  padding-top: 2rem;
  margin-top: 3rem;
  color: var(--ua-muted);
}
.ua-footer-cols h4 { color: var(--ua-text); margin: 0 0 0.7rem; font-size: 0.95rem; }
.ua-tagline { color: var(--ua-amber); font-weight: 600; letter-spacing: 0.04em; }

/* ============================================================
   11. HEADER / NAV
   ============================================================ */
.ua-header {
  position: sticky;
  top: 0;
  z-index: 900;
  padding: 0.9rem 1.4rem;
  backdrop-filter: blur(14px);
  background: rgba(10, 24, 38, 0.82);
  border-bottom: 1px solid var(--ua-line);
  transition: box-shadow 0.4s var(--ua-ease), background 0.4s var(--ua-ease);
}
.ua-header.is-stuck { box-shadow: 0 10px 30px rgba(0,0,0,0.45); background: rgba(10, 24, 38, 0.95); }
.ua-header-inner { align-items: center; }
.ua-brand { align-items: center; gap: 0.75rem; }
.ua-mark {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  margin: 0;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--ua-navy);
  background: linear-gradient(135deg, var(--ua-amber), var(--ua-amber-soft));
  box-shadow: 0 6px 18px rgba(255, 138, 31, 0.35);
}
.ua-brand-text { gap: 0; }
.ua-sitetitle a, .ua-sitetitle {
  font-size: 1.02rem !important;
  font-weight: 700;
  color: var(--ua-text) !important;
  text-decoration: none;
  line-height: 1.1;
}
.ua-sitesub {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ua-amber);
}
.ua-nav a {
  color: var(--ua-muted);
  text-decoration: none;
  font-size: 0.92rem;
  position: relative;
  padding-bottom: 3px;
}
.ua-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: var(--ua-amber);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ua-ease);
}
.ua-nav a:hover { color: var(--ua-text); }
.ua-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ============================================================
   12. HERO EXTRAS
   ============================================================ */
.ua-hero-cta { margin-top: 1.8rem; gap: 0.8rem; }
.ua-btn-primary .wp-block-button__link {
  background: linear-gradient(135deg, var(--ua-amber), var(--ua-amber-soft));
  color: var(--ua-navy);
  font-weight: 700;
  border-radius: 10px;
  padding: 0.85rem 1.5rem;
  border: none;
  transition: transform 0.35s var(--ua-ease), box-shadow 0.35s var(--ua-ease);
}
.ua-btn-primary .wp-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(255, 138, 31, 0.35);
}
.ua-btn-ghost .wp-block-button__link {
  background: transparent;
  color: var(--ua-text);
  border: 1px solid var(--ua-line);
  border-radius: 10px;
  padding: 0.85rem 1.5rem;
  transition: all 0.35s var(--ua-ease);
}
.ua-btn-ghost .wp-block-button__link:hover { border-color: var(--ua-amber); color: var(--ua-amber); transform: translateY(-3px); }
.ua-hero-stats { margin-top: 2rem !important; display: flex; flex-wrap: wrap; gap: 1.6rem; }
.ua-hero-stats span {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.86rem;
  color: var(--ua-muted);
}
.ua-hero-stats span::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ua-green);
  box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.7);
  animation: ua-pulse 2.6s infinite;
}
@keyframes ua-pulse {
  70%  { box-shadow: 0 0 0 9px rgba(61, 220, 151, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
}

/* ============================================================
   13. SECTION TITLES
   ============================================================ */
.ua-section-title {
  margin: 3.4rem 0 1.6rem;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 0 !important;
}
.ua-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ua-line), transparent);
}

/* ============================================================
   14. TOPIC TILES
   ============================================================ */
.ua-topic {
  display: block;
  text-decoration: none;
  background: linear-gradient(160deg, var(--ua-surface) 0%, var(--ua-navy) 130%);
  border: 1px solid var(--ua-line);
  border-radius: var(--ua-radius);
  padding: 1.7rem 1.5rem 1.4rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.45s var(--ua-ease), border-color 0.45s var(--ua-ease), box-shadow 0.45s var(--ua-ease);
}
.ua-topic::after {
  content: "";
  position: absolute;
  top: -60%; left: -60%;
  width: 220%; height: 220%;
  background: radial-gradient(circle, rgba(255,138,31,0.16) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.5s var(--ua-ease);
}
.ua-topic:hover { transform: translateY(-7px); border-color: var(--ua-amber); box-shadow: var(--ua-shadow); }
.ua-topic:hover::after { opacity: 1; }
.ua-topic-icon { font-size: 1.9rem; margin-bottom: 0.7rem; position: relative; z-index: 1; }
.ua-topic h3 { margin: 0 0 0.5rem; color: var(--ua-text); font-size: 1.12rem; position: relative; z-index: 1; }
.ua-topic p { color: var(--ua-muted); font-size: 0.92rem; margin: 0 0 1rem; position: relative; z-index: 1; }
.ua-topic .ua-readmore { position: relative; z-index: 1; }
.ua-topic:hover .ua-readmore span { transform: translateX(6px); }

/* ============================================================
   15. POST GRID / CARDS
   ============================================================ */
.ua-postgrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1.4rem;
  list-style: none;
  padding: 0;
}
.ua-postgrid > li { list-style: none; }
.ua-card-cat a {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ua-blue);
  text-decoration: none;
  margin-bottom: 0.6rem;
}
.ua-card h3, .ua-card .wp-block-post-title { margin: 0 0 0.55rem; font-size: 1.14rem; line-height: 1.34; }
.ua-card .wp-block-post-title a { color: var(--ua-text); text-decoration: none; }
.ua-card:hover .wp-block-post-title a { color: var(--ua-amber-soft); }
.ua-card .wp-block-post-excerpt { color: var(--ua-muted); font-size: 0.93rem; }
.ua-card-foot { margin-top: 1.1rem; align-items: center; border-top: 1px solid var(--ua-line); padding-top: 0.85rem; }
.ua-card-date { font-size: 0.78rem; color: var(--ua-muted); margin: 0; }
.ua-card .wp-block-read-more {
  color: var(--ua-amber);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  border: 0;
  padding: 0;
}

/* ============================================================
   16. TOOLBAR / FILTER
   ============================================================ */
.ua-toolbar { margin: 2rem 0 2.4rem; }
.ua-search {
  width: 100%;
  padding: 0.95rem 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--ua-line);
  background: var(--ua-surface);
  color: var(--ua-text);
  font-size: 0.98rem;
  transition: border-color 0.35s var(--ua-ease), box-shadow 0.35s var(--ua-ease);
}
.ua-search::placeholder { color: var(--ua-muted); }
.ua-search:focus {
  outline: none;
  border-color: var(--ua-amber);
  box-shadow: 0 0 0 4px var(--ua-amber-dim);
}
.ua-card.is-hidden { display: none !important; }

/* ============================================================
   17. ARTICLE PAGE
   ============================================================ */
.ua-pagehead { margin: 2.6rem 0 1.4rem; }
.ua-pagehead h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0.4rem 0 0.7rem; }
.ua-article-head { margin: 2.6rem 0 1.6rem; }
.ua-article-head h1 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); line-height: 1.14; letter-spacing: -0.02em; margin: 0.5rem 0 0.9rem; }
.ua-featured-img img { border-radius: var(--ua-radius); border: 1px solid var(--ua-line); }
.ua-article-foot { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--ua-line); }
.ua-tags a {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.3rem 0.75rem;
  margin: 0 0.35rem 0.35rem 0;
  border-radius: 999px;
  border: 1px solid var(--ua-line);
  color: var(--ua-muted);
  text-decoration: none;
}
.ua-tags a:hover { border-color: var(--ua-amber); color: var(--ua-amber); }
.ua-prevnext { margin-top: 1.6rem; gap: 1rem; }
.ua-prevnext a { color: var(--ua-muted); text-decoration: none; font-size: 0.9rem; }
.ua-prevnext a:hover { color: var(--ua-amber); }

/* ============================================================
   18. PAGINATION + CTA
   ============================================================ */
.ua-pagination { margin-top: 2.6rem; gap: 0.4rem; }
.ua-pagination a, .ua-pagination span {
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--ua-line);
  color: var(--ua-muted);
  text-decoration: none;
  font-size: 0.9rem;
}
.ua-pagination a:hover { border-color: var(--ua-amber); color: var(--ua-amber); }
.ua-pagination .current { background: var(--ua-amber); color: var(--ua-navy); border-color: var(--ua-amber); font-weight: 700; }
.ua-cta {
  margin: 4rem 0 1rem;
  padding: 2.6rem 2rem;
  text-align: center;
  border-radius: var(--ua-radius);
  border: 1px solid var(--ua-line);
  background:
    radial-gradient(700px 220px at 50% 0%, rgba(58,160,255,0.16), transparent 65%),
    var(--ua-surface);
}
.ua-cta h2 { margin-top: 0; border: 0; }
.ua-cta p { color: var(--ua-muted); max-width: 62ch; margin: 0 auto; }

/* ============================================================
   19. FOOTER
   ============================================================ */
.ua-footer { padding: 3rem 1.4rem 2.4rem; margin-top: 4rem; background: linear-gradient(180deg, transparent, rgba(16,38,60,0.55)); border-top: 1px solid var(--ua-line); }
.ua-footer a { color: var(--ua-muted); text-decoration: none; line-height: 2; }
.ua-footer a:hover { color: var(--ua-amber); }
.ua-copyright { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--ua-line); font-size: 0.82rem; color: var(--ua-muted); text-align: center; }

/* ============================================================
   20. BACK TO TOP
   ============================================================ */
#ua-top {
  position: fixed;
  right: 1.4rem; bottom: 1.4rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ua-line);
  background: var(--ua-surface);
  color: var(--ua-amber);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s var(--ua-ease), transform 0.4s var(--ua-ease);
  z-index: 950;
}
#ua-top.is-visible { opacity: 1; transform: none; }
#ua-top:hover { border-color: var(--ua-amber); box-shadow: 0 8px 22px rgba(255,138,31,0.3); }

@media (max-width: 782px) {
  .ua-hero { padding: 2.6rem 1.4rem; }
  .ua-header-inner { gap: 0.8rem; }
  .ua-postgrid { grid-template-columns: 1fr; }
}

/* ============================================================
   22. HERO UPGRADE - animated border + mouse glow
   ============================================================ */
.ua-hero {
  --mx: 50%;
  --my: 40%;
}
.ua-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--ua-radius);
  padding: 1px;
  background: linear-gradient(120deg, rgba(255,138,31,0.65), rgba(58,160,255,0.55), rgba(255,138,31,0.65));
  background-size: 300% 300%;
  animation: ua-border-flow 9s ease infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
@keyframes ua-border-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.ua-hero > * { position: relative; z-index: 3; }
.ua-hero-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 138, 31, 0.20), transparent 65%);
  opacity: 0;
  transition: opacity 0.6s var(--ua-ease);
  pointer-events: none;
}
.ua-hero:hover .ua-hero-glow { opacity: 1; }

/* gradient text on the hero headline */
.ua-hero h1 {
  background: linear-gradient(100deg, #ffffff 0%, #ffd7ab 45%, #ffffff 70%);
  background-size: 220% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ua-text-shine 9s linear infinite;
}
@keyframes ua-text-shine {
  to { background-position: 220% center; }
}

/* ============================================================
   23. SHEEN SWEEP ON CARDS AND TILES
   ============================================================ */
.ua-card, .ua-topic { position: relative; }
.ua-card::after, .ua-topic .ua-sheen {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: skewX(-18deg);
  transition: left 0.75s var(--ua-ease);
  pointer-events: none;
}
.ua-card:hover::after { left: 130%; }
.ua-topic:hover .ua-sheen { left: 130%; }

/* ============================================================
   24. SECTION TITLE SHIMMER
   ============================================================ */
.ua-section-title::before {
  content: "";
  width: 4px;
  height: 1.1em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ua-amber), var(--ua-blue));
  box-shadow: 0 0 12px rgba(255, 138, 31, 0.55);
  flex: none;
}

/* ============================================================
   25. COMPANY CARD (footer)
   ============================================================ */
.ua-company-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.8rem;
  padding: 2.2rem 2rem;
  margin-bottom: 3rem;
  border-radius: var(--ua-radius);
  border: 1px solid var(--ua-line);
  background:
    radial-gradient(700px 240px at 8% 0%, rgba(255,138,31,0.16), transparent 62%),
    radial-gradient(600px 240px at 92% 100%, rgba(58,160,255,0.16), transparent 62%),
    linear-gradient(140deg, var(--ua-surface), var(--ua-navy));
}
.ua-company-card::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.07), transparent);
  transform: skewX(-18deg);
  animation: ua-ribbon-shine 8s ease-in-out infinite;
  pointer-events: none;
}
.ua-company-text { flex: 1 1 420px; position: relative; z-index: 1; }
.ua-company-text h3 { margin: 0.5rem 0 0.7rem; font-size: 1.35rem; color: var(--ua-text); }
.ua-company-text p { color: var(--ua-muted); margin: 0; font-size: 0.95rem; line-height: 1.7; }
.ua-company-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ua-navy);
  background: linear-gradient(135deg, var(--ua-amber), var(--ua-amber-soft));
  box-shadow: 0 10px 26px rgba(255, 138, 31, 0.28);
  transition: transform 0.35s var(--ua-ease), box-shadow 0.35s var(--ua-ease);
  white-space: nowrap;
}
.ua-company-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(255, 138, 31, 0.42); color: var(--ua-navy); }
.ua-company-btn .ua-arrow { transition: transform 0.35s var(--ua-ease); }
.ua-company-btn:hover .ua-arrow { transform: translateX(6px); }

/* ============================================================
   26. TECH MARQUEE
   ============================================================ */
.ua-marquee {
  overflow: hidden;
  margin: 2.6rem 0 0;
  padding: 1rem 0;
  border-top: 1px solid var(--ua-line);
  border-bottom: 1px solid var(--ua-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ua-marquee-track {
  display: flex;
  gap: 1.6rem;
  width: max-content;
  animation: ua-marquee 42s linear infinite;
}
.ua-marquee:hover .ua-marquee-track { animation-play-state: paused; }
.ua-marquee-track span {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--ua-muted);
  white-space: nowrap;
  opacity: 0.75;
}
@keyframes ua-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   27. LINK UNDERLINE SWEEP IN ARTICLES
   ============================================================ */
.entry-content a:not(.wp-block-button__link) {
  background-image: linear-gradient(var(--ua-amber), var(--ua-amber));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  transition: background-size 0.4s var(--ua-ease);
}
.entry-content a:not(.wp-block-button__link):hover { background-size: 100% 1px; }

/* ============================================================
   28. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ua-ribbon::before,
  .ua-company-card::after,
  .ua-marquee-track,
  .ua-hero::before,
  .ua-hero h1 { animation: none !important; }
  .ua-hero h1 { -webkit-text-fill-color: var(--ua-text); }
  .ua-card::after, .ua-topic .ua-sheen { display: none; }
}

@media (max-width: 640px) {
  .ua-ribbon-link { margin-left: 0; }
  .ua-company-card { padding: 1.6rem 1.2rem; }
}

/* ============================================================
   29. ANIMATED STAT COUNTERS
   ============================================================ */
.ua-statrow {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  margin-top: 2.2rem;
  position: relative;
  z-index: 3;
}
.ua-stat { min-width: 120px; }
.ua-stat-num {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--ua-amber), var(--ua-amber-soft));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ua-stat-label {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ua-muted);
}

/* ============================================================
   30. MAIN SITE PILL (header)
   ============================================================ */
.ua-header-right { align-items: center; gap: 1.4rem; }
.ua-mainsite {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.46rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--ua-line);
  background: linear-gradient(140deg, var(--ua-surface), var(--ua-navy));
  color: var(--ua-muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.35s var(--ua-ease), border-color 0.35s var(--ua-ease), transform 0.35s var(--ua-ease), box-shadow 0.35s var(--ua-ease);
}
.ua-mainsite::before {
  content: "";
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 138, 31, 0.28), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ua-ease);
}
.ua-mainsite:hover {
  color: var(--ua-amber);
  border-color: var(--ua-amber);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 138, 31, 0.22);
}
.ua-mainsite:hover::before { left: 130%; }
.ua-mainsite-icon { font-size: 0.9em; transition: transform 0.35s var(--ua-ease); }
.ua-mainsite:hover .ua-mainsite-icon { transform: translate(2px, -2px); }

@media (max-width: 640px) {
  .ua-header-right { gap: 0.8rem; }
  .ua-mainsite { padding: 0.4rem 0.8rem; font-size: 0.76rem; }
}