/* Motion + interactive layers (loaded after index.css) */

/* ---------- global layers ---------- */
.scroll-progress{
  position:fixed; top:0; inset-inline:0; height:3px; z-index:300;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--turquoise),var(--gold),var(--terracotta));
  pointer-events:none;
}
[dir="rtl"] .scroll-progress{ transform-origin:100% 50%; }

.aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:.16; }
.aurora i{ position:absolute; width:55vmax; height:55vmax; border-radius:50%; filter:blur(90px); will-change:transform; }
.aurora i:nth-child(1){ background:var(--turquoise); top:-20vmax; inset-inline-start:-15vmax; animation:aur1 28s ease-in-out infinite alternate; }
.aurora i:nth-child(2){ background:var(--gold); bottom:-25vmax; inset-inline-end:-10vmax; animation:aur2 34s ease-in-out infinite alternate; }
.aurora i:nth-child(3){ background:var(--terracotta); top:30vh; inset-inline-start:35vw; width:35vmax; height:35vmax; animation:aur3 40s ease-in-out infinite alternate; }
@keyframes aur1{ to{ transform:translate(18vmax,14vmax) scale(1.15); } }
@keyframes aur2{ to{ transform:translate(-20vmax,-10vmax) scale(.9); } }
@keyframes aur3{ to{ transform:translate(-12vmax,16vmax) scale(1.2); } }
[data-theme="light"] .aurora{ opacity:.12; }

.cursor-glow{
  position:fixed; left:0; top:0; width:420px; height:420px; margin:-210px 0 0 -210px; z-index:0;
  border-radius:50%; pointer-events:none; opacity:0; transition:opacity .4s ease;
  background:radial-gradient(circle, rgba(20,163,161,.20), transparent 65%);
  will-change:transform;
}
.cursor-glow.on{ opacity:1; }
@media (hover:none){ .cursor-glow{ display:none; } }

/* ---------- hero polish ---------- */
.hero-content h1{
  background:linear-gradient(100deg,var(--text-heading) 20%,var(--terracotta) 45%,var(--turquoise) 65%,var(--text-heading) 85%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:shimmer 9s ease-in-out infinite alternate;
}
@keyframes shimmer{ to{ background-position:100% 0; } }
.hero-content > *{ animation:rise .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-content > :nth-child(2){ animation-delay:.1s; }
.hero-content > :nth-child(3){ animation-delay:.2s; }
.hero-content > :nth-child(4){ animation-delay:.3s; }
.hero-content > :nth-child(5){ animation-delay:.4s; }
@keyframes rise{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
.hero-orb{ transition:transform .6s ease-out; }

.btn{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:""; position:absolute; inset:0; transform:translateX(-120%) skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transition:transform .7s ease;
}
.btn-primary:hover::after{ transform:translateX(120%) skewX(-20deg); }

/* ---------- marquee ---------- */
.marquee{ overflow:hidden; border-block:1px solid var(--line); background:var(--bg-alt); padding:.9rem 0; position:relative; z-index:1; direction:ltr; }
.marquee-track{ display:flex; gap:2.5rem; width:max-content; animation:marq 38s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-weight:700; color:var(--text-soft); white-space:nowrap; display:flex; align-items:center; gap:2.5rem; }
.marquee-track span::after{ content:"◆"; color:var(--gold); font-size:.6rem; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- spotlight + tilt cards ---------- */
.service-card, .visa-card, .team-card, .office-card, .fx-card{ position:relative; overflow:hidden; }
.service-card::before, .visa-card::before, .team-card::before, .office-card::before, .fx-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(20,163,161,.18), transparent 70%);
}
.service-card:hover::before, .visa-card:hover::before, .team-card:hover::before, .office-card:hover::before, .fx-card:hover::before{ opacity:1; }
.service-card:hover, .visa-card:hover, .team-card:hover, .fx-card:hover{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);
}
.service-icon, .visa-card-ico{ transition:transform .4s cubic-bezier(.3,1.6,.5,1); display:inline-block; }
.service-card:hover .service-icon, .visa-card:hover .visa-card-ico{ transform:scale(1.25) rotate(-8deg); }

.in-view .services-grid > *, .in-view .visa-grid > *, .in-view .team-grid > *, .in-view .steps > *,
.in-view .compare-grid > *, .in-view .cities-grid > *, .in-view .offices-grid > *{
  animation:rise .7s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(var(--i,0) * 70ms);
}

/* ---------- process steps ---------- */
.process{ padding:4.5rem 1.5rem 3rem; max-width:var(--container); margin:0 auto; }
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.2rem; counter-reset:s; position:relative; }
.step-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem 1.3rem 1.5rem; text-align:center; box-shadow:var(--shadow-card);
}
.step-n{
  position:absolute; top:-1px; inset-inline-start:-1px; width:34px; height:34px; display:grid; place-items:center;
  background:var(--terracotta); color:#fff; font-weight:800; border-radius:var(--radius) 0 var(--radius) 0;
}
[dir="rtl"] .step-n{ border-radius:0 var(--radius) 0 var(--radius); }
.step-ico{ font-size:2rem; display:block; margin-bottom:.4rem; }
.step-card h3{ font-size:1.02rem; }
.step-card p{ font-size:.88rem; color:var(--text-soft); margin:0; }

/* ---------- finder + calculator ---------- */
.finder{ padding:3rem 1.5rem 4rem; background:var(--bg-alt); position:relative; z-index:1; }
.finder-grid{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr; gap:1.4rem; }
@media(max-width:860px){ .finder-grid{ grid-template-columns:1fr; } }
.finder-card{
  background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:1.8rem; box-shadow:var(--shadow-card);
}
.finder-card h3{ font-size:1.15rem; margin-bottom:1rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{
  display:inline-flex; align-items:center; gap:.5em; padding:.65em 1.1em; border-radius:999px;
  border:1.5px solid var(--line); background:var(--bg); color:var(--text-body); font-weight:600; font-size:.92rem;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.chip:hover{ transform:translateY(-2px); border-color:var(--turquoise); }
.chip.active{ background:var(--terracotta); border-color:var(--terracotta); color:#fff; transform:scale(1.04); }
.finder-result{ margin-top:1.4rem; min-height:4rem; }
.result-in{
  display:flex; gap:1rem; align-items:flex-start; padding:1.2rem; border-radius:18px;
  background:linear-gradient(135deg,rgba(20,163,161,.14),rgba(216,177,58,.14)); border:1px solid var(--line);
  animation:pop .5s cubic-bezier(.3,1.5,.5,1) both;
}
@keyframes pop{ from{ opacity:0; transform:scale(.92) translateY(10px); } to{ opacity:1; transform:none; } }
.result-ico{ font-size:2.4rem; }
.result-in h4{ margin:0 0 .3em; font-size:1.1rem; color:var(--text-heading); }
.result-in p{ margin:0 0 .9em; color:var(--text-soft); font-size:.92rem; }

.calc-field{ display:grid; grid-template-columns:1fr auto; gap:.3rem .8rem; align-items:center; margin-bottom:1rem; font-size:.9rem; font-weight:600; }
.calc-field select{ grid-column:1 / -1; padding:.7em 1em; border-radius:12px; border:1.5px solid var(--line); background:var(--bg); color:var(--text-body); font:inherit; }
.calc-field input[type=range]{ grid-column:1; width:100%; accent-color:var(--terracotta); }
.calc-field b{ font-family:var(--font-mono); color:var(--terracotta-l); min-width:2.5ch; text-align:center; }
.calc-out{
  margin-top:1.2rem; padding:1.1rem 1.2rem; border-radius:16px; background:var(--surface-dark); color:var(--on-dark);
  display:flex; flex-direction:column; gap:.2rem;
}
.calc-out span{ font-size:.78rem; color:var(--gold-l); }
.calc-out strong{ font-size:1.9rem; font-variant-numeric:tabular-nums; }
.calc-note{ font-size:.78rem; color:var(--text-soft); margin:.8rem 0 0; }

/* ---------- why Spain ---------- */
.why{ padding:4.5rem 1.5rem 3rem; max-width:var(--container); margin:0 auto; position:relative; z-index:1; }
.compare-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; margin-bottom:2.5rem; }
.cmp-card, .city-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.4rem; box-shadow:var(--shadow-card);
}
.cmp-ico, .city-ico{ font-size:1.8rem; display:block; margin-bottom:.4rem; }
.cmp-card h3, .city-card h3{ font-size:1.08rem; }
.cmp-card p, .city-card p{ font-size:.9rem; color:var(--text-soft); margin:0; }

.pc-wrap{ max-width:760px; margin:0 auto 3rem; }
.pc-tabs{ display:flex; gap:.5rem; justify-content:center; margin-bottom:1.2rem; }
.pc-tab{ padding:.6em 1.5em; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); font-weight:700; color:var(--text-soft); transition:all .2s ease; }
.pc-tab.active{ background:var(--turquoise); border-color:var(--turquoise); color:#fff; }
.pc-tab[data-pc="cons"].active{ background:var(--terracotta); border-color:var(--terracotta); }
.pc-list{ display:grid; gap:.6rem; }
.pc-list li{
  padding:.8rem 1.1rem; border-radius:14px; background:var(--surface); border:1px solid var(--line);
  border-inline-start:4px solid var(--turquoise); animation:rise .45s ease both;
}
.pc-list.cons li{ border-inline-start-color:var(--terracotta); }
.pc-list li:nth-child(2){ animation-delay:.05s; } .pc-list li:nth-child(3){ animation-delay:.1s; }
.pc-list li:nth-child(4){ animation-delay:.15s; } .pc-list li:nth-child(5){ animation-delay:.2s; } .pc-list li:nth-child(6){ animation-delay:.25s; }

.sub-h{ text-align:center; font-size:1.4rem; margin-bottom:1.5rem; }
.cities-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.2rem; }
.city-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:1rem; padding-top:.9rem; border-top:1px dashed var(--line); }
.city-stats li{ display:flex; flex-direction:column; text-align:center; }
.city-stats b{ font-size:.92rem; color:var(--terracotta-l); }
.city-stats small{ font-size:.68rem; color:var(--text-soft); }

/* ---------- visa overlay extras ---------- */
.visa-links{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.scam-note{
  margin:1rem 0 0; padding:.9rem 1.1rem; border-radius:14px; font-size:.86rem;
  background:rgba(193,92,73,.12); border:1px solid rgba(193,92,73,.4); color:var(--text-body);
}
.visa-cta{ margin-top:2rem; text-align:center; }
.visa-overlay.open .visa-overlay-body > *{ animation:rise .6s cubic-bezier(.2,.7,.2,1) both; }
.visa-overlay.open .visa-overlay-body > :nth-child(2){ animation-delay:.08s; }
.visa-overlay.open .visa-overlay-body > :nth-child(3){ animation-delay:.16s; }
.visa-overlay.open .visa-overlay-body > :nth-child(4){ animation-delay:.24s; }
.doc-list li{ transition:transform .2s ease, color .2s ease; }
.doc-list li:hover{ transform:translateX(-4px); color:var(--text-heading); }
[dir="ltr"] .doc-list li:hover{ transform:translateX(4px); }

.accordion-a{ transition:max-height .45s cubic-bezier(.2,.7,.2,1); }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce){
  .aurora i, .marquee-track, .hero-content h1, .hero-content > *{ animation:none; }
  .services-grid > *, .visa-grid > *, .team-grid > *, .steps > *, .compare-grid > *, .cities-grid > *, .offices-grid > *{ animation:none !important; }
  .cursor-glow{ display:none; }
  .hero-content h1{ -webkit-text-fill-color:currentColor; background:none; }
}

/* ---------- hero flight route ---------- */
.hero-route{ position:relative; max-width:960px; height:auto; aspect-ratio:1000/260; margin:0 auto 1rem; direction:ltr; }
.route-svg{ width:100%; height:100%; overflow:visible; }
.route-base{ fill:none; stroke:var(--line); stroke-width:2; stroke-dasharray:3 9; stroke-linecap:round; }
.route-glow{ fill:none; stroke:url(#routeGrad); stroke-width:6; opacity:.55; stroke-dasharray:1100; stroke-dashoffset:1100; animation:draw 9s ease-in-out infinite; }
.route-live{ fill:none; stroke:url(#routeGrad); stroke-width:3; stroke-linecap:round; stroke-dasharray:1100; stroke-dashoffset:1100; animation:draw 9s ease-in-out infinite; }
@keyframes draw{ 0%{ stroke-dashoffset:1100; } 55%,100%{ stroke-dashoffset:0; } }
.pin circle:not(.pin-pulse){ stroke:var(--bg); stroke-width:3; }
.pin-ir circle{ fill:var(--terracotta); } .pin-es circle{ fill:var(--turquoise); }
.pin-pulse{ fill-opacity:.35; transform-box:fill-box; transform-origin:center; animation:ping 2.4s ease-out infinite; }
@keyframes ping{ to{ transform:scale(4.2); opacity:0; } }
.plane path{ fill:var(--text-heading); filter:drop-shadow(0 4px 6px rgba(0,0,0,.35)); transform:scale(1.1); }
.route-pill{
  position:absolute; top:84%; transform:translateX(-50%); padding:.35em 1.1em; border-radius:999px;
  font-weight:700; font-size:.88rem; color:var(--text-heading); white-space:nowrap;
  background:var(--glass-bg-scrolled); border:1px solid var(--line); backdrop-filter:blur(10px); box-shadow:var(--shadow-card);
}
.pill-ir{ left:88%; border-color:var(--terracotta); } .pill-es{ left:12%; border-color:var(--turquoise); }
.route-chip{
  position:absolute; left:50%; top:46%; transform:translateX(-50%); padding:.45em 1.2em; border-radius:999px;
  font-size:.82rem; font-weight:700; color:#fff; white-space:nowrap;
  background:linear-gradient(90deg,var(--terracotta),var(--turquoise)); box-shadow:0 10px 24px -10px rgba(20,163,161,.7);
  animation:float 4s ease-in-out infinite;
}
@keyframes float{ 50%{ transform:translate(-50%,-6px); } }
@media(max-width:560px){ .route-pill{ font-size:.72rem; } .route-chip{ font-size:.7rem; } }
@media (prefers-reduced-motion: reduce){ .route-glow,.route-live{ animation:none; stroke-dashoffset:0; } .pin-pulse,.route-chip{ animation:none; } }