/* Shared by index.html, reheat.html, and 404.html.
   The stacked tricolor wordmark, plus the font and colour tokens it needs.
   These live here and nowhere else, so the wordmark cannot differ between pages. */

@font-face{font-family:"Bricolage";src:url("/fonts/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap}

:root{
  --line:#1E2350;
  --amarillo:#FFCE1F; --azul:#3D76E1; --rojo:#F95353;
  --display:"Bricolage","Arial Black","Helvetica Neue",Arial,sans-serif;
}

/* Markup: <span class="mini-mark"><span class="w1">Cristina’s</span><span class="w2">Amazing</span><span class="w3">Empanadas</span></span>
   Each page sets only the font-size and placement. */
.mini-mark{display:inline-block;font:800 26px/.92 var(--display);text-transform:uppercase;letter-spacing:-.02em}
.mini-mark span{display:block;width:max-content;-webkit-text-stroke:.09em var(--line);paint-order:stroke fill;text-shadow:.055em .06em 0 var(--line)}
.mini-mark .w1{color:var(--azul)} .mini-mark .w2{color:var(--rojo)} .mini-mark .w3{color:var(--amarillo)}

/* Logo hover, shared by every page so the top bar, the footer, the reheat header, and the 404 page always match.
   The three hearts on the mark bob, and the wordmark lifts with its shadow growing, like a sticker being peeled up.
   Markup: class "logo" goes on whatever wraps the mark and the wordmark (a link or a plain wrapper). Inside the mark's svg, each heart sits in its own <g class="hb">.
   The lift uses the translate property, not transform, so it adds to whatever transform a page already gives its wordmark.
   Mouse and trackpad only, plus keyboard focus when the logo is a link. Off with reduced motion. */
@keyframes bob{50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:no-preference){
  .hb{transform-box:fill-box}
  .mini-mark{transition:translate .2s ease}
  .mini-mark span{transition:text-shadow .2s ease}
  .logo:focus-visible .hb{animation:bob .9s ease-in-out infinite}
  .logo:focus-visible .hb:nth-child(2){animation-delay:.15s}
  .logo:focus-visible .hb:nth-child(3){animation-delay:.3s}
  .logo:focus-visible .mini-mark{translate:-1px -3px}
  .logo:focus-visible .mini-mark span{text-shadow:.11em .14em 0 var(--line)}
  @media (hover:hover) and (pointer:fine){
    .logo:hover .hb{animation:bob .9s ease-in-out infinite}
    .logo:hover .hb:nth-child(2){animation-delay:.15s}
    .logo:hover .hb:nth-child(3){animation-delay:.3s}
    .logo:hover .mini-mark{translate:-1px -3px}
    .logo:hover .mini-mark span{text-shadow:.11em .14em 0 var(--line)}
  }
}