/* Kahiki — "Calcula tu evento privado en 20 segundos" thought bubble (2026-09).
   A comic-book thought cloud that puffs up in the bottom-left corner ten seconds into a homepage
   visit and links through to that venue's private-events calculator.

   Shared by both venues and both languages, and loaded ONLY by the four homepages — deliberately
   its own file rather than an addition to each venue's assets/css/style.css, which is referenced
   with a static ?v= cache-buster from every page on the site and would therefore have to be
   version-bumped everywhere for a change that only affects the homepage.

   Bottom-left is chosen on purpose: the bottom-right corner already carries the WhatsApp
   .fab-stack and the Club Kahiki .club-popup pill, and a third floating thing in that column
   would be a tower of nags on a phone. The trailing puffs run down toward that corner, so the
   thought reads as belonging to someone just off the edge of the screen. */

.evento-popup{
  position:fixed; left:18px; bottom:14px; z-index:96;
  opacity:0; visibility:hidden;
  transition:opacity 260ms ease, visibility 0s linear 260ms,
             bottom 350ms cubic-bezier(.16,1,.3,1);
}
.evento-popup.is-open{
  opacity:1; visibility:visible;
  transition:opacity 260ms ease, visibility 0s, bottom 350ms cubic-bezier(.16,1,.3,1);
}

.evento-popup__link{
  position:relative; display:block; text-decoration:none;
  width:min(250px, calc(100vw - 100px));
}
/* A slow drift, as if the thought were hanging in the air. Deliberately tiny — anything more
   turns a piece of furniture into a distraction. */
.evento-popup.is-open .evento-popup__link{ animation:eventoBob 5.5s ease-in-out .9s infinite; }
@keyframes eventoBob{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-5px) rotate(-.6deg); }
}

/* The cloud is one closed path of semicircular bumps rather than a pile of overlapping circles,
   so the gold outline runs round the scallops as a single unbroken stroke. Because it's a real
   shape, the shadow can be a drop-shadow that hugs every bump instead of a box-shadow drawing a
   rectangle nothing on screen actually has — which is the whole reason this is SVG and not CSS. */
.evento-popup__cloud{
  display:block; width:100%; height:auto; overflow:visible;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(202,161,92,.16));
}
.evento-popup__cloud .ep-puff{
  fill:var(--ink-2);
  stroke:rgba(202,161,92,.55);
  stroke-width:2.4;
  /* fill-box keeps each puff scaling about its own centre; without it SVG transforms resolve
     against the viewBox origin and the puffs would fly in from the top-left corner. */
  transform-box:fill-box; transform-origin:center; transform:scale(0);
}
/* Read like a comic: the far puff first, then the near one, then the cloud they lead to. */
.evento-popup.is-open .ep-puff{ animation:eventoPuff .42s cubic-bezier(.34,1.56,.64,1) forwards; }
.evento-popup.is-open .ep-puff--near{ animation-delay:.1s; }
.evento-popup.is-open .ep-puff--body{ animation-delay:.2s; }
@keyframes eventoPuff{
  from{ transform:scale(0); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}

/* The thought itself, laid over the cloud's flat inner rectangle. The insets are the viewBox's
   own inner rect expressed as percentages (x 26→264 of a 292-wide box), so the text keeps its
   place at whatever width the bubble renders.
   Vertically it is CENTRED on the cloud rather than given a fixed height: 41.2% is where the
   cloud's own middle falls (y 9→103 of the 136-tall box — not 50%, because the trailing puffs
   carry the viewBox down past the cloud). A fixed height looked fine at 400px and broke at 320,
   where the title wraps to two lines and would have spilled straight out through the bottom
   scallops; centring lets a taller thought grow symmetrically into the bumps, which are filled
   cloud anyway. */
.evento-popup__content{
  position:absolute;
  left:8.9%; right:9.6%; top:41.2%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.15rem; text-align:center;
  opacity:0;
}
.evento-popup.is-open .evento-popup__content{ animation:eventoFade .4s ease .34s forwards; }
.evento-popup.is-open .evento-popup__close{ animation:eventoFade .3s ease .5s forwards; }
@keyframes eventoFade{ from{ opacity:0; } to{ opacity:1; } }
.evento-popup__content strong{
  font-size:.86rem; font-weight:700; color:var(--cream); line-height:1.2; letter-spacing:.005em;
}
.evento-popup__meta{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.74rem; color:var(--accent); line-height:1.2;
}
.evento-popup__meta svg{ width:12px; height:12px; flex:0 0 auto; }

.evento-popup__close{
  /* Sat on the cloud's top-right bump rather than out at the container's corner, where it read
     as an orphan floating in the space the scallops leave empty. Percentages, not pixels, so it
     keeps its seat on that bump at whatever width the bubble renders. */
  position:absolute; top:3%; right:5.5%; width:25px; height:25px; z-index:2;
  border-radius:50%; background:var(--ink-3); border:1px solid rgba(202,161,92,.5);
  color:var(--cream-dim); font-size:.66rem; cursor:pointer; padding:0; line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:color .2s ease, border-color .2s ease, background-color .2s ease;
}
/* The visible dot stays small so it doesn't crowd the cloud, but the thing you actually tap is
   a comfortable 41px — a 25px target is a miss waiting to happen on a phone. */
.evento-popup__close::before{ content:''; position:absolute; inset:-8px; border-radius:50%; }
.evento-popup__close:hover{ color:var(--cream); border-color:var(--accent); background:var(--ink-2); }

/* --- Making room for the other bottom-anchored tenants ------------------------------------
   Mataró's next-event bar (body.has-event-popup) and the language toast both sit along the same
   edge; each pushes the bubble up rather than overlapping it. The cookie banner owns the screen
   outright, so the bubble hides entirely while it's up — evento-popup.js already waits for
   consent before opening, this is the belt-and-braces half. */
body.has-event-popup .evento-popup{ bottom:90px; }
body:has(.lang-suggest.is-open) .evento-popup{ bottom:104px; }
body.has-event-popup:has(.lang-suggest.is-open) .evento-popup{ bottom:180px; }
body:has(.cookie-banner.is-open) .evento-popup{
  opacity:0; visibility:hidden; pointer-events:none;
}

/* Below ~360px the inner band is too narrow for the Spanish title at full size; a step down
   keeps it on one line instead of letting it wrap and swell the thought. */
@media (max-width:380px){
  .evento-popup__content strong{ font-size:.79rem; }
  .evento-popup__meta{ font-size:.69rem; }
}
@media (max-width:560px){
  .evento-popup{ left:10px; bottom:10px; }
  body.has-event-popup .evento-popup{ bottom:88px; }
  body:has(.lang-suggest.is-open) .evento-popup{ bottom:116px; }
}
@media (prefers-reduced-motion:reduce){
  .evento-popup.is-open .evento-popup__link{ animation:none; }
  .evento-popup__cloud .ep-puff{ transform:none; }
  .evento-popup.is-open .ep-puff{ animation:none; }
  .evento-popup__content, .evento-popup__close{ opacity:1; }
  .evento-popup.is-open .evento-popup__content,
  .evento-popup.is-open .evento-popup__close{ animation:none; }
}