/* ============================================================
   Footer CTA — the doorway (R5, Option 3).
   The same room as the hero, seen from the doorway:
     • beam descends from above
     • orb hangs high (the lamp)
     • horizon line (the threshold of the floor)
     • large pool of light on the floor (the threshold itself)
     • wordmark sits INSIDE the pool, painted on the floor
     • CTA inline inside the wordmark composition

   IT wordmark is significantly longer than EN, so the per-language
   font-size lets both feel comparable in visual mass:
     EN — 240px desktop / 96px mobile
     IT — 132px desktop / 56px mobile (lang="it" override below)

   The R4 period-as-orb mechanic is gone. The orb is now a fixed
   element in the scene, not tied to typographic punctuation.
   ============================================================ */

:root {
  --footer-horizon-y: 36%;
  /* v10 — orb nudged down + over to the right so it sits ABOVE the
     doorway lintel (doorway image is shifted right in v9/v10). The dot
     now reads as the light source at the top of the chamber, not as a
     decorative sticker. */
  --footer-orb-y: 24%;
  --footer-orb-x: 50%;
  /* Beam height as a viewport unit so calc() inside keyframes works.
     Matches --footer-orb-y at typical viewport heights (660-880px). */
  --footer-beam-h: 160px;
}

.footer-cta {
  position: relative;
  /* tall enough to feel like a room — orb hangs near the top, wordmark
     near the bottom on the floor */
  min-height: clamp(640px, 92vh, 880px);
  padding-top: clamp(5rem, 11vw, 9rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
  isolation: isolate;
}

/* v9 — Stanza doorway image SHIFTED RIGHT so the bright amber center of
   the doorway sits in the right half of the viewport, NOT under the
   wordmark text. AD flagged 'STANZA DELLO SPIRITO' losing contrast on
   the O's at v8 — that was the doorway glow column dead-center. Moving
   the door right turns the page into a composition: type on the dark
   left, doorway breathing on the right. */
.footer-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url('../../assets/img/hero-07-doorway.jpg');
  background-size: cover;
  background-position: 78% 55%;
  opacity: 0.74;
  pointer-events: none;
}
.footer-cta::after {
  /* darken left third (where wordmark lives) + top + bottom; leave the
     right half bright so the doorway holds. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* horizontal: dark left for type, bright right for doorway */
    linear-gradient(
      90deg,
      rgba(10, 12, 24, 0.78) 0%,
      rgba(10, 12, 24, 0.55) 25%,
      rgba(10, 12, 24, 0.12) 55%,
      rgba(10, 12, 24, 0.0) 80%,
      rgba(10, 12, 24, 0.0) 100%
    ),
    /* vertical: pin edges */
    linear-gradient(
      180deg,
      rgba(10, 12, 24, 0.55) 0%,
      rgba(10, 12, 24, 0.0) 28%,
      rgba(10, 12, 24, 0.0) 72%,
      rgba(10, 12, 24, 0.92) 100%
    );
  pointer-events: none;
}

@media (max-width: 768px) {
  .footer-cta::before { background-position: 50% 60%; opacity: 0.62; }
  .footer-cta::after {
    background: linear-gradient(
      180deg,
      rgba(10, 12, 24, 0.7) 0%,
      rgba(10, 12, 24, 0.2) 30%,
      rgba(10, 12, 24, 0.2) 70%,
      rgba(10, 12, 24, 0.92) 100%
    );
  }
}

/* a soft floor-glow at the very bottom, mirroring the hero's ceiling glow */
.footer-cta__glow {
  position: absolute;
  inset: 30% -10% -20% -10%;
  background: radial-gradient(
    ellipse 60% 50% at 50% 100%,
    rgba(233, 69, 96, 0.16) 0%,
    transparent 70%
  );
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
  opacity: 1; /* baseline visible — R5 defensive rule */
}

/* ---------- Horizon (the floor of the chamber) ---------- */

.footer-cta__horizon {
  top: var(--footer-horizon-y);
  z-index: 0;
}

/* ---------- Pool of light (the threshold) ----------
   Larger than the hero pool — the AD calls it the doorway itself.
   ~70% of section width, ~16% peak opacity. Pulses with the orb.
*/

.footer-cta__pool {
  /* v10 — pool follows the orb horizontally so the chamber light
     reads as a single column: orb at top → beam → pool at bottom. */
  left: var(--footer-orb-x);
  top: var(--footer-horizon-y);
  --pool-width: clamp(420px, 64vw, 880px);
  --pool-peak: 0.18;
  z-index: 0;
}

/* ---------- Vertical beam descending from above the section ----------
   The beam now lives as a positioned element inside the section, NOT
   nested inside the wordmark (R4 had it inside the orb-wrap span).
   It descends from the top of the section into the orb's top edge.
   Baseline opacity 1 — defensive against the R4 reduced-motion bug.
*/

.footer-cta__beam {
  position: absolute;
  top: 0;
  /* v10 — anchored under the orb (follows --footer-orb-x) so the beam
     descends from above into the orb above the doorway light column. */
  left: var(--footer-orb-x);
  transform: translateX(-50%);
  width: 1px;
  /* descends from the top of the section into the orb top. We use a
     fixed-px var so the slug-travel keyframe can read it cleanly. */
  height: var(--footer-beam-h);
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(233, 69, 96, 0) 0%,
    rgba(233, 69, 96, 0.42) 50%,
    rgba(233, 69, 96, 0.7) 92%,
    rgba(233, 69, 96, 0.9) 100%
  );
  /* Baseline visible — fixes the R4 reduced-motion bug. */
  opacity: 1;
  transition: filter 800ms var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .footer-cta__beam {
    animation: hero-beam-settle 1400ms var(--ease-out) 400ms backwards;
  }
}

/* the slug element — the only animated part of the beam */
.footer-cta__beam-slug {
  position: absolute;
  top: 0;
  left: -1px;
  width: 3px;
  height: 56px;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    rgba(233, 69, 96, 0) 0%,
    rgba(233, 69, 96, 0.95) 50%,
    rgba(233, 69, 96, 0) 100%
  );
  filter: blur(0.5px) drop-shadow(0 0 5px rgba(233, 69, 96, 0.6));
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.footer-cta__beam.is-pulsing .footer-cta__beam-slug {
  animation: footer-beam-slug-travel 620ms var(--ease-out);
}

.footer-cta__beam.is-spent {
  filter: brightness(0.72);
}

@keyframes footer-beam-slug-travel {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(0, calc(var(--footer-beam-h) - 56px), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-cta__beam {
    opacity: 1 !important;
    animation: none !important;
  }
  .footer-cta__beam-slug,
  .footer-cta__beam.is-pulsing .footer-cta__beam-slug {
    animation: none !important;
    opacity: 0 !important;
  }
  .footer-cta__beam.is-spent {
    filter: none !important;
  }
}

/* ---------- Orb hangs at the end of the beam ----------
   Smaller than the hero orb — distant lamp. Still on the same heartbeat.
*/

.footer-cta__orb-wrap {
  position: absolute;
  /* v10 — uses --footer-orb-x token so horizontal position can shift
     to align with the doorway when image is offset. */
  left: var(--footer-orb-x);
  top: var(--footer-orb-y);
  transform: translate(-50%, -50%);
  width: clamp(36px, 3.5vw, 52px);
  height: clamp(36px, 3.5vw, 52px);
  z-index: 1;
  pointer-events: none;
}

/* v10 desktop — orb sits above the doorway light column (which is at
   ~70% horizontal due to background-position 78%). On mobile the door
   is centered so the orb stays at 50%. */
@media (min-width: 900px) {
  .footer-cta {
    --footer-orb-x: 70%;
  }
}

.footer-cta__orb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow:
    0 0 12px rgba(233, 69, 96, 0.55),
    0 0 30px rgba(233, 69, 96, 0.3);
  will-change: transform, box-shadow;
}

.footer-cta__orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(233, 69, 96, 0.5);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.footer-cta__orb-wrap.is-breathing .footer-cta__orb {
  animation: footer-orb-breath 560ms var(--ease-in-out);
}
.footer-cta__orb-wrap.is-breathing .footer-cta__orb-ring {
  animation: footer-orb-ring 900ms var(--ease-out);
}

@keyframes footer-orb-breath {
  0% { transform: scale(1); }
  45% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@keyframes footer-orb-ring {
  0% { opacity: 0; transform: scale(1); }
  18% { opacity: 0.55; }
  100% { opacity: 0; transform: scale(2.6); }
}

@media (prefers-reduced-motion: reduce) {
  .footer-cta__orb-wrap.is-breathing .footer-cta__orb,
  .footer-cta__orb-wrap.is-breathing .footer-cta__orb-ring {
    animation: none !important;
  }
  .footer-cta__orb-ring {
    display: none;
  }
}

/* ---------- The inner composition — wordmark sits inside the pool ---------- */

.footer-cta__inner {
  position: relative;
  z-index: 2;
  /* Vertically push the wordmark down so it lands ON the floor — its
     top sits inside the pool, below the horizon. Calculated to leave
     room for the orb above and the meta-row at the bottom. */
  padding-top: clamp(2rem, 6vh, 6rem);
  /* No max-width / container constraint — the wordmark itself uses
     viewport-width gutters, so IT can bleed past the right viewport. */
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
  max-width: none;
}

/* All non-wordmark children stay constrained to .container width */
.footer-cta__action-row,
.footer-meta {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/*
  R6 footer wordmark — Apoc Bold uppercase.
  EN: short phrase fits inside the viewport at 240px.
  IT: long phrase is allowed to bleed past the right viewport edge at
      132px — the cropping is the brand. The wordmark hugs the left
      edge of the container; each line is white-space: nowrap so the
      browser doesn't wrap. The page body has overflow-x: hidden so
      no horizontal scrollbar appears.
*/
.footer-cta__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-wordmark);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  color: var(--color-fg);
  margin: 0;
  display: block;
  white-space: nowrap;
  /* Gutter-aligned left flush, but NO right padding — viewport edge
     is the crop on IT. The browser does not draw a horizontal scrollbar
     because <body> has overflow-x: hidden. */
  padding-left: var(--gutter);
  padding-right: 0;
}
.footer-cta__wordmark > span {
  display: block;
}

html[lang='en'] .footer-cta__wordmark {
  font-size: var(--fs-wordmark-footer-en);
}
html[lang='it'] .footer-cta__wordmark {
  font-size: var(--fs-wordmark-footer-it);
}

/* ---------- Wordmark line-by-line arrival ----------
   Each line slides up 12px + fades in over 480ms, 120ms stagger.
   Lines marked as bleeding (.footer-cta__wordmark-line--bleed) slide
   in from the right edge, accentuating the "this exceeds the viewport"
   gesture so the visitor sees the last letters arrive last, just
   before they crop.
*/
.footer-cta__wordmark > span {
  opacity: 0;
  transform: translateY(14px);
}
.footer-cta__wordmark > span.footer-cta__wordmark-line--bleed {
  transform: translate(80px, 14px);
}

@media (prefers-reduced-motion: no-preference) {
  .footer-cta.is-revealed .footer-cta__wordmark > span {
    animation: footer-word-rise 520ms var(--ease-out) forwards;
  }
  .footer-cta.is-revealed .footer-cta__wordmark > span:nth-child(1) { animation-delay: 60ms; }
  .footer-cta.is-revealed .footer-cta__wordmark > span:nth-child(2) { animation-delay: 180ms; }
  .footer-cta.is-revealed .footer-cta__wordmark > span:nth-child(3) { animation-delay: 300ms; }
}
@keyframes footer-word-rise {
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .footer-cta__wordmark > span,
  .footer-cta__wordmark > span.footer-cta__wordmark-line--bleed {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Inline CTA — sits inside the wordmark composition ---------- */

.footer-cta__action-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  opacity: 0;
  transform: translateY(8px);
}
@media (prefers-reduced-motion: no-preference) {
  .footer-cta.is-revealed .footer-cta__action-row {
    animation: footer-word-rise 360ms var(--ease-out) 620ms forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .footer-cta__action-row {
    opacity: 1;
    transform: none;
  }
}

.footer-cta__btn {
  padding: 1.1rem 2rem;
  font-size: 1rem;
  background: var(--color-red);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 20px 50px -10px rgba(233, 69, 96, 0.45);
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.footer-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 60px -10px rgba(233, 69, 96, 0.6);
}

.footer-cta__btn .arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}
.footer-cta__btn:hover .arrow {
  transform: translateX(4px);
}

.footer-cta__pulse-once {
  animation: cta-arrival-pulse 600ms var(--ease-out);
}

@keyframes cta-arrival-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ---------- The thin footer below ---------- */

.footer-meta {
  position: relative;
  z-index: 3;
  margin-top: clamp(3rem, 8vw, 6rem);
  border-top: 1px solid var(--color-border);
  padding-block: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer-meta__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-fg);
}

.footer-meta__links {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  flex-wrap: wrap;
}

.footer-meta__sep {
  color: var(--color-border-strong);
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .footer-cta__pulse-once {
    animation: none;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 720px) {
  .footer-cta {
    min-height: 640px;
  }
  .footer-cta__pool {
    --pool-width: clamp(280px, 84vw, 480px);
  }
  /* Push the wordmark below the orb on mobile so the lamp doesn't
     intersect the type. The orb sits at 18% (~115px on a 640px section)
     so the wordmark needs ~180px of breathing room above its first line. */
  .footer-cta__inner {
    padding-top: clamp(3.5rem, 12vh, 7rem);
  }
}