/* ── the name ────────────────────────────────────────────────────────────
   "Daniel Portugal" is black everywhere, with an iridescent band that
   sweeps across it and then rests off-screen before coming round again.

   This file owns the treatment for every surface the name appears on —
   the desktop topbar (.wordmark), the mobile bar and menu sheet
   (.mbar__mark) and the Wabu mobile brand (.mobile-brand) — so there is
   one definition instead of three. Load it last.

   How it works: two stacked background layers clipped to the glyphs. The
   bottom one is flat black and never moves; the top one is a narrow
   rainbow band on a canvas twice the width of the text, and only its
   horizontal position animates. Nothing else repaints.                  */

.holo{
  color:#0b0f16;                       /* what you get if the clip fails */
}
.holo span{color:inherit}

/* On the mobile bars the name was set three different ways: Nunito 21/26 at
   -1px on the home page, Georgia 800 17/26 at -0.4 on the gallery, Georgia
   700 17/28 at -0.25 on Wabu. Georgia at 17 is what two of the three used
   and what the frames call for, so that is the spec — and 700 rather than
   800, because Georgia has no 800 weight and the browser was faking it. */
.m .holo{
  font-family:var(--serif);font-weight:700;
  font-size:17px;line-height:26px;letter-spacing:-.3px;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .holo{
    background-image:
      linear-gradient(100deg,
        rgba(18,129,250,0)   40%,
        rgba(18,129,250,.88) 45%,
        rgba(122,92,255,.94) 48.5%,
        rgba(255,110,199,.9) 51%,
        rgba(0,183,195,.92)  54.5%,
        rgba(0,183,195,0)    62%),
      linear-gradient(#0b0f16,#0b0f16);
    background-repeat:no-repeat;
    background-size:200% 100%,100% 100%;
    background-position:140% 0,0 0;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    animation:holo-sweep 4.3s infinite;
  }
  /* the inner <span> stops painting its own colour so the band clipped by
     the parent shows through the whole name as one surface */
  .holo span{
    background:none;color:transparent;-webkit-text-fill-color:transparent;
  }
}

@keyframes holo-sweep{
  /* the sweep itself still takes ~1.9s; the cycle is shorter because the
     rest between passes is, so it comes round 40% more often without
     reading any faster */
  0%,10%{
    background-position:140% 0,0 0;
    animation-timing-function:cubic-bezier(.42,0,.4,1);
  }
  55%,100%{background-position:-40% 0,0 0}
}

@media (prefers-reduced-motion:reduce){
  .holo{animation:none}
}