/**
 * How To Enjoy page — premium lifestyle editorial (presentation only).
 * Scoped to body.page-how-to-enjoy so HOME / STORY / PRODUCT are untouched.
 * No new blocks / CMS fields.
 *
 * @package Flamingo_Liqueur
 */

/**
 * Consolidated how-to-enjoy-page.css.
 *
 * Successive redesign passes re-declared the same selectors on top of each
 * other. Every declaration that a later one at the same selector already
 * overwrote has been removed; the survivors keep their original order, so
 * the rendered result is unchanged (verified declaration-by-declaration).
 *
 * EDIT the existing rule rather than appending another pass. The mixed tile
 * sizes and left-hugging grids of FIX-12 lived in a layer nobody read.
 */

/**
 * How To Enjoy page — premium lifestyle editorial (presentation only).
 * Scoped to body.page-how-to-enjoy so HOME / STORY / PRODUCT are untouched.
 * No new blocks / CMS fields.
 *
 * @package Flamingo_Liqueur
 */

/* ------------------------------------------------------------------ */

/* Global rhythm                                                      */

/* ------------------------------------------------------------------ */

.page-how-to-enjoy .c-entry__content--blocks > .fl-how-to-enjoy + .fl-how-to-enjoy,
.page-how-to-enjoy .c-entry__content--blocks > .fl-how-to-enjoy + .fl-gallery,
.page-how-to-enjoy .c-entry__content--blocks > .fl-gallery + .fl-story,
.page-how-to-enjoy .c-entry__content--blocks > .fl-story + .fl-story {
  border-top: 0;
}

.page-how-to-enjoy .fl-hero__subheading {
  font-weight: 300;
}

.page-how-to-enjoy .fl-hero__scroll {
  letter-spacing: 0.28em;
}

/* Strip card / shadow / border language on this page */

.page-how-to-enjoy .fl-how-to-enjoy__card,
.page-how-to-enjoy .fl-how-to-enjoy__media,
.page-how-to-enjoy .fl-gallery__figure,
.page-how-to-enjoy .fl-story__media {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.page-how-to-enjoy .fl-how-to-enjoy__card:hover .fl-how-to-enjoy__img,
.page-how-to-enjoy .fl-story__media:hover .fl-story__img,
.page-how-to-enjoy .fl-gallery__figure:hover .fl-gallery__img {
  transform: none;
  filter: none;
  box-shadow: none;
}

.page-how-to-enjoy .fl-how-to-enjoy--single .fl-how-to-enjoy__header {
  margin-bottom: 0;
  max-width: none;
}

.page-how-to-enjoy .fl-how-to-enjoy--single .fl-how-to-enjoy__title {
  font-size: clamp(3rem, 6.5vw, 5.25rem);
  max-width: 12ch;
  line-height: 1.05;
  margin-bottom: 1.75rem;
}

.page-how-to-enjoy .fl-how-to-enjoy--single .fl-how-to-enjoy__intro p {
  max-width: 28ch;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
}

.page-how-to-enjoy .fl-how-to-enjoy--single .fl-how-to-enjoy__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: block;
}

.page-how-to-enjoy .fl-how-to-enjoy--single .fl-how-to-enjoy__item {
  margin: 0;
}

.page-how-to-enjoy .fl-how-to-enjoy--single .fl-how-to-enjoy__card {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.page-how-to-enjoy .fl-how-to-enjoy--single .fl-how-to-enjoy__media {
  margin: 0;
}

.page-how-to-enjoy .fl-how-to-enjoy--single .fl-how-to-enjoy__img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}

@media (min-width: 900px) {

  .page-how-to-enjoy .fl-how-to-enjoy--single .fl-how-to-enjoy__card {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  /* Place section copy into the editorial grid via subgrid-like flow:
       header spans as copy column; media sits beside. */

  .page-how-to-enjoy .fl-how-to-enjoy--single .l-container {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(3rem, 8vw, 7rem);
    align-items: center;
  }

  .page-how-to-enjoy .fl-how-to-enjoy--single .fl-how-to-enjoy__header {
    grid-column: 1;
    grid-row: 1;
  }

  .page-how-to-enjoy .fl-how-to-enjoy--single .fl-how-to-enjoy__grid {
    grid-column: 2;
    grid-row: 1;
  }

  .page-how-to-enjoy .fl-how-to-enjoy--single .fl-how-to-enjoy__card {
    display: block;
  }

  /* Alternate: image left / copy right */

  .page-how-to-enjoy #on-the-rocks .l-container,
  .page-how-to-enjoy #cocktails .l-container {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .page-how-to-enjoy #on-the-rocks .fl-how-to-enjoy__grid,
  .page-how-to-enjoy #cocktails .fl-how-to-enjoy__grid {
    grid-column: 1;
  }

  .page-how-to-enjoy #on-the-rocks .fl-how-to-enjoy__header,
  .page-how-to-enjoy #cocktails .fl-how-to-enjoy__header {
    grid-column: 2;
  }
}

/* Scene atmospheres */

.page-how-to-enjoy #neat {
  background: radial-gradient(ellipse 70% 55% at 78% 45%, rgba(255, 79, 163, 0.182), transparent 58%), linear-gradient(180deg, #0d0d12 0%, #060608 100%);
}

.page-how-to-enjoy #on-the-rocks {
  background: radial-gradient(ellipse 65% 50% at 18% 48%, rgba(201, 161, 74, 0.182), transparent 58%), linear-gradient(180deg, #0e0c13 0%, #060506 100%);
}

.page-how-to-enjoy #on-the-rocks .fl-how-to-enjoy__img {
  aspect-ratio: 3 / 4;
  object-position: center 30%;
}

.page-how-to-enjoy #with-soda {
  background: linear-gradient(180deg, #0a0a0f 0%, #040405 100%);
}

.page-how-to-enjoy #with-soda .fl-how-to-enjoy__label {
  color: rgba(255, 79, 163, 0.88);
}

.page-how-to-enjoy #with-soda .fl-how-to-enjoy__img {
  aspect-ratio: 16 / 10;
  object-position: center 40%;
}

@media (min-width: 900px) {

  .page-how-to-enjoy #with-soda .l-container {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    max-width: min(90rem, 100%);
  }

  .page-how-to-enjoy #with-soda .fl-how-to-enjoy__grid {
    grid-column: 1;
    grid-row: 1;
    order: -1;
  }

  .page-how-to-enjoy #with-soda .fl-how-to-enjoy__header {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: end;
  }

  .page-how-to-enjoy #with-soda .fl-how-to-enjoy__label,
  .page-how-to-enjoy #with-soda .fl-how-to-enjoy__title {
    grid-column: 1;
  }

  .page-how-to-enjoy #with-soda .fl-how-to-enjoy__intro {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}

.page-how-to-enjoy #cocktails {
  background: radial-gradient(ellipse 60% 45% at 22% 50%, rgba(255, 79, 163, 0.156), transparent 60%), linear-gradient(180deg, #0d0d12 0%, #060608 100%);
}

.page-how-to-enjoy #cocktails .fl-how-to-enjoy__img {
  aspect-ratio: 4 / 5;
  object-position: center 25%;
}

/* ------------------------------------------------------------------ */

/* Celebration — centered overture + editorial strip                  */

/* ------------------------------------------------------------------ */

.page-how-to-enjoy #gallery {
  padding-block: clamp(7.5rem, 19vh, 14rem);
  background: linear-gradient(180deg, #080808 0%, #0b0b0b 35%, #0b0b0b 100%);
}

.page-how-to-enjoy #gallery .fl-gallery__header {
  margin-inline: auto;
  margin-bottom: clamp(4rem, 10vw, 7rem);
  max-width: 36rem;
  text-align: center;
}

.page-how-to-enjoy #gallery .fl-gallery__title {
  font-size: clamp(2.85rem, 5.5vw, 4.5rem);
}

.page-how-to-enjoy #gallery .fl-gallery__intro p {
  margin-inline: auto;
  max-width: 34ch;
}

.page-how-to-enjoy #gallery .fl-gallery__grid {
  gap: clamp(0.85rem, 1.6vw, 1.35rem);
}

/* Span rhythm inherited from blocks/gallery (8-item editorial cycle). */

/* ------------------------------------------------------------------ */

/* Perfect Pairing — quiet editorial split                            */

/* ------------------------------------------------------------------ */

.page-how-to-enjoy #pairing {
  padding-block: clamp(7rem, 17vh, 12rem);
  background: radial-gradient(ellipse 55% 50% at 20% 45%, rgba(201, 161, 74, 0.156), transparent 60%), linear-gradient(180deg, #0d0d12 0%, #060608 100%);
}

.page-how-to-enjoy #pairing .fl-story__title {
  font-size: clamp(2.75rem, 5.5vw, 4.35rem);
  max-width: 12ch;
}

.page-how-to-enjoy #pairing .fl-story__description p {
  max-width: 28ch;
}

.page-how-to-enjoy #pairing .fl-story__img {
  aspect-ratio: 5 / 6;
  object-position: center 35%;
}

@media (min-width: 900px) {

  .page-how-to-enjoy #pairing .fl-story__grid {
    grid-template-columns: minmax(var(--fl-image-min), 1.15fr) minmax(var(--fl-text-min), 0.85fr);
    gap: clamp(3rem, 7vw, 6rem);
    align-items: center;
  }
}

/* ------------------------------------------------------------------ */

/* CTA — calm final chapter                                           */

/* ------------------------------------------------------------------ */

.page-how-to-enjoy #invite:not(.fl-story--ending) {
  padding-block: clamp(8rem, 20vh, 14rem) clamp(9rem, 22vh, 15rem);
  text-align: center;
  background: radial-gradient(ellipse 48% 38% at 50% 100%, rgba(255, 79, 163, 0.240), transparent 65%), linear-gradient(180deg, #0d0d12 0%, #060608 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.page-how-to-enjoy #invite:not(.fl-story--ending) .l-container {
  display: flex;
  justify-content: center;
}

/* max-width: 34rem was written when this section was text only. A picture
   was added later and the two columns had to share 544px, which left the
   image column about 20px wide — the black bar in the screenshot. Kept for
   the text-only form, excluded from the closing scene. */
.page-how-to-enjoy #invite:not(.fl-story--ending) .fl-story__grid {
  margin-inline: auto;
  max-width: 34rem;
  justify-items: center;
}

.page-how-to-enjoy #invite .fl-story__label {
  color: var(--fl-gold, #c9a14a);
  letter-spacing: 0.3em;
}

.page-how-to-enjoy #invite:not(.fl-story--ending) .fl-story__title {
  font-size: clamp(2.85rem, 5.6vw, 4.35rem);
  max-width: 14ch;
}

.page-how-to-enjoy #invite:not(.fl-story--ending) .fl-story__description p {
  margin-inline: auto;
  max-width: 28ch;
}

.page-how-to-enjoy #invite:not(.fl-story--ending) .fl-story__actions {
  margin-top: 3rem;
}

.page-how-to-enjoy #invite:not(.fl-story--ending) .fl-story__actions .fl-btn {
  min-width: 14rem;
  background: transparent;
  border-color: rgba(255, 79, 163, 0.85);
  color: #fff;
}

.page-how-to-enjoy #invite:not(.fl-story--ending) .fl-story__actions .fl-btn:hover,
.page-how-to-enjoy #invite:not(.fl-story--ending) .fl-story__actions .fl-btn:focus-visible {
  background: var(--fl-pink, #d12b74);
  border-color: var(--fl-pink, #d12b74);
}

@media (max-width: 899px) {

  /* ------------------------------------------------------------------ */

  /* Mobile                                                             */

  /* ------------------------------------------------------------------ */

  .page-how-to-enjoy .fl-how-to-enjoy--single {
    padding-block: clamp(4.5rem, 12vh, 7.5rem);
  }

  .page-how-to-enjoy #with-soda .fl-how-to-enjoy__img {
    aspect-ratio: 4 / 3;
  }

  .page-how-to-enjoy #invite {
    padding-block: clamp(5.5rem, 14vh, 8rem) clamp(6.5rem, 16vh, 10rem);
  }
}

/* ================================================================== */

/* FINAL DIRECTOR PASS — Lifestyle editorial / modern magazine        */

/* ================================================================== */

.page-how-to-enjoy {
  --fl-dir-reveal-y: 2.75rem;
  --fl-dir-reveal-ms: 0.75s;
}

.page-how-to-enjoy .fl-hero__heading {
  font-weight: 500;
}

.page-how-to-enjoy .fl-hero__actions {
  justify-content: flex-start;
}

/* Dynamic magazine rhythm */

.page-how-to-enjoy .fl-how-to-enjoy--single {
  padding-block: clamp(5.5rem, 14vh, 10rem);
}

.page-how-to-enjoy .fl-how-to-enjoy__title {
  font-style: normal;
}

/* Varied image energy */

.page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(odd) .fl-how-to-enjoy__img {
  aspect-ratio: 4 / 5;
  object-position: center 25%;
}

.page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(even) .fl-how-to-enjoy__img {
  aspect-ratio: 5 / 4;
  object-position: center 40%;
}

.page-how-to-enjoy .fl-gallery__img {
  aspect-ratio: 3 / 4;
}

@media (min-width: 900px) {

  .page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(3n) .fl-how-to-enjoy__card {
    gap: clamp(3rem, 8vw, 6.5rem);
  }

  .page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(3n) .fl-how-to-enjoy__img {
    aspect-ratio: 16 / 11;
  }
}

@media (prefers-reduced-motion: no-preference) {

  .page-how-to-enjoy .fl-reveal.is-pending {
    transform: translateY(var(--fl-dir-reveal-y));
    transition-duration: var(--fl-dir-reveal-ms);
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

/* Fast magazine rhythm — compact + expansive alternate */

.page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(odd) {
  padding-block: clamp(5rem, 12vh, 8.5rem);
}

.page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(even) {
  padding-block: clamp(7rem, 17vh, 12rem);
}

.page-how-to-enjoy .fl-how-to-enjoy__label {
  font-size: 0.72rem;
}

.page-how-to-enjoy .fl-how-to-enjoy__intro p {
  max-width: 26ch;
  font-size: 1.08rem;
}

/* Lifestyle asymmetry + varied crops */

.page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(4n + 1) .fl-how-to-enjoy__img {
  aspect-ratio: 3 / 4;
  object-position: center 22%;
}

.page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(4n + 2) .fl-how-to-enjoy__img {
  aspect-ratio: 16 / 10;
  object-position: center 40%;
}

.page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(4n + 3) .fl-how-to-enjoy__img {
  aspect-ratio: 1 / 1;
  object-position: center 30%;
}

.page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(4n + 4) .fl-how-to-enjoy__img {
  aspect-ratio: 5 / 6;
  object-position: center 18%;
}

.page-how-to-enjoy .fl-gallery__title {
  font-size: clamp(2.75rem, 5.5vw, 4.25rem);
  letter-spacing: -0.02em;
}

/* ================================================================== */

/* FINAL ART DIRECTION — Lifestyle magazine (dynamic scales)          */

/* ================================================================== */

.page-how-to-enjoy .c-site-main {
  --fl-container: 88rem;
}

.page-how-to-enjoy .c-site-main .l-container {
  max-width: var(--fl-container);
}

.page-how-to-enjoy .fl-hero {
  min-height: 88svh;
  align-items: end;
}

.page-how-to-enjoy .fl-hero__image,
.page-how-to-enjoy .fl-hero__video {
  object-position: 78% 28%;
  transform: scale(1.1);
  transform-origin: 78% 28%;
  /* No brightness/contrast correction here. Measured on the live images:
     this filter clipped 13-68% of every hero to flat white or flat black,
     which is what read as "hazy". The hero block already exposes
     --fl-hero-filter for genuine per-image correction from the editor.
     See FIX-15 — and FIX-06, which removed the same filter from the block
     stylesheet but left these nine page-level copies behind. */
}

.page-how-to-enjoy .fl-hero__overlay {
  background: linear-gradient(145deg, rgba(255, 79, 163, 0.22) 0%, rgba(0, 0, 0, 0.2) 38%, rgba(0, 0, 0, 0.78) 100%);
}

.page-how-to-enjoy .fl-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 36rem;
  text-align: left;
  padding-block: clamp(4rem, 10vh, 7rem) clamp(3.5rem, 9vh, 6rem);
}

.page-how-to-enjoy .fl-hero__heading {
  font-size: clamp(3.75rem, 9vw, 6.75rem);
  letter-spacing: -0.035em;
  line-height: 0.9;
  max-width: 9ch;
  font-style: normal;
  text-transform: none;
}

.page-how-to-enjoy .fl-hero__subheading {
  max-width: 26ch;
  font-size: 1.15rem;
  color: rgba(255, 240, 246, 0.94);
}

.page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(1) {
  padding-block: clamp(4.5rem, 11vh, 7.5rem);
}

.page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(2) {
  padding-block: clamp(7.5rem, 18vh, 12.5rem);
}

.page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(3) {
  padding-block: clamp(4rem, 10vh, 7rem);
}

.page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(4) {
  padding-block: clamp(8rem, 19vh, 13rem);
}

.page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(n + 5) {
  padding-block: clamp(5.5rem, 13vh, 9rem);
}

.page-how-to-enjoy .fl-how-to-enjoy__title {
  font-size: clamp(3.5rem, 8vw, 6rem);
  letter-spacing: -0.035em;
  max-width: 8ch;
  line-height: 0.92;
}

.page-how-to-enjoy .fl-how-to-enjoy__label {
  color: rgba(255, 79, 163, 0.95);
  letter-spacing: 0.34em;
}

/* Unexpected scales */

.page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(1) .fl-how-to-enjoy__img {
  aspect-ratio: 3 / 4;
  object-position: center 18%;
  max-height: 78vh;
  width: 100%;
  object-fit: cover;
}

.page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(2) .fl-how-to-enjoy__img {
  aspect-ratio: 16 / 9;
  object-position: center 45%;
}

.page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(3) .fl-how-to-enjoy__img {
  aspect-ratio: 1 / 1;
  max-width: 28rem;
  object-position: center 30%;
}

.page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(4) .fl-how-to-enjoy__img {
  aspect-ratio: 5 / 6;
  object-position: center 15%;
}

@media (min-width: 900px) {

  .page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(odd) .fl-how-to-enjoy__card {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: clamp(2rem, 6vw, 5rem);
  }

  .page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(even) .fl-how-to-enjoy__card {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(2.5rem, 7vw, 6rem);
  }

  .page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(even) .fl-how-to-enjoy__media {
    order: 2;
  }

  .page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(even) .fl-how-to-enjoy__body {
    order: 1;
  }

  .page-how-to-enjoy .fl-how-to-enjoy--single:nth-of-type(3) .fl-how-to-enjoy__card {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.page-how-to-enjoy .fl-gallery {
  padding-block: clamp(3.5rem, 9vh, 6.5rem);
}

.page-how-to-enjoy .fl-gallery__grid {
  gap: 0.35rem;
}

.page-how-to-enjoy .fl-gallery__header {
  margin-bottom: 1.5rem;
}


/* ==========================================================================
   Scroll choreography — modelled on the reference recipes page

   The reference keeps every card at opacity .6 / scale .85 and promotes only
   the one it calls `active` to full size and full opacity. The result is a
   page with a moving focus rather than a page of equal tiles.

   Rebuilt on the browser's own view timeline. With `animation-range: cover`,
   50% of the timeline is the moment the element crosses the middle of the
   screen — so a peak at 50% means "whichever card is centred is the one in
   focus", with no script deciding it.

   Nothing falls below opacity .5: a card that is merely out of focus must
   still be readable, because a reader may well be reading it.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* The focus itself. Peaks at centre, eases away on both sides. */
    @keyframes fl-hte-focus {
      0%   { opacity: 0.5; transform: scale(0.9) translate3d(0, 26px, 0); }
      42%  { opacity: 1; transform: scale(1) translate3d(0, 0, 0); }
      58%  { opacity: 1; transform: scale(1) translate3d(0, 0, 0); }
      100% { opacity: 0.5; transform: scale(0.9) translate3d(0, -26px, 0); }
    }

    /* The picture inside pushes in slightly further than its card, so the
       frame and its contents do not move as one flat plate. */
    @keyframes fl-hte-media {
      0%   { transform: scale(1.06); }
      50%  { transform: scale(1); }
      100% { transform: scale(1.06); }
    }

    /* Headings arrive rather than pulse — a title that breathes with the
       scroll is hard to read. */
    @keyframes fl-hte-head {
      from { opacity: 0.12; transform: translate3d(0, 56px, 0); }
      to   { opacity: 1; transform: none; }
    }

    .page-how-to-enjoy .fl-how-to-enjoy__card {
      animation: fl-hte-focus linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform, opacity;
    }

    .page-how-to-enjoy .fl-how-to-enjoy__img {
      animation: fl-hte-media linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    .page-how-to-enjoy .fl-how-to-enjoy__header {
      animation: fl-hte-head linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }

    /*
     * The reference staggers its cards by 0.1s. On a scrubbed timeline the
     * equivalent is a later start, so the second and third cards in a row
     * reach focus a little after the first instead of the row snapping into
     * place together.
     */
    .page-how-to-enjoy .fl-how-to-enjoy__item:nth-child(2) .fl-how-to-enjoy__card {
      animation-range: cover 4% cover 104%;
    }

    .page-how-to-enjoy .fl-how-to-enjoy__item:nth-child(3) .fl-how-to-enjoy__card {
      animation-range: cover 8% cover 108%;
    }

    /* The closing scene keeps the treatment it already has. */
    .page-how-to-enjoy .fl-story--ending .fl-story__media {
      animation: none;
    }
  }
}

/*
 * Hover, from the reference: a card that is not the one in focus lifts
 * slightly towards the reader. Pointer devices only — on a touch screen
 * there is no hover, and a sticky :hover state on a card is worse than none.
 */
@media (hover: hover) and (pointer: fine) {

  .page-how-to-enjoy .fl-how-to-enjoy__card {
    transition: box-shadow 0.4s var(--fl-ease), filter 0.4s var(--fl-ease);
  }

  .page-how-to-enjoy .fl-how-to-enjoy__card:hover {
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.85);
    filter: brightness(1.05);
  }
}