/* ========================================
   VIGO BENELUX - SYSTEM 01: HERITAGE IMPORT
   Purpose: Global tokens + small component layer + motion primitives
   ======================================== */

/* 1) DESIGN TOKENS (match the brand board + Tailwind config) */
:root{
  --vigo-red:#D5070F;
  --vigo-saffron:#F8AE00;
  --vigo-blue:#1A54BF;
  --vigo-charcoal:#1A1A1A;
  --vigo-darker:#000000;
  --vigo-surface2:#232323;
  --vigo-input:#121212;
  --vigo-cream:#F9F7F2;

  --radius:0px;

  --font-heading:"Forum", cursive;
  --font-body:"Montserrat", sans-serif;
  --font-accent:"Cinzel", serif;

  /* Animation transition variables */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 2) BASE */
html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  opacity: 0;
  transition: opacity 0.5s ease;
}
body.page-loaded{
  opacity: 1;
}

/* Ensure in-page anchors don't hide under the fixed header */
section[id]{ scroll-margin-top: 96px; }

/* 3) SCROLLBAR (Webkit) */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background: var(--vigo-darker); }
::-webkit-scrollbar-thumb{
  background: var(--vigo-saffron);
  border-radius: 0px;
}

/* 4) HEADER STATE (JS toggles .is-scrolled on #site-header) */
#site-header.is-scrolled{
  background-color: rgba(35,35,35,0.95);
  box-shadow: none;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

#site-header.is-scrolled .nav-link{ color: var(--vigo-cream); }
#site-header.is-scrolled .nav-link:hover{ color: var(--vigo-saffron); }
#site-header.is-scrolled .nav-link::after{ background: var(--vigo-saffron); }
#site-header.is-scrolled nav{
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

/* 5) NAV + BUTTONS (override the earlier inline styles you had) */
.nav-link{
  font-size: .875rem;
  font-weight: 500;
  color: var(--vigo-cream);
  text-transform: uppercase;
  letter-spacing: .10em;
  padding: .5rem 1rem;
  transition: color .25s ease, transform .25s ease;
  position: relative;
}
.nav-link:hover{ color: var(--vigo-saffron); }
.nav-link:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(26,84,191,0.55); border-radius: 0px; }
.nav-link::after{
  content:"";
  position:absolute;
  bottom: 0;
  left:50%;
  width:0;
  height:2px;
  background: var(--vigo-saffron);
  transition: width .25s ease;
  transform: translateX(-50%);
}
.nav-link:hover::after{ width:80%; }
.nav-link.is-active{ color: var(--vigo-saffron); }
.nav-link.is-active::after{ width:80%; }

.btn-hero{
  background: transparent;
  border: 2px solid var(--vigo-saffron);
  color: var(--vigo-saffron);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  padding: .75rem 1.5rem;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.btn-hero:hover{
  background: var(--vigo-saffron);
  color: var(--vigo-charcoal);
  transform: translateY(-1px);
}


/* 5.5) BUTTON SYSTEM (use across hero, forms, inline CTAs) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius: 0px;
  padding: .95rem 2rem;
  font-weight: 800;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  transition: transform .20s ease, filter .20s ease, background .20s ease, color .20s ease, border-color .20s ease;
  user-select:none;
}
.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(26,84,191,0.55);
}
.btn:active{ transform: translateY(1px); }

/* Primary: Saffron fill */
.btn-primary{
  background: var(--vigo-saffron);
  color: #000000;
  border: 2px solid transparent;
  box-shadow: none;
}
.btn-primary:hover{ filter: brightness(.96); }

/* Secondary on dark: light outline */
.btn-outline-light{
  background: transparent;
  color: var(--vigo-cream);
  border: 2px solid rgba(249,247,242,0.65);
}
.btn-outline-light:hover{
  background: rgba(249,247,242,0.10);
  border-color: rgba(249,247,242,0.85);
}

/* Secondary on light: charcoal outline (blue reserved for small accents + focus states) */
.btn-outline-blue{
  background: transparent;
  color: var(--vigo-charcoal);
  border: 2px solid rgba(26,26,26,0.35);
}
.btn-outline-blue:hover{ background: rgba(26,26,26,0.05); }


/* 6) PORTFOLIO BADGE (replaces the random tag colors) */
.badge-vigo{
  position:absolute;
  top:-1.25rem;
  left:50%;
  transform: translateX(-50%);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background: rgba(15,15,15,0.72);
  color: var(--vigo-saffron);
  border: 1px solid rgba(248,174,0,0.35);
  padding: .30rem .90rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

/* 7) DECOR / TEXTURE */
.text-outline-gold{
  -webkit-text-stroke: 1px var(--vigo-saffron);
  color: transparent;
}
.bg-texture{
  background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
}

/* 8) MOTION PRIMITIVES (Website 2 vibe: subtle reveal + stagger) */
[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .70s cubic-bezier(.2,.8,.2,1),
              transform .70s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
[data-reveal="fade-in"]{ transform: none; }
[data-reveal="scale-in"]{ transform: scale(.985); }

[data-reveal].is-visible{
  opacity: 1;
  transform: none;
}

/* 9) FORM MESSAGE (optional polish) */
#form-message{
  transition: opacity .25s ease, transform .25s ease;
}
#form-message.is-shown{
  opacity: 1;
  transform: translateY(0);
}
#form-message.is-hidden{
  opacity: 0;
  transform: translateY(-6px);
}

/* 10) UNDER-CONSTRUCTION PAGE ANIMATIONS */
/* Slow pulsing animation for loading indicators */
@keyframes vigo-pulse-slow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.08);
  }
}

.animate-pulse-slow {
  animation: vigo-pulse-slow 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Gentle floating animation for hero elements */
@keyframes vigo-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.animate-float {
  animation: vigo-float 4s ease-in-out infinite;
}

/* Staggered animation delays for loading dots */
.animate-pulse-slow[style*="animation-delay: 0.3s"] {
  animation-delay: 0.3s;
}
.animate-pulse-slow[style*="animation-delay: 0.6s"] {
  animation-delay: 0.6s;
}

/* 11) COSMIC CANVAS BACKGROUND */
.cosmic-hero { position: relative; overflow: hidden; }
.cosmic-canvas-container { position: absolute; inset: 0; z-index: 0; }
#cosmic-canvas { width: 100%; height: 100%; display: block; }
.cosmic-hero .hero-content { position: relative; z-index: 10; }

/* 12) SCROLL-TRIGGERED ANIMATIONS */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-on-scroll.animate-visible {
  opacity: 1;
  transform: translateY(0);
}
.animate-on-scroll.from-left { transform: translateX(-60px); }
.animate-on-scroll.from-left.animate-visible { transform: translateX(0); }
.animate-on-scroll.from-right { transform: translateX(60px); }
.animate-on-scroll.from-right.animate-visible { transform: translateX(0); }
.animate-on-scroll.scale-up { transform: scale(0.9); }
.animate-on-scroll.scale-up.animate-visible { transform: scale(1); }

/* Stagger animations */
.stagger-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.stagger-item.animate-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 13) HERO SECTION ANIMATIONS */
.hero-title, .hero-subtitle, .hero-description, .hero-buttons {
  opacity: 0;
  transform: translateY(30px);
}
.hero-subtitle { animation: heroFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards; }
.hero-title { animation: heroFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards; }
.hero-description { animation: heroFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.7s forwards; }
.hero-buttons { animation: heroFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.9s forwards; }
@keyframes heroFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* 14) SCROLL INDICATOR */
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  cursor: pointer;
  transition: opacity 0.4s ease;
}
.scroll-indicator-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll-indicator-text { font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--vigo-saffron); opacity: 0.8; }
.scroll-indicator-arrow { animation: bounceArrow 2s infinite; }
@keyframes bounceArrow {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(10px); }
  60% { transform: translateY(5px); }
}
@media (max-height: 700px) {
  .scroll-indicator { bottom: 20px; }
  .scroll-indicator-text { display: none; }
}
@media (max-width: 768px) {
  .scroll-indicator { display: none; }
}

/* 15) BUTTON ANIMATIONS */
.btn-animated {
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}
.btn-animated::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}
.btn-animated:hover::before { width: 300px; height: 300px; }
.btn-animated:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(251, 174, 0, 0.3); }

/* Magnetic button effect */
.magnetic-btn { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* 16) CARD ANIMATIONS */
.card-animated {
  transition: transform var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium);
}
.card-animated:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }
.card-animated .card-image { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity var(--transition-medium); }
.card-animated:hover .card-image { transform: scale(1.1); opacity: 1; }
.card-animated .card-overlay { transition: background-color var(--transition-medium); }
.card-animated:hover .card-overlay { background-color: transparent; }
.card-badge { transition: transform var(--transition-bounce); }
.card-animated:hover .card-badge { transform: translateX(-50%) scale(1.1); }

/* 17) HERO HIGHLIGHT EFFECT */
.highlight-behind { position: relative; z-index: 1; }
.highlight-behind::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 150%; height: 150%;
  background: radial-gradient(circle at center,
    rgba(251, 174, 0, 0.5),
    rgba(213, 7, 0, 0.35),
    rgba(26, 84, 191, 0.25),
    transparent 70%
  );
  filter: blur(80px);
  animation: rotateGlow 20s linear infinite;
  border-radius: 9999px;
  z-index: -1;
}
@keyframes rotateGlow {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 18) UTILITY ANIMATION CLASSES */
.hover-lift { transition: transform var(--transition-medium); }
.hover-lift:hover { transform: translateY(-4px); }

.icon-animated { transition: transform var(--transition-medium), color var(--transition-fast); }
.group:hover .icon-animated { transform: scale(1.1); color: var(--vigo-saffron); }

.input-animated { transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.input-animated:focus { border-color: var(--vigo-saffron); box-shadow: 0 0 0 3px rgba(251, 174, 0, 0.1); }

.section-line { width: 0; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); }
.animate-visible .section-line { width: 6rem; }

.logo-animated { transition: transform var(--transition-medium); }
.logo-animated:hover { transform: scale(1.05); }

.footer-link { position: relative; }
.footer-link::before { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--vigo-saffron); transition: width 0.3s ease; }
.footer-link:hover::before { width: 100%; }

.social-icon { transition: transform var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.social-icon:hover { transform: translateY(-3px); }

/* 19) CURSOR GLOW EFFECT (Desktop only) */
.cursor-glow {
  position: fixed;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 174, 0, 0.3) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
  mix-blend-mode: screen;
}
.cursor-glow.cursor-grow { width: 60px; height: 60px; }
@media (hover: none) { .cursor-glow { display: none; } }

/* 20) REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-reveal]{ transition:none; transform:none; opacity:1; }
  .btn-hero{ transition:none; }
  .animate-pulse-slow{ animation:none; opacity:1; }
  .animate-float{ animation:none; transform:none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .animate-on-scroll, .stagger-item { opacity: 1; transform: none; }
  .hero-title, .hero-subtitle, .hero-description, .hero-buttons { opacity: 1; transform: none; animation: none; }
  .cursor-glow { display: none; }
}