/* Raffle ticket claim + celebration — builds on styles.css tokens */

/* A drop darker than the shared --muted token, used only on this page's
   small grey text (subtext, fallback link, note, etc.) for readability. */
:root{ --claim-muted: #6b5f77; }

.claim-wrap{
  position:relative;min-height:100vh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;background:var(--hero-grad);
}

#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.claim-flash{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.95),rgba(255,214,120,.4) 40%,rgba(255,255,255,0) 70%);}
.claim-flash.go{animation:claim-flash .7s ease-out}
@keyframes claim-flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

.claim-view{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center}
.claim-view.is-hidden{display:none}

/* ---- branding (below the card — mobile only, see media query) ---- */
.claim-brand{display:none;text-align:center;margin-top:48px}
.claim-brand h1{font-family:var(--font-display);font-weight:600;font-size:clamp(1.15rem,2.6vw,1.5rem);
  color:var(--ink);letter-spacing:-.02em;line-height:1.1;margin:0}
.claim-brand .accent{color:var(--ink-2);font-style:italic}

/* ---- raffle homepage logo (index.html — always visible, above the card) ---- */
.raffle-brand{text-align:center;margin-bottom:30px}
.raffle-brand-icon{width:64px;height:auto;margin-bottom:14px;filter:drop-shadow(0 4px 10px rgba(60,20,84,.18))}
.raffle-brand h1{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.15;
  font-size:clamp(1.9rem,5vw,2.5rem);color:var(--ink);margin:0}
.raffle-brand h1 .accent{
  font-style:italic;font-weight:600;display:inline-block;line-height:1.25;
  background:linear-gradient(120deg,var(--ink) 0%,var(--ink-2) 60%,var(--coral) 130%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---- card ---- */
.claim-card{width:100%;max-width:440px;background:var(--paper);border-radius:var(--r-lg);
  padding:38px 32px 30px;text-align:center;box-shadow:var(--shadow-lg)}
.claim-card.success,.claim-card.commentcard{max-width:500px;padding:46px 42px 38px}
.claim-h{font-family:var(--font-display);font-weight:600;font-size:clamp(1.25rem,2.8vw,1.55rem);line-height:1.35;color:var(--ink);margin:0 0 10px}
.claim-sub{color:var(--body);font-size:1.02rem;line-height:1.5;margin:0 0 24px}
.claim-sub.big{font-size:1.1rem;font-weight:500;margin-bottom:22px}
.claim-sub-small{color:var(--claim-muted);font-size:.86rem;line-height:1.5;margin:0 0 22px}

.day-pill{display:inline-block;color:var(--ink-2);
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:14px}

/* ---- form ---- */
.claim-form{display:flex;flex-direction:column;gap:14px}
.claim-form input[type="email"],.claim-form input[type="text"]{width:100%;padding:17px 20px;border-radius:100px;border:1.5px solid var(--line);
  background:#fff;font-family:var(--font-body);font-size:1.05rem;color:var(--ink)}
.claim-form input[type="email"]:focus,.claim-form input[type="text"]:focus{outline:2px solid var(--orange2);outline-offset:2px}
.claim-form .btn{width:100%}

.claim-error{color:#9C2B2B;margin:12px 0 0;font-size:.9rem;font-weight:600}
.claim-error[hidden]{display:none}

.claim-fallback{margin:30px 0 0;font-size:.84rem;color:var(--claim-muted)}
.claim-fallback a{text-decoration:none}

/* ---- home actions ---- */
.home-actions{display:flex;flex-direction:column;gap:14px}
.home-actions .btn{width:100%}

/* ---- header: logo + "40 Days to Forgiveness" (desktop: fixed top-left; mobile: see media query) ---- */
.claim-header{position:fixed;top:18px;left:18px;z-index:4;display:flex;align-items:center;gap:12px}
.claim-mc{display:block;opacity:.9;transition:opacity .2s}
.claim-mc:hover{opacity:1}
.claim-mc img{width:118px;height:auto}
.claim-header-brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--ink-2);
  letter-spacing:-.01em;text-decoration:none;opacity:.92;transition:opacity .2s}
.claim-header-brand:hover{opacity:1}
.claim-header-brand em{font-style:italic;font-weight:700;color:var(--ink)}
.claim-brand-icon{width:26px;height:auto;flex:none;display:block;filter:drop-shadow(0 2px 5px rgba(60,20,84,.18))}

@media (max-width:640px){
  .claim-header{
    position:static;order:5;top:auto;left:auto;
    margin:40px auto 0;justify-content:center;
  }
  .claim-header-brand{display:none}
  .claim-brand{display:block}
}

/* ---- success ---- */
.claim-emoji{font-size:3.1rem;line-height:1;margin-bottom:4px;display:inline-block}
.claim-headline{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,4vw,2.3rem);line-height:1.25;color:var(--ink);margin:0 0 4px}
.claim-help{margin:14px 0 0;font-size:.84rem;color:var(--claim-muted)}
.claim-help[hidden]{display:none}
.claim-help a{text-decoration:underline}

.success.animate{animation:claim-popin .7s cubic-bezier(.18,.9,.3,1.2)}
@keyframes claim-popin{0%{opacity:0;transform:scale(.7) translateY(20px)}60%{transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
.success.animate .claim-emoji{animation:claim-pop 1.1s ease-out .15s both}
@keyframes claim-pop{0%{transform:scale(0) rotate(-30deg)}55%{transform:scale(1.3) rotate(10deg)}100%{transform:scale(1)}}

/* ---- realistic raffle ticket ---- */
.ticket{position:relative;display:flex;align-items:stretch;width:92%;max-width:360px;margin:0 auto 38px;border-radius:12px;
  background:linear-gradient(135deg,#FFDD8C 0%,#F7B23F 55%,#F49B2E 100%);
  box-shadow:0 16px 30px -12px rgba(230,150,20,.65),inset 0 0 0 2px rgba(255,255,255,.35);transform:rotate(-4deg)}
.success.animate .ticket{animation:ticketIn .65s cubic-bezier(.2,.9,.3,1.4) .45s both}
@keyframes ticketIn{0%{opacity:0;transform:scale(.85) rotate(-4deg)}100%{opacity:1;transform:scale(1) rotate(-4deg)}}
.ticket-main{position:relative;flex:1;padding:24px 10px;min-height:148px;display:flex;flex-direction:column;justify-content:center}
.ticket-main::before{content:"";position:absolute;inset:7px;border:1.5px dashed rgba(60,20,84,.35);border-radius:8px}
.tnum{font-family:var(--font-display);font-weight:700;font-size:4.3rem;line-height:1;color:var(--ink);text-shadow:0 2px 0 rgba(255,255,255,.45)}
.tlabel{font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:#7a3f04;margin-top:14px}
.ticket-stub{position:relative;width:70px;flex:none;display:flex;align-items:center;justify-content:center;border-left:2.5px dashed rgba(60,20,84,.45)}
.ticket-stub span{writing-mode:vertical-rl;text-orientation:mixed;font-weight:800;font-size:.85rem;letter-spacing:.1em;color:#8a4a05;font-variant-numeric:tabular-nums}
.ticket::before,.ticket::after{content:"";position:absolute;right:67px;width:18px;height:18px;border-radius:50%;background:var(--paper);z-index:2}
.ticket::before{top:-9px}
.ticket::after{bottom:-9px}

/* ---- prize: gift card image + text, 2 columns ---- */
.prize-row{display:flex;align-items:center;gap:16px;text-align:left}
.giftcard{width:78px;height:auto;flex:none;display:block;filter:drop-shadow(0 6px 14px rgba(35,47,62,.3))}

.claim-foot{color:var(--claim-muted);font-size:.92rem;line-height:1.45;margin:0;font-weight:500;text-align:left}

.claim-note{color:var(--claim-muted);font-size:.82rem;font-style:italic;line-height:1.45;margin:14px 0 0;text-align:left}

/* ---- comment (its own card now) ---- */
.commentcard{margin-top:18px;text-align:left}
.commentcard label{display:block;font-size:.86rem;color:var(--body);margin-bottom:8px;font-weight:600;line-height:1.4}
.commentcard label span{color:var(--claim-muted);font-weight:500}
.commentcard textarea{width:100%;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:#fff;
  font-family:var(--font-body);font-size:.95rem;color:var(--ink);resize:vertical;min-height:70px;margin-bottom:10px}
.commentcard textarea:focus{outline:2px solid var(--orange2);outline-offset:2px}
.commentcard .btn{width:100%}
.comment-status{margin:10px 0 0;text-align:center;font-weight:600;color:#166534}
.comment-status[hidden]{display:none}

.see-all-link{display:block;width:fit-content;margin:34px auto 0;position:relative;z-index:1}

.share-invite{margin:22px auto 0;max-width:430px;text-align:center;font-size:1.02rem;color:var(--body);line-height:1.55;position:relative;z-index:1}
.share-invite a{color:var(--ink-2);font-weight:700;text-decoration:underline}
.share-invite.sms-invite{margin-top:8px}

/* thank-you (after comment submitted) */
.thanks-final{padding:34px 12px;text-align:center}
.thanks-final .thanks-check{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#EAF9EF;margin-bottom:14px}
.thanks-final .thanks-check svg{width:30px;height:30px}
.thanks-final p{font-family:var(--font-display);font-weight:600;font-size:1.45rem;color:var(--ink);margin:0}

@media (prefers-reduced-motion: reduce){
  .claim-flash,
  .success.animate,
  .success.animate .claim-emoji,
  .success.animate .ticket{animation:none !important}
}