/* ============================================================
   ARLO — Closing CTA (component)
   A keepsake paper ticket with a roaster stamp, punched perforation,
   corner pinholes and a quiet ARLO watermark. Typography-led, RTL-first.
   ============================================================ */

.cta {
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
  color: var(--color-ink);
}

.cta__inner {
  display: flex;
  justify-content: center;
  /* More generous than other sections — a pause before the page ends */
  padding-block: clamp(5rem, 12vh, 8.5rem);
}

/* ---------- The ticket ---------- */
.cta__ticket {
  position: relative;
  --cta-pad: clamp(2rem, 5vw, 3.5rem);
  width: min(100%, 40rem);
  padding: clamp(2.75rem, 6vw, 4.25rem) var(--cta-pad);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  box-shadow:
    0 1px 2px rgba(34, 27, 18, 0.04),
    0 24px 48px -28px rgba(34, 27, 18, 0.28);
  /* Corner pinholes — like a punched ticket */
  background-image:
    radial-gradient(circle, var(--color-accent) 1.5px, transparent 2px),
    radial-gradient(circle, var(--color-accent) 1.5px, transparent 2px),
    radial-gradient(circle, var(--color-accent) 1.5px, transparent 2px),
    radial-gradient(circle, var(--color-accent) 1.5px, transparent 2px);
  background-position:
    top 0.9rem start 0.9rem,
    top 0.9rem end 0.9rem,
    bottom 0.9rem start 0.9rem,
    bottom 0.9rem end 0.9rem;
  background-repeat: no-repeat;
  background-size: 0.35rem 0.35rem;
}
/* Quiet ARLO watermark behind the ticket content */
.cta__ticket::after {
  content: "ARLO";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-brand);
  font-size: clamp(6rem, 14vw, 9.5rem);
  letter-spacing: 0.18em;
  color: var(--color-ink);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* Content floats above the watermark (the stamp keeps its own layer) */
.cta__ticket > *:not(.cta__stamp) {
  position: relative;
  z-index: 1;
}

/* ---------- Coffee-roaster stamp ----------
   Circular Latin text on a dashed ring, slightly rotated and
   overlapping the ticket corner like a real applied stamp. */
.cta__stamp {
  position: absolute;
  top: -1.9rem;
  inset-inline-end: -1.2rem;
  width: 7.5rem;
  height: 7.5rem;
  color: var(--color-accent);
  opacity: 0.85;
  transform: rotate(-12deg);
  z-index: 2;
  pointer-events: none;
}
.cta__stamp-text {
  font-family: var(--font-latin);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  fill: currentColor;
}

/* ---------- Ticket head: label + serial ---------- */
.cta__ticket-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.cta__label {
  font-family: var(--font-latin);
  font-size: clamp(0.6875rem, 0.625rem + 0.3125vw, 0.8125rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.cta__serial {
  font-family: var(--font-num); /* classic elegant Latin numerals */
  font-variant-numeric: lining-nums;
  font-size: clamp(0.6875rem, 0.625rem + 0.3125vw, 0.8125rem);
  letter-spacing: 0.22em;
  color: var(--color-ink-soft);
  opacity: 0.7;
}

/* ---------- Title & text ---------- */
.cta__title {
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.4;
  text-wrap: balance;
}

.cta__text {
  margin-top: 1rem;
  font-size: clamp(0.9375rem, 0.875rem + 0.3125vw, 1.0625rem);
  font-weight: 300;
  line-height: 2;
  color: var(--color-ink-soft);
  max-width: 30rem;
}

/* ---------- Perforation ----------
   A dashed tear-line spanning the full ticket width; the two paper
   circles punch semicircular notches through the ticket edges. */
.cta__perf {
  position: relative;
  margin-block: clamp(1.75rem, 4vh, 2.5rem);
  margin-inline: calc(-1 * var(--cta-pad));
  border-top: 2px dashed rgba(91, 83, 66, 0.3);
}
.cta__perf::before,
.cta__perf::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--color-bg);
  transform: translateY(-50%);
}
.cta__perf::before {
  inset-inline-start: -0.7rem;
}
.cta__perf::after {
  inset-inline-end: -0.7rem;
}

/* ---------- Ticket foot: hours + actions ---------- */
.cta__ticket-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem 1.5rem;
}

.cta__hours {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: clamp(0.8125rem, 0.75rem + 0.3125vw, 0.9375rem);
  color: var(--color-ink-soft);
}
.cta__hours-row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}
.cta__hours-row > span:last-child {
  font-family: var(--font-num); /* classic elegant Latin numerals */
  font-variant-numeric: lining-nums;
  font-weight: 500;
  color: var(--color-ink);
}

.cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.75rem;
}

.cta__link {
  position: relative;
  font-size: clamp(0.875rem, 0.8125rem + 0.3125vw, 1rem);
  padding-block: 0.4rem;
  opacity: 0.9;
  transition: opacity var(--dur-fast) var(--ease-out);
}
/* Growing underline — grows from the right in RTL */
.cta__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0.1rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-med) var(--ease-out);
}
.cta__link:hover {
  opacity: 1;
}
.cta__link:hover::after {
  transform: scaleX(1);
}

/* ---------- Reveal on scroll (JS adds .js-reveal, then .is-visible) ---------- */
/* Opacity and transform only — deliberately no blur here. A filtered
   layer has to be re-rasterised on every frame of the reveal, which is
   the most expensive thing a scroll-triggered animation can ask for, and
   on a modest device it is the difference between a lift and a stutter. */
.cta [data-reveal] {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}
.cta.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
}
.cta.js-reveal .cta__ticket { transition-delay: 0.05s; }
/* No filter here: the reveal is opacity + lift only. A leftover
   `filter: blur(0)` used to sit on the visible state, and a filter — even
   an identity one — keeps the element (and its whole subtree) inside its
   own render surface for the rest of the visit, which is a cost paid on
   every frame for no visual gain at all. */
.cta.js-reveal.is-visible [data-reveal] {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Responsive — mobile
   ============================================================ */
@media (max-width: 39.99rem) {
  .cta__inner {
    padding-block: clamp(4rem, 10vh, 6rem);
  }
  .cta__stamp {
    top: -1.5rem;
    inset-inline-end: 0.5rem;
    width: 5.5rem;
    height: 5.5rem;
  }
  .cta__ticket-foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   Responsive — desktop
   The ticket grows with the viewport so it doesn't stay small
   on wide screens — wider paper, more padding, larger stamp.
   ============================================================ */
@media (min-width: 64rem) {
  .cta__inner {
    padding-block: clamp(6rem, 14vh, 10rem);
  }
  .cta__ticket {
    --cta-pad: clamp(3rem, 5vw, 4.25rem);
    width: min(100%, 48rem);
    padding: clamp(3.25rem, 5vw, 4.75rem) var(--cta-pad);
  }
  .cta__stamp {
    top: -2.2rem;
    inset-inline-end: -1.6rem;
    width: 8.5rem;
    height: 8.5rem;
  }
  .cta__title {
    font-size: clamp(2.25rem, 1.875rem + 0.75vw, 3.125rem);
  }
  .cta__text {
    max-width: 34rem;
  }
  .cta__ticket-foot {
    gap: 1.5rem 3rem;
  }
}