/* ================================================================
   Homepage hero — "Visit the Municipal Library" call to action.
   A gold light travels slowly around the border; on hover a miniature
   book opens its cover. Professional: no bounce, no flashing colours.
   ================================================================ */
@property --hero-lib-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.civic-hero .hero-lib-cta {
  position: relative; isolation: isolate; gap: 12px;
  padding: 10px 18px 10px 20px; color: #F7EFD8;
  background: linear-gradient(135deg, rgba(0,42,37, .92), rgba(0,59,52, .88));
  border: 1px solid transparent;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s;
}
body.lang-ar .civic-hero .hero-lib-cta { padding: 10px 20px 10px 18px; }

/* Travelling gold light on the border (masked ring) */
.civic-hero .hero-lib-cta::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--hero-lib-a),
    rgba(94,199,184, .28) 0deg, rgba(94,199,184, .28) 250deg,
    #009383 300deg, #FFF3C4 320deg, #5EC7B8 340deg, rgba(94,199,184, .28) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: heroLibOrbit 5.5s linear infinite;
}
@keyframes heroLibOrbit { to { --hero-lib-a: 360deg; } }
/* Soft sheen that sweeps across on hover */
.civic-hero .hero-lib-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(0,47,31, .16) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 120% 0; transition: background-position .9s ease;
}
.civic-hero .hero-lib-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(0, 0, 0, .42), 0 0 0 4px rgba(94,199,184, .10); color: #fff; }
.civic-hero .hero-lib-cta:hover::after { background-position: -20% 0; }

/* Miniature book: the cover swings open on hover, revealing lit pages */
.hero-lib-book { position: relative; flex: none; width: 26px; height: 32px; perspective: 160px; }
.hero-lib-pages {
  position: absolute; inset: 2px 1px 2px 3px; border-radius: 1px 3px 3px 1px;
  background: repeating-linear-gradient(180deg, #FFF6D8 0 2px, #CDEFEA 2px 3px);
  box-shadow: 0 0 0 rgba(0,47,31, 0); transition: box-shadow .5s;
}
.hero-lib-cover {
  position: absolute; inset: 0; border-radius: 2px 4px 4px 2px; transform-origin: left center;
  background: linear-gradient(135deg, #8FD8CC, #007A6B); box-shadow: inset 2px 0 0 rgba(0, 0, 0, .25), inset -1px 0 0 rgba(255, 255, 255, .35);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.hero-lib-cover::after { content: ""; position: absolute; left: 7px; right: 5px; top: 9px; height: 2px; border-radius: 2px; background: rgba(40, 28, 6, .45); box-shadow: 0 5px 0 rgba(40, 28, 6, .3); }
.civic-hero .hero-lib-cta:hover .hero-lib-cover,
.civic-hero .hero-lib-cta:focus-visible .hero-lib-cover { transform: rotateY(-115deg); }
.civic-hero .hero-lib-cta:hover .hero-lib-pages,
.civic-hero .hero-lib-cta:focus-visible .hero-lib-pages { box-shadow: 0 0 14px rgba(0,47,31, .75); }
body.lang-ar .hero-lib-cover { transform-origin: right center; }
body.lang-ar .civic-hero .hero-lib-cta:hover .hero-lib-cover,
body.lang-ar .civic-hero .hero-lib-cta:focus-visible .hero-lib-cover { transform: rotateY(115deg); }

.hero-lib-text { font-weight: 750; letter-spacing: .01em; }
.hero-lib-new {
  flex: none; padding: 3px 8px; border-radius: 999px; font-size: max(.75rem, var(--fs-min, 12px)); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #1B1406; background: linear-gradient(135deg, #009383, #5EC7B8);
}
body.lang-ar .hero-lib-new { letter-spacing: 0; font-size: max(.75rem, var(--fs-min, 12px)); }
.hero-lib-arrow { color: #009383; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.civic-hero .hero-lib-cta:hover .hero-lib-arrow { transform: translateX(4px); }
body.lang-ar .civic-hero .hero-lib-arrow { transform: scaleX(-1); }
body.lang-ar .civic-hero .hero-lib-cta:hover .hero-lib-arrow { transform: scaleX(-1) translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .civic-hero .hero-lib-cta::before { animation: none; }
  .hero-lib-cover, .hero-lib-arrow, .civic-hero .hero-lib-cta::after { transition: none; }
}