/* ============================================
   animations.css — Dynamic lines, reveals, ornaments
   ============================================ */

/* ---- Animated line dividers ---- */
.line-div {
  position: relative;
  height: 1px;
  margin: 0 auto;
  max-width: 720px;
  overflow: hidden;
}
.line-div::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--champagne) 50%, var(--accent) 70%, transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.line-div.drawn::after { transform: scaleX(1); }

/* ---- Animated grid background ---- */
.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.35;
}
.grid-bg__line {
  position: absolute;
  background: rgba(201, 169, 98, 0.08);
}
.grid-bg__line--h {
  height: 1px; width: 100%;
  animation: gridLineH 4s ease-in-out infinite alternate;
}
.grid-bg__line--v {
  width: 1px; height: 100%;
  animation: gridLineV 5s ease-in-out infinite alternate;
}
@keyframes gridLineH {
  0% { opacity: 0.2; transform: scaleX(0.3); }
  100% { opacity: 0.6; transform: scaleX(1); }
}
@keyframes gridLineV {
  0% { opacity: 0.15; transform: scaleY(0.4); }
  100% { opacity: 0.5; transform: scaleY(1); }
}

/* ---- Section ornaments (geometric) ---- */
.ornament {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease, transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ornament.visible {
  opacity: 1;
}

/* Cross */
.orn-cross {
  width: 16px; height: 16px;
}
.orn-cross::before, .orn-cross::after {
  content: '';
  position: absolute;
  background: rgba(201, 169, 98, 0.25);
}
.orn-cross::before { width: 16px; height: 1px; top: 50%; left: 0; transform: translateY(-50%); }
.orn-cross::after { width: 1px; height: 16px; left: 50%; top: 0; transform: translateX(-50%); }

/* Diamond */
.orn-diamond {
  width: 8px; height: 8px;
  border: 1px solid rgba(201, 169, 98, 0.2);
  transform: rotate(45deg) scale(0);
}
.orn-diamond.visible { transform: rotate(45deg) scale(1); }

/* Circle ring */
.orn-ring {
  width: 24px; height: 24px;
  border: 1px solid rgba(201, 169, 98, 0.15);
  border-radius: 50%;
  transform: scale(0);
}
.orn-ring.visible { transform: scale(1); }

/* Dot */
.orn-dot {
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
  transform: scale(0);
}
.orn-dot.visible { transform: scale(1); }

/* Pulsing dot */
.orn-pulse {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}
.orn-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  animation: pulse 2.5s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ---- Text reveal (clip from bottom) ---- */
.txt-reveal {
  overflow: hidden;
}
.txt-reveal__inner {
  display: block;
  transform: translateY(105%);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.txt-reveal.revealed .txt-reveal__inner {
  transform: translateY(0);
}

/* ---- Stagger reveal for cards/items ---- */
[data-stagger] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-stagger].in {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Slide-in from sides ---- */
[data-slide="left"] {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-slide="right"] {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-slide].in {
  opacity: 1;
  transform: translateX(0);
}

/* ---- Moving gradient accent line ---- */
.accent-line {
  width: 60px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--champagne));
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.accent-line.drawn { transform: scaleX(1); }
.accent-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ---- Parallax wrapper ---- */
[data-parallax] {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ---- Animated corner brackets ---- */
.corner-brackets {
  position: relative;
}
.corner-brackets::before,
.corner-brackets::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border-color: rgba(201, 169, 98, 0.2);
  border-style: solid;
  opacity: 0;
  transition: opacity 0.6s ease 0.5s;
}
.corner-brackets::before {
  top: -6px; left: -6px;
  border-width: 1px 0 0 1px;
}
.corner-brackets::after {
  bottom: -6px; right: -6px;
  border-width: 0 1px 1px 0;
}
.corner-brackets.in::before,
.corner-brackets.in::after { opacity: 1; }

/* ---- Floating line elements in hero ---- */
.hero-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.hero-line {
  position: absolute;
  background: linear-gradient(180deg, transparent, rgba(201,169,98,0.12), transparent);
  width: 1px;
  animation: heroLineDrift linear infinite;
}
@keyframes heroLineDrift {
  0% { transform: translateY(100vh); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-20vh); opacity: 0; }
}

/* ---- Scroll progress bar ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 2px;
  z-index: 300;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(201,169,98,0.4), rgba(232,213,163,0.3));
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ---- Hover glow on service cards ---- */
.svc-card {
  position: relative;
  overflow: hidden;
}
.svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(201,169,98,0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.svc-card:hover::before { opacity: 1; }

/* ---- Fleet card hover lift ---- */
.fl-card {
  transition: border-color 0.3s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
}
.fl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(201, 169, 98, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .line-div::after,
  .ornament,
  .txt-reveal__inner,
  [data-stagger],
  [data-slide],
  .accent-line,
  .hero-line,
  .grid-bg__line {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}