/* =========================================================
   CLG FX — animations, custom cursor, preloader
   Inspired by lp-staxis, adapted to CLG brand
   ========================================================= */

:root {
  --clg-red: #8B0000;
  --clg-red-light: #A52A2A;
  --clg-cream: #FAF7F2;
  --clg-ease: cubic-bezier(.2,.7,.2,1);
}

/* Lock scroll while preloader is showing */
body.clg-is-loading {
  overflow: hidden;
  cursor: wait;
}

/* Hide native cursor when custom cursor is active (desktop only) */
body.clg-has-cursor,
body.clg-has-cursor * { cursor: none !important; }

/* =========================================================
   PRELOADER
   ========================================================= */
.clg-preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #ffffff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* Soft red glow */
.clg-preloader::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80vmax;
  height: 80vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(139,0,0,0.18) 0%, transparent 55%);
  filter: blur(60px);
  animation: clg-preloader-glow 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes clg-preloader-glow {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.9); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.1); }
}

/* Decorative red rings expanding outward */
.clg-preloader-rings {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 1;
}
.clg-preloader-rings span {
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 200px;
  margin: -100px 0 0 -100px;
  border: 2px solid rgba(139,0,0,0.35);
  border-radius: 50%;
  opacity: 0;
  animation: clg-ring-pulse 2.6s cubic-bezier(.2,.7,.2,1) infinite;
}
.clg-preloader-rings span:nth-child(2) { animation-delay: .65s; border-color: rgba(139,0,0,0.25); }
.clg-preloader-rings span:nth-child(3) { animation-delay: 1.3s;  border-color: rgba(139,0,0,0.18); }
@keyframes clg-ring-pulse {
  0%   { transform: scale(.3);  opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* Two tiny red dots orbiting around the logo */
.clg-preloader-orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: 320px; height: 320px;
  margin: -160px 0 0 -160px;
  pointer-events: none;
  animation: clg-orbit-rotate 6s linear infinite;
  z-index: 1;
}
.clg-preloader-orbit::before,
.clg-preloader-orbit::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--clg-red);
  box-shadow: 0 0 18px rgba(139,0,0,0.65);
}
.clg-preloader-orbit::before { top: -6px; left: 50%; margin-left: -6px; }
.clg-preloader-orbit::after  { bottom: -6px; left: 50%; margin-left: -6px; background: var(--clg-red-light); }
@keyframes clg-orbit-rotate { to { transform: rotate(360deg); } }

/* Floating red sparkles */
.clg-preloader-sparkle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clg-red);
  opacity: 0;
  pointer-events: none;
  filter: blur(.5px);
  animation: clg-sparkle 3.5s ease-in-out infinite;
}
.clg-preloader-sparkle:nth-child(1) { top: 22%; left: 18%; animation-delay: 0s;   }
.clg-preloader-sparkle:nth-child(2) { top: 30%; right: 20%; animation-delay: .6s; width: 8px; height: 8px; }
.clg-preloader-sparkle:nth-child(3) { bottom: 28%; left: 24%; animation-delay: 1.2s; }
.clg-preloader-sparkle:nth-child(4) { bottom: 22%; right: 18%; animation-delay: 1.8s; width: 5px; height: 5px; }
.clg-preloader-sparkle:nth-child(5) { top: 14%; left: 50%;  animation-delay: 2.4s; }
.clg-preloader-sparkle:nth-child(6) { bottom: 14%; right: 50%; animation-delay: 3s; width: 7px; height: 7px; }
@keyframes clg-sparkle {
  0%, 100% { transform: translateY(0)    scale(.6); opacity: 0; }
  40%      { transform: translateY(-14px) scale(1);  opacity: .9; }
  70%      { transform: translateY(-22px) scale(.8); opacity: .5; }
}

.clg-preloader-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.clg-preloader-logo {
  height: 220px;
  width: auto;
  opacity: 0;
  transform: scale(.7) rotate(-6deg);
  transform-origin: center;
  filter: drop-shadow(0 10px 40px rgba(139,0,0,0.25));
}
@media (max-width: 640px) {
  .clg-preloader-logo { height: 160px; }
  .clg-preloader-orbit { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
  .clg-preloader-rings span { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
}
.clg-preloader-bar {
  width: 180px;
  height: 2px;
  background: rgba(139,0,0,0.15);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.clg-preloader-bar span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--clg-red), var(--clg-red-light));
  transform: translateX(-100%);
}

/* =========================================================
   CURSOR
   ========================================================= */
.clg-cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .3s ease;
}
.clg-cursor.is-ready { opacity: 1; }
.clg-cursor-dot {
  position: absolute;
  top: var(--cy, 0);
  left: var(--cx, 0);
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #fff;
  transition: transform .25s var(--clg-ease), background .25s var(--clg-ease), opacity .25s ease;
}
.clg-cursor-ring {
  position: absolute;
  top: var(--ry, 0);
  left: var(--rx, 0);
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid #fff;
  border-radius: 50%;
  transition: transform .35s var(--clg-ease), background .25s var(--clg-ease), border-color .25s var(--clg-ease);
}
.clg-cursor.is-link .clg-cursor-dot  { transform: scale(0); }
.clg-cursor.is-link .clg-cursor-ring { transform: scale(1.7); background: rgba(255,255,255,0.15); }
.clg-cursor.is-cta  .clg-cursor-dot  { transform: scale(0); }
.clg-cursor.is-cta  .clg-cursor-ring { transform: scale(2.4); background: #fff; border-color: transparent; }
.clg-cursor.is-text .clg-cursor-dot  { transform: scale(0); opacity: 0; }
.clg-cursor.is-text .clg-cursor-ring { transform: scale(.6); background: #fff; border-color: transparent; }

@media (hover: none), (pointer: coarse) {
  .clg-cursor { display: none !important; }
  body.clg-has-cursor, body.clg-has-cursor * { cursor: auto !important; }
}

/* =========================================================
   SPOTLIGHT — soft glow that follows the cursor on hero
   ========================================================= */
.clg-spotlight {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  width: 600px; height: 600px;
  margin: -300px 0 0 -300px;
  top: var(--sy, 50%);
  left: var(--sx, 50%);
  background: radial-gradient(circle at 50% 50%, rgba(139,0,0,0.22) 0%, rgba(139,0,0,0.08) 30%, transparent 60%);
  opacity: 0;
  transition: opacity .6s ease;
  mix-blend-mode: multiply;
  filter: blur(12px);
}
.clg-spotlight.is-active { opacity: 1; }

/* =========================================================
   ANIMATION ENTRY STATES (pre-GSAP)
   ========================================================= */
[data-anim] { will-change: transform, opacity; }
[data-anim="fadeUp"]         { opacity: 0; transform: translateY(28px); }
[data-anim="fadeIn"]         { opacity: 0; }
[data-anim="stagger-up"]     { opacity: 0; transform: translateY(40px); }
[data-anim="stagger-up-list"] > * { opacity: 0; transform: translateY(20px); }
[data-anim="zoomIn"]         { opacity: 0; transform: scale(.92); }

[data-anim="split-lines"] { opacity: 0; }
[data-anim="split-lines"].is-ready { opacity: 1; }
[data-anim="split-lines"] .line { overflow: hidden; }
[data-anim="split-lines"] .line > * { display: inline-block; transform: translateY(110%); }

/* Parallax base */
.has-parallax { will-change: transform; }

/* Magnetic buttons */
.magnetic { display: inline-flex; }
.magnetic > * { pointer-events: none; }

/* =========================================================
   GLOBAL HOVER FX
   ========================================================= */
/* Smooth underline links (opt-in) */
.fx-underline { position: relative; }
.fx-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 2px;
  background: currentColor;
  transition: width .35s var(--clg-ease);
}
.fx-underline:hover::after { width: 100%; }

/* Image hover zoom */
.fx-zoom { overflow: hidden; }
.fx-zoom img { transition: transform .8s var(--clg-ease); }
.fx-zoom:hover img { transform: scale(1.06); }

/* Card lift */
.fx-lift { transition: transform .4s var(--clg-ease), box-shadow .4s var(--clg-ease); }
.fx-lift:hover { transform: translateY(-8px); box-shadow: 0 24px 60px -20px rgba(139,0,0,0.25); }

/* Button shine on hover */
.fx-shine { position: relative; overflow: hidden; isolation: isolate; }
.fx-shine::before {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--clg-ease);
  z-index: -1;
}
.fx-shine:hover::before { left: 125%; }

/* =========================================================
   FLOATING ELEMENTS (decorative)
   - Container: .clg-floaters (absolute layer)
   - Items:     .clg-floater  with .v1 ... .v6 variants
   ========================================================= */
.clg-floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.clg-floater {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: .7;
  will-change: transform;
  animation: clg-float 9s ease-in-out infinite;
  filter: blur(.4px);
}
.clg-floater.is-ring {
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(139,0,0,0.35);
}
.clg-floater.is-square {
  border-radius: 8px;
  transform: rotate(12deg);
}
.clg-floater.is-flag {
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(139,0,0,0.4);
  display: grid; place-items: center;
  font-size: 22px;
  opacity: .9;
  box-shadow: 0 10px 30px -10px rgba(139,0,0,0.25);
}
.clg-floater.v1 { top: 12%; left: 6%;  width: 18px; height: 18px; background: var(--clg-red); animation-delay: 0s;   animation-duration: 8s;  }
.clg-floater.v2 { top: 22%; right: 9%; width: 60px; height: 60px; animation-delay: -2s;  animation-duration: 11s; }
.clg-floater.v3 { bottom: 18%; left: 12%; width: 90px; height: 90px; animation-delay: -4s; animation-duration: 13s; }
.clg-floater.v4 { top: 60%; right: 16%; width: 14px; height: 14px; background: var(--clg-red-light); animation-delay: -1.5s; animation-duration: 9s; }
.clg-floater.v5 { top: 38%; left: 22%; width: 28px; height: 28px; animation-delay: -3s; animation-duration: 10s; }
.clg-floater.v6 { bottom: 10%; right: 22%; width: 22px; height: 22px; background: var(--clg-red); opacity: .5; animation-delay: -5s; animation-duration: 12s; }

@keyframes clg-float {
  0%   { transform: translateY(0)      translateX(0)    rotate(0deg); }
  25%  { transform: translateY(-22px)  translateX(10px) rotate(6deg); }
  50%  { transform: translateY(-8px)   translateX(-12px) rotate(-4deg); }
  75%  { transform: translateY(-30px)  translateX(6px)  rotate(8deg); }
  100% { transform: translateY(0)      translateX(0)    rotate(0deg); }
}

/* Brasão — fixed background on every CLG page */
.clg-brasao-bg {
  position: fixed;
  inset: 0;
  background-image: url("/assets/clg/brasao.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: min(680px, 70vmin) auto;
  background-attachment: fixed;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  animation: clg-brasao-breathe 10s ease-in-out infinite;
}
@keyframes clg-brasao-breathe {
  0%, 100% { transform: scale(1)    rotate(0deg);  opacity: .06; }
  50%      { transform: scale(1.04) rotate(.5deg); opacity: .09; }
}
@media (max-width: 640px) {
  .clg-brasao-bg { background-size: 80vmin auto; opacity: 0.05; }
}

/* Nav logo */
.clg-nav-logo {
  display: inline-block;
  height: 80px;
  width: auto;
  transition: transform .4s var(--clg-ease);
}
.clg-nav-logo:hover { transform: scale(1.05); }

/* Back-compat: keep old class working for sections that referenced it */
.clg-hero-brasao {
  position: absolute;
  inset: 0;
  background-image: url("/assets/clg/brasao.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(720px, 75vmin) auto;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

/* =========================================================
   INLINE SPINNER (use anywhere)
   ========================================================= */
.clg-spinner {
  display: inline-block;
  width: 28px; height: 28px;
  border: 2px solid rgba(139,0,0,0.2);
  border-top-color: var(--clg-red);
  border-radius: 50%;
  animation: clg-spin .9s linear infinite;
}
@keyframes clg-spin { to { transform: rotate(360deg); } }

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .clg-preloader::after { animation: none !important; }
  [data-anim] { opacity: 1 !important; transform: none !important; }
}