/* ===================================================================
 * reichenbach.fr — page d'accueil
 * Chargé après styles.css. Tout est préfixé « hp- » pour ne rien
 * toucher aux autres pages. Rappel : 1rem = 10px sur ce site.
 * =================================================================== */

:root {
    --hp-ink      : #0b0b0c;
    --hp-gold     : #e1a25b;                     /* couleur de images/Awards/pellicule.webp */
    --hp-pad      : clamp(2.4rem, 5.5vw, 9.6rem);
    --hp-dur      : .65s;                        /* durée d'une transition ; réglable dans le mode édition (js/home.js l'écrase) */
    --hp-ease     : cubic-bezier(.76, 0, .2, 1);
    --hp-ease-out : cubic-bezier(.16, 1, .3, 1);
}

html,
body.hp {
    height              : 100%;
    overflow            : hidden;
    overscroll-behavior : none;
    background-color    : var(--hp-ink);
}

body.hp {
    color : #fff;
}

/* Langue : pilotée par l'attribut data-hp-lang de <html> (voir js/home.js) */
html[data-hp-lang="fr"] .l-en,
html[data-hp-lang="en"] .l-fr {
    display : none !important;
}

/* -------------------------------------------------------------------
 * ## préchargeur et en-tête
 * ------------------------------------------------------------------- */
body.hp #preloader {
    top        : 0;
    left       : 0;
    z-index    : 999;
    background : #000;
}

body.hp #loader > div {
    background : #fff;
}

.hp-ready body.hp #preloader {
    opacity    : 0;
    visibility : hidden;
    transition : opacity .7s ease, visibility 0s .7s;
}

#masthead {
    position         : fixed;
    top              : 0;
    left             : 0;
    right            : 0;
    z-index          : 50;
    background-color : transparent;
    padding          : 1rem 2rem;
}

.js #masthead {
    opacity    : 0;
    transition : opacity 1.2s .5s ease;
}

.js.hp-ready #masthead {
    opacity : 1;
}

/* Tablettes / écrans verticaux : header à hauteur fixe (aligné sur les autres pages) */
@media screen and (min-width: 801px) and (max-width: 1200px) {
    #masthead {
        height : 80px;
    }

    #masthead .s-header__branding {
        top : 50%;
    }
}

/* -------------------------------------------------------------------
 * ## scène et parties
 * ------------------------------------------------------------------- */
.hp-stage {
    position     : fixed;
    top          : 0;
    left         : 0;
    width        : 100%;
    height       : 100vh;
    height       : 100dvh;
    overflow     : hidden;
    background   : #000;
    z-index      : 1;
    touch-action : pan-x pinch-zoom;
}

.hp-part {
    position    : absolute;
    top         : 0;
    left        : 0;
    width       : 100%;
    height      : 100%;
    overflow    : hidden;
    visibility  : hidden;
    display         : flex;
    align-items     : center;      /* texte centré en hauteur… */
    justify-content : flex-end;    /* …et calé à droite, comme sur l'ancienne page */
}

.hp-part.is-active {
    visibility : visible;
    z-index    : 2;
}

.hp-part.is-leaving {
    visibility : visible;
    z-index    : 1;
}

/* fond */
.hp-media,
.hp-media__inner,
.hp-shade {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
}

.hp-media {
    overflow   : hidden;
    background : #000;
}

.hp-media__inner {
    will-change : transform;
}

.hp-media video,
.hp-media img {
    position   : absolute;
    top        : 0;
    left       : 0;
    display    : block;
    width      : 100%;
    height     : 100%;
    max-width  : none;
    margin     : 0;
    object-fit : cover;
}

/* lent travelling avant tant que la partie est à l'écran.
   :is(.is-active, .is-leaving) : l'animation se poursuit pendant la sortie. Si elle était
   retirée à ce moment-là, l'élément sauterait d'un coup à son état final (titre pas encore
   apparu qui surgit, fond qui tressaute) quand on défile avant la fin de l'entrée. */
.hp-part:is(.is-active, .is-leaving) .hp-media__inner > * {
    animation : hp-drift 16s ease-out both;
}

.hp-shade {
    pointer-events : none;
    background     :
        linear-gradient(to left, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, 0) 70%),
        linear-gradient(to top, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 30%),
        linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 24%);
}

/* -------------------------------------------------------------------
 * ## texte d'une partie
 * ------------------------------------------------------------------- */
.hp-copy {
    position  : relative;
    z-index   : 3;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    width          : 100%;
    max-width      : 68rem;
    margin-right   : calc(var(--hp-pad) + 7rem);   /* laisse la place du rail */
    padding        : 6rem 2rem 2rem;
    text-align     : center;
}

.hp-kicker {
    display        : flex;
    align-items    : center;
    gap            : 1.6rem;
    margin         : 0 0 2.4rem;
    font-family    : var(--font-1);
    font-weight    : 500;
    font-size      : 1.2rem;
    line-height    : 1;
    letter-spacing : .32em;
    text-transform : uppercase;
    color          : var(--hp-gold);
}

/* styles.css donne « transition: all .3s » à tous les liens. « all » inclut visibility :
   un lien d'une partie qui vient d'être masquée restait donc affiché 0,3 s de plus,
   par-dessus la nouvelle partie. Dans la scène, seule la couleur des liens est animée. */
.hp-stage a {
    transition : color .3s ease;
}

.hp-kicker a,
.hp-kicker a:hover,
.hp-kicker a:focus {
    color : inherit;
}

.hp-kicker__rule {
    flex       : none;
    width      : 5.6rem;
    height     : 1px;
    background : currentColor;
    opacity    : .8;
}

.hp-title {
    margin         : 0 0 2.8rem;
    font-family    : var(--font-2);
    font-weight    : 400;
    font-size      : clamp(4.4rem, 7vw, 11.2rem);
    line-height    : 1.02;
    letter-spacing : -.02em;
    color          : #fff;
    text-shadow    : 0 2px 30px rgba(0, 0, 0, .35);
}

.hp-title a,
.hp-title a:hover,
.hp-title a:focus {
    display : block;
    color   : inherit;
}

.hp-title img {
    display    : block;
    width      : auto;
    height     : auto;
    max-width  : min(100%, 60rem);
    max-height : 30vh;
    margin     : 0 auto;
}

.hp-desc {
    max-width   : 54rem;
    margin      : 0 0 3.6rem;
    font-family : var(--font-1);
    font-weight : 400;
    font-size   : clamp(1.5rem, 1.15vw, 1.8rem);
    line-height : 1.7;
    color       : rgba(255, 255, 255, .88);
    text-shadow : 0 1px 14px rgba(0, 0, 0, .5);
}

/* bouton : contour, puis remplissage qui monte au survol */
.hp-cta {
    position        : relative;
    isolation       : isolate;
    display         : inline-flex;
    align-items     : center;
    gap             : 1.6rem;
    height          : 5.6rem;
    padding         : 0 2.6rem 0 3.2rem;
    overflow        : hidden;
    border          : 2px solid #fff;
    border-radius   : 0;
    font-family     : var(--font-1);
    font-weight     : 600;
    font-size       : 1.2rem;
    line-height     : 1;
    letter-spacing  : .24em;
    text-transform  : uppercase;
    text-decoration : none;
}

.hp-stage a.hp-cta {
    color      : #fff;
    transition : color .3s ease, border-color .3s ease;
}

.hp-cta::before {
    content       : "";
    position      : absolute;
    top           : 0;
    left          : 0;
    z-index       : -1;
    width         : 100%;
    height        : 100%;
    border-radius : inherit;
    background    : #fff;
    transform     : translateY(102%);
    transition    : transform .4s var(--hp-ease);
}

.hp-cta svg {
    flex       : none;
    width      : 2rem;
    height     : 2rem;
    max-width  : none;
    transition : transform .35s var(--hp-ease-out);
}

.hp-stage a.hp-cta:hover,
.hp-stage a.hp-cta:focus-visible {
    color        : var(--hp-ink);
    border-color : #fff;
    outline      : 0;
}

.hp-cta:hover::before,
.hp-cta:focus-visible::before {
    transform : translateY(0);
}

.hp-cta:hover svg,
.hp-cta:focus-visible svg {
    transform : translateX(.6rem);
}

/* -------------------------------------------------------------------
 * ## première partie (fixe)
 * ------------------------------------------------------------------- */
.hp-hero .hp-media video {
    opacity    : 0;
    transition : opacity 1.8s ease;
}

.hp-hero .hp-media video.is-on {
    opacity : 1;
}

.hp-hero .hp-shade {
    background :
        linear-gradient(to left, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .25) 42%, rgba(0, 0, 0, 0) 72%),
        linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 26%);
}

.hp-hero .hp-copy {
    max-width : 76rem;
}

.hp-hero .hp-kicker {
    font-size : 1.4rem;
}

.hp-hero .hp-title img {
    max-width  : min(100%, 72rem);
    max-height : 36vh;
}

.hp-hero .hp-desc {
    max-width     : 56rem;
    margin-bottom : 0;
    font-size     : clamp(1.6rem, 1.3vw, 2rem);
}

/* -------------------------------------------------------------------
 * ## « François Reichenbach » (en haut à gauche) : mise au point au survol
 * Le nom part dans le flou, revient net, « pompe » une fois, puis se cale : comme un point fait à la caméra.
 * ------------------------------------------------------------------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .hp .s-header__branding a {
        display : inline-block;
    }

    .hp .s-header__branding a:hover {
        animation : hp-rack 1.05s cubic-bezier(.3, 0, .2, 1) both;
    }
}

@keyframes hp-rack {
    0%   { filter : blur(0);     opacity : 1;   transform : scale(1); }
    28%  { filter : blur(7px);   opacity : .7;  transform : scale(1.04); }
    58%  { filter : blur(0);     opacity : 1;   transform : scale(1); }
    72%  { filter : blur(1.8px); opacity : .92; transform : scale(1.008); }
    100% { filter : blur(0);     opacity : 1;   transform : scale(1); }
}

/* -------------------------------------------------------------------
 * ## apparition du texte
 * ------------------------------------------------------------------- */
.hp-part:is(.is-active, .is-leaving) .hp-anim {
    animation : hp-rise .75s var(--hp-ease-out) both;
    animation-delay : calc(var(--hp-dur) * .35 + var(--i, 0) * .07s);
}

.hp-part:is(.is-active, .is-leaving) .hp-title--img.hp-anim {
    animation-name     : hp-focus;
    animation-duration : .85s;
}

.hp-part:is(.is-active, .is-leaving) .hp-title__line > span {
    animation       : hp-line .8s var(--hp-ease-out) both;
    animation-delay : calc(var(--hp-dur) * .35 + var(--i, 0) * .07s);
}

.hp-title__line {
    display        : block;
    overflow       : hidden;
    padding-bottom : .12em;
}

.hp-title__line > span {
    display : block;
}

.hp-part:is(.is-active, .is-leaving) .hp-kicker__rule {
    transform-origin : center;
    animation        : hp-rule .8s var(--hp-ease) both;
    animation-delay  : calc(var(--hp-dur) * .45);
}

/* tant que la page n'est pas prête, on retient l'entrée de la 1re partie */
.js:not(.hp-ready) .hp-anim,
.js:not(.hp-ready) .hp-kicker__rule,
.js:not(.hp-ready) .hp-media__inner > * {
    animation-play-state : paused !important;
}

/* aperçu en mode édition : pas de rejeu des animations à chaque frappe */
.hp-stage.hp-quiet .hp-anim,
.hp-stage.hp-quiet .hp-title__line > span,
.hp-stage.hp-quiet .hp-kicker__rule,
.hp-stage.hp-quiet .hp-media__inner > * {
    animation : none !important;
}

/* -------------------------------------------------------------------
 * ## passage d'une partie à l'autre
 * La nouvelle partie se dévoile par un volet ; son image arrive de
 * plus loin et de plus près (parallaxe), l'ancienne recule et s'assombrit.
 * ------------------------------------------------------------------- */
.hp-part.is-entering {
    animation : hp-wipe-up var(--hp-dur) var(--hp-ease) both;
}

.hp-part.is-entering .hp-media__inner {
    animation : hp-media-in-up var(--hp-dur) var(--hp-ease) both;
}

.hp-part.is-leaving .hp-media__inner {
    animation : hp-media-out-up var(--hp-dur) var(--hp-ease) both;
}

.hp-part.is-leaving .hp-copy {
    animation : hp-copy-out-up .26s ease-in both;
}

.hp-part.is-leaving::after {
    content        : "";
    position       : absolute;
    top            : 0;
    left           : 0;
    z-index        : 4;
    width          : 100%;
    height         : 100%;
    background     : #000;
    pointer-events : none;
    animation      : hp-dim var(--hp-dur) var(--hp-ease) both;
}

.hp-stage[data-dir="-1"] .hp-part.is-entering {
    animation-name : hp-wipe-down;
}

.hp-stage[data-dir="-1"] .hp-part.is-entering .hp-media__inner {
    animation-name : hp-media-in-down;
}

.hp-stage[data-dir="-1"] .hp-part.is-leaving .hp-media__inner {
    animation-name : hp-media-out-down;
}

.hp-stage[data-dir="-1"] .hp-part.is-leaving .hp-copy {
    animation-name : hp-copy-out-down;
}

@keyframes hp-wipe-up {
    from { clip-path : inset(100% 0 0 0); }
    to   { clip-path : inset(0 0 0 0); }
}

@keyframes hp-wipe-down {
    from { clip-path : inset(0 0 100% 0); }
    to   { clip-path : inset(0 0 0 0); }
}

@keyframes hp-media-in-up {
    from { transform : translateY(20%) scale(1.18); }
    to   { transform : none; }
}

@keyframes hp-media-in-down {
    from { transform : translateY(-20%) scale(1.18); }
    to   { transform : none; }
}

@keyframes hp-media-out-up {
    from { transform : none; }
    to   { transform : translateY(-16%) scale(1.04); }
}

@keyframes hp-media-out-down {
    from { transform : none; }
    to   { transform : translateY(16%) scale(1.04); }
}

@keyframes hp-copy-out-up {
    from { opacity : 1; transform : none; }
    to   { opacity : 0; transform : translateY(-3rem); }
}

@keyframes hp-copy-out-down {
    from { opacity : 1; transform : none; }
    to   { opacity : 0; transform : translateY(3rem); }
}

@keyframes hp-dim {
    from { opacity : 0; }
    to   { opacity : .6; }
}

@keyframes hp-drift {
    from { transform : scale(1.09); }
    to   { transform : scale(1); }
}

@keyframes hp-rise {
    from { opacity : 0; transform : translateY(2.4rem); }
    to   { opacity : 1; transform : none; }
}

@keyframes hp-focus {
    from { opacity : 0; transform : translateY(1.6rem) scale(1.04); filter : blur(10px); }
    to   { opacity : 1; transform : none; filter : blur(0); }
}

@keyframes hp-line {
    from { transform : translateY(108%); }
    to   { transform : none; }
}

@keyframes hp-rule {
    from { transform : scaleX(0); }
    to   { transform : scaleX(1); }
}

/* -------------------------------------------------------------------
 * ## repères : rail, invite à défiler
 * ------------------------------------------------------------------- */
/* Le rail est une bague d'objectif : les repères sont posés sur un cylindre (un cran = --step),
   la partie en cours est toujours au centre, face au petit index doré. Changer de partie fait
   tourner la bague. js/home.js pose --n (rang du repère) sur chaque <li> et --hp-i (partie en cours) sur la liste. */
.hp-rail {
    --item    : 2.8rem;      /* hauteur d'un cran */
    --step    : 14deg;       /* angle d'un cran */
    --r       : 11.4rem;     /* rayon de la bague = (--item / 2) / tan(--step / 2) */
    position  : fixed;
    top       : 50%;
    right     : calc(var(--hp-pad) - 1rem);
    z-index   : 40;
    width     : 9.4rem;
    height    : calc(var(--r) * 2);
    transform : translateY(-50%);
    -webkit-mask-image : linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
    mask-image         : linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
}

/* index fixe, à droite de la bague */
.hp-rail::after {
    content            : "";
    position           : absolute;
    top                : 50%;
    right              : 0;
    border             : .4rem solid transparent;
    border-right-color : var(--hp-gold);
    border-left-width  : 0;
    transform          : translateY(-50%);
    pointer-events     : none;
}

.hp-rail ol {
    position        : relative;
    height          : 100%;
    margin          : 0;
    padding         : 0;
    list-style      : none;
    transform-style : preserve-3d;
    transform       : rotateX(calc(var(--hp-i, 0) * var(--step)));
    transition      : transform .9s cubic-bezier(.25, 1.25, .4, 1);   /* léger dépassement : la bague se cale */
}

.hp-rail li {
    position            : absolute;
    top                 : 50%;
    right               : 0;
    display             : block;
    width               : 100%;
    height              : var(--item);
    margin              : calc(var(--item) / -2) 0 0;
    padding             : 0;
    transform           : rotateX(calc(var(--n, 0) * -1 * var(--step))) translateZ(var(--r));
    backface-visibility : hidden;
}

/* graduations : entre deux repères de partie, un trait moyen et deux petits */
.hp-rail li::before {
    --tick         : rgba(255, 255, 255, .34);
    content        : "";
    position       : absolute;
    top            : 0;
    right          : 1rem;
    bottom         : 0;
    width          : 1rem;
    background     :
        linear-gradient(var(--tick), var(--tick)) right 0 top 0 / 1rem 1px no-repeat,
        linear-gradient(var(--tick), var(--tick)) right 0 top .7rem / .5rem 1px no-repeat,
        linear-gradient(var(--tick), var(--tick)) right 0 top 2.1rem / .5rem 1px no-repeat;
    pointer-events : none;
}

.hp-rail li:last-child::before {
    background :
        linear-gradient(var(--tick), var(--tick)) right 0 top 0 / 1rem 1px no-repeat,
        linear-gradient(var(--tick), var(--tick)) right 0 top .7rem / .5rem 1px no-repeat,
        linear-gradient(var(--tick), var(--tick)) right 0 top 2.1rem / .5rem 1px no-repeat,
        linear-gradient(var(--tick), var(--tick)) right 0 bottom 0 / 1rem 1px no-repeat;
}

.hp-rail button {
    all                  : unset;
    box-sizing           : border-box;
    display              : flex;
    align-items          : center;
    justify-content      : flex-end;
    gap                  : 1.2rem;
    width                : 100%;
    height               : var(--item);
    padding              : 0 1rem;
    cursor               : pointer;
    font-family          : var(--font-1);
    font-weight          : 500;
    font-size            : 1.1rem;
    letter-spacing       : .14em;
    font-variant-numeric : tabular-nums;
    color                : rgba(255, 255, 255, .6);
    transition           : color .3s ease;
}

.hp-rail button span {
    opacity    : 0;
    transform  : translateX(.8rem);
    transition : opacity .4s ease, transform .5s var(--hp-ease-out);
}

.hp-rail button::after {
    content    : "";
    flex       : none;
    width      : 1.6rem;
    height     : 1px;
    background : currentColor;
    transition : width .4s var(--hp-ease), background-color .3s ease;
}

.hp-rail button:hover,
.hp-rail button:focus-visible,
.hp-rail button[aria-current="true"] {
    color : #fff;
}

.hp-rail button:hover span,
.hp-rail button:focus-visible span,
.hp-rail button[aria-current="true"] span {
    opacity   : 1;
    transform : none;
}

.hp-rail button[aria-current="true"]::after {
    width      : 4.4rem;
    background : var(--hp-gold);
}

.hp-rail button:focus-visible {
    outline        : 1px solid var(--hp-gold);
    outline-offset : 2px;
}

.hp-hint {
    position       : fixed;
    right          : var(--hp-pad);
    bottom         : 3.2rem;
    z-index        : 40;
    display        : flex;
    align-items    : center;
    gap            : 1.2rem;
    font-family    : var(--font-1);
    font-weight    : 500;
    font-size      : 1.1rem;
    line-height    : 1;
    letter-spacing : .3em;
    text-transform : uppercase;
    color          : rgba(255, 255, 255, .75);
    pointer-events : none;
    transition     : opacity .6s ease;
}

.hp-hint.is-off {
    opacity : 0;
}

.hp-hint i {
    position   : relative;
    display    : block;
    width      : 1px;
    height     : 4.8rem;
    overflow   : hidden;
    background : rgba(255, 255, 255, .25);
}

.hp-hint i::after {
    content    : "";
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    background : var(--hp-gold);
    animation  : hp-hint 2.2s var(--hp-ease) infinite;
}

@keyframes hp-hint {
    0%   { transform : translateY(-100%); }
    55%  { transform : translateY(0); }
    100% { transform : translateY(100%); }
}

.js:not(.hp-ready) .hp-rail,
.js:not(.hp-ready) .hp-hint {
    opacity : 0;
}

.hp-rail {
    transition : opacity 1.2s .9s ease;
}

/* -------------------------------------------------------------------
 * ## écrans plus petits
 * ------------------------------------------------------------------- */
@media screen and (max-width: 800px) {
    .hp-part {
        justify-content : center;
    }

    .hp-copy {
        max-width    : none;
        margin-right : 0;
        padding      : 7rem calc(var(--hp-pad) + 1.6rem) 3rem;   /* sur les côtés : place du rail */
    }

    .hp-kicker {
        gap           : 1.2rem;
        margin-bottom : 2rem;
        font-size     : 1.1rem;
    }

    .hp-kicker__rule {
        width : 3.2rem;
    }

    .hp-title {
        margin-bottom : 2rem;
    }

    .hp-title img {
        max-height : 22vh;
    }

    .hp-desc {
        margin-bottom : 2.8rem;
        font-size     : 1.5rem;
        line-height   : 1.6;
    }

    .hp-cta {
        height : 5.2rem;
    }

    .hp-hero .hp-title img {
        max-height : 30vh;
    }

    .hp-rail {
        --item : 2.4rem;
        --r    : 9.8rem;
        right  : 0;
        width  : 4rem;
    }

    .hp-rail::after {
        border-width      : .3rem;
        border-left-width : 0;
    }

    .hp-rail button {
        padding : 0 .8rem;
    }

    .hp-rail li::before,
    .hp-rail li:last-child::before {
        right      : .8rem;
        width      : .6rem;
        background :
            linear-gradient(var(--tick), var(--tick)) right 0 top 0 / .6rem 1px no-repeat,
            linear-gradient(var(--tick), var(--tick)) right 0 top .6rem / .3rem 1px no-repeat,
            linear-gradient(var(--tick), var(--tick)) right 0 top 1.8rem / .3rem 1px no-repeat;
    }

    .hp-rail button span {
        display : none;
    }

    .hp-rail button::after {
        width : 1rem;
    }

    .hp-rail button[aria-current="true"]::after {
        width : 2.2rem;
    }

    .hp-hint {
        display : none;
    }
}

/* écrans très bas (téléphone à l'horizontale) */
@media screen and (max-height: 520px) {
    .hp-copy {
        padding-top    : 6rem;
        padding-bottom : 1rem;
    }

    .hp-kicker,
    .hp-title {
        margin-bottom : 1.4rem;
    }

    .hp-title {
        font-size : clamp(3.2rem, 9vh, 5.6rem);
    }

    .hp-title img {
        max-height : 26vh;
    }

    .hp-desc {
        margin-bottom      : 1.8rem;
        font-size          : 1.4rem;
        line-height        : 1.5;
        display            : -webkit-box;
        -webkit-box-orient : vertical;
        -webkit-line-clamp : 3;
        overflow           : hidden;
    }

    .hp-cta {
        height : 4.4rem;
    }
}

/* -------------------------------------------------------------------
 * ## mouvement réduit : simple fondu
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hp-rail ol {
        transition : none;
    }

    .hp-part.is-entering,
    .hp-stage[data-dir="-1"] .hp-part.is-entering {
        animation : hp-fade .45s ease both;
    }

    .hp-part.is-entering .hp-media__inner,
    .hp-part.is-leaving .hp-media__inner,
    .hp-part.is-leaving .hp-copy,
    .hp-part.is-leaving::after,
    .hp-part:is(.is-active, .is-leaving) .hp-media__inner > *,
    .hp-part:is(.is-active, .is-leaving) .hp-title__line > span,
    .hp-part:is(.is-active, .is-leaving) .hp-kicker__rule,
    .hp-hint i::after {
        animation : none !important;
    }

    .hp-part:is(.is-active, .is-leaving) .hp-anim,
    .hp-part:is(.is-active, .is-leaving) .hp-title--img.hp-anim {
        animation       : hp-fade .6s ease both;
        animation-delay : .15s;
    }
}

@keyframes hp-fade {
    from { opacity : 0; }
    to   { opacity : 1; }
}