/* ==========================================================================
   AFTER-SHOW THANK YOU  (after-show.html)
   Loaded on top of styles.css, which supplies the fonts, colour tokens,
   reset and the .btn styles. Only what is specific to this page lives here.
   ========================================================================== */

/* styles.css puts the site on a cream ground; this page is a dark surface. */
body.thanks { background: var(--night); }

.page {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 4.5rem) var(--pad);
  overflow: hidden;
}

/* Desktop: the page is one screen, no scrolling. fit-page.js scales
   .page__inner down (uniformly, everything in proportion) only if the
   content would otherwise be taller than the viewport. */
@media (min-width: 900px) {
  html, body { height: 100%; overflow: hidden; }
  .page { height: 100vh; min-height: 0; padding-block: clamp(0.5rem, 2.5vh, 2.5rem); }
}
/* Flat, no gradient, matching how dark surfaces are handled site-wide. */
.page__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(18, 12, 8, 0.5); }

.page__inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 52rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.thanks__logo {
  width: clamp(128px, 21vw, 176px);
  height: auto;
  margin-bottom: clamp(1.5rem, 4.5vw, 2.85rem);
}

/* ---------------------------------------------------------------- card --- */
.card {
  position: relative;
  width: 100%;
  background: rgba(247, 240, 223, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
          backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 44px;
  padding: clamp(1.75rem, 5.5vw, 3.75rem);
  box-shadow: 0 34px 80px -30px rgba(0, 0, 0, 0.8);
}
/* Backdrop-filter isn't supported everywhere; fall back to the solid
   card so text stays legible instead of sitting on bare photos. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card { background: var(--cream); }
}
.card__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.15rem, 6.2vw, 3.35rem);
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.card p { color: var(--ink-soft); font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.15rem); }
.card p + p { margin-top: 1.1rem; }
.card strong { color: var(--ink); font-weight: 600; }

.card .card__closing {
  margin-top: 1.75rem;
  font-family: var(--display);
  font-size: clamp(1.3rem, 3.4vw, 1.7rem);
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--terracotta);
}
.card .card__signoff {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}

@media (min-width: 900px) {
  .card { border-radius: 50px; }
}

/* ------------------------------------------------------ decor hearts --- */
/* Big, soft-focus hearts bleeding off two corners of the card, echoing
   the reference flyer. Slow float is fine at this size (unlike the small
   credit heart, which stays still so it doesn't distract next to text). */
.heart-deco {
  --heart-size: clamp(70px, 16vw, 220px);
  position: absolute;
  width: var(--heart-size);
  height: auto;
  z-index: 3;
  pointer-events: none;
  filter: blur(2px) drop-shadow(0 0 30px rgba(255, 40, 30, 0.55)) drop-shadow(0 0 70px rgba(255, 20, 20, 0.3));
  animation: heart-deco-float 7s ease-in-out infinite;
}
/* Offsets are sized off the heart's own box (not the card's, which
   percentages would resolve against and which varies a lot in height).
   The bottom-left one bleeds out further than the top-right one does,
   since the "Tarama Ent" signoff sits right in that corner and needs
   the heart mostly off the card, not sitting on top of the text. */
.heart-deco--tr {
  top: calc(var(--heart-size) * -0.3);
  right: calc(var(--heart-size) * -0.16);
}
.heart-deco--bl {
  bottom: calc(var(--heart-size) * -0.8);
  left: calc(var(--heart-size) * -0.8);
  animation-delay: -3.5s;
}
@keyframes heart-deco-float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-16px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .heart-deco { animation: none; }
}

/* ----------------------------------------------------------------- ask --- */
.ask {
  margin-top: clamp(1.75rem, 5.5vw, 3.1rem);
  text-align: center;
  max-width: 36rem;
}
.ask__text {
  color: rgba(247, 240, 223, 0.82);
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
  text-shadow: 0 1px 14px rgba(12, 8, 5, 0.7);
}
.ask__btn { padding: 1.15rem 2.6rem; }
/* The brand triangle doubles as the button's forward arrow. */
.ask__btn::after {
  content: "";
  width: 10px; height: 8px;
  background: var(--cream);
  -webkit-mask: url("../img/triangle-mark.svg") center / contain no-repeat;
          mask: url("../img/triangle-mark.svg") center / contain no-repeat;
}

/* -------------------------------------------------------------- credit --- */
.credit {
  margin-top: clamp(1.25rem, 3.5vw, 2.25rem);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: rgba(247, 240, 223, 0.5);
  text-shadow: 0 1px 10px rgba(12, 8, 5, 0.6);
}
.credit a {
  color: rgba(247, 240, 223, 0.85);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.18s ease;
}
.credit a:hover { color: var(--cream); }
.credit__heart {
  width: 20px;
  height: 20px;
  filter: blur(0.4px) drop-shadow(0 0 6px rgba(255, 70, 60, 0.55));
}