/* ==========================================================================
   EVERBRIGHT ENTERPRISES — motion & premium surface effects
   Pairs with assets/js/motion.js. Every effect here is either pure CSS
   (sheen sweeps, gloss glow, Ken-Burns zoom, floating beads) or driven by
   a CSS custom property that motion.js sets on mousemove (tilt, cursor
   glow) — no animation library required. Everything respects
   prefers-reduced-motion.
   ========================================================================== */

/* ---------- Reveal-on-scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  will-change:opacity, transform;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- 3D tilt cards (transform driven by --tilt-x/--tilt-y from JS) ---------- */
.tilt-card{
  --tilt-x:0deg; --tilt-y:0deg;
  transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  transform-style:preserve-3d;
}

/* ---------- Sheen sweep on buttons — a moving glass highlight, evoking
   the coating's own gloss finish rather than a generic UI hover state ---------- */
.btn-eb{ position:relative; overflow:hidden; isolation:isolate; transition:transform .18s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn-eb::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
}
.btn-eb:hover::before{ transform:translateX(120%); }
.btn-eb--ghost::before{ background:linear-gradient(115deg, transparent 30%, rgba(8,146,211,.16) 48%, transparent 66%); }

/* ---------- Card glow-on-hover (radial highlight tracking --glow-x/--glow-y) ---------- */
.card-eb, .feature-card, .testimonial-card, .product-row, .bento-grid__item, .product-3d, .product-grid__card{ position:relative; overflow:hidden; }
.card-eb::after, .feature-card::after, .testimonial-card::after, .product-row::after, .bento-grid__item::after, .product-3d::after, .product-grid__card::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%), var(--blue-glow), transparent 60%);
  transition:opacity .35s var(--ease);
}
.card-eb:hover::after, .feature-card:hover::after, .testimonial-card:hover::after, .product-row:hover::after, .bento-grid__item:hover::after, .product-3d:hover::after, .product-grid__card:hover::after{ opacity:1; }
.card-eb > *, .feature-card > *, .testimonial-card > *, .product-row > *, .bento-grid__item > *{ position:relative; z-index:1; }

/* ---------- Product image micro-interaction: gentle zoom + gloss glare ---------- */
.product-row__media{ position:relative; overflow:hidden; }
.product-row__media img{ transition:transform .55s var(--ease); }
.product-row:hover .product-row__media img{ transform:scale(1.07); }
.product-row__media::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.5) 0%, transparent 35%);
  mix-blend-mode:soft-light;
}

/* ---------- Cursor-follow glow inside dark ("glow-surface") sections ---------- */
.glow-surface{ position:relative; overflow:hidden; isolation:isolate; }
.glow-surface__cursor{
  position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(79,195,247,.20), transparent 70%);
  transform:translate(-50%, -50%);
  pointer-events:none; z-index:0; opacity:0; transition:opacity .4s var(--ease);
  filter:blur(4px);
}

/* ---------- Hero: Ken-Burns zoom on the active slide's background image ---------- */
.hero-carousel .carousel-item img.hero-bg{ transition:none; }
.hero-carousel .carousel-item.active img.hero-bg.kenburns-a{ animation:kenburnsA 9s ease-out forwards; }
.hero-carousel .carousel-item.active img.hero-bg.kenburns-b{ animation:kenburnsB 9s ease-out forwards; }
@keyframes kenburnsA{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.12) translate(-1.5%, -1%); } }
@keyframes kenburnsB{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.12) translate(1.5%, 1%); } }

/* Hero eyebrow badge — a subtle "gloss sweep" echoing the coating's own
   light-reflecting finish, on a timer rather than hover (it's the first
   thing seen on page load). */
.hero-slide-content .eyebrow{ position:relative; overflow:hidden; }
.hero-slide-content .eyebrow::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, rgba(79,195,247,.55) 50%, transparent 80%);
  transform:translateX(-150%);
  animation:eyebrowSheen 3.4s ease-in-out 1s infinite;
}
@keyframes eyebrowSheen{ 0%,60%{ transform:translateX(-150%); } 100%{ transform:translateX(150%); } }

/* Floating "water-bead" particles — a light decorative nod to the coating's
   own hydrophobic water-beading, not generic confetti. Pure CSS, absolutely
   positioned, aria-hidden, capped opacity so it never competes with text. */
.hero-beads{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.hero-beads span{
  position:absolute; bottom:-40px; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(79,195,247,.25) 60%, transparent 75%);
  opacity:.55;
  animation:beadRise linear infinite;
}
@keyframes beadRise{
  0%{ transform:translateY(0) scale(1); opacity:0; }
  10%{ opacity:.55; }
  90%{ opacity:.35; }
  100%{ transform:translateY(-620px) scale(.6); opacity:0; }
}

/* ---------- Featured Products — 3D floating card grid (homepage only;
   distinct from the flat horizontal list on the Products page and from
   the single rotating showcase in the flagship-lineup section) ---------- */
.product-3d{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:26px 24px 28px; height:100%;
  display:flex; flex-direction:column; overflow:visible;
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.product-3d:hover{ box-shadow:var(--shadow-lg); border-color:rgba(8,146,211,.2); }
.product-3d__stage{
  position:relative; height:180px; display:flex; align-items:center; justify-content:center;
  perspective:800px; margin-bottom:14px;
}
.product-3d__glow{
  position:absolute; bottom:6px; width:70%; height:24px; border-radius:50%;
  background:radial-gradient(ellipse, var(--blue-glow), transparent 75%);
  filter:blur(2px); opacity:.9;
  animation:product3dPulse 3.4s ease-in-out infinite;
}
@keyframes product3dPulse{ 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.15); opacity:1; } }
.product-3d__ring{
  position:absolute; width:120px; height:120px; border-radius:50%;
  border:1px dashed rgba(8,146,211,.28);
  animation:product3dSpin 16s linear infinite;
}
@keyframes product3dSpin{ to{ transform:rotate(360deg); } }
.product-3d__img{
  position:relative; z-index:1; max-height:160px; width:auto; margin:0 auto;
  filter:drop-shadow(0 18px 22px rgba(6,24,38,.22));
  animation:product3dFloat 4.5s ease-in-out infinite;
  transition:transform .4s var(--ease);
}
@keyframes product3dFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.product-3d:hover .product-3d__img{ transform:scale(1.06) translateY(-4px); }
.product-3d__cat{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-deep); }
.product-3d__title{ font-size:16.5px; margin-top:6px; }
.product-3d__desc{ font-size:13.5px; color:var(--text-muted); line-height:1.6; flex:1 1 auto; }
.product-3d__meta{ display:flex; gap:14px; margin:10px 0 4px; font-size:12px; color:var(--text-faint); }
.product-3d__meta span{ display:inline-flex; align-items:center; gap:5px; }
.product-3d__meta svg{ width:13px; height:13px; }
.product-3d__link{
  display:inline-flex; align-items:center; gap:7px; margin-top:10px;
  font-size:13.5px; font-weight:700; color:var(--blue-deep);
}
.product-3d__link svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.product-3d:hover .product-3d__link svg{ transform:translateX(4px); }

@media (prefers-reduced-motion: reduce){
  .product-3d__glow, .product-3d__ring, .product-3d__img{ animation:none !important; }
}

/* ---------- 3D product showcase (flagship lineup centerpiece) ---------- */
.showcase-3d{ position:relative; display:flex; align-items:center; justify-content:center; min-height:420px; perspective:1200px; }
.showcase-3d__number{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:800; font-size:min(320px, 40vw);
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.12);
  line-height:1; z-index:0; user-select:none;
}
.showcase-3d__ring{
  position:absolute; width:320px; height:320px; border-radius:50%; z-index:0;
  background:conic-gradient(from 0deg, var(--blue-light), transparent 30%, var(--blue), transparent 60%, var(--blue-light));
  filter:blur(2px); opacity:.55;
  animation:showcaseRingSpin 12s linear infinite;
}
.showcase-3d__ring::after{ content:''; position:absolute; inset:10px; border-radius:50%; background:var(--navy-900); }
@keyframes showcaseRingSpin{ to{ transform:rotate(360deg); } }
.showcase-3d__stage{
  position:relative; z-index:1;
  animation:showcaseFloat 6s ease-in-out infinite;
  transform-style:preserve-3d;
}
.showcase-3d__stage img{
  max-height:380px; width:auto; margin:0 auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));
  animation:showcaseRotate 14s ease-in-out infinite;
}
@keyframes showcaseFloat{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}
@keyframes showcaseRotate{
  0%, 100%{ transform:perspective(900px) rotateY(-8deg); }
  50%{ transform:perspective(900px) rotateY(8deg); }
}
.showcase-3d__badge{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px; z-index:2;
  background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#fff; padding:9px 18px; border-radius:var(--radius-pill); font-size:13px; font-weight:700;
  box-shadow:var(--shadow-deep);
}
.showcase-3d__badge svg{ width:15px; height:15px; color:var(--blue-light); }

@media (prefers-reduced-motion: reduce){
  .showcase-3d__ring, .showcase-3d__stage, .showcase-3d__stage img{ animation:none !important; }
}
@media (max-width:768px){
  .showcase-3d{ min-height:300px; }
  .showcase-3d__ring{ width:220px; height:220px; }
  .showcase-3d__stage img{ max-height:260px; }
}

/* ---------- Ambient background glow/grid (decorative, capped low-opacity) ---------- */
.bg-fx{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.bg-fx__glow{
  position:absolute; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, var(--blue-glow), transparent 70%);
  opacity:.6; filter:blur(6px);
}
.bg-fx__glow--tr{ top:-200px; right:-140px; }
.bg-fx__glow--bl{ bottom:-200px; left:-140px; }
.bg-fx__grid{
  position:absolute; inset:-1px;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 65% 60% at 50% 0%, rgba(0,0,0,.8), transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse 65% 60% at 50% 0%, rgba(0,0,0,.8), transparent 88%);
}

/* Every deep-surface section (page-hero banners, surface-dark panels, the
   footer) gets the same ambient glow + grid automatically via pseudo-
   elements — no extra markup needed per page. Content wrappers already
   have position:relative from Bootstrap's .container/.row or our own
   .container-eb, so they paint above z-index:0 fine. */
.page-hero::before, .surface-dark::before, .site-footer::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  width:640px; height:640px; border-radius:50%; top:-260px; right:-160px;
  background:radial-gradient(circle, rgba(79,195,247,.22), transparent 70%);
  filter:blur(4px);
}
.page-hero::after, .surface-dark::after, .site-footer::after{
  content:''; position:absolute; z-index:0; pointer-events:none; inset:-1px;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 60% at 30% 20%, rgba(0,0,0,.7), transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 20%, rgba(0,0,0,.7), transparent 85%);
}
.page-hero > .container-eb, .surface-dark > .container-eb, .site-footer > .container-eb{
  position:relative; z-index:1;
}

/* ---------- Reduced motion: strip every non-essential animation ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .tilt-card{ transform:none !important; }
  .btn-eb::before, .hero-slide-content .eyebrow::after, .hero-beads span,
  .hero-carousel .carousel-item.active img.hero-bg.kenburns-a,
  .hero-carousel .carousel-item.active img.hero-bg.kenburns-b{ animation:none !important; }
}

@media (hover:none){
  .card-eb::after, .feature-card::after, .testimonial-card::after, .product-row::after, .bento-grid__item::after, .product-3d::after, .product-grid__card::after{ display:none; }
}