/* ==========================================================================
   World Whisky Atlas — capa de movimiento (Fase 1)
   Animaciones elegantes. Progressive enhancement: sólo actúan con .js activo,
   y se desactivan con prefers-reduced-motion.
   ========================================================================== */

/* ---------- KEYFRAMES ---------- */
@keyframes markerDrop{0%{opacity:0;transform:translateY(-18px) scale(.3)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes beacon{0%{transform:scale(.5);opacity:.5}70%{opacity:0}100%{transform:scale(2.5);opacity:0}}
@keyframes hlPulse{0%,100%{stroke-opacity:.6}50%{stroke-opacity:1}}
@keyframes revealUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes rippleAnim{to{transform:scale(3.4);opacity:0}}
@keyframes shine{to{left:150%}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ---------- MARCADORES ---------- */
.marker-inner{transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.js .marker-inner{opacity:0}
.marker-inner.anim{animation:markerDrop .7s both;animation-delay:var(--d,0s)}
.js .marker-inner.done{opacity:1}
.marker:hover .marker-inner.done,
.marker.is-active .marker-inner.done{transform:translateY(-3px) scale(1.14)}

/* faro: anillo latiendo en TODOS los marcadores (invita al clic) */
.js .marker .ring{opacity:1;animation:beacon 3.4s ease-out infinite}
.js .marker:nth-of-type(2) .ring{animation-delay:.7s}
.js .marker:nth-of-type(3) .ring{animation-delay:1.3s}
.js .marker:nth-of-type(4) .ring{animation-delay:2s}
.js .marker:nth-of-type(5) .ring{animation-delay:2.6s}
.js .marker.is-active .ring{animation-duration:1.9s;stroke-width:2}

/* ---------- PAÍSES DESTACADOS (encendido + latido) ---------- */
.js .highlight{opacity:0}
.highlight.lit{opacity:1;transition:opacity .7s ease;transition-delay:var(--d,0s)}
.js .highlight.lit{animation:hlPulse 5s ease-in-out infinite;animation-delay:1.6s}

/* ---------- SISTEMA DE REVELADO ---------- */
.js .reveal{opacity:0}
.reveal.anim{animation:revealUp .6s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,0s)}
.js .reveal.reveal-done{opacity:1}

/* ---------- STAGGER DEL PANEL ---------- */
.js .panel-body>*{opacity:0;transform:translateY(10px)}
.js .panel-body.in>*{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.js .panel-body.in>*:nth-child(1){transition-delay:.04s}
.js .panel-body.in>*:nth-child(2){transition-delay:.09s}
.js .panel-body.in>*:nth-child(3){transition-delay:.14s}
.js .panel-body.in>*:nth-child(4){transition-delay:.19s}
.js .panel-body.in>*:nth-child(5){transition-delay:.24s}
.js .panel-body.in>*:nth-child(6){transition-delay:.29s}
.js .panel-body.in>*:nth-child(7){transition-delay:.34s}
.js .panel-body.in>*:nth-child(8){transition-delay:.39s}
.js .panel-body.in>*:nth-child(9){transition-delay:.44s}
.js .panel-body.in>*:nth-child(n+10){transition-delay:.49s}

/* rosa de los vientos girando lento en el hero del panel */
.panel-hero .rose svg{animation:spinSlow 70s linear infinite;transform-origin:50% 50%}

/* ---------- BOTONES: feedback táctil + brillo ---------- */
.map-ctrls button,.btn-allfilters,.panel-cta,.pcard,.nav-toggle,.wrow,.country-item{
  position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.map-ctrls button:active,.nav-toggle:active{transform:scale(.9)}
.panel-cta:active,.btn-allfilters:active,.pcard:active{transform:scale(.98)}
.map-ctrls button{transition:background .18s,color .18s,transform .12s}
.country-item:active{background:rgba(201,162,74,.16)}
.wrow:active{background:rgba(201,162,74,.14)}

/* tinta del ripple (creada por JS) */
.ripple-ink{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);
  background:radial-gradient(circle,rgba(201,162,74,.55),rgba(201,162,74,0) 70%);
  animation:rippleAnim .6s ease-out forwards}

/* barrido de brillo en el CTA dorado */
.panel-cta::after{content:"";position:absolute;top:0;left:-150%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg)}
.panel-cta:hover::after{animation:shine .85s ease}
.panel-cta.ghost::after{background:linear-gradient(100deg,transparent,rgba(201,162,74,.25),transparent)}

/* subrayado que crece en los links del nav */
.nav-links a::after{content:"";position:absolute;left:50%;right:50%;bottom:-.35rem;height:1.5px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);transition:left .25s,right .25s,opacity .2s}
.nav-links a:hover::after{left:0;right:0;opacity:1}

/* chevrons de filtros */
.filter-row .chev{transition:transform .2s}
.filter-row:hover .chev{transform:translateX(4px)}

/* botón "ver ficha completa" del hero del panel: flecha de whisky flotando */
.wrow .arrow{transition:transform .2s}
.wrow:hover .arrow{transform:translateX(3px)}

/* ---------- HAMBURGUESA / MENÚ MOBILE ---------- */
.nav-toggle{display:none;flex-direction:column;gap:5px;width:42px;height:42px;flex:none;
  align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:9px;
  background:rgba(0,0,0,.35)}
.nav-toggle span{width:20px;height:2px;background:var(--gold-bright);border-radius:2px;
  transition:transform .3s ease,opacity .2s ease}
.nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* desktop: que los 8 links del nav entren en una sola línea */
@media (min-width:1181px){
  .nav{gap:1rem}
  .nav-links{gap:.8rem;flex-wrap:nowrap}
  .nav-links a{font-size:.68rem;letter-spacing:.1em;white-space:nowrap}
  .search{min-width:150px}
}

@media (max-width:1180px){
  .nav-toggle{display:flex;order:3}
  .nav-links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;justify-content:flex-start;
    gap:0;margin:0;background:linear-gradient(180deg,#1b1710,#141009);border-bottom:1px solid var(--line-strong);
    box-shadow:var(--shadow);transform:translateY(-14px);opacity:0;pointer-events:none;max-height:0;overflow:hidden;
    transition:transform .32s ease,opacity .3s ease,max-height .34s ease,padding .32s ease;padding:0 1.2rem}
  .nav.nav-open .nav-links{transform:none;opacity:1;pointer-events:auto;max-height:460px;padding:.7rem 1.2rem}
  .nav-links a{padding:.8rem .2rem;border-bottom:1px solid var(--line);width:100%;text-align:left}
  .nav-links a::after{display:none}
}

/* mobile: que el buscador se encoja y el hamburguesa NUNCA quede fuera de pantalla */
@media (max-width:900px){
  .nav{gap:.7rem;padding:.7rem 1rem}
  .nav-right{flex:1 1 auto;min-width:0}
  .search{min-width:0;flex:1 1 auto}
  .search input{width:100%;min-width:0}
}
@media (max-width:560px){
  .locale{display:none}
  .brand-txt span{display:none}
  .brand .compass{width:34px;height:34px}
}

/* ---------- PULIDO DE DISEÑO (director de arte) ---------- */
/* logo/isotipo más presente y dorado brillante */
.brand .compass{width:42px;height:42px;color:var(--gold-bright)}
/* textura de papel un poco más presente + vignette de profundidad
   (para que el negro plano fuera del mapa respire la misma materialidad) */
body::before{opacity:.07}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(115% 80% at 50% -5%, rgba(58,48,26,.18), transparent 52%),
             radial-gradient(140% 120% at 50% 118%, rgba(0,0,0,.55), transparent 55%)}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .js .marker-inner,.js .reveal,.js .panel-body>*{opacity:1 !important;transform:none !important;animation:none !important}
  .js .highlight{opacity:1 !important}
  .highlight.lit{animation:none !important}
  .js .marker .ring{animation:none;opacity:0}
  .panel-hero .rose svg{animation:none}
  .marker-inner{transition:none}
  .ripple-ink{display:none}
}