/* ═══════════════════════════════════════════════════════════
   FULTERNET — Animations v2
   Scroll-driven, keyframes, entrance sequences, micro-interactions.
   Every motion deliberate. Every transition earned.
   ═══════════════════════════════════════════════════════════ */

/* ═══ PRELOADER ═══ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1s var(--ease-out-expo),
              visibility 1s;
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.preloader__logo-text {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.5em;
  color: var(--text-primary);
  opacity: 0;
  animation: preloader-text-in 1.2s var(--ease-out-expo) 0.2s forwards;
}

.preloader__line {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: preloader-line-expand 0.8s var(--ease-out-expo) 0.5s forwards;
}

@keyframes preloader-text-in {
  0%   { opacity: 0; letter-spacing: 0.8em; }
  100% { opacity: 1; letter-spacing: 0.5em; }
}

@keyframes preloader-line-expand {
  0%   { width: 0; opacity: 0; }
  50%  { opacity: 1; }
  100% { width: 80px; opacity: 0.6; }
}

/* ═══ HERO ENTRANCE SEQUENCE ═══ */
.hero__eyebrow,
.hero__title,
.hero__divider,
.hero__subtitle,
.hero__disciplines,
.hero__cta,
.hero__corner,
.scroll-indicator {
  opacity: 0;
}

/* Eyebrow — first to appear */
.hero__eyebrow {
  animation: hero-fade-up var(--duration-slow) var(--ease-out-expo) 0.4s forwards;
}

/* Corners fade in quietly */
.hero__corner--tl {
  animation: hero-corner-fade 1.5s var(--ease-out-expo) 0.3s forwards;
}
.hero__corner--br {
  animation: hero-corner-fade 1.5s var(--ease-out-expo) 0.6s forwards;
}

/* Title — the main event */
.hero__title {
  transform: translateY(30px);
  animation: hero-title-reveal 1.2s var(--ease-out-expo) 0.7s forwards;
}

/* Divider — the accent line */
.hero__divider {
  transform: scaleX(0);
  animation: hero-divider-draw 0.8s var(--ease-out-expo) 1s forwards;
}

/* Subtitle */
.hero__subtitle {
  transform: translateY(15px);
  animation: hero-fade-up var(--duration-slow) var(--ease-out-expo) 1.2s forwards;
}

/* Disciplines */
.hero__disciplines {
  transform: translateY(15px);
  animation: hero-fade-up var(--duration-slow) var(--ease-out-expo) 1.4s forwards;
}

/* CTA — last content element */
.hero__cta {
  transform: translateY(15px);
  animation: hero-fade-up var(--duration-slow) var(--ease-out-expo) 1.6s forwards;
}

/* Scroll indicator — subtle entrance */
.scroll-indicator {
  animation: hero-fade-up 0.6s var(--ease-out-expo) 2.2s forwards;
}

@keyframes hero-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-title-reveal {
  0%   { opacity: 0; transform: translateY(30px); letter-spacing: 0.1em; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: var(--tracking-hero); }
}

@keyframes hero-divider-draw {
  to {
    opacity: 0.6;
    transform: scaleX(1);
  }
}

@keyframes hero-corner-fade {
  to { opacity: 0.2; }
}

/* ═══ SIGNATURE MORPHING SHAPE (Hero Background) ═══ */
.hero__signature-shape {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  opacity: 0.06;
  z-index: 1;
  pointer-events: none;
  animation: signature-rotate 60s linear infinite;
}

@keyframes signature-rotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.hero__signature-gradient {
  width: 100%;
  height: 100%;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: conic-gradient(
    from var(--gradient-angle),
    rgba(184, 151, 106, 0.2),
    transparent,
    rgba(184, 151, 106, 0.15),
    transparent,
    rgba(184, 151, 106, 0.1),
    transparent
  );
  animation: gradient-spin 25s linear infinite;
}

@keyframes gradient-spin {
  to { --gradient-angle: 360deg; }
}

/* ═══ SECTION DIVIDER ═══ */
.section-divider__diamond {
  opacity: 0;
  transform: rotate(45deg) scale(0);
  transition: opacity 0.6s var(--ease-out-expo),
              transform 0.6s var(--ease-out-expo);
}

/* Animate diamonds when in viewport */
@supports (animation-timeline: view()) {
  .section-divider__diamond {
    animation: diamond-reveal 0.6s linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
}

@keyframes diamond-reveal {
  to {
    opacity: 0.5;
    transform: rotate(45deg) scale(1);
  }
}

/* IO fallback for diamond */
@supports not (animation-timeline: view()) {
  .section-divider.is-visible .section-divider__diamond {
    opacity: 0.5;
    transform: rotate(45deg) scale(1);
  }
}

/* ═══ SCROLL-DRIVEN REVEAL (Primary — Modern Browsers) ═══ */
@supports (animation-timeline: view()) {
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    animation: scroll-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }

  .reveal--fade {
    transform: none;
    animation-name: scroll-fade;
  }

  .reveal--clip {
    transform: none;
    clip-path: inset(0 100% 0 0);
    animation-name: scroll-clip;
    animation-range: entry 0% entry 40%;
  }

  @keyframes scroll-reveal {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes scroll-fade {
    to { opacity: 1; }
  }

  @keyframes scroll-clip {
    to {
      opacity: 1;
      clip-path: inset(0 0% 0 0);
    }
  }

  /* Staggered children */
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    animation: scroll-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }

  .reveal-stagger > *:nth-child(1) { animation-delay: 0s; }
  .reveal-stagger > *:nth-child(2) { animation-delay: 0.1s; }
  .reveal-stagger > *:nth-child(3) { animation-delay: 0.2s; }
  .reveal-stagger > *:nth-child(4) { animation-delay: 0.3s; }
}

/* ═══ FALLBACK: IntersectionObserver-driven (class-based) ═══ */
@supports not (animation-timeline: view()) {
  .reveal,
  .reveal--fade,
  .reveal--clip {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--duration-slow) var(--ease-out-expo),
                transform var(--duration-slow) var(--ease-out-expo);
  }

  .reveal--fade {
    transform: none;
  }

  .reveal--clip {
    transform: none;
    clip-path: inset(0 100% 0 0);
    transition: opacity var(--duration-slow) var(--ease-out-expo),
                clip-path var(--duration-glacial) var(--ease-out-expo);
  }

  .reveal.is-visible,
  .reveal--fade.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal--clip.is-visible {
    opacity: 1;
    clip-path: inset(0 0% 0 0);
  }

  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-slow) var(--ease-out-expo),
                transform var(--duration-slow) var(--ease-out-expo);
  }

  .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: none; }
  .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; opacity: 1; transform: none; }
  .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.3s; opacity: 1; transform: none; }
  .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.45s; opacity: 1; transform: none; }
}

/* ═══ COUNTRY SEQUENTIAL REVEAL ═══ */
.presence__country {
  opacity: 0;
  transform: translateY(10px);
}

@supports (animation-timeline: view()) {
  .presence__country {
    animation: scroll-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
  .presence__country:nth-child(1) { animation-delay: 0s; }
  .presence__country:nth-child(2) { animation-delay: 0s; }
  .presence__country:nth-child(3) { animation-delay: 0.15s; }
  .presence__country:nth-child(4) { animation-delay: 0.15s; }
  .presence__country:nth-child(5) { animation-delay: 0.3s; }
  .presence__country:nth-child(6) { animation-delay: 0.3s; }
  .presence__country:nth-child(7) { animation-delay: 0.45s; }
  .presence__country:nth-child(8) { animation-delay: 0.45s; }
  .presence__dot {
    opacity: 0;
    animation: scroll-fade 0.4s linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 35%;
  }
}

@supports not (animation-timeline: view()) {
  .presence__country,
  .presence__dot {
    transition: opacity var(--duration-slow) var(--ease-out-expo),
                transform var(--duration-slow) var(--ease-out-expo);
  }
  .presence__countries.is-visible .presence__country {
    opacity: 1;
    transform: none;
  }
  .presence__countries.is-visible .presence__dot {
    opacity: 0.5;
  }
  .presence__countries.is-visible .presence__country:nth-child(1),
  .presence__countries.is-visible .presence__country:nth-child(2) { transition-delay: 0s; }
  .presence__countries.is-visible .presence__country:nth-child(4),
  .presence__countries.is-visible .presence__country:nth-child(5) { transition-delay: 0.2s; }
  .presence__countries.is-visible .presence__country:nth-child(7) { transition-delay: 0.4s; }
  .presence__countries.is-visible .presence__country:nth-child(8),
  .presence__countries.is-visible .presence__country:nth-child(9) { transition-delay: 0.6s; }
}

/* ═══ SVG LINE DRAW ═══ */
.geo-line--draw {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}

@supports (animation-timeline: view()) {
  .geo-line--draw {
    animation: line-draw linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

@supports not (animation-timeline: view()) {
  .geo-line--draw {
    transition: stroke-dashoffset var(--duration-glacial) var(--ease-out-expo);
  }
  .is-visible .geo-line--draw {
    stroke-dashoffset: 0;
  }
}

@keyframes line-draw {
  to { stroke-dashoffset: 0; }
}

/* ═══ AMBIENT GLOW DRIFT ═══ */
.ambient-glow--hero {
  animation: glow-drift-hero 15s var(--ease-in-out-sine) infinite alternate;
}

@keyframes glow-drift-hero {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50%  { transform: translate(-48%, -52%) scale(1.05); opacity: 0.8; }
  100% { transform: translate(-52%, -48%) scale(1.02); opacity: 1; }
}

.ambient-glow--pillars {
  animation: glow-drift-pillars 18s var(--ease-in-out-sine) infinite alternate;
}

@keyframes glow-drift-pillars {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-30px, 20px); }
}

.ambient-glow--presence {
  animation: glow-pulse-presence 10s var(--ease-in-out-sine) infinite alternate;
}

@keyframes glow-pulse-presence {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

.ambient-glow--contact {
  animation: glow-drift-contact 12s var(--ease-in-out-sine) infinite alternate;
}

@keyframes glow-drift-contact {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(20px, -15px); }
}

/* ═══ SCROLL INDICATOR PULSE ═══ */
.scroll-indicator__line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--accent));
  animation: scroll-line 2.5s var(--ease-in-out-sine) infinite;
}

@keyframes scroll-line {
  0%   { top: -100%; }
  50%  { top: 0; }
  100% { top: 100%; }
}

/* ═══ PILLAR CARD HOVER MICRO-INTERACTIONS ═══ */
.pillar-card {
  transition: all var(--duration-normal) var(--ease-luxe);
}

.pillar-card__accent {
  transition: opacity var(--duration-normal) var(--ease-luxe);
}

.pillar-card__number {
  transition: opacity var(--duration-normal) var(--ease-luxe),
              transform var(--duration-normal) var(--ease-luxe);
}

.pillar-card:hover .pillar-card__number {
  transform: translateY(-2px);
}

.pillar-card__title {
  transition: color var(--duration-normal) var(--ease-luxe);
}

/* ═══ PHILOSOPHY MARK ═══ */
.philosophy__mark {
  animation: philosophy-mark-float 8s var(--ease-in-out-sine) infinite alternate;
}

@keyframes philosophy-mark-float {
  0%   { opacity: 0.1; transform: translateY(0); }
  100% { opacity: 0.15; transform: translateY(-5px); }
}

/* ═══ BUTTON SHINE EFFECT ═══ */
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(184, 151, 106, 0.08),
    transparent
  );
  transition: left 0.6s var(--ease-out-expo);
  z-index: -1;
}

.btn:hover::after {
  left: 100%;
}

/* ═══ NAV BRAND ANIMATION ═══ */
.nav__brand-text {
  transition: opacity var(--duration-fast) var(--ease-luxe),
              letter-spacing var(--duration-normal) var(--ease-luxe);
}

.nav__brand:hover .nav__brand-text {
  letter-spacing: calc(var(--tracking-hero) + 0.05em);
}

/* ═══ FOOTER SOCIAL HOVER ═══ */
.footer__social-link svg {
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.footer__social-link:hover svg {
  transform: translateY(-2px) scale(1.1);
}

/* ═══ SECTION LABEL LINE DRAW ═══ */
.section-label::after {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.reveal.is-visible .section-label::after,
.section-label.is-visible::after {
  transform: scaleX(1);
}

@supports (animation-timeline: view()) {
  .section-label::after {
    animation: label-line-draw linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  @keyframes label-line-draw {
    to { transform: scaleX(1); }
  }
}

/* ═══ FORM INPUT FOCUS GLOW ═══ */
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  box-shadow: 0 1px 0 0 var(--accent),
              0 4px 15px -5px rgba(184, 151, 106, 0.15);
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero__eyebrow,
  .hero__title,
  .hero__divider,
  .hero__subtitle,
  .hero__disciplines,
  .hero__cta,
  .hero__corner,
  .scroll-indicator {
    opacity: 1;
    transform: none;
  }

  .hero__divider {
    transform: scaleX(1);
    opacity: 0.6;
  }

  .hero__corner {
    opacity: 0.2;
  }

  .reveal,
  .reveal--fade,
  .reveal--clip,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .presence__country,
  .presence__dot {
    opacity: 1;
    transform: none;
  }

  .section-divider__diamond {
    opacity: 0.5;
    transform: rotate(45deg) scale(1);
  }

  .preloader__logo-text {
    opacity: 1;
  }

  .preloader__line {
    width: 80px;
  }

  .section-label::after {
    transform: scaleX(1);
  }

  .geo-line--draw {
    stroke-dashoffset: 0;
  }
}