/* Clearline hero artworks for the PWA Kit v2 (Hub 1.11: chosen in Settings → Home screen)
   Same artworks as the newsletter Hero block, so app and email match.

   Use:  <div class="hero" data-art="glow"> ... </div>
   Pick: glow · dusk · aurora · ember · horizon · heat · night · flare · mesh · pulse · ripple · mark · echo · markglow · markghost · markline · markdisc · discamber · discduo · discrings · discoutline · dischalf · markpattern · patterndense · patternfull · patterndiag · patternsolid · markstack · type2027 · typenew · typenow · typedeals · typehot · typexmas · typesale
   Load after kit/components.css. Paths are relative to this file, so keep hero-art/ next to it. */

.hero[data-art="glow"] { --art: url("hero-art/glow.svg"); }
.hero[data-art="dusk"] { --art: url("hero-art/dusk.svg"); }
.hero[data-art="aurora"] { --art: url("hero-art/aurora.svg"); }
.hero[data-art="ember"] { --art: url("hero-art/ember.svg"); }
.hero[data-art="horizon"] { --art: url("hero-art/horizon.svg"); }
.hero[data-art="heat"] { --art: url("hero-art/heat.svg"); }
.hero[data-art="night"] { --art: url("hero-art/night.svg"); }
.hero[data-art="flare"] { --art: url("hero-art/flare.svg"); }
.hero[data-art="mesh"] { --art: url("hero-art/mesh.svg"); }
.hero[data-art="pulse"] { --art: url("hero-art/pulse.svg"); }
.hero[data-art="ripple"] { --art: url("hero-art/ripple.svg"); }
.hero[data-art="mark"] { --art: url("hero-art/mark.svg"); }
.hero[data-art="echo"] { --art: url("hero-art/echo.svg"); }
.hero[data-art="markglow"] { --art: url("hero-art/markglow.svg"); }
.hero[data-art="markghost"] { --art: url("hero-art/markghost.svg"); }
.hero[data-art="markline"] { --art: url("hero-art/markline.svg"); }
.hero[data-art="markdisc"] { --art: url("hero-art/markdisc.svg"); }
.hero[data-art="discamber"] { --art: url("hero-art/discamber.svg"); }
.hero[data-art="discduo"] { --art: url("hero-art/discduo.svg"); }
.hero[data-art="discrings"] { --art: url("hero-art/discrings.svg"); }
.hero[data-art="discoutline"] { --art: url("hero-art/discoutline.svg"); }
.hero[data-art="dischalf"] { --art: url("hero-art/dischalf.svg"); }
.hero[data-art="markpattern"] { --art: url("hero-art/markpattern.svg"); }
.hero[data-art="patterndense"] { --art: url("hero-art/patterndense.svg"); }
.hero[data-art="patternfull"] { --art: url("hero-art/patternfull.svg"); }
.hero[data-art="patterndiag"] { --art: url("hero-art/patterndiag.svg"); }
.hero[data-art="patternsolid"] { --art: url("hero-art/patternsolid.svg"); }
.hero[data-art="markstack"] { --art: url("hero-art/markstack.svg"); }
.hero[data-art="type2027"] { --art: url("hero-art/type2027.svg"); }
.hero[data-art="typenew"] { --art: url("hero-art/typenew.svg"); }
.hero[data-art="typenow"] { --art: url("hero-art/typenow.svg"); }
.hero[data-art="typedeals"] { --art: url("hero-art/typedeals.svg"); }
.hero[data-art="typehot"] { --art: url("hero-art/typehot.svg"); }
.hero[data-art="typexmas"] { --art: url("hero-art/typexmas.svg"); }
.hero[data-art="typesale"] { --art: url("hero-art/typesale.svg"); }

.hero[data-art] {
  background-color: var(--navy);
  background-image: var(--art);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: cover;
}
/* The artwork replaces the kit's built-in wedge and slash */
.hero[data-art]::before,
.hero[data-art]::after { display: none; }

/* Phones: the art sits behind the text, so add a soft navy veil on the left to keep it readable */
@media (max-width: 699px) {
  .hero[data-art] {
    background-image: linear-gradient(90deg, rgba(16, 19, 34, .92) 0%, rgba(16, 19, 34, .72) 48%, rgba(16, 19, 34, 0) 82%), var(--art);
    background-size: 100% 100%, auto 100%;
  }
}

/* High contrast mode: tone the artwork right down */
:root[data-contrast="high"] .hero[data-art] {
  background-image: linear-gradient(rgba(16, 19, 34, .7), rgba(16, 19, 34, .7)), var(--art);
}

/* Interactive layer (hero-fx.js). Once it starts, the artwork moves onto a slightly oversized layer
   that drifts with the pointer, and a canvas on top draws the light and rings. */
.hero[data-art].has-fx { background-image: none; }
.hero[data-art] > .art-fx {
  position: absolute; inset: -32px; z-index: 0; pointer-events: none;
  background: var(--navy) var(--art) no-repeat right top / cover;
  transform: translate3d(var(--fx-x, 0px), var(--fx-y, 0px), 0);
  will-change: transform;
}
.hero[data-art] > .art-fx canvas { position: absolute; left: 32px; top: 32px; display: block; mix-blend-mode: screen; }
.hero[data-art] > :not(.art-fx) { position: relative; z-index: 1; }
@media (max-width: 699px) {
  .hero[data-art] > .art-fx::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(16, 19, 34, .92) 0%, rgba(16, 19, 34, .72) 48%, rgba(16, 19, 34, 0) 82%);
  }
}
:root[data-contrast="high"] .hero[data-art] > .art-fx::after { content: ""; position: absolute; inset: 0; background: rgba(16, 19, 34, .7); }
@media (prefers-reduced-motion: reduce) { .hero[data-art] > .art-fx { transform: none; } .hero[data-art] > .art-fx canvas { display: none; } }