/* ============================================================
   Thank-you page — loaded AFTER styles.css, which supplies the
   palette, fonts, .frame, .lang-toggle, .countdown, .canister
   and .lbtn. Everything here is scoped to .ty-* so the invite
   page is untouched.
   ============================================================ */

/* The invitation video can't be reused here — its text is baked in and
   still says "you are invited" — so the ground is a walnut gradient with
   the same film grain the viewfinder uses. */
.ty-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 70% at 50% 0%,   rgba(194,161,99,.20), transparent 60%),
    radial-gradient(120% 60% at 50% 100%, rgba(122,58,45,.22),  transparent 62%),
    linear-gradient(170deg, #574631 0%, var(--walnut) 42%, var(--walnut-deep) 100%);
}
.ty-grain{
  position:absolute; inset:0; opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* body is position:fixed/overflow:hidden, so this pane owns the scrolling */
.ty-scroll{
  position:absolute; inset:0; z-index:10;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top,0px) + 66px) 22px calc(30px + var(--safe-b));
}
.ty-inner{
  min-height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--cream);
}

/* Staggered entrance. The opacity:0 start state is gated behind .reveal,
   which thankyou.js only adds once the tab is actually visible — a hidden
   tab pauses CSS animations, and WhatsApp opens links into one, so an
   ungated start state would leave the page blank until it was foregrounded.
   Default (no class) is fully visible. */
.ty-inner.reveal > *{ opacity:0; transform:translateY(14px); animation:rise .9s var(--ease) forwards; }
.ty-inner > *:nth-child(1){ animation-delay:.05s; }
.ty-inner > *:nth-child(2){ animation-delay:.15s; }
.ty-inner > *:nth-child(3){ animation-delay:.28s; }
.ty-inner > *:nth-child(4){ animation-delay:.38s; }
.ty-inner > *:nth-child(5){ animation-delay:.46s; }
.ty-inner > *:nth-child(6){ animation-delay:.56s; }
.ty-inner > *:nth-child(7){ animation-delay:.70s; }
.ty-inner > *:nth-child(8){ animation-delay:.78s; }
.ty-inner > *:nth-child(9){ animation-delay:.84s; }
.ty-inner > *:nth-child(10){ animation-delay:.90s; }
.ty-inner > *:nth-child(11){ animation-delay:.98s; }
@media (prefers-reduced-motion:reduce){
  .ty-inner > *{ animation:none; opacity:1; transform:none; }
}

.ty-kicker{
  margin:0 0 10px; font-family:var(--serif);
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-soft);
}
.ty-h{
  margin:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(44px, 15vw, 62px); line-height:1; letter-spacing:.01em;
  color:var(--cream-soft);
}

.ty-orn{ width:132px; height:13px; margin:15px 0 16px; color:rgba(216,189,138,.72); }
.ty-orn svg{ fill:currentColor; stroke:currentColor; stroke-width:1; }
.ty-orn path:first-child{ fill:none; stroke-width:1; }

.ty-arab{
  margin:0 0 8px; font-family:var(--arab); font-size:25px; line-height:1.6;
  color:var(--gold-soft);
}
.ty-arab-en{
  margin:0 0 20px; font-style:italic; font-size:14.5px;
  color:rgba(244,236,221,.62);
}
.ty-body{
  margin:0 0 26px; font-size:16px; line-height:1.62;
  color:rgba(244,236,221,.86); max-width:31ch;
}

/* ---------------- the guest film ---------------- */
.ty-card{
  width:100%; max-width:340px; margin:0 0 32px;
  padding:22px 20px 22px; border-radius:20px;
  background:rgba(20,14,8,.34);
  border:1px solid rgba(216,189,138,.24);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:0 14px 34px rgba(20,13,6,.3);
}
.ty-card .canister{ width:56px; height:56px; margin:0 auto 12px; }

.ty-card-kick{
  margin:0 0 8px; font-family:var(--serif);
  font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(216,189,138,.75);
}
.ty-card-h{
  margin:0 0 10px; font-family:var(--serif); font-weight:600;
  font-size:26px; line-height:1.2; color:var(--cream);
}
.ty-card-p{
  margin:0 auto 17px; font-size:15px; line-height:1.55;
  color:rgba(244,236,221,.7); max-width:29ch;
}

/* the shared .countdown is sized for the gallery's full width; inside the
   card it has to survive a 320px-wide phone, so the cells flex instead */
.ty-card .countdown{ gap:7px; }
.ty-card .countdown div{ min-width:0; flex:1; padding:11px 4px; }
.ty-card .countdown b{ font-size:24px; }

.ty-when{
  margin:16px 0 0; font-size:12px; letter-spacing:.1em;
  color:rgba(244,236,221,.5);
}

/* .lbtn.primary is walnut-on-cream, which disappears against this ground */
.ty-btn.lbtn.primary{
  background:linear-gradient(180deg, var(--gold-soft), var(--gold-deep));
  color:#33280f; border-color:transparent;
  box-shadow:0 10px 22px rgba(0,0,0,.34);
}

/* ---------------- signature ---------------- */
.ty-sign{
  margin:0 0 4px; font-style:italic; font-size:15px;
  color:rgba(244,236,221,.6);
}
.ty-names{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:29px; letter-spacing:.02em; color:var(--gold-soft);
}
.ty-date{
  margin:8px 0 0; font-family:var(--serif);
  font-size:11.5px; letter-spacing:.32em; color:rgba(244,236,221,.45);
}

.ty-back{
  margin-top:34px; padding:9px 18px; border-radius:999px;
  border:1px solid rgba(216,189,138,.3);
  font-family:var(--serif); font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(244,236,221,.72);
  transition:background .25s, color .25s;
}
.ty-back:active{ background:rgba(216,189,138,.16); color:var(--cream); }

/* short screens: pull the vertical rhythm in so it still fits without scroll */
@media (max-height:700px){
  .ty-orn{ margin:14px 0 15px; }
  .ty-arab{ font-size:22px; }
  .ty-body{ margin-bottom:24px; font-size:15.5px; }
  .ty-card{ margin-bottom:26px; padding:22px 18px 20px; }
}