/*
 * Story — the closing scene.
 *
 * Loaded only on pages holding a story block set to `mediaLayout: ending`
 * (see inc/enqueue.php), for the same reason the background treatment is:
 * a page should not carry the weight of something it does not use.
 *
 * Everything here is a change of balance, weight and rhythm. The typeface,
 * the palette, the dark ground, the gradients and the reveal are the ones the
 * site already had.
 */

.fl-story--ending {
  position: relative;
  overflow: hidden;
  text-align: start;

  /*
   * Two jobs in one stack, so the section carries no extra elements:
   *
   *   1. a spotlight behind the bottle — placed at 72% across, which is where
   *      the bottle sits in the right-hand column
   *   2. the house gradient: black → dark violet → warm gold → black, kept at
   *      6–8% so it is felt rather than seen
   */
  background:
    radial-gradient(46% 52% at 72% 46%, rgba(201, 161, 74, 0.13), transparent 68%),
    radial-gradient(70% 60% at 14% 8%, rgba(94, 24, 74, 0.16), transparent 64%),
    radial-gradient(80% 50% at 78% 100%, rgba(201, 161, 74, 0.07), transparent 70%),
    linear-gradient(180deg, #0b0b0f 0%, #060608 100%);
}

/* 45 / 55. The words take less room than the bottle on purpose — the last
   thing a reader should remember is the object, not the sentence. */
.fl-story--ending .fl-story__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  max-width: none;
  margin-inline: 0;
}

@media (min-width: 900px) {

  .fl-story--ending .fl-story__grid {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  }
}

.fl-story--ending .fl-story__copy {
  max-width: 32rem;
}

/* ------------------------------------------------------------------- type */

/*
 * The label and its rule are one element, not two decorations. The brief asked
 * for a thin gold divider and a small editorial label; drawing them as one
 * mark keeps the section from collecting ornament.
 */
.fl-story--ending .fl-story__label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--fl-gold, #c9a14a);
}

.fl-story--ending .fl-story__label::before {
  content: "";
  flex: 0 0 clamp(2rem, 4vw, 3.5rem);
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 161, 74, 0.15), var(--fl-gold, #c9a14a));
}

/*
 * 52px to 88px rather than a flat 80–96.
 *
 * 「夜を続ける。」 at 96px inside a 45% column breaks after two characters on a
 * 1440 laptop, and a headline that wraps mid-word does not dominate — it looks
 * broken. This range reaches 88px on a wide screen, which is the size the
 * brief is after, and steps down before it can fracture.
 */
.fl-story--ending .fl-story__title {
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: clamp(3.25rem, 6vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: 0.005em;
  max-width: 12ch;
}

.fl-story--ending .fl-story__description p {
  margin-inline: 0;
  max-width: 420px;
  line-height: 2.15;
  color: var(--fl-muted, rgba(255, 255, 255, 0.66));
}

/* ----------------------------------------------------------------- button */

.fl-story--ending .fl-story__actions {
  margin-block-start: clamp(2.25rem, 4.5vw, 3.25rem);
}

.fl-story--ending .fl-story__actions .fl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  /* 240x60, but never wider than the screen it is on. */
  inline-size: min(240px, 100%);
  min-block-size: 60px;
  padding-inline: 1.5rem;
  color: #fff;
  background: transparent;
  border: 1px solid var(--fl-gold, #c9a14a);
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}

.fl-story--ending .fl-story__actions .fl-btn::after {
  content: "\2192";
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.35s ease;
}

.fl-story--ending .fl-story__actions .fl-btn:hover,
.fl-story--ending .fl-story__actions .fl-btn:focus-visible {
  color: #0b0b0f;
  background: var(--fl-gold, #c9a14a);
  border-color: var(--fl-gold, #c9a14a);
}

.fl-story--ending .fl-story__actions .fl-btn:hover::after,
.fl-story--ending .fl-story__actions .fl-btn:focus-visible::after {
  transform: translateX(0.3rem);
}

/* ------------------------------------------------------------------ bottle */

.fl-story--ending .fl-story__media {
  position: relative;
  max-width: 34rem;
  margin-inline-start: auto;
}

/* The photograph already carries its own spotlight, rim light and reflection —
   it was shot that way. Nothing is added on top of it; the frame only stops
   the edges from cutting hard against the ground. */
.fl-story--ending .fl-story__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(72% 60% at 50% 52%, transparent 55%, rgba(6, 6, 8, 0.45) 100%);
}

/* ---------------------------------------------------------------- entrance */

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

  /*
   * The bottle arrives after the sentence. 200ms is enough for the eye to
   * finish the headline and be looking for something to land on.
   */
  .fl-reveal .fl-story--ending .fl-story__media {
    opacity: 0;
    transform: translateY(28px) scale(0.95);
    clip-path: none;
    transition:
      opacity 1.1s var(--fl-ease) 0.2s,
      transform 1.1s var(--fl-ease) 0.2s;
  }

  .fl-reveal.is-visible .fl-story--ending .fl-story__media {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------------ phones */

@media (max-width: 899px) {

  .fl-story--ending .fl-story__media {
    max-width: 22rem;
    margin-inline: auto 0;
  }

  .fl-story--ending .fl-story__title {
    max-width: 100%;
  }
}