/* ============================================================
   GG Fulfillment 3PL — styles.css
   Heavy custom effects: noise grain, aurora blobs, 3D packages,
   spotlight cards, scramble text, marquees, chips
   ============================================================ */

* { -webkit-font-smoothing: antialiased; }

html, body {
  background: #08101C;
  cursor: none;
}

@media (max-width: 768px) {
  html, body { cursor: auto; }
}

/* selection */
::selection { background: #5EEAD4; color: #08101C; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #08101C; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #5EEAD4; }

/* ============================================================
   NOISE GRAIN OVERLAY
   ============================================================ */
.noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: noiseShift 1.2s steps(4) infinite;
}
@keyframes noiseShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-5%, 3%); }
  50%  { transform: translate(3%, -4%); }
  75%  { transform: translate(-2%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ============================================================
   BG GRID
   ============================================================ */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center center;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* ============================================================
   AURORA BLOBS (idle drift)
   ============================================================ */
#blob-1, #blob-2, #blob-3 {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
@keyframes float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, 60px) scale(1.05); }
}
@keyframes float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-60px, 40px) scale(0.95); }
}
@keyframes float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(50px, -50px) scale(1.08); }
}
#blob-1 { animation: float-1 18s ease-in-out infinite; }
#blob-2 { animation: float-2 22s ease-in-out infinite; }
#blob-3 { animation: float-3 16s ease-in-out infinite; }

/* ============================================================
   LOADER
   ============================================================ */
#loader {
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#loader-text {
  background: linear-gradient(120deg, #fff 30%, #5EEAD4 50%, #fff 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
#cursor, #cursor-ring {
  transition: transform 0.15s ease-out, width 0.25s ease, height 0.25s ease, opacity 0.2s ease, background-color 0.2s ease;
  will-change: transform;
  mix-blend-mode: difference;
}
#cursor-ring.hover {
  width: 72px;
  height: 72px;
  background: rgba(94, 234, 212, 0.08);
  border-color: #5EEAD4;
  border-width: 1.5px;
}
#cursor.hover {
  width: 4px;
  height: 4px;
}
#cursor-label.show {
  opacity: 1;
}

/* ============================================================
   NAV scrolled
   ============================================================ */
#nav.scrolled {
  background: rgba(6, 7, 10, 0.78);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Safety net: if reveal hasn't fired by 2s into page load, show content anyway.
   Prevents blank-page bugs from a slow/blocked script. */
@keyframes revealFallback {
  to { opacity: 1; transform: translateY(0); }
}
.reveal {
  animation: revealFallback 0.4s ease-out 2s forwards;
}
.reveal.in { animation: none; }
.reveal-word {
  display: block;
  overflow: hidden;
  /* Reserve room for descenders (g, y, p, j, q) and the SVG underline
     so letters and decorations are never clipped */
  padding-bottom: 0.22em;
  line-height: 1.02;
}
.reveal-word > * { display: inline-block; }

/* ============================================================
   SCRAMBLE TEXT
   ============================================================ */
.scramble {
  display: inline-block;
  /* Allow descenders to render without parent clipping the bottom */
  padding-bottom: 0.05em;
}

/* Section h2 headings: never clip descenders of g, y, j, p, q */
section h2 {
  padding-bottom: 0.12em;
}

/* ============================================================
   MARQUEE (forward + reverse)
   ============================================================ */
.marquee {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee-reverse {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee-reverse 28s linear infinite;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-reverse {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ============================================================
   FLOATING 3D PACKAGES
   ============================================================ */
.package {
  position: absolute;
  border-radius: 14px;
  transform-style: preserve-3d;
  box-shadow:
    0 30px 60px -10px rgba(0,0,0,0.5),
    inset 0 -8px 16px rgba(0,0,0,0.25);
}
.package::before, .package::after {
  content: '';
  position: absolute;
  border-radius: 14px;
}
.package::before {
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 60%);
}
.package::after {
  inset: 30% 20% 30% 20%;
  border: 2px dashed rgba(0,0,0,0.25);
  border-radius: 4px;
}

.package-1 {
  width: 130px; height: 130px;
  background: linear-gradient(135deg, #5EEAD4, #14B8A6);
  top: 0; right: 40px;
  animation: floatPkg 7s ease-in-out infinite;
}
.package-2 {
  width: 90px; height: 90px;
  background: linear-gradient(135deg, #FBBF24, #D97706);
  bottom: 30px; right: 100px;
  animation: floatPkg 5.5s ease-in-out infinite 0.4s reverse;
}
.package-3 {
  width: 70px; height: 70px;
  background: linear-gradient(135deg, #A78BFA, #7C3AED);
  top: 130px; right: 180px;
  animation: floatPkg 6.5s ease-in-out infinite 1s;
}
@keyframes floatPkg {
  0%, 100% { transform: translateY(0) rotate(-6deg) rotateY(0deg); }
  50%      { transform: translateY(-18px) rotate(2deg) rotateY(15deg); }
}

/* ============================================================
   FLOATING SHIPPING DECORATIONS (boxes, polymailers, labels)
   ============================================================ */
body { position: relative; }

#ship-deco {
  /* Filled with full document height by JS */
  height: 100%;
  will-change: transform;
}

.ship-item {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  opacity: 0.55;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.4));
}

.ship-item.box svg     { width: 70px; height: 70px; }
.ship-item.poly svg    { width: 92px; height: 64px; }
.ship-item.label svg   { width: 120px; height: 72px; }

/* Gentle individual sway loop — each item gets a unique speed via inline style */
@keyframes shipSway {
  0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
  50%      { transform: translate(var(--swayX, 8px), var(--swayY, -10px)) rotate(calc(var(--rot, 0deg) + var(--swayR, 4deg))); }
}

.ship-item .inner {
  animation: shipSway var(--sway-dur, 7s) ease-in-out infinite;
  animation-delay: var(--sway-delay, 0s);
}

/* Hide decorations on very small screens to avoid clutter */
@media (max-width: 640px) {
  #ship-deco { display: none; }
}

/* Barcode scanner line */
.scanner-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, #5EEAD4, transparent);
  animation: scan 2.5s ease-in-out infinite;
  box-shadow: 0 0 20px #5EEAD4, 0 0 40px #5EEAD4;
}
@keyframes scan {
  0%, 100% { transform: translateY(-100%); }
  50%      { transform: translateY(100%); }
}

/* ============================================================
   3D TILT cards
   ============================================================ */
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.3s ease-out;
  will-change: transform;
}

/* ============================================================
   SPOTLIGHT cards
   ============================================================ */
.spot {
  position: relative;
}
.spot-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(94, 234, 212, 0.18),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}
.spot:hover .spot-glow {
  opacity: 1;
}

/* ============================================================
   MAGNETIC BUTTONS
   ============================================================ */
.magnetic {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ============================================================
   SERVICE / FEATURE cards
   ============================================================ */
.service-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
}

/* Step hover */
.step {
  transition: all 0.3s ease;
}
.step:hover {
  transform: translateX(8px);
}

/* Trust + industry + addon */
.trust, .industry, .addon {
  transition: all 0.3s ease;
}
.trust:hover {
  border-color: rgba(94, 234, 212, 0.4);
  background: rgba(94, 234, 212, 0.05);
}
.industry:hover {
  border-color: rgba(94, 234, 212, 0.4);
  background: rgba(94, 234, 212, 0.05);
  transform: translateY(-2px);
}
.addon:hover {
  border-color: rgba(94, 234, 212, 0.4);
  background: rgba(94, 234, 212, 0.06);
  transform: translateX(3px);
}

/* ============================================================
   CHART BARS animate from 0 height
   ============================================================ */
.chart-bar {
  height: 0;
  transition: height 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.chart-bar.in {
  height: var(--h);
}

/* ============================================================
   FAQ
   ============================================================ */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] summary { color: #5EEAD4; }
details > div {
  animation: fadeDown 0.4s ease;
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   FORM chips (checkbox / radio styled)
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
  border-radius: 999px;
  font-size: 12px;
  transition: all 0.2s ease;
}
.chip:hover span {
  border-color: rgba(94, 234, 212, 0.5);
  color: #fff;
}
.chip input:checked + span {
  background: #5EEAD4;
  color: #08101C;
  border-color: #5EEAD4;
  font-weight: 600;
}
.chip input:checked + span::before {
  content: '✓';
  font-weight: 700;
}

/* ============================================================
   FORM INPUT focus glow
   ============================================================ */
.form-input {
  transition: all 0.25s ease;
}
.form-input:focus {
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.15);
}

/* ============================================================
   Quote submit success state
   ============================================================ */
#quote-submit.success {
  background: #08101C !important;
  color: #5EEAD4 !important;
  border: 1px solid #5EEAD4;
}

/* ============================================================
   PULSE highlight for status dots
   ============================================================ */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(94,234,212,0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(94,234,212,0); }
}

/* ============================================================
   FEED row — absolutely positioned, fixed-height container
   ============================================================ */
.feed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  height: 32px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  transition: top 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.35s ease,
              transform 0.35s ease;
  will-change: top, opacity, transform;
}
.feed-row.removing {
  opacity: 0;
  transform: translateX(16px);
}

/* ============================================================
   Reduced motion safety
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .marquee, .marquee-reverse { animation: none; }
  .package { animation: none; }
  .scanner-line { animation: none; }
  .noise { animation: none; }
}

/* ============================================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   Phones can't render giant blur + noise grain + animated gradients
   at 60fps. Lighten everything for them.
   ============================================================ */
@media (max-width: 768px) {
  /* Kill the constantly-repainting noise overlay */
  .noise { display: none; }

  /* Drop blur radius from 160px → 60px on the aurora blobs (5–8x faster) */
  #blob-1, #blob-2, #blob-3 {
    filter: blur(60px);
    opacity: 0.5;
    animation: none !important;
  }

  /* Disable the spinning float on blobs to skip per-frame compositing work */
  #blob-1 { animation: none; }
  #blob-2 { animation: none; }
  #blob-3 { animation: none; }

  /* Lighten / disable backdrop-blur on cards (very expensive on iOS Safari) */
  #nav.scrolled {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Drop loader shimmer cost */
  #loader-text { animation: none; background: none; -webkit-text-fill-color: white; }

  /* Disable the 3D tilt transform on mobile (touch can't drive it anyway) */
  .tilt { transform: none !important; }

  /* Disable spotlight tracking */
  .spot-glow { display: none; }

  /* Slow marquee on mobile so it doesn't burn the GPU */
  .marquee { animation-duration: 50s; }
  .marquee-reverse { animation-duration: 40s; }
}