/**
 * The homepage hero — see framework/home-category-slider.php.
 *
 * Two things here are load-bearing rather than cosmetic:
 *
 * 1. The track carries its final height from the first paint, and every slide
 *    but the first is hidden until slick has stacked them. Without that the
 *    page shows six full-height colour blocks one under another and then jumps
 *    when the script runs — the mistake partners.php documents having made with
 *    its logos, six times worse.
 * 2. Everything directional is a logical property. Hebrew is this site's
 *    default language, not an afterthought, and the theme's slick init flips
 *    the track by itself; a [dir] override here would fight it.
 */

/* ---------------------------------------------------------------- geometry */

.siggi-hero {
    position: relative;
    overflow: hidden;
    /* There is no logical property for a transform, so every sideways entrance
       below multiplies by this instead of naming a side: it is what makes the
       text arrive from the edge it is read from in Hebrew too. */
    --siggi-hero-x: 1;
}

body.rtl .siggi-hero {
    --siggi-hero-x: -1;
}

.siggi-hero__track,
.siggi-hero__slide {
    height: 520px;
}

/* Before slick: one slide, laid out the way it will be laid out afterwards.
   Both declarations here are fighting one rule in the toolkit's own stylesheet:

       .owl-slick:not(.slick-initialized) > * { display: block !important }

   which the track matches, being `.owl-slick`. It outranks a bare
   `.siggi-hero__slide` twice over — an `!important` the slide's own
   `display: flex` also carries, and a specificity of two classes against one —
   so until this selector grew long enough to outrank it in turn, the homepage
   spent the second or two before the script ran showing slide 1 stacked on top
   of slide 2, each of them a block: the toolkit's rule was undoing the hide and
   the flex row alike. Shortening either selector brings both back. */
.siggi-hero__track:not(.slick-initialized) > .siggi-hero__slide:not(:first-child) {
    display: none !important;
}

.siggi-hero__track:not(.slick-initialized) > .siggi-hero__slide {
    display: flex !important;
}

.siggi-hero__track .slick-list,
.siggi-hero__track .slick-track {
    height: 100%;
}

/* carousel-spacing.php gives every .slick-list 40px above and below, so that a
   card's hover shadow is not cut off at the clipping window's edge. Here that
   window is `height: 100%` of a track whose height is declared above, so the
   padding is not additive: border-box takes the 80px out of the slide and the
   figure loses its feet. Giving the hero the same air means growing the band
   and the two heights under it, which is a different change. */
.siggi-hero__track .slick-list {
    padding: 0;
}

.siggi-hero__slide {
    /* slick sets display:block on a slide; the layout needs a flex row. */
    display: flex !important;
    align-items: center;
    gap: clamp(16px, 3vw, 48px);
    padding-inline: clamp(18px, 6vw, 90px);
    background: var(--siggi-hero-bg, #333);
    color: var(--siggi-hero-fg, #fff);
    text-decoration: none;
    overflow: hidden;
}

.siggi-hero__slide:hover,
.siggi-hero__slide:focus {
    color: var(--siggi-hero-fg, #fff);
    text-decoration: none;
}

.siggi-hero__figure {
    /* Wide enough that the picture is never the narrower constraint. The six
       cut-outs are all 700 px tall but run from 0.64 to 0.83 in width-to-height,
       and a figure standing 94 % of a 520 px track needs 41 % of the slide's
       content box at 0.83. At the 36 % this column started with, Beauty,
       Medical and HORECA hit the width ceiling first and stood 9-12 % shorter
       than the rest — which is exactly how it looked. */
    flex: 0 0 44%;
    align-self: flex-end;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}

/* The pictures are cut-outs of standing figures: shown whole, never cropped. */
.siggi-hero__figure img {
    width: auto;
    max-width: 100%;
    max-height: 94%;
    object-fit: contain;
}

.siggi-hero__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
}

/* -------------------------------------------------------------- typography */

.siggi-hero__title {
    display: block;
    margin: 0 0 14px;
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.08;
    text-transform: uppercase;
    letter-spacing: .01em;
}

.siggi-hero__text {
    display: block;
    max-width: 26em;
    margin: 0 0 26px;
    font-size: clamp(15px, 1.5vw, 20px);
    line-height: 1.45;
    opacity: .85;
}

.siggi-hero__button {
    display: inline-block;
    padding: 12px 34px;
    border: 2px solid currentColor;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: background-color .25s ease, color .25s ease;
}

.siggi-hero__slide:hover .siggi-hero__button {
    background: var(--siggi-hero-fg, #fff);
    color: var(--siggi-hero-bg, #333);
}

/* ------------------------------------------------------- arrows and dots */
/* The theme's init injects <span class="fa fa-angle-left prev"> itself. */

/* Explicit left/right rather than logical properties: the theme's own slick
   styling already sets both on `.slick-arrow`, and a logical property loses to
   a physical one of equal specificity declared later. `body.rtl` is the theme's
   own switch, so the pair below reads the same way its stylesheets do. */
.siggi-hero__track > .prev,
.siggi-hero__track > .next {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    color: inherit;
    font-size: 34px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    /* The arrows are **deliberately not forced visible**. From 1200px up the
       theme hides every slick arrow until the carousel is hovered
       (`.slick-slider:not(:hover) .slick-arrow { transform: scale(0) }`, in
       style-rtl.css) and shows them below that width, which is the same
       behaviour the partners carousel and every product slider on this site
       already have. The dots are always on, so a slider never looks static.
       Worth knowing while debugging: `offsetWidth` reports 46 either way and
       only `getBoundingClientRect()` shows the scale. */
    opacity: .55;
    transition: opacity .2s ease;
}

.siggi-hero__track > .prev:hover,
.siggi-hero__track > .next:hover {
    opacity: 1;
}

.siggi-hero__track > .prev { left: 8px; right: auto; }
.siggi-hero__track > .next { right: 8px; left: auto; }

body.rtl .siggi-hero__track > .prev { right: 8px; left: auto; }
body.rtl .siggi-hero__track > .next { left: 8px; right: auto; }

.siggi-hero .slick-dots {
    position: absolute;
    inset-inline: 0;
    bottom: 18px;
    z-index: 2;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.siggi-hero .slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

.siggi-hero .slick-dots li button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: currentColor;
    color: inherit;
    font-size: 0;
    line-height: 0;
    opacity: .4;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}

.siggi-hero .slick-dots li.slick-active button {
    opacity: 1;
    transform: scale(1.25);
}

/* The dots and arrows sit on top of whichever slide is current, and CSS cannot
   read another element's custom property — so the slide restates its text
   colour as a class and the track reads that. The ring is the fallback for a
   browser without `:has()`: white dots stay findable on a light slide. */
.siggi-hero__track {
    color: #fff;
}

.siggi-hero__track:has(.slick-current.is-ink) {
    color: #1a1a1a;
}

.siggi-hero .slick-dots li button {
    box-shadow: 0 0 0 1px rgba(127, 127, 127, .45);
}

.siggi-hero__track:has(.slick-current.is-ink) .slick-dots li button {
    box-shadow: none;
}

/* ------------------------------------------------------------ breakpoints */

@media (max-width: 1199px) {
    .siggi-hero__track,
    .siggi-hero__slide { height: 460px; }
}

@media (max-width: 991px) {
    .siggi-hero__track,
    .siggi-hero__slide { height: 400px; }

    /* Below a laptop the desktop side padding is what the picture and the text
       are actually competing for, so it gives way first; only then does the
       picture's share rise, and the widest cut-out stands at full height here
       too rather than 5 % short of the others. */
    .siggi-hero__slide { padding-inline: clamp(16px, 3vw, 34px); }
    .siggi-hero__figure { flex-basis: 47%; }

    .siggi-hero__text { margin-bottom: 18px; }
}

@media (max-width: 767px) {
    .siggi-hero__track,
    .siggi-hero__slide { height: 340px; }

    .siggi-hero__slide {
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        padding-block: 22px;
    }

    .siggi-hero__figure {
        flex: 0 1 46%;
        align-self: center;
        min-height: 0;
    }

    .siggi-hero__figure img { max-height: 100%; }

    .siggi-hero__body {
        flex: 0 0 auto;
        align-items: center;
        text-align: center;
    }

    .siggi-hero__title { margin-bottom: 6px; }

    .siggi-hero__text {
        margin-bottom: 12px;
        font-size: 13px;
        line-height: 1.35;
    }

    .siggi-hero__button {
        padding: 9px 22px;
        font-size: 11px;
    }

    .siggi-hero .slick-dots { bottom: 8px; }

    /* No arrows on a phone. The theme shows them below 1200px, and at this
       width they are two dark blocks sitting on top of the figure for a
       gesture the screen already has — the slide swipes. The dots stay, so it
       still reads as a slider. */
    .siggi-hero__track > .prev,
    .siggi-hero__track > .next { display: none !important; }
}

/* ------------------------------------------------------------- animations */
/*
 * `fade` keeps all six slides in the DOM and slick marks the visible one
 * `.slick-current`, so every entrance hangs off that class and replays each
 * time the slide comes round again.
 *
 * Three parts move separately, and on any one slide they move *differently* —
 * the picture, the category's name and the line under it each get their own
 * keyframes. A single motion applied to all three, only staggered, is what the
 * first cut did, and it read as one block sliding rather than as a composition
 * assembling. The button is the exception: it is the same small overshoot on
 * every slide, because it is the same promise on every slide.
 *
 * They are addressed by class, not by `:nth-child`. The line under the name is
 * a client-editable field and is simply absent when empty, which would shift
 * every position after it.
 *
 * Everything animated here is `transform`, `opacity`, `filter` or `clip-path`,
 * which the compositor and the paint step manage without measuring anything —
 * with one deliberate exception. Beauty's name tracks in from `.42em` and back
 * out to `.3em`, and `letter-spacing` is a layout property: the browser
 * re-measures that line on every frame it moves. It stays, because drawing
 * itself together out of wide tracking is the whole of that category's
 * character; it is affordable because it is one line of text inside a slide
 * that is `overflow: hidden` at a declared height, so the re-measure never
 * leaves the slide — nothing on the page moves and no scrollbar appears. Two
 * animations of one line, twice in a thirty-six-second cycle, is the cost.
 */

.siggi-hero__slide .siggi-hero__figure img,
.siggi-hero__slide .siggi-hero__body > * {
    opacity: 0;
}

/* With no current slide there is nothing to animate, and the first slide would
   sit invisible on a coloured rectangle — so it is revealed. But only once the
   script has given up.

   This rule used to be `:not(.slick-initialized)` on its own, and that is what
   made the homepage flash: the theme starts every `.owl-slick` on
   `window.load`, i.e. after the last image on the page has arrived, so for the
   best part of a second the first slide stood there fully assembled — and only
   then played the entrance it had already finished. The script now starts this
   one track at DOM ready and adds `is-static` only when it could not, which
   leaves this rule guarding the case it was written for: no script, or a broken
   one. `:not(.slick-initialized)` stays in the selector so that a later
   initialisation — the theme's own window.load pass — cancels the reveal
   without anything having to take the class off again. */
.siggi-hero__track.is-static:not(.slick-initialized) .siggi-hero__figure img,
.siggi-hero__track.is-static:not(.slick-initialized) .siggi-hero__body > * {
    opacity: 1;
}

.slick-current .siggi-hero__figure img,
.slick-current .siggi-hero__body > * {
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
    animation-duration: 1000ms;
}

/* The cascade: picture first, then the name, then the line, then the button.
   Wide enough apart to read as an order rather than as one arrival.

   These gaps used to be 120 / 280 / 430ms, and the whole slide finished
   assembling in about 1.1 seconds of the 6 it then stood there for. It read as
   a flicker: by the time the eye had reached the hero, the composition was
   already over. The demo slider these six replaced started its layers between
   0.5 and 2.0 seconds in, left 300-700ms between them, and ran each for 1.0 to
   1.5 — a scene that took some 3.5 seconds of a 5-second slide to build. That
   is the proportion being borrowed here, not the exact figures: 300 / 820 /
   1320ms, everything a quarter longer, the last motion ending around 2 seconds
   in. Long enough to watch, and still four seconds short of the slide change. */
.slick-current .siggi-hero__title  { animation-delay: 300ms; }
.slick-current .siggi-hero__text   { animation-delay: 820ms; }
.slick-current .siggi-hero__button { animation-delay: 1320ms; }

/* One button, one motion, every slide. */
.slick-current .siggi-hero__button {
    animation-name: siggi-hero-pop;
    animation-duration: 640ms;
    animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes siggi-hero-pop {
    from { opacity: 0; transform: translateY(14px) scale(.92); }
    to   { opacity: 1; transform: none; }
}

/* ---- Medical — the base, and what a seventh category would inherit ------- */
/* The picture rises; the name is uncovered from below; the line comes in from
   the edge it is read from. */

.slick-current .siggi-hero__figure img {
    animation-name: siggi-hero-rise;
    animation-duration: 1200ms;
}

.slick-current .siggi-hero__title {
    animation-name: siggi-hero-unmask-up;
    animation-duration: 1050ms;
}

.slick-current .siggi-hero__text {
    animation-name: siggi-hero-in-from-edge;
    animation-duration: 900ms;
}

@keyframes siggi-hero-rise {
    from { opacity: 0; transform: translateY(46px) scale(1.03); }
    to   { opacity: 1; transform: none; }
}

@keyframes siggi-hero-unmask-up {
    from {
        opacity: 0;
        clip-path: inset(100% 0 -30% 0);
        transform: translateY(34px);
    }
    to {
        opacity: 1;
        clip-path: inset(-30% 0 -30% 0);
        transform: none;
    }
}

@keyframes siggi-hero-in-from-edge {
    from { opacity: 0; transform: translateX(calc(38px * var(--siggi-hero-x))); }
    to   { opacity: 1; transform: none; }
}

/* ---- Workwear — built, not shown ---------------------------------------- */
/* The picture lifts out of an overscale; the name lands like a stamp; the line
   is wiped up from nothing. */

.slick-current.siggi-hero__slide--workwear .siggi-hero__figure img {
    animation-name: siggi-hero-lift;
    animation-duration: 1080ms;
}

.slick-current.siggi-hero__slide--workwear .siggi-hero__title {
    animation-name: siggi-hero-stamp;
    animation-duration: 780ms;
    animation-timing-function: cubic-bezier(.16, .84, .3, 1);
}

.slick-current.siggi-hero__slide--workwear .siggi-hero__text {
    animation-name: siggi-hero-wipe-up;
    animation-duration: 900ms;
}

@keyframes siggi-hero-lift {
    from { opacity: 0; transform: translateY(18%) scale(1.07); }
    to   { opacity: 1; transform: none; }
}

@keyframes siggi-hero-stamp {
    from   { opacity: 0; transform: scale(1.5); filter: blur(7px); }
    60%    { opacity: 1; transform: scale(.98); filter: blur(0); }
    to     { opacity: 1; transform: none; filter: none; }
}

@keyframes siggi-hero-wipe-up {
    from { opacity: 0; clip-path: inset(100% 0 0 0); }
    to   { opacity: 1; clip-path: inset(0); }
}

/* ---- HORECA — served ---------------------------------------------------- */
/* The picture turns in about its own feet; the name swings down from a hinge
   above it; the line grows into place. */

.slick-current.siggi-hero__slide--horeca .siggi-hero__figure img {
    transform-origin: bottom center;
    animation-name: siggi-hero-turn;
    animation-duration: 1150ms;
}

.slick-current.siggi-hero__slide--horeca .siggi-hero__title {
    transform-origin: top center;
    animation-name: siggi-hero-swing;
    animation-duration: 1150ms;
    animation-timing-function: cubic-bezier(.3, 1.5, .5, 1);
}

.slick-current.siggi-hero__slide--horeca .siggi-hero__text {
    animation-name: siggi-hero-grow;
    animation-duration: 900ms;
}

@keyframes siggi-hero-turn {
    from { opacity: 0; transform: rotate(-8deg) translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes siggi-hero-swing {
    from   { opacity: 0; transform: translateY(-40px) rotate(-6deg); }
    to     { opacity: 1; transform: none; }
}

@keyframes siggi-hero-grow {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: none; }
}

/* ---- Beauty — everything arrives soft ----------------------------------- */
/* The picture comes into focus; the name draws itself together out of wide
   tracking; the line surfaces through a blur. */

.slick-current.siggi-hero__slide--beauty .siggi-hero__figure img {
    animation-name: siggi-hero-focus;
    animation-duration: 1250ms;
}

.slick-current.siggi-hero__slide--beauty .siggi-hero__title {
    animation-name: siggi-hero-track-in;
    animation-duration: 1200ms;
}

.slick-current.siggi-hero__slide--beauty .siggi-hero__text {
    animation-name: siggi-hero-surface;
    animation-duration: 1000ms;
}

@keyframes siggi-hero-focus {
    from { opacity: 0; transform: scale(.86); filter: blur(9px); }
    to   { opacity: 1; transform: none; filter: none; }
}

@keyframes siggi-hero-track-in {
    from { opacity: 0; letter-spacing: .42em; filter: blur(4px); }
    60%  { opacity: 1; }
    to   { opacity: 1; letter-spacing: .01em; filter: none; }
}

@keyframes siggi-hero-surface {
    from { opacity: 0; transform: translateY(12px); filter: blur(5px); }
    to   { opacity: 1; transform: none; filter: none; }
}

/* ---- Protective equipment — put on ------------------------------------- */
/* The picture steps in from the outer edge; the name is shut across it like a
   visor; the line rises after. */

.slick-current.siggi-hero__slide--dpi .siggi-hero__figure img {
    animation-name: siggi-hero-enter;
    animation-duration: 1000ms;
}

.slick-current.siggi-hero__slide--dpi .siggi-hero__title {
    animation-name: siggi-hero-visor;
    animation-duration: 900ms;
    animation-timing-function: cubic-bezier(.12, .8, .24, 1);
}

.slick-current.siggi-hero__slide--dpi .siggi-hero__text {
    animation-name: siggi-hero-rise-short;
    animation-duration: 850ms;
}

@keyframes siggi-hero-enter {
    from { opacity: 0; transform: translateX(calc(-70px * var(--siggi-hero-x))); }
    to   { opacity: 1; transform: none; }
}

@keyframes siggi-hero-visor {
    from { opacity: 0; clip-path: inset(-30% 0 100% 0); transform: translateY(-22px); }
    to   { opacity: 1; clip-path: inset(-30% 0 -30% 0); transform: none; }
}

@keyframes siggi-hero-rise-short {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Emergencies — the category that means hurry ------------------------ */
/* Everything is fast and nothing is soft: the picture snaps in, the name is
   struck across, the line simply appears. */

.slick-current.siggi-hero__slide--emergencies .siggi-hero__figure img {
    animation-name: siggi-hero-snap;
    animation-duration: 260ms;
    animation-timing-function: cubic-bezier(.2, .9, .3, 1);
}

.slick-current.siggi-hero__slide--emergencies .siggi-hero__title {
    animation-name: siggi-hero-strike;
    animation-duration: 300ms;
    animation-delay: 140ms;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

.slick-current.siggi-hero__slide--emergencies .siggi-hero__text {
    animation-name: siggi-hero-flash;
    animation-duration: 220ms;
    animation-delay: 380ms;
}

.slick-current.siggi-hero__slide--emergencies .siggi-hero__button {
    animation-delay: 560ms;
    animation-duration: 340ms;
}

@keyframes siggi-hero-snap {
    from { opacity: 0; transform: scale(1.12); }
    to   { opacity: 1; transform: none; }
}

@keyframes siggi-hero-strike {
    from { opacity: 0; transform: translateX(calc(28px * var(--siggi-hero-x))) skewX(-10deg); }
    to   { opacity: 1; transform: none; }
}

@keyframes siggi-hero-flash {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ------------------------------------------------------------------ exits */
/*
 * `is-leaving` is put on the outgoing slide by
 * `assets/js/home-category-slider.js`, and that file explains why it has to be
 * a script: slick moves `.slick-current` onto the incoming slide at the *start*
 * of the cross-fade, so from CSS alone the slide on its way out is
 * indistinguishable from the four that were never on screen. Before the class
 * existed, its title, line and button hit the `opacity: 0` rule at the top of
 * this section in a single frame and the slide spent its whole 700ms fading as
 * an empty colour block.
 *
 * Three rules hold this section together:
 *
 * - **Every exit continues its entrance.** The picture that rose keeps rising;
 *   the name that was stamped on lifts off; the visor that shut opens. Playing
 *   an arrival backwards reads as a mistake being undone — as the slide
 *   changing its mind — where continuing reads as the composition dispersing.
 * - **The cascade runs backwards.** The button leaves first and the picture
 *   last, which is the order they arrived in reversed, and it leaves the
 *   subject of the slide on screen longest.
 * - **Nothing may outlast the cross-fade.** slick's `speed` is 700ms and the
 *   class is dropped on `afterChange`, so an animation still running then is
 *   cut mid-frame. The longest chain here is 170ms of delay plus 420ms of
 *   motion.
 *
 * The selectors carry `.siggi-hero__slide` and `.is-leaving` together, and the
 * per-category ones carry the variant class as a third, so a category's exit
 * outranks the shared one by specificity rather than by sitting further down
 * the file.
 */

.siggi-hero__slide.is-leaving .siggi-hero__figure img,
.siggi-hero__slide.is-leaving .siggi-hero__body > * {
    animation-fill-mode: both;
    /* Accelerating, where the entrances decelerate: a thing arriving settles,
       a thing leaving gathers speed and is gone. */
    animation-timing-function: cubic-bezier(.45, 0, .75, .25);
    animation-duration: 420ms;
}

.siggi-hero__slide.is-leaving .siggi-hero__text       { animation-delay: 60ms; }
.siggi-hero__slide.is-leaving .siggi-hero__title      { animation-delay: 120ms; }
.siggi-hero__slide.is-leaving .siggi-hero__figure img { animation-delay: 170ms; }

/* One button, one departure, every slide — the counterpart of `siggi-hero-pop`. */
.siggi-hero__slide.is-leaving .siggi-hero__button {
    animation-name: siggi-hero-pop-out;
    animation-duration: 360ms;
}

@keyframes siggi-hero-pop-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(10px) scale(.94); }
}

/* ---- Medical — the base, and what a seventh category would inherit ------- */

.siggi-hero__slide.is-leaving .siggi-hero__figure img {
    animation-name: siggi-hero-sink-out;
}

.siggi-hero__slide.is-leaving .siggi-hero__title {
    animation-name: siggi-hero-remask-out;
}

.siggi-hero__slide.is-leaving .siggi-hero__text {
    animation-name: siggi-hero-out-to-edge;
}

@keyframes siggi-hero-sink-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-26px) scale(1.02); }
}

@keyframes siggi-hero-remask-out {
    from {
        opacity: 1;
        clip-path: inset(-30% 0 -30% 0);
        transform: none;
    }
    to {
        opacity: 0;
        clip-path: inset(-30% 0 100% 0);
        transform: translateY(-20px);
    }
}

@keyframes siggi-hero-out-to-edge {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateX(calc(-32px * var(--siggi-hero-x))); }
}

/* ---- Workwear — put away ------------------------------------------------ */

.siggi-hero__slide.is-leaving.siggi-hero__slide--workwear .siggi-hero__figure img {
    animation-name: siggi-hero-settle-out;
}

.siggi-hero__slide.is-leaving.siggi-hero__slide--workwear .siggi-hero__title {
    animation-name: siggi-hero-stamp-out;
}

.siggi-hero__slide.is-leaving.siggi-hero__slide--workwear .siggi-hero__text {
    animation-name: siggi-hero-wipe-out;
}

@keyframes siggi-hero-settle-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(9%) scale(.97); }
}

@keyframes siggi-hero-stamp-out {
    from { opacity: 1; transform: none; filter: none; }
    to   { opacity: 0; transform: scale(1.3); filter: blur(6px); }
}

@keyframes siggi-hero-wipe-out {
    from { opacity: 1; clip-path: inset(0); }
    to   { opacity: 0; clip-path: inset(0 0 100% 0); }
}

/* ---- HORECA — cleared --------------------------------------------------- */

.siggi-hero__slide.is-leaving.siggi-hero__slide--horeca .siggi-hero__figure img {
    transform-origin: bottom center;
    animation-name: siggi-hero-turn-out;
}

.siggi-hero__slide.is-leaving.siggi-hero__slide--horeca .siggi-hero__title {
    transform-origin: top center;
    animation-name: siggi-hero-swing-out;
}

.siggi-hero__slide.is-leaving.siggi-hero__slide--horeca .siggi-hero__text {
    animation-name: siggi-hero-shrink-out;
}

@keyframes siggi-hero-turn-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: rotate(7deg) translateY(16px); }
}

@keyframes siggi-hero-swing-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-38px) rotate(5deg); }
}

@keyframes siggi-hero-shrink-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: scale(.88); }
}

/* ---- Beauty — everything leaves soft ------------------------------------ */

.siggi-hero__slide.is-leaving.siggi-hero__slide--beauty .siggi-hero__figure img {
    animation-name: siggi-hero-defocus-out;
}

.siggi-hero__slide.is-leaving.siggi-hero__slide--beauty .siggi-hero__title {
    animation-name: siggi-hero-track-out;
}

.siggi-hero__slide.is-leaving.siggi-hero__slide--beauty .siggi-hero__text {
    animation-name: siggi-hero-submerge-out;
}

@keyframes siggi-hero-defocus-out {
    from { opacity: 1; transform: none; filter: none; }
    to   { opacity: 0; transform: scale(1.06); filter: blur(10px); }
}

@keyframes siggi-hero-track-out {
    from { opacity: 1; letter-spacing: .01em; filter: none; }
    to   { opacity: 0; letter-spacing: .3em; filter: blur(4px); }
}

@keyframes siggi-hero-submerge-out {
    from { opacity: 1; transform: none; filter: none; }
    to   { opacity: 0; transform: translateY(-12px); filter: blur(5px); }
}

/* ---- Protective equipment — taken off ----------------------------------- */

.siggi-hero__slide.is-leaving.siggi-hero__slide--dpi .siggi-hero__figure img {
    animation-name: siggi-hero-edge-out;
}

.siggi-hero__slide.is-leaving.siggi-hero__slide--dpi .siggi-hero__title {
    animation-name: siggi-hero-visor-out;
}

.siggi-hero__slide.is-leaving.siggi-hero__slide--dpi .siggi-hero__text {
    animation-name: siggi-hero-fall-out;
}

@keyframes siggi-hero-edge-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateX(calc(-56px * var(--siggi-hero-x))); }
}

@keyframes siggi-hero-visor-out {
    from {
        opacity: 1;
        clip-path: inset(-30% 0 -30% 0);
        transform: none;
    }
    to {
        opacity: 0;
        clip-path: inset(100% 0 -30% 0);
        transform: translateY(20px);
    }
}

@keyframes siggi-hero-fall-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(18px); }
}

/* ---- Emergencies — gone before you finish looking at it ----------------- */
/* Its entrance is the one that is fast and hard rather than soft, and its exit
   has to match or the category changes character halfway through. Delays are
   cut with the durations, so the whole departure is over in under 300ms. */

.siggi-hero__slide.is-leaving.siggi-hero__slide--emergencies .siggi-hero__button {
    animation-duration: 160ms;
    animation-delay: 0ms;
}

.siggi-hero__slide.is-leaving.siggi-hero__slide--emergencies .siggi-hero__text {
    animation-name: siggi-hero-flash-out;
    animation-duration: 140ms;
    animation-delay: 40ms;
}

.siggi-hero__slide.is-leaving.siggi-hero__slide--emergencies .siggi-hero__title {
    animation-name: siggi-hero-strike-out;
    animation-duration: 200ms;
    animation-delay: 80ms;
}

.siggi-hero__slide.is-leaving.siggi-hero__slide--emergencies .siggi-hero__figure img {
    animation-name: siggi-hero-snap-out;
    animation-duration: 180ms;
    animation-delay: 110ms;
}

@keyframes siggi-hero-flash-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes siggi-hero-strike-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateX(calc(-24px * var(--siggi-hero-x))) skewX(-10deg); }
}

@keyframes siggi-hero-snap-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: scale(1.08); }
}

/* A phone shows the picture much smaller and the text under it rather than
   beside it, so the sideways entrances have nowhere to come from. Cut their
   distance rather than the motion. */
@media (max-width: 767px) {
    .siggi-hero { --siggi-hero-x: .5; }
    body.rtl .siggi-hero { --siggi-hero-x: -.5; }
}

@media (prefers-reduced-motion: reduce) {
    .siggi-hero__slide .siggi-hero__figure img,
    .siggi-hero__slide .siggi-hero__body > *,
    .siggi-hero__slide.is-leaving .siggi-hero__figure img,
    .siggi-hero__slide.is-leaving .siggi-hero__body > * {
        opacity: 1;
        animation: none !important;
    }
}