/* AbraClubKey: the club unlock moment (Kate 03/11/2026).
   A gold key flies to a gold and pink padlock, goes in, turns, and the shackle lifts and swings open. Then the content is revealed.
   Pure CSS 3D (no library): the lock body, the shackle and the key are each a stack of thin SVG slices, so they have real
   thickness when the stage is seen at an angle. The card stays dark and gold in day and night, like the flagship covers.
   Reduced motion: no flight, no turn; the open lock and the message fade in together. */

.ck{padding:0;border:0;background:transparent;max-width:none;max-height:none;overflow:visible;color:#F6EFE7}
.ck::backdrop{background:radial-gradient(60% 60% at 50% 45%,rgba(120,10,70,.42),rgba(10,7,8,.86));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ck-in{position:relative;width:min(880px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;
  background:radial-gradient(120% 90% at 85% 10%,#2A1420 0%,#17110F 55%,#0E0B0C 100%);border-radius:30px;isolation:isolate;
  box-shadow:0 70px 140px -40px rgba(0,0,0,.8),0 0 0 1px rgba(217,166,58,.32)}
.ck-in::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(140deg,rgba(247,223,151,.9),transparent 28%,transparent 72%,rgba(217,166,58,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ck-x{position:absolute;z-index:6;top:14px;inset-inline-end:14px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1.5px solid rgba(247,223,151,.35);background:rgba(23,17,15,.6);color:#F7DF97;padding:0}
.ck-x svg{width:18px;height:18px}
.ck :focus-visible{outline:3px solid #F7DF97;outline-offset:3px}

/* ---------- the scene ---------- */
.ck-scene{position:relative;height:440px;display:grid;place-items:center;overflow:hidden;border-start-start-radius:30px;border-end-start-radius:30px}
.ck-glow{position:absolute;width:360px;aspect-ratio:1;left:50%;top:54%;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 40% 36%,rgba(255,209,230,.55) 0%,rgba(255,62,157,.42) 34%,rgba(209,10,117,.22) 58%,transparent 72%);filter:blur(18px)}
.ck-floor{position:absolute;width:230px;height:36px;left:50%;top:83%;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);filter:blur(6px)}
.ck-view{position:relative;width:260px;height:320px;perspective:1100px;perspective-origin:50% 40%}
.ck-stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-12deg) rotateY(36deg)}
.ck-stage *{transform-style:preserve-3d}
.ck-defs{position:absolute;width:0;height:0;overflow:hidden}
.ck-sl{position:absolute;inset:0;display:block;width:100%;height:100%;backface-visibility:visible}
.ck-sl svg{display:block;width:100%;height:100%;overflow:visible}

/* lock body: front face 180 x 150 at (40,140), 36px deep */
.ck-body{position:absolute;left:40px;top:140px;width:180px;height:150px}
.ck-sheen{position:absolute;inset:0;border-radius:26px;overflow:hidden;transform:translateZ(18.6px);pointer-events:none}
.ck-sheen::before{content:"";position:absolute;inset:-20% -60%;background:linear-gradient(105deg,transparent 40%,rgba(255,250,230,.75) 50%,transparent 60%);transform:translateX(-70%)}
/* shackle: 120 x 130 at (70,30); the legs go 30px into the body */
.ck-shackle{position:absolute;left:70px;top:30px;width:120px;height:130px}
.ck-swing{position:absolute;inset:0;transform-origin:20px 0}
/* key: the wrapper sits on the keyhole (130,222) on the front face; the shoulder of the key is the origin */
.ck-key{position:absolute;left:130px;top:222px;width:0;height:0;transform:translate3d(0,0,19px)}
.ck-turn{position:absolute;inset:0;transform:rotateZ(-45deg)}
.ck-kb{position:absolute;left:-170px;top:-31px;width:208px;height:62px;transform-origin:170px 31px;transform:rotateY(90deg)}

/* ---------- the burst ---------- */
.ck-burst{position:absolute;left:50%;top:52%;width:0;height:0;pointer-events:none}
.ck-burst i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:2px;background:#F7DF97;opacity:0;rotate:45deg;box-shadow:0 0 10px rgba(247,223,151,.8)}
.ck-burst i:nth-child(3n){background:#FF7DB8;box-shadow:0 0 10px rgba(255,62,157,.8)}
.ck-burst i:nth-child(4n){width:5px;height:5px;left:-2.5px;top:-2.5px}
.ck-ring{position:absolute;left:50%;top:52%;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;border:2px solid rgba(247,223,151,.85);opacity:0;pointer-events:none;box-shadow:0 0 30px rgba(247,223,151,.5),inset 0 0 30px rgba(255,62,157,.35)}

/* ---------- the copy ---------- */
.ck-copy{position:relative;z-index:2;padding:46px 40px 36px 36px;display:flex;flex-direction:column;gap:12px}
.ck-pre{margin:0;font-family:var(--hand,"Playpen Sans Hebrew",sans-serif);font-weight:500;font-size:18px;color:#F0CE6B}
.ck-h{margin:0;font-family:var(--head,"Heebo",sans-serif);font-size:clamp(32px,3.6vw,46px);line-height:1.05;font-weight:900;letter-spacing:-.025em;color:#F6EFE7;text-wrap:balance}
.ck-h:focus{outline:none}
.ck-h .ck-gold{display:inline-block;padding-bottom:.08em;font-family:var(--hand,"Playpen Sans Hebrew",sans-serif);font-weight:500;letter-spacing:0;
  background:linear-gradient(105deg,#B8862B 0%,#F7DF97 22%,#D9A63A 40%,#FFF4CC 52%,#D9A63A 66%,#B8862B 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.35)) drop-shadow(0 0 .28em rgba(255,79,166,.38))}
.ck-p{margin:0;color:#CDBFBB;font-size:16.5px;line-height:1.6;text-wrap:pretty;max-width:40ch}
.ck-what{margin:2px 0 0;padding:12px 14px;border-radius:16px;background:rgba(247,223,151,.07);border:1px solid rgba(247,223,151,.22);font-size:15px;color:#F6EFE7;display:flex;gap:10px;align-items:center}
.ck-what svg{flex:none;width:20px;height:20px;color:#F0CE6B}
.ck-what:empty{display:none}
.ck-acts{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.ck-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:999px;padding:12px 24px;font:inherit;font-weight:800;font-size:16px;cursor:pointer;text-decoration:none;white-space:nowrap;
  border:1.5px solid rgba(247,223,151,.55);background:transparent;color:#F6EFE7;transition:transform .15s ease-out,box-shadow .3s ease,background-color .2s ease}
.ck-btn svg{width:20px;height:20px;flex:none}
.ck-btn.pink{background:#D10A75;border-color:#D10A75;color:#fff;box-shadow:0 14px 34px -14px rgba(255,62,157,.9)}
.ck-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.ck-btn:hover{background:rgba(247,223,151,.1)}.ck-btn.pink:hover{background:#B8086A;box-shadow:0 18px 40px -12px rgba(255,62,157,.95)}}
.ck-micro{margin:0;font-size:13.5px;color:#B5A9A6;text-align:center;text-wrap:pretty}
.ck-skip{position:absolute;z-index:6;bottom:16px;inset-inline-start:16px;min-height:44px;padding:8px 18px;border-radius:999px;border:1px solid rgba(247,223,151,.35);background:rgba(14,11,12,.55);color:#F7DF97;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.ck.end .ck-skip,.ck.teaser .ck-skip{display:none}

/* ---------- the sequence (only when motion is welcome) ----------
   0.00 - 0.95  the key flies in from the front right, already turning toward the lock
   0.95 - 1.45  it goes into the keyhole
   1.55 - 2.15  it turns (the lock answers with a small click)
   2.15 - 2.60  the shackle lifts
   2.60 - 3.20  the shackle swings open, sparks and a gold ring
   3.05 -       the copy rises in */
.ck.play .ck-copy > *{opacity:0}
@media (prefers-reduced-motion:no-preference){
 .ck[open] .ck-in{animation:ckIn .5s cubic-bezier(.23,1,.32,1) both}
 .ck.play .ck-stage{animation:ckCam 3.6s cubic-bezier(.23,1,.32,1) both}
 .ck.play .ck-key{animation:ckFly .95s cubic-bezier(.2,.8,.2,1) both,ckInsert .5s cubic-bezier(.5,0,.2,1) .95s forwards}
 .ck.play .ck-kb .ck-sl{animation:ckAppear .3s ease-out both}
 .ck.play .ck-turn{animation:ckTurn .6s cubic-bezier(.65,0,.35,1) 1.55s both}
 .ck.play .ck-lock{animation:ckClick .32s ease-out 2.05s both}
 .ck.play .ck-shackle{animation:ckLift .45s cubic-bezier(.3,1.4,.5,1) 2.15s both}
 .ck.play .ck-swing{animation:ckSwing .65s cubic-bezier(.23,1,.32,1) 2.6s both}
 .ck.play .ck-sheen::before{animation:ckSheen 1s ease-in-out 1.7s both}
 .ck.play .ck-glow{animation:ckGlow 3.4s ease-out both}
 .ck.play .ck-ring{animation:ckRing .9s cubic-bezier(.23,1,.32,1) 2.7s both}
 .ck.play .ck-burst i{animation:ckSpark 1.1s cubic-bezier(.15,.8,.3,1) calc(2.7s + var(--d,0s)) both}
 .ck.play .ck-copy > *{animation:ckRise .7s cubic-bezier(.23,1,.32,1) calc(3.05s + var(--i,0) * 70ms) both}
 .ck.teaser .ck-key{animation:ckHover 3.2s ease-in-out 2 both}
 .ck.teaser .ck-copy > *{animation:ckRise .6s cubic-bezier(.23,1,.32,1) calc(.15s + var(--i,0) * 60ms) both}
}
@keyframes ckIn{from{opacity:0;transform:translateY(16px) scale(.97)}}
@keyframes ckCam{from{transform:rotateX(-6deg) rotateY(48deg) scale(.92)}to{transform:rotateX(-12deg) rotateY(36deg)}}
@keyframes ckFly{from{transform:translate3d(160px,-150px,330px) rotateX(-50deg) rotateY(-30deg)}to{transform:translate3d(0,0,130px)}}
/* opacity only on the leaf slices: opacity on a 3D parent would flatten the key */
@keyframes ckAppear{from{opacity:0}}
@keyframes ckInsert{from{transform:translate3d(0,0,130px)}to{transform:translate3d(0,0,19px)}}
@keyframes ckTurn{from{transform:rotateZ(-45deg)}to{transform:rotateZ(45deg)}}
@keyframes ckClick{0%,100%{transform:none}35%{transform:translate3d(0,3px,0) rotateZ(-1.2deg)}70%{transform:translate3d(0,-1px,0) rotateZ(.5deg)}}
@keyframes ckLift{from{transform:none}to{transform:translateY(-30px)}}
@keyframes ckSwing{from{transform:none}to{transform:rotateY(-150deg)}}
@keyframes ckSheen{from{transform:translateX(-70%)}to{transform:translateX(70%)}}
@keyframes ckGlow{0%{opacity:.35;scale:.8}75%{opacity:.55;scale:.9}88%{opacity:1;scale:1.12}100%{opacity:.85;scale:1}}
@keyframes ckRing{from{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(1.9)}}
@keyframes ckSpark{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1)}}
@keyframes ckRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ckHover{0%,100%{transform:translate3d(0,0,78px)}50%{transform:translate3d(0,-8px,90px)}}

/* the open state (end of the sequence, after "לדלג", and under reduced motion) */
.ck.end .ck-stage{transform:rotateX(-12deg) rotateY(36deg)}
.ck.end .ck-key{transform:translate3d(0,0,19px)}
.ck.end .ck-turn{transform:rotateZ(45deg)}
.ck.end .ck-shackle{transform:translateY(-30px)}
.ck.end .ck-swing{transform:rotateY(-150deg)}
.ck.end .ck-glow{opacity:.85}
.ck.end .ck-copy > *{opacity:1}
.ck.end.skipped *{animation:none!important}
/* the locked teaser (the alternate variant): the key waits in front of the lock */
.ck.teaser .ck-key{transform:translate3d(0,0,78px)}
.ck.teaser .ck-glow{opacity:.6}

@media (prefers-reduced-motion:reduce){
 .ck[open] .ck-in{animation:ckFade .3s ease both}
 .ck.play .ck-copy > *{opacity:1}
}
@keyframes ckFade{from{opacity:0}}

/* phones: the scene on top, the copy under it, all in one scroll */
@media (max-width:760px){
 .ck-in{grid-template-columns:1fr;width:calc(100vw - 20px);border-radius:26px}
 .ck-scene{height:270px;border-radius:26px 26px 0 0}
 .ck-view{transform:scale(.78);transform-origin:50% 55%}
 .ck-copy{padding:4px 20px 22px;gap:10px}
 .ck-h{font-size:32px}
 .ck-p{font-size:15.5px}
 .ck-skip{top:14px;bottom:auto;inset-inline-start:14px}
}

/* ---------- the content behind the lock: [data-ck-veil] fades away when it opens ---------- */
[data-ck-veil]{transition:opacity .6s ease,filter .6s ease,visibility 0s .6s}
.ck-opened [data-ck-veil]{opacity:0;filter:blur(6px);visibility:hidden}
@media (prefers-reduced-motion:reduce){[data-ck-veil]{transition:opacity .2s ease,visibility 0s .2s}.ck-opened [data-ck-veil]{filter:none}}

/* the club popup (signup3/shared/club.css) on pages whose tokens have no --ok */
.clubpop .club-on{color:var(--ok,#2F6B3A)}
.ck-lock{position:absolute;inset:0}
.ck-lock-scroll{overflow:hidden}