/* =====================================================================
   Effects adapted from React Bits (https://github.com/DavidHDev/react-bits)
   MIT + Commons Clause License Condition v1.0 — Copyright (c) 2026 David Haz.
   Recoloured to the LegalConnect palette.
   ===================================================================== */

/* ---- LightRays (canvas host, see js/rays.js) ---- */
.rays { position: absolute; inset: 0; pointer-events: none; }
.rays canvas { display: block; width: 100%; height: 100%; }
.rays--lost { display: none; }

/* ---- ShinyText: a highlight sweeps across the text ---- */
.shiny {
  background: linear-gradient(120deg, var(--shiny-base, rgba(245, 243, 238, .62)) 40%, var(--shiny-shine, #fff) 50%, var(--shiny-base, rgba(245, 243, 238, .62)) 60%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shiny 2.6s linear infinite;
}
@keyframes shiny { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* ---- GradientText: the brand gradient slowly flows ---- */
.gradient-flow {
  background-image: linear-gradient(100deg, #ffd5b3 0%, #ffae7a 14%, #e6834c 30%, #e64c86 50%, #e6834c 70%, #ffae7a 86%, #ffd5b3 100%);
  background-size: 300% 100%;
  animation: gradient-flow 9s ease-in-out infinite alternate;
}
@keyframes gradient-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ---- StarBorder: a light travels around the button edge ---- */
@property --star-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.star-border { position: relative; isolation: isolate; }
.star-border::before, .star-border::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--star-angle), transparent 0 64%, #ffd5b3 76%, #e6834c 86%, #e64c86 93%, transparent 100%);
  animation: star-spin 4.5s linear infinite;
}
/* the ring */
.star-border::before {
  padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* its glow */
.star-border::after { z-index: -1; filter: blur(14px); opacity: .55; }
@keyframes star-spin { to { --star-angle: 360deg; } }

/* ---- Button hover: label swap + soft brand glow ---- */
.swap { position: relative; display: inline-grid; overflow: hidden; padding-block: .14em; margin-block: -.14em; }
.swap__a, .swap__b { grid-area: 1 / 1; transition: transform .7s cubic-bezier(.19, 1, .22, 1); }
.swap__b { transform: translateY(115%); }
[data-swap]:hover .swap__a, [data-swap]:focus-visible .swap__a { transform: translateY(-115%); }
[data-swap]:hover .swap__b, [data-swap]:focus-visible .swap__b { transform: none; }
.btn--light[data-swap]:hover { box-shadow: 0 18px 40px -16px rgba(230, 131, 76, .6), 0 0 0 1px rgba(255, 255, 255, .6); }

/* ---- Icon buttons: arrows glide through, QR tilts ---- */
[data-nudge] { overflow: hidden; }
[data-nudge="down"]:hover .i { animation: nudge-down .75s cubic-bezier(.19, 1, .22, 1); }
[data-nudge="up"]:hover .i { animation: nudge-up .75s cubic-bezier(.19, 1, .22, 1); }
[data-nudge="tilt"] .i { transition: transform .6s cubic-bezier(.19, 1, .22, 1); }
[data-nudge="tilt"]:hover .i { transform: scale(1.12) rotate(-8deg); }
@keyframes nudge-down { 0% { transform: none; } 45% { transform: translateY(150%); } 46% { transform: translateY(-150%); } 100% { transform: none; } }
@keyframes nudge-up { 0% { transform: none; } 45% { transform: translateY(-150%); } 46% { transform: translateY(150%); } 100% { transform: none; } }

/* ---- SpotlightCard: soft light + brighter edge that follow the cursor ---- */
[data-spotlight] { position: relative; }
[data-spotlight]::before, [data-spotlight]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  opacity: 0; transition: opacity .45s ease;
}
[data-spotlight]::before {
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(230, 131, 76, .13), transparent 62%);
}
[data-spotlight]::after {
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(242, 169, 107, .75), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
[data-spotlight]:hover::before, [data-spotlight]:hover::after { opacity: 1; }

/* ---- ScrollReveal: words start blurred (js/main.js clears it on scroll) ---- */
.reveal__text { transform-origin: 0% 50%; }

@media (prefers-reduced-motion: reduce) {
  .shiny, .gradient-flow, .star-border::before, .star-border::after { animation: none; }
}