/* PATH: /public/web/assets/css/styles.css */

:root{
  --bs-border-radius: 1rem;
  --shadow-soft: 0 .6rem 1.6rem rgba(0,0,0,.08);
  --shadow-soft-hover: 0 1.1rem 2.4rem rgba(0,0,0,.12);
  --text-tight: -0.02em;

  /* Hero tuning */
  --hero-min-h: 700px;
  --hero-overlay-top: rgba(0, 0, 0, 0.6);
  --hero-overlay-mid: rgba(0, 0, 0, 0.4);
  --hero-overlay-bot: rgba(0, 0, 0, 0.2);
}

body{ scroll-behavior: smooth; }
h1,h2,h3{ letter-spacing: var(--text-tight); }
.lead{ line-height: 1.6; }

/* Global pill buttons */
.btn{ border-radius: 999px !important; }

/* Micro interactions */
.shadow-soft{ box-shadow: var(--shadow-soft); }
.hover-lift{ transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.hover-lift:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft-hover);
  border-color: rgba(13,110,253,.25) !important;
}

/* Icon badge */
.icon-badge{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(13,110,253,.10);
}

/* Section spacing */
.section-pad{ padding: 5rem 0; }
@media (max-width: 767.98px){ .section-pad{ padding: 3.5rem 0; } }

/* Scrollspy offset */
[id]{ scroll-margin-top: 90px; }

/* Mobile sticky CTA */
.sticky-cta{ position: sticky; bottom: 0; z-index: 1030; }
@media (min-width: 992px){ .sticky-cta{ display:none; } }

/* HERO - full image, no blur */
.hero{
  position: relative;
  min-height: var(--hero-min-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #fff;
}

.hero-bg{
  position: absolute;
  inset: 0;
  background-image: url("../img/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
}

/* Dark overlay for readability */
.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    var(--hero-overlay-top) 0%,
    var(--hero-overlay-mid) 45%,
    var(--hero-overlay-bot) 100%
  );
}

/* optional subtle tint so it doesn’t look “washed out” */
.hero-tint{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(800px circle at 80% 22%, rgba(111,66,193,.10), transparent 48%);
}

.hero-tint::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(560px circle at 18% 18%, rgba(253,253,13,.20), transparent 60%);
  opacity: .55;
  filter: saturate(1.05);
  animation: heroPulse 8.5s ease-in-out infinite;
}

@keyframes heroPulse{
  0%, 28%   { opacity: .45; }
  55%       { opacity: .85; }
  78%, 100% { opacity: .45; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-tint::before{ animation: none; }
}

/* Optional dotted texture (very subtle) */
.hero-dots::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity:.14;
  pointer-events:none;
}

/* Hero content panel (right side card) */
.hero-card{
  border: 0;
  box-shadow: var(--shadow-soft);
}

/* Make badges in hero slightly softer on light overlay */
.hero .badge.text-bg-light.border{
  position: relative;
  overflow: hidden;
}

.hero .badge.text-bg-light.border::after{
  content:"";
  position:absolute;
  top:-30%;
  left:-40%;
  width: 40%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: rotate(18deg);
  opacity: .0;
  animation: badgeShine 6.5s ease-in-out infinite;
}

@keyframes badgeShine{
  0%, 70% { opacity: 0; transform: translateX(0) rotate(18deg); }
  85%     { opacity: .6; transform: translateX(280%) rotate(18deg); }
  100%    { opacity: 0; transform: translateX(280%) rotate(18deg); }
}

@media (prefers-reduced-motion: reduce){
  .hero .badge.text-bg-light.border::after{ animation: none; }
}

/* Reveal scroll animation */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-right{ transform: translateX(12px); }
.reveal.is-in{ opacity: 1; transform: translateY(0); }
.reveal-right.is-in{ transform: translateX(0); }

.reveal-d1{ --reveal-delay: 60ms; }
.reveal-d2{ --reveal-delay: 120ms; }
.reveal-d3{ --reveal-delay: 180ms; }
.reveal-d4{ --reveal-delay: 240ms; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}