/* Distinções biolog 2026 banner — same component as food4sustainability.org (f4s-website PR #9, frontend/src/styles/globals.css `.bdb`). */
/* ==========================================================================
   Distinções biolog 2026 banner (homepage carousel) — `.bdb`

   Rebuilt from the "Banner Website" page of the Canva design DAGtad17fm4
   (1640x924) as live type and vectors instead of a flat image:
   - type: Anton (title, slogan) and Quicksand (pills, call to action), as in Canva;
   - logo: the official biolog wordmark (Quicksand Regular outlines + globe);
   - radish, shout lines and blob: the animated biolog vector set.

   `--u` is one pixel of the design grid, so `calc(426 * var(--u))` can be checked
   against the Canva export directly. Desktop keeps the 1640:924 composition.
   Below 640px of banner width the stage switches to a portrait 600:760 grid
   where the same pieces are re-packed (proposal A, see the container query).

   Motion: one entrance on load, gentle idle loops, and a hover state (radish
   hop, globe spin, pill shine, blob swell, light pointer parallax). Everything
   is transform/opacity, and prefers-reduced-motion shows the final state.
   ========================================================================== */

@font-face {
  font-family: "Anton BDB";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/mu-plugins/biolog-distincoes-banner/fonts/anton-400.woff2") format("woff2");
}

@font-face {
  /* the site's Quicksand file, under a scoped name like the CLZ page does */
  font-family: "Quicksand BDB";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/wp-content/mu-plugins/biolog-distincoes-banner/fonts/quicksand-var.woff2") format("woff2");
}

.bdb {
  --bdb-coral: #fc425c;
  --bdb-green: #009138;
  --bdb-deep: #056b35;
  --bdb-yellow: #ffe77f;
  --bdb-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bdb-out: cubic-bezier(0.22, 1, 0.36, 1);
  --px: 0;
  --py: 0;

  container: bdb / inline-size;
  display: block;
  position: relative;
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.bdb *,
.bdb *::after {
  box-sizing: border-box;
}

.bdb:focus-visible {
  outline: 3px solid var(--bdb-green);
  outline-offset: 4px;
}

.bdb__stage {
  --u: calc(100cqw / 1640);
  position: relative;
  aspect-ratio: 1640 / 924;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse closest-side at 50% 50%, #fff 0%, #fff9dc 38%, var(--bdb-yellow) 100%);
}

/* every placed piece */
.bdb__stage > * {
  position: absolute;
  margin: 0;
}

/* a soft light that drifts on its own and leans toward the pointer */
.bdb__glow {
  left: 18%;
  top: 6%;
  width: 64%;
  height: 88%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  z-index: -1;
  translate: calc(var(--px) * 40 * var(--u)) calc(var(--py) * 24 * var(--u));
  transition: translate 1.2s var(--bdb-out);
  animation: bdb-drift 14s ease-in-out infinite alternate;
}

@keyframes bdb-drift {
  from { transform: translate(-4%, -2%) scale(1); }
  to { transform: translate(4%, 3%) scale(1.08); }
}

/* ---- slogan + logo ------------------------------------------------------- */

.bdb__brand {
  /* slogan and logo share one centred line; the logo sits on the text baseline
     (its own baseline is 78.53% down the wordmark, so it drops by the rest) */
  --bdb-logo: calc(378 * var(--u));
  left: 0;
  top: calc(38 * var(--u));
  width: 100%;
  font: 400 calc(57.5 * var(--u)) / 1 "Anton BDB", "Anton", Impact, sans-serif;
  text-align: center;
  white-space: nowrap;
}

.bdb__slogan {
  display: inline-block;
  color: var(--bdb-coral);
  animation: bdb-drop 0.7s var(--bdb-out) 0.1s backwards;
}

.bdb__logo {
  display: inline-block;
  width: var(--bdb-logo);
  margin-left: calc(25 * var(--u));
  vertical-align: calc(var(--bdb-logo) / 2.8154 * -0.2147);
  line-height: 0;
  animation: bdb-drop 0.7s var(--bdb-out) 0.2s backwards;
}

.bdb__logo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.bdb__globe {
  transform-box: view-box;
  /* transform-origin is set inline from the wordmark data */
  animation: bdb-globe-in 0.9s var(--bdb-pop) 0.45s backwards, bdb-sway 7s ease-in-out 1.6s infinite;
  transition: rotate 0.9s var(--bdb-pop);
}

@keyframes bdb-globe-in {
  from { transform: scale(0) rotate(-120deg); }
  to { transform: none; }
}

@keyframes bdb-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-5deg); }
}

/* ---- radish, title, shout ------------------------------------------------ */

.bdb__radish {
  left: calc(416 * var(--u));
  top: calc(184 * var(--u));
  width: calc(209 * var(--u));
  line-height: 0;
  z-index: 2;
  translate: calc(var(--px) * -14 * var(--u)) calc(var(--py) * -10 * var(--u));
  transition: translate 0.6s var(--bdb-out);
}

.bdb__radish svg {
  display: block;
  width: 100%;
  height: auto;
}

.bdb__title {
  left: calc(452.7 * var(--u));
  top: calc(256 * var(--u));
  width: calc(734.7 * var(--u));
  font: 400 calc(107.8 * var(--u)) / 1.4 "Anton BDB", "Anton", Impact, sans-serif;
  color: var(--bdb-green);
  text-align: center;
  letter-spacing: 0;
  z-index: 1;
  translate: calc(var(--px) * 6 * var(--u)) calc(var(--py) * 4 * var(--u));
  transition: translate 0.6s var(--bdb-out);
}

.bdb__title span {
  display: block;
}

.bdb__title span:first-child {
  animation: bdb-rise 0.8s var(--bdb-out) 0.3s backwards;
}

.bdb__title span:last-child {
  animation: bdb-rise 0.8s var(--bdb-out) 0.45s backwards;
}

.bdb__shout {
  left: calc(976.2 * var(--u));
  top: calc(192 * var(--u));
  width: calc(160.8 * var(--u));
  line-height: 0;
  rotate: 30.25deg;
  z-index: 1;
  translate: calc(var(--px) * 18 * var(--u)) calc(var(--py) * 12 * var(--u));
  transition: translate 0.6s var(--bdb-out);
}

.bdb__shout svg {
  display: block;
  width: 100%;
  height: auto;
  transition: scale 0.5s var(--bdb-pop);
}

/* hold the shout lines until the title has landed */
.bdb .bdb__shout .shout.pop .sh-line {
  animation-delay: calc(var(--i) * 90ms + 0.9s), calc(var(--i) * 90ms + 1.8s);
}

/* ---- pills, blob, call to action ----------------------------------------- */

.bdb__blob {
  left: calc(745.8 * var(--u));
  top: calc(534.7 * var(--u));
  width: calc(569.5 * var(--u));
  height: calc(324.6 * var(--u));
  line-height: 0;
  z-index: 0;
  --blob: var(--bdb-coral);
  translate: calc(var(--px) * 10 * var(--u)) calc(var(--py) * 8 * var(--u));
  transition: translate 0.6s var(--bdb-out), scale 0.5s var(--bdb-pop);
  animation: bdb-blob-in 0.9s var(--bdb-pop) 0.7s backwards;
}

.bdb__blob svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes bdb-blob-in {
  from { transform: scale(0.3) rotate(-8deg); opacity: 0; }
  60% { opacity: 1; }
  to { transform: none; }
}

.bdb__pills {
  left: calc(433 * var(--u));
  top: calc(562.2 * var(--u));
  width: calc(774 * var(--u));
  height: calc(106.9 * var(--u));
  z-index: 1;
  translate: calc(var(--px) * 4 * var(--u)) calc(var(--py) * 3 * var(--u));
  transition: translate 0.6s var(--bdb-out);
}

.bdb__pill {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(53.5 * var(--u));
  overflow: hidden;
  font: 400 calc(41.2 * var(--u)) / 1 "Quicksand BDB", "Quicksand", "Avenir Next", sans-serif;
  color: #fff;
  white-space: nowrap;
}

.bdb__pill--date {
  left: 0;
  width: calc(745.5 * var(--u));
  justify-content: flex-start;
  padding-left: calc(51 * var(--u));
  background: var(--bdb-green);
  animation: bdb-slide 0.7s var(--bdb-out) 0.6s backwards;
}

.bdb__pill--place {
  left: calc(368.7 * var(--u));
  width: calc(405.3 * var(--u));
  padding-left: calc(10 * var(--u));
  background: var(--bdb-deep);
  animation: bdb-slide 0.7s var(--bdb-out) 0.75s backwards;
}

/* a light sweep across the pills on hover */
.bdb__pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-120%);
  pointer-events: none;
}

.bdb__cta {
  left: calc(786.8 * var(--u));
  top: calc(684.6 * var(--u));
  width: calc(487.7 * var(--u));
  font: 700 calc(43.5 * var(--u)) / 1.4 "Quicksand BDB", "Quicksand", "Avenir Next", sans-serif;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  z-index: 1;
  translate: calc(var(--px) * 10 * var(--u)) calc(var(--py) * 8 * var(--u));
  transition: translate 0.6s var(--bdb-out), scale 0.5s var(--bdb-pop);
  animation: bdb-rise 0.7s var(--bdb-out) 1s backwards;
}

/* ---- shared entrances ------------------------------------------------------ */

@keyframes bdb-drop {
  from { transform: translateY(calc(-24 * var(--u))); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes bdb-rise {
  from { transform: translateY(calc(36 * var(--u))); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes bdb-slide {
  from { transform: translateX(calc(-40 * var(--u))); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes bdb-sweep {
  to { transform: translateX(120%); }
}

@keyframes bdb-shout-hop {
  0% { scale: 1; }
  40% { scale: 1.18; }
  100% { scale: 1; }
}

/* ---- hover (fine pointers only) -------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .bdb:hover .bdb__globe { rotate: 360deg; }
  .bdb:hover .bdb__shout svg { animation: bdb-shout-hop 0.6s var(--bdb-pop); }
  .bdb:hover .bdb__blob { scale: 1.05; }
  .bdb:hover .bdb__cta { scale: 1.04; }
  .bdb:hover .bdb__pill::after { animation: bdb-sweep 0.9s var(--bdb-out); }
  .bdb:hover .bdb__pill--place::after { animation-delay: 0.12s; }
}

/* ---- portrait stage for narrow banners ------------------------------------ */

@container bdb (max-width: 640px) {
  /* "Canva, compacto": the desktop composition re-packed onto a 600x760 grid —
     slogan and logo on one line, radish beside the title, joined pills, and the
     call to action in the blob overlapping the pills */
  .bdb__stage {
    --u: calc(100cqw / 600);
    aspect-ratio: 600 / 760;
  }

  .bdb__glow { left: 0; top: 4%; width: 100%; height: 70%; }

  .bdb__brand {
    --bdb-logo: calc(262 * var(--u));
    top: calc(31 * var(--u));
    font-size: calc(38 * var(--u));
  }

  /* the English slogan is about a quarter longer */
  .bdb--en .bdb__brand {
    --bdb-logo: calc(246 * var(--u));
    font-size: calc(31 * var(--u));
  }

  .bdb__logo { margin-left: calc(16 * var(--u)); }

  .bdb__radish {
    left: 0;
    top: calc(190 * var(--u));
    width: calc(190 * var(--u));
  }

  .bdb__shout {
    left: calc(500 * var(--u));
    top: calc(146 * var(--u));
    width: calc(86 * var(--u));
  }

  .bdb__title {
    left: calc(150 * var(--u));
    top: calc(176 * var(--u));
    width: calc(446 * var(--u));
    font-size: calc(80 * var(--u));
    line-height: 1.32;
  }

  .bdb__pills {
    left: calc(24 * var(--u));
    top: calc(452 * var(--u));
    width: calc(552 * var(--u));
    height: calc(80 * var(--u));
  }

  .bdb__pill { font-size: calc(30 * var(--u)); border-radius: calc(40 * var(--u)); }
  .bdb__pill--date { width: 100%; padding-left: calc(30 * var(--u)); }
  .bdb__pill--place { left: calc(276 * var(--u)); width: calc(276 * var(--u)); padding-left: 0; justify-content: center; }

  .bdb__blob {
    left: calc(200 * var(--u));
    top: calc(500 * var(--u));
    width: calc(390 * var(--u));
    height: calc(230 * var(--u));
  }

  .bdb__cta {
    left: calc(236 * var(--u));
    top: calc(572 * var(--u));
    width: calc(320 * var(--u));
    font-size: calc(28 * var(--u));
  }
}

@media (prefers-reduced-motion: reduce) {
  .bdb *,
  .bdb *::after {
    animation: none !important;
    transition: none !important;
  }
  .bdb { --px: 0 !important; --py: 0 !important; }
}

/* ---- biolog.pt: the homepage slider slot ---------------------------------
   Full-width yellow band (the stage gradient ends in exactly this colour on
   every edge, so the seam is invisible); the banner itself keeps 1640:924 up
   to the site grid width. */
.bdb-band {
  background: #ffe77f;
}
.bdb-band .bdb {
  max-width: 1100px;
  margin: 0 auto;
}
/* The theme pads the content 40px below 1024px; under the white slider that
   was invisible, under the yellow band it shows as a white strip (the theme
   rule is !important, in style_dynamic_responsive.css). */
.eltdf-content .eltdf-content-inner > .eltdf-slider:has(.bdb-band) + .eltdf-full-width > .eltdf-full-width-inner {
  padding-top: 0 !important;
}