/* ============================================================
   MOTION + IMMERSIVE VISUALS — Navigated Overseas v3
   Cursor, scroll progress, world map + flight arcs, premium
   background effects. Pairs with js/motion.js. Builds on the
   tokens in css/style.css.
   ============================================================ */

/* Hide native cursor only when our custom one is active (fine pointers) */
@media (pointer: fine) {
  .has-lenis, .has-lenis a, .has-lenis button, .has-lenis .btn { cursor: none; }
}
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 9000; pointer-events: none; border-radius: 50%; will-change: transform; }
.cursor-dot { width: 6px; height: 6px; background: var(--clr-gold); }
.cursor-ring { width: 36px; height: 36px; border: 1.5px solid rgba(200,169,106,.5); transition: width .25s var(--ease-smooth), height .25s var(--ease-smooth), background .25s, border-color .25s; }
.cursor-ring--active { width: 54px; height: 54px; background: rgba(200,169,106,.08); border-color: rgba(200,169,106,.8); }
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* Scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--clr-gold-dark), var(--clr-gold-light)); z-index: 9999; will-change: transform; }

/* Premium animated backgrounds */
.bg-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-aurora::before, .bg-aurora::after { content: ''; position: absolute; width: 55vw; height: 55vw; max-width: 680px; max-height: 680px; border-radius: 50%; filter: blur(58px); opacity: .5; will-change: transform; }
.bg-aurora::before { background: radial-gradient(circle, rgba(200,169,106,.30), transparent 65%); top: -18%; left: -12%; animation: noAur1 20s ease-in-out infinite; }
.bg-aurora::after { background: radial-gradient(circle, rgba(40,90,150,.45), transparent 65%); bottom: -22%; right: -12%; animation: noAur2 26s ease-in-out infinite; }
@keyframes noAur1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(10%,14%) scale(1.18)} }
@keyframes noAur2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-12%,-10%) scale(1.12)} }
.bg-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 72%); }
.bg-noise { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .035; mix-blend-mode: overlay; 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.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ============================================================
   WORLD MAP — destinations with glowing pins + flight arcs
   ============================================================ */
.worldmap { position: relative; width: 100%; max-width: 960px; margin: 0 auto; display: block; }
.worldmap__svg { width: 100%; height: auto; display: block; overflow: visible; aspect-ratio: 855 / 360; }
.worldmap__land { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.10); stroke-width: .4; transition: fill var(--dur-normal); }
.worldmap__land.is-dim { fill: rgba(255,255,255,.04); }
.wm-pin { cursor: pointer; }
.wm-pin__halo { fill: rgba(200,169,106,.18); transform-box: fill-box; transform-origin: center; animation: wmPulse 2.6s ease-in-out infinite; }
.wm-pin__dot { fill: var(--clr-gold); stroke: #fff; stroke-width: .5; transition: r var(--dur-fast); }
.wm-pin.is-home .wm-pin__dot { fill: var(--clr-red); }
.wm-pin:hover .wm-pin__dot, .wm-pin.is-active .wm-pin__dot { r: 5; }
.wm-pin__label { fill: var(--clr-gold-light); font-family: var(--ff-heading); font-size: 10px; font-weight: 600; opacity: 0; transition: opacity var(--dur-fast); pointer-events: none; paint-order: stroke; stroke: rgba(6,14,26,.85); stroke-width: 2.4px; stroke-linejoin: round; }
.wm-pin:hover .wm-pin__label, .wm-pin.is-active .wm-pin__label { opacity: 1; }
/* Dotted world-map land */
.wm-land { pointer-events: none; }
.wm-dot { fill: rgba(150,180,220,.16); }
@keyframes wmPulse { 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.5);opacity:.15} }
.wm-arc { fill: none; stroke: url(#wmArcGrad); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 6 5; opacity: .55; }
.wm-arc.is-active { stroke: var(--clr-gold); opacity: 1; stroke-width: 1.4; }
.wm-beam { fill: url(#wmBeamGrad); filter: drop-shadow(0 0 5px rgba(200,169,106,.95)); }
.wm-arc--draw { stroke-dasharray: 600; stroke-dashoffset: 600; animation: wmDraw 2.4s var(--ease-smooth) forwards; }
@keyframes wmDraw { to { stroke-dashoffset: 0; } }

/* Map → country detail panel */
.wm-panel { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-xl); padding: var(--sp-6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.wm-panel__flag { font-size: 2.4rem; line-height: 1; }
.wm-panel__name { font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h3); color: #fff; margin: var(--sp-2) 0 4px; }
.wm-panel__tag { font-size: var(--fs-body-sm); color: var(--clr-gold-light); }
.wm-panel__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-5); }
.wm-fact { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); }
.wm-fact__k { font-size: var(--fs-caption); color: rgba(248,250,252,.5); text-transform: uppercase; letter-spacing: .06em; }
.wm-fact__v { font-family: var(--ff-heading); font-weight: 600; color: #fff; margin-top: 2px; font-size: var(--fs-body-sm); }
.wm-fact__v.is-free { color: var(--clr-green); }

/* ============================================================
   METEORS (Aceternity-style) + CARD CURSOR-GLOW
   ============================================================ */
.meteors{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
[data-meteors] > .container{position:relative;z-index:1}
.meteor{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--clr-gold);box-shadow:0 0 7px 1px rgba(200,169,106,.55);animation-name:meteorFall;animation-timing-function:linear;animation-iteration-count:infinite;opacity:0}
.meteor::before{content:'';position:absolute;top:50%;left:1px;width:64px;height:1px;background:linear-gradient(90deg,rgba(200,169,106,.55),transparent);transform:translateY(-50%)}
@keyframes meteorFall{0%{transform:rotate(215deg) translateX(0);opacity:0}8%{opacity:1}90%{opacity:.7}100%{transform:rotate(215deg) translateX(-780px);opacity:0}}

.has-glow{position:relative}
.has-glow::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),rgba(200,169,106,.16),transparent 60%);opacity:0;transition:opacity var(--dur-normal) var(--ease-smooth);pointer-events:none}
.has-glow:hover::after{opacity:1}

/* ============================================================
   LEAD GATE (floating capture form on tool pages)
   ============================================================ */
.lead-gate{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);opacity:1;transition:opacity .5s var(--ease-smooth)}
.lead-gate--done{opacity:0;pointer-events:none}
.lead-gate__backdrop{position:absolute;inset:0;background:rgba(6,14,26,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lead-gate__card{position:relative;width:100%;max-width:440px;max-height:94vh;overflow-y:auto;background:linear-gradient(160deg,var(--clr-navy-light),var(--clr-navy-dark));border:1px solid rgba(200,169,106,.3);border-radius:var(--radius-xl);box-shadow:0 40px 100px rgba(0,0,0,.55);animation:lgIn .5s var(--ease-smooth)}
@keyframes lgIn{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
.lead-gate__inner{position:relative;z-index:1;padding:var(--sp-8) var(--sp-7) var(--sp-7);text-align:center;color:#fff}
.lead-gate__logo{height:52px;width:auto;margin:0 auto var(--sp-4);display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.lead-gate__eyebrow{display:inline-block;font-family:var(--ff-heading);font-size:var(--fs-caption);font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--clr-gold-light);margin-bottom:var(--sp-3)}
.lead-gate__title{font-family:var(--ff-display);font-weight:600;font-size:var(--fs-h3);color:#fff;margin-bottom:var(--sp-2)}
.lead-gate__sub{color:rgba(248,250,252,.6);font-size:var(--fs-body-sm);line-height:1.6;margin-bottom:var(--sp-6)}
.lead-gate__form{display:grid;gap:var(--sp-4);text-align:left}
.lg-field{display:flex;flex-direction:column;gap:6px}
.lg-field label{font-family:var(--ff-heading);font-size:var(--fs-caption);font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:rgba(248,250,252,.55)}
.lg-field input,.lg-field select{width:100%;padding:12px 14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);color:#fff;font-size:var(--fs-body-sm);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.lg-field input::placeholder{color:rgba(248,250,252,.3)}
.lg-field input:focus,.lg-field select:focus{border-color:var(--clr-gold);box-shadow:0 0 0 3px rgba(200,169,106,.15)}
.lg-field select option{background:var(--clr-navy);color:#fff}
.lg-invalid{border-color:var(--clr-red)!important;box-shadow:0 0 0 3px rgba(230,57,70,.15)!important}
.lg-phone{display:flex;align-items:stretch}
.lg-phone__cc{display:flex;align-items:center;padding:0 12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-right:none;border-radius:var(--radius-md) 0 0 var(--radius-md);color:rgba(248,250,252,.7);font-family:var(--ff-heading);font-size:var(--fs-body-sm)}
.lg-phone input{border-radius:0 var(--radius-md) var(--radius-md) 0}
.lg-error{color:#ff8a93;font-size:var(--fs-caption);min-height:14px;margin-top:-4px}
.lg-submit{width:100%;margin-top:var(--sp-2)}
.lead-gate__trust{margin-top:var(--sp-4);font-size:var(--fs-caption);color:rgba(248,250,252,.4)}
.lead-gate .bg-aurora{opacity:.45}

/* Respect reduced motion: kill the heavy loops */
@media (prefers-reduced-motion: reduce) {
  .bg-aurora::before, .bg-aurora::after, .wm-pin__halo { animation: none !important; }
  .wm-arc--draw { animation: none !important; stroke-dashoffset: 0 !important; } /* show arcs without the draw animation */
  .scroll-progress { display: none; }
  .cursor-dot, .cursor-ring { display: none; }
  @media (pointer: fine) { .has-lenis, .has-lenis a, .has-lenis button, .has-lenis .btn { cursor: auto; } }
}