/* ============================================================
   QUALITY COUNSEL — MOTION LAYER
   Loaded by every page EXCEPT index.html (the homepage has its
   own motion built in and must not be altered).

   Every effect here is disabled automatically for visitors who
   have "reduce motion" switched on in their device settings.
============================================================ */

/* ---------- 2. reading progress line ---------- */
.qc-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
  box-shadow: 0 0 12px rgba(201, 165, 92, .5);
  transition: width .1s linear;
}

/* ---------- 12. page transition ---------- */
.qc-curtain {
  position: fixed; inset: 0; z-index: 300; background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  transition: transform .8s cubic-bezier(.7, 0, .2, 1), opacity .8s ease;
}
.qc-curtain .qc-curtain-mark {
  font-family: 'Playfair Display', serif; color: var(--gold-light);
  font-size: 15px; letter-spacing: .3em; opacity: 0;
  transition: opacity .5s ease;
}
.qc-curtain.show-mark .qc-curtain-mark { opacity: 1; }
.qc-curtain.lift { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.qc-curtain.gone { display: none; }

/* ---------- 5. headlines rise word by word ---------- */
.qc-w {
  display: inline-block;
  opacity: 0; transform: translateY(20px);
}
.qc-rise.qc-on .qc-w {
  animation: qcWordUp .7s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes qcWordUp { to { opacity: 1; transform: none; } }

/* ---------- 7. nav tightens on scroll ---------- */
.nav {
  transition: padding .35s ease, box-shadow .35s ease, background .35s ease;
}
.nav.qc-tight {
  padding-top: 8px; padding-bottom: 8px;
  box-shadow: 0 4px 18px rgba(14, 33, 72, .10);
  background: rgba(255, 253, 248, .94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.nav .nav-emblem, .nav-emblem img { transition: transform .35s ease; }
.nav.qc-tight .nav-emblem { transform: scale(.86); }

/* ---------- 8. buttons with a light sweep ---------- */
.btn {
  position: relative; overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, background .3s ease, color .3s ease;
}
.btn::after {
  content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
  transition: left .65s cubic-bezier(.4, 0, .2, 1); pointer-events: none;
}
.btn:hover::after { left: 100%; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(14, 33, 72, .18); }
.btn-primary:hover { box-shadow: 0 12px 28px rgba(224, 120, 86, .34); }

/* ---------- 3. the journey spine (How We Help) ---------- */
.qc-spine { position: relative; }
.qc-spine-track {
  position: absolute; left: 25px; top: 14px; bottom: 14px; width: 2px;
  background: rgba(14, 33, 72, .12);
}
.qc-spine-fill {
  position: absolute; left: 25px; top: 14px; width: 2px; height: 0;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  transition: height 1.6s cubic-bezier(.4, 0, .2, 1);
}
.service-item .icon { transition: all .5s ease; }
.qc-spine .service-item { transition: opacity .5s ease; }
.qc-spine .service-item.qc-dim { opacity: .45; }
.qc-spine .service-item.qc-lit .icon {
  border-color: var(--gold) !important;
  color: var(--navy) !important;
  box-shadow: 0 0 0 6px rgba(201, 165, 92, .14);
}

/* ---------- 4. destination chips respond ---------- */
.dest-chip {
  position: relative; overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .4s ease;
}
.dest-chip::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--coral));
  transition: width .45s ease;
}
.dest-chip:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(14, 33, 72, .14);
  border-color: rgba(201, 165, 92, .55);
}
.dest-chip:hover::after { width: 100%; }
.dest-chip .flag { display: inline-block; transition: transform .4s ease; }
.dest-chip:hover .flag { transform: scale(1.16) rotate(-5deg); }

/* ---------- 10. country nav tracks position ---------- */
.destinations-nav { position: sticky; top: 0; z-index: 40; }
.dest-chip.qc-current {
  background: var(--navy) !important;
  color: var(--gold-light) !important;
  border-color: var(--navy) !important;
}

/* ---------- 9. testimonials as a swipe rail ---------- */
.voices-grid.qc-rail {
  display: flex; gap: 18px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 18px;
  scrollbar-width: thin; scrollbar-color: rgba(201,165,92,.55) rgba(14,33,72,.07);
  grid-template-columns: none !important;
}
.voices-grid.qc-rail::-webkit-scrollbar { height: 5px; }
.voices-grid.qc-rail::-webkit-scrollbar-thumb { background: rgba(201,165,92,.55); border-radius: 100px; }
.voices-grid.qc-rail::-webkit-scrollbar-track { background: rgba(14,33,72,.07); border-radius: 100px; }
.voices-grid.qc-rail .voice-card {
  flex: 0 0 330px; scroll-snap-align: start; margin: 0;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.voices-grid.qc-rail .voice-card:hover {
  transform: translateY(-5px); box-shadow: 0 14px 30px rgba(14,33,72,.13);
}
@media (max-width: 600px) {
  .voices-grid.qc-rail .voice-card { flex: 0 0 82%; }
}
.qc-railctl { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.qc-arw {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(14,33,72,.14);
  background: #fff; cursor: pointer; color: var(--navy); font-size: 14px;
  transition: all .3s ease;
}
.qc-arw:hover:not(:disabled) { border-color: var(--gold); background: var(--gold); color: #fff; }
.qc-arw:disabled { opacity: .32; cursor: default; }
@media (max-width: 600px) { .qc-railctl { display: none; } }

/* ---------- 6. contact form ---------- */
.form-field { position: relative; }
.form-field input, .form-field textarea, .form-field select {
  transition: border-color .3s ease, background .3s ease;
}
.form-field .qc-bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--coral));
  transition: width .35s ease; pointer-events: none;
}
.form-field.qc-focus .qc-bar { width: 100%; }
.form-submit .btn .qc-plane, .btn .qc-plane {
  display: inline-block; margin-left: 8px;
  transition: transform .55s ease, opacity .55s ease;
}
.btn.qc-sent .qc-plane { transform: translate(64px, -64px) rotate(20deg); opacity: 0; }

/* ---------- 13. back to top with progress ring ---------- */
.qc-totop {
  position: fixed; right: 22px; bottom: 22px; width: 52px; height: 52px;
  z-index: 120; cursor: pointer; border: none; padding: 0; background: transparent;
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.qc-totop.qc-show { opacity: 1; transform: none; pointer-events: auto; }
.qc-totop .qc-ring-bg { fill: rgba(255, 253, 248, .92); }
.qc-totop .qc-ring-track { fill: none; stroke: rgba(14, 33, 72, .12); stroke-width: 3; }
.qc-totop .qc-ring-fill {
  fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round;
  transition: stroke-dashoffset .15s linear;
}
.qc-totop .qc-arrow {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--navy); font-size: 15px;
}
@media (max-width: 600px) { .qc-totop { right: 14px; bottom: 84px; } }

/* ---------- 14. tap to copy ---------- */
.qc-copy { cursor: pointer; position: relative; transition: color .3s ease; }
.qc-copy::after {
  content: "⧉"; font-size: .78em; margin-left: 7px; opacity: .4;
  transition: opacity .3s ease;
}
.qc-copy:hover::after { opacity: .9; }
.qc-copy.qc-copied { color: var(--sage); }
.qc-copy.qc-copied::after { content: "✓ copied"; opacity: 1; letter-spacing: .06em; }

/* ---------- 16. light that follows the cursor ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band .qc-glow {
  position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 165, 92, .20), transparent 68%);
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0;
  transition: opacity .45s ease; left: 50%; top: 50%; z-index: 0;
}
.cta-band:hover .qc-glow { opacity: 1; }
.cta-band > * { position: relative; z-index: 1; }

/* ============================================================
   REDUCED MOTION — everything above stands still
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .qc-progress, .qc-curtain, .qc-totop, .cta-band .qc-glow { display: none !important; }
  .qc-w { opacity: 1 !important; transform: none !important; animation: none !important; }
  .btn:hover { transform: none; }
  .btn::after { display: none; }
  .dest-chip:hover { transform: none; }
  .dest-chip:hover .flag { transform: none; }
  .qc-spine .service-item.qc-dim { opacity: 1; }
  .qc-spine-fill { transition: none; }
  .voices-grid.qc-rail .voice-card:hover { transform: none; }
  .qc-railctl { display: none; }
  .nav { transition: none; }
}

/* ---------- 17. section headings get a gold rule that draws itself ---------- */
.qc-rise { position: relative; }
.qc-rise::after {
  content: ""; position: absolute; left: 0; bottom: -12px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--coral));
  transition: width 1.1s cubic-bezier(.3, 0, .2, 1) .35s;
}
.qc-rise.qc-on::after { width: 68px; }
section[style*="text-align: center"] .qc-rise::after,
.section-intro .qc-rise::after { left: 50%; transform: translateX(-50%); }

/* ---------- 18. cards lift as a group ---------- */
.info-block, .money-card, .voice-card, .service-item {
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, border-color .45s ease;
}
.info-block:hover, .money-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(14, 33, 72, .13);
  border-color: rgba(201, 165, 92, .5);
}

/* ---------- 19. the dark CTA band breathes ---------- */
.cta-band::after {
  content: ""; position: absolute; top: -30%; left: -15%;
  width: 65%; height: 90%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(224, 120, 86, .16), transparent 62%);
  filter: blur(26px);
  animation: qcBandDrift 22s ease-in-out infinite alternate;
}
@keyframes qcBandDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(38%, 16%, 0) scale(1.22); }
}

@media (prefers-reduced-motion: reduce) {
  .qc-rise::after { transition: none; width: 68px; }
  .info-block:hover, .money-card:hover { transform: none; box-shadow: none; }
  .cta-band::after { animation: none; }
}