/* Homepage gift strip: the same 3D gift card as the landing pages (lp.css .gc), scoped to .gs-card.
   It waits until the strip is on screen, spins in once, lands on the front, then can be flipped. */
.gift-strip.gs-std.has-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text card" "cta card";align-items:center;column-gap:clamp(24px,4vw,56px);row-gap:18px;padding:clamp(24px,3vw,36px)}
.gift-strip.gs-std.has-card .gs-text{grid-area:text;align-self:end}
.gift-strip.gs-std.has-card>.cta{grid-area:cta;justify-self:start;align-self:start}
.gs-card{grid-area:card;--o:#f47708;--paper:#f4f1e9;--muted:#bdbdb4;--hb:'DM Sans',system-ui,sans-serif;--hh:'Manrope',system-ui,sans-serif;
  perspective:1400px;display:flex;align-items:center;justify-content:center;padding:6px 0}
.gs-card .gc{position:relative;width:clamp(260px,30vw,380px);aspect-ratio:1.586/1;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;cursor:pointer;outline:none;will-change:transform}
.gs-card .gc-face,.gs-card .gc-face *,.gs-card .gc-front:after{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.gs-card .gc-face{position:absolute;inset:0;border-radius:16px;overflow:hidden;padding:clamp(14px,1.8vw,22px);display:flex;flex-direction:column;box-shadow:0 26px 54px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.08);text-align:left}
.gs-card .gc-front{transform:rotateY(0deg) translateZ(1px);background:radial-gradient(120% 90% at 100% 0%,rgba(244,119,8,.55),rgba(244,119,8,0) 55%),linear-gradient(135deg,#1d1b18,#0e0d0c 60%,#1a120a)}
.gs-card .gc-front:after{content:"";position:absolute;right:-36px;bottom:-46px;width:210px;height:210px;background:url(brand/claws-orange.svg) no-repeat center/contain;opacity:.13}
.gs-card .gc-back{transform:rotateY(180deg) translateZ(1px);background:linear-gradient(135deg,#171513,#0d0c0b)}
.gs-card .gc:focus-visible .gc-face{box-shadow:0 0 0 3px var(--o),0 26px 54px rgba(0,0,0,.55)}
.gs-card .gc-sheen{position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);transform:translateX(-60%);pointer-events:none}
.gs-card .gc.gc-landed .gc-sheen{animation:hg-sheen 5.5s ease-in-out .4s infinite}
@keyframes hg-sheen{0%,70%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.gs-card .gc-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;position:relative;z-index:1}
.gs-card .gc-row img{height:clamp(30px,3.2vw,40px);width:auto}
.gs-card .gc-tag{font:700 10.5px/1 var(--hb);letter-spacing:.2em;text-transform:uppercase;color:var(--o);margin-top:6px}
.gs-card .gc-mid{margin-top:auto;position:relative;z-index:1}
.gs-card .gc-mid small{display:block;font-size:12.5px;color:var(--muted)}
.gs-card .gc-mid strong{display:block;font:800 clamp(24px,2.8vw,34px)/1.02 var(--hh);letter-spacing:-.03em;color:var(--paper)}
.gs-card .gc-mid .plus{display:block;font:700 13.5px var(--hh);color:var(--o);margin-top:4px}
.gs-card .gc-bottom{margin-top:auto;align-items:flex-end;font-size:11.5px;color:var(--muted)}
.gs-card .gc-for{font:700 14.5px var(--hb);color:var(--paper)}
.gs-card .gc-stripe{position:absolute;left:0;right:0;top:18px;height:34px;background:#050505}
.gift-strip .gs-card p.gc-msg{margin:58px 0 0;font-size:13px;line-height:1.45;color:#e8e4da}
.gs-card .gc-code{margin-top:auto}
.gs-card .gc-code span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gs-card .gc-code b{font:700 clamp(17px,1.9vw,22px)/1.15 var(--hh);color:var(--paper)}
.gs-card .gc-back .gc-bottom{margin-top:10px}
.gs-card .gc-back .gc-bottom b{color:var(--paper)}
.gs-card .gc-hint{display:block;text-align:center;font-size:12.5px;color:var(--muted);margin-top:12px}
/* entry: hidden until on screen, then one spin that lands on the front */
.js-gc .gs-card .gc{visibility:hidden;transform:translateY(60px) rotateX(24deg) rotateY(-540deg) scale(.6)}
.js-gc .gs-card .gc.gc-in{visibility:visible;animation:hg-card-in 2.2s cubic-bezier(.22,1,.36,1) forwards}
.js-gc .gs-card .gc.gc-landed{visibility:visible;transform:rotateY(0deg);transition:transform .8s cubic-bezier(.45,0,.55,1)}
.js-gc .gs-card .gc.gc-landed.flipped{transform:rotateY(180deg)}
@keyframes hg-card-in{from{transform:translateY(60px) rotateX(24deg) rotateY(-540deg) scale(.6)}to{transform:translateY(0) rotateX(0deg) rotateY(0deg) scale(1)}}
.gs-card .gc.flipped{transform:rotateY(180deg)}
@media (max-width:700px){
  .gift-strip.gs-std.has-card{grid-template-columns:minmax(0,1fr);grid-template-areas:"card" "text" "cta";justify-items:stretch}
  .gift-strip.gs-std.has-card>.cta{justify-self:stretch;width:100%;text-align:center}
  .gs-card{padding:4px 0 6px}
  .gs-card .gc{width:min(340px,100%)}
  .gs-card .gc-face{padding:13px 15px}
  .gs-card .gc-stripe{top:12px;height:24px}
  .gift-strip .gs-card p.gc-msg{margin-top:42px;font-size:11.5px;line-height:1.4}
  .gs-card .gc-code b{font-size:16px}
  .gs-card .gc-code span{font-size:9px}
  .gs-card .gc-bottom{font-size:10px}
  .gs-card .gc-back .gc-bottom{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  .js-gc .gs-card .gc{visibility:visible;transform:none;animation:none}
  .gs-card .gc-sheen{display:none}
}