/* ARSAB TECH — Founder's birthday overlay (15 Oct 2026 only). Safe to delete after the day. */
.bday{position:fixed;inset:0;z-index:9990;pointer-events:none;transition:opacity .55s ease}
.bday.is-out{opacity:0}
.bday-scrim{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;
  background:radial-gradient(ellipse at 50% 90%,rgba(70,12,22,.06),rgba(10,2,6,.34))}
.is-show .bday-scrim{opacity:1}
.bday-fx{position:absolute;inset:0;width:100%;height:100%}

.bday-stage{
  --bw:min(clamp(150px,42vw,320px),34vh);
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom,0px) + var(--bday-lift,0px));
  display:flex;flex-direction:column;align-items:center;max-width:100vw;
}

/* Bears: cream walks in from the left, brown from the right */
.bday-bears{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:calc(var(--bw) * -.07)}
.bday-bear{
  position:relative;display:block;width:var(--bw);aspect-ratio:349/458;transform-origin:50% 100%;user-select:none;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.35));
  transition:transform 1.9s cubic-bezier(.16,1,.3,1),opacity .9s ease,filter .9s ease;
}
.bday-bear img{position:absolute;left:0;top:0;width:100%;height:auto;opacity:0;transition:opacity .16s linear;-webkit-user-drag:none;pointer-events:none}
.bday-bear img.on{opacity:1}
.is-cream{transform:translateX(-80vw)}
.is-brown{transform:translateX(80vw)}
.is-in .bday-bear{transform:none}
.is-in.is-fade .bday-bear{opacity:0;transform:scale(.9) translateY(-12px);filter:blur(6px) brightness(1.6)}

/* motion styles: squash & stretch on the separate translate/scale/rotate properties, so the slide-in keeps working */
.is-walking .bday-bear{animation:bdayHop .5s cubic-bezier(.45,0,.55,1) infinite}
.is-walking .is-brown,.is-dance .is-brown,.is-bob .is-brown{animation-delay:-.25s}
.is-bob .bday-bear{animation:bdayBob 1.3s ease-in-out infinite}
.is-dance .bday-bear{animation:bdayDance .66s cubic-bezier(.45,0,.55,1) infinite}
.is-dance .is-brown{animation-duration:.72s}
@keyframes bdayHop{0%,100%{translate:0 0;scale:1.05 .95;rotate:-1.5deg}50%{translate:0 -13px;scale:.97 1.04;rotate:1.5deg}}
@keyframes bdayBob{0%,100%{translate:0 0;scale:1.015 .985}50%{translate:0 -6px;scale:.99 1.012}}
@keyframes bdayDance{0%,100%{translate:0 0;scale:1.07 .93;rotate:-3.5deg}50%{translate:0 -20px;scale:.96 1.05;rotate:3.5deg}}

/* Cake between the bears */
.bday-cake{
  position:absolute;left:50%;bottom:-3px;z-index:2;width:calc(var(--bw) * .72);height:auto;overflow:visible;
  transform:translate(-50%,45%) scale(.15);transform-origin:50% 100%;opacity:0;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.35));
  transition:transform .8s cubic-bezier(.34,1.56,.64,1),opacity .35s ease;
}
.is-cake .bday-cake{transform:translate(-50%,0) scale(1);opacity:1}
.cake-main,.cake-slice,.cake-face{transform-box:fill-box}
.cake-slice{transform-origin:0 100%;transition:transform .8s cubic-bezier(.34,1.3,.5,1)}
.is-cut .cake-slice{transform:translate(15px,5px) rotate(7deg)}
.is-lift .cake-slice{transform-origin:50% 60%;transform:translate(var(--lx,0),var(--ly,-300px)) rotate(300deg) scale(.35);opacity:0;
  transition:transform .95s cubic-bezier(.5,0,.3,1),opacity .3s ease .65s}
.cake-face{opacity:0;transition:opacity .2s ease .15s}
.is-cut .cake-face{opacity:1}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:bdayFlame .45s ease-in-out infinite alternate;transition:opacity .25s ease,transform .25s ease}
.flame.f2{animation-delay:-.15s}.flame.f3{animation-delay:-.3s}
@keyframes bdayFlame{from{transform:scale(1,1) rotate(-3deg)}to{transform:scale(.9,1.15) rotate(3deg)}}
.is-blown .flame{opacity:0;transform:scale(.2);animation:none}
.smoke{fill:rgba(255,255,255,.75);opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.is-blown .smoke{animation:bdaySmoke 1.5s ease-out forwards}
.is-blown .smoke.s2{animation-delay:.12s}.is-blown .smoke.s3{animation-delay:.24s}
@keyframes bdaySmoke{0%{opacity:.85;transform:translateY(0) scale(.6)}100%{opacity:0;transform:translateY(-30px) scale(2.6)}}

/* Knife that cuts the cake */
.cake-knife{opacity:0;transform:translate(113px,-30px);transform-origin:0 0;transition:transform .6s ease-in,opacity .25s ease}
.is-knife .cake-knife{opacity:1}
.is-cutting .cake-knife{transform:translate(117px,134px)}
.is-cut .cake-knife{opacity:0;transform:translate(117px,150px);transition:transform .3s ease-in,opacity .3s ease}

/* Card: cream + gold, red text, so it stands out from the dark hero */
.bday-card{
  position:relative;pointer-events:auto;overflow:hidden;
  width:min(90vw,370px);margin-bottom:12px;padding:clamp(12px,2.4vh,20px) 22px clamp(12px,2vh,18px);
  text-align:center;color:#4a0f1a;font-family:"Fredoka",system-ui,sans-serif;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,111,156,.35) 0 4px,transparent 5px),
    radial-gradient(circle at 90% 30%,rgba(111,200,255,.4) 0 4px,transparent 5px),
    radial-gradient(circle at 8% 78%,rgba(255,201,77,.55) 0 5px,transparent 6px),
    radial-gradient(circle at 94% 82%,rgba(182,156,255,.4) 0 4px,transparent 5px),
    radial-gradient(circle at 80% 10%,rgba(255,201,77,.5) 0 3px,transparent 4px),
    radial-gradient(circle at 22% 92%,rgba(255,111,156,.3) 0 3px,transparent 4px),
    linear-gradient(180deg,#fffdf6 0%,#fff1d6 100%);
  border:3px solid #e0a63a;border-radius:26px;
  box-shadow:0 0 0 3px rgba(255,255,255,.55),0 18px 50px rgba(0,0,0,.5),0 0 44px rgba(255,190,70,.45);
  opacity:0;transform:translateY(14px) scale(.85);visibility:hidden;
  transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1),visibility 0s .5s;
}
.bday-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%);
  transform:translateX(-130%);animation:bdayShine 3.4s ease-in-out 1.2s infinite;
}
@keyframes bdayShine{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
.is-card .bday-card{opacity:1;transform:none;visibility:visible;transition-delay:0s}


/* top gold band */
.bday-card::after{content:"";position:absolute;left:0;right:0;top:0;height:8px;pointer-events:none;
  background:repeating-linear-gradient(135deg,#e0a63a 0 10px,#ffd36b 10px 20px)}

/* staggered entrance */
.is-card .bday-h1{animation:bdayDrop .7s cubic-bezier(.34,1.56,.64,1) .1s both}
.is-card .bday-offer-wrap{animation:bdayPop .8s cubic-bezier(.34,1.7,.5,1) .35s both}
.is-card .bday-thanks{animation:bdayRise .6s ease .75s both}
.is-card .bday-code{animation:bdayRise .6s cubic-bezier(.34,1.56,.64,1) 1s both,bdayRing 2.2s ease-out 1.8s infinite}
@keyframes bdayDrop{from{opacity:0;transform:translateY(-26px) scale(.8)}to{opacity:1;transform:none}}
@keyframes bdayPop{0%{opacity:0;transform:scale(.2) rotate(-8deg)}70%{opacity:1;transform:scale(1.12) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes bdayRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes bdayRing{
  0%{box-shadow:0 5px 0 #7d0b15,0 10px 20px rgba(179,18,31,.3),0 0 0 0 rgba(224,166,58,.75)}
  70%,100%{box-shadow:0 5px 0 #7d0b15,0 10px 20px rgba(179,18,31,.3),0 0 0 16px rgba(224,166,58,0)}}
.bday-pill{animation:bdayWiggle 2.4s ease-in-out 1.2s infinite}
@keyframes bdayWiggle{0%,100%{rotate:0deg}8%{rotate:-3deg}16%{rotate:3deg}24%{rotate:0deg}}

/* 5% OFF: gentle heartbeat + twinkling stars */
.bday-offer-wrap{position:relative;display:block}
.bday-offer{animation:bdayBeat 1.6s ease-in-out 1.3s infinite}
@keyframes bdayBeat{0%,100%{scale:1}50%{scale:1.07}}
.bday-star{position:absolute;font-style:normal;color:#e0a63a;line-height:1;opacity:0;pointer-events:none;
  text-shadow:0 0 8px rgba(255,211,107,.9);animation:bdayTwinkle 1.8s ease-in-out infinite}
.bday-star.s1{left:6%;top:6%;font-size:20px}
.bday-star.s2{right:5%;top:0;font-size:26px;animation-delay:.5s}
.bday-star.s3{left:2%;bottom:6%;font-size:14px;animation-delay:1s}
.bday-star.s4{right:9%;bottom:4%;font-size:18px;animation-delay:1.4s}
@keyframes bdayTwinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(90deg)}}

/* two faces share one spot: offer first, greeting after the cake is cut */
.bday-body{display:grid}
.bday-c1,.bday-c2{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .5s ease,transform .5s ease}
.bday-h1{margin:0 0 6px;display:flex;flex-direction:column;align-items:center;gap:5px;line-height:1.2}
.bday-c2{opacity:0;transform:scale(.85);pointer-events:none;position:relative}
.is-wish .bday-c1{opacity:0;transform:scale(.9) translateY(-10px);pointer-events:none}
.is-wish .bday-c2{opacity:1;transform:none;pointer-events:auto}
.bday-pill{display:inline-block;padding:6px 16px;border-radius:999px;font-size:15px;font-weight:600;letter-spacing:.01em;
  color:#fff;background:#b3121f;box-shadow:0 3px 0 #7d0b15}
.bday-gift{font-size:16px;font-weight:500;color:#7a3b2a}

.bday-greet{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;z-index:1}
.bday-happy-top{display:block;font-size:17px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#b3121f}
.bday-name{display:block;font-size:clamp(32px,6vh,46px);font-weight:700;line-height:1.1;color:#2a0a10;text-shadow:0 3px 0 #ffd36b}
.bday-name[hidden]{display:none}
.bday-role{display:block;font-style:normal;font-size:15px;font-weight:500;color:#8a5a3c}
.bday-name span{display:inline-block;opacity:0;transform:translateY(16px) scale(.4)}
.is-wish .bday-name span{animation:bdayLetter .6s cubic-bezier(.34,1.8,.5,1) calc(var(--i) * 70ms + 300ms) both}
@keyframes bdayLetter{from{opacity:0;transform:translateY(16px) scale(.4)}to{opacity:1;transform:none}}
.bday-happy-top,.bday-role{opacity:0}
.is-wish .bday-happy-top{animation:bdayTrack 1s ease .15s both}
@keyframes bdayTrack{from{letter-spacing:.7em;opacity:0}to{letter-spacing:.2em;opacity:1}}
.is-wish .bday-role{animation:bdayRise .6s ease 1.2s both}
.is-jelly .bday-card{animation:bdayJelly .9s ease both}
@keyframes bdayJelly{0%{transform:scale(1)}20%{transform:scale(1.08,.94)}40%{transform:scale(.95,1.06)}60%{transform:scale(1.03,.98)}80%{transform:scale(.99,1.01)}100%{transform:scale(1)}}

/* balloons + stars on the greeting face */
.bday-balloon{position:absolute;width:30px;height:38px;border-radius:50% 50% 48% 48%/56% 56% 44% 44%;pointer-events:none;
  animation:bdayFloat 3.2s ease-in-out infinite}
.bday-balloon::before{content:"";position:absolute;left:50%;bottom:-5px;width:0;height:0;margin-left:-4px;
  border:4px solid transparent;border-bottom:6px solid currentColor;border-top:0}
.bday-balloon::after{content:"";position:absolute;left:50%;top:100%;width:1.5px;height:34px;margin-top:5px;background:rgba(90,40,30,.35);transform:rotate(3deg)}
.bday-balloon.b1{left:3%;top:2%;background:#ff6f9c;color:#ff6f9c}
.bday-balloon.b2{left:15%;top:-2%;width:24px;height:31px;background:#ffc94d;color:#ffc94d;animation-delay:-1s}
.bday-balloon.b3{right:15%;top:-2%;width:24px;height:31px;background:#6fc8ff;color:#6fc8ff;animation-delay:-.5s}
.bday-balloon.b4{right:3%;top:2%;background:#b69cff;color:#b69cff;animation-delay:-1.8s}
@keyframes bdayFloat{0%,100%{translate:0 0;rotate:-4deg}50%{translate:0 -8px;rotate:4deg}}
.bday-star.t1{left:12%;bottom:18%;font-size:20px}
.bday-star.t2{right:12%;bottom:22%;font-size:26px;animation-delay:.6s}
.bday-star.t3{left:50%;top:6%;font-size:16px;animation-delay:1.1s}

/* 5% OFF + code */
.bday-offer{margin:4px 0 0;font-size:clamp(46px,9vh,68px);font-weight:700;line-height:1.05;letter-spacing:.01em;color:#c4161c;
  text-shadow:0 3px 0 #ffd36b,0 6px 14px rgba(196,22,28,.25)}
.bday-thanks{margin:2px 0 clamp(8px,1.6vh,12px);font-size:16px;font-weight:500;color:#5b2a1f}
.bday-code{
  display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  padding:10px 26px;border:2px dashed #ffd36b;border-radius:14px;cursor:pointer;
  background:#b3121f;color:#fff;font:700 22px/1.2 "Fredoka",system-ui,sans-serif;letter-spacing:.06em;
  box-shadow:0 5px 0 #7d0b15,0 10px 20px rgba(179,18,31,.3);
  transition:transform .15s ease,box-shadow .15s ease;
}
.bday-code:active{transform:translateY(3px);box-shadow:0 2px 0 #7d0b15}
.bday-code small{font-size:13px;font-weight:500;letter-spacing:0;color:#ffe9b0}
.bday-code:focus-visible,.bday-close:focus-visible{outline:3px solid #e0a63a;outline-offset:3px}
.bday-close{position:absolute;top:10px;right:8px;z-index:2;width:32px;height:32px;border:0;border-radius:50%;
  background:transparent;color:#8a5a3c;font-size:24px;line-height:1;cursor:pointer}
@media (max-width:380px){
  .bday-offer{font-size:56px}
  .bday-name{font-size:32px}
  .bday-pill{font-size:14px}
  .bday-card{padding:16px 16px 14px}
}
@media (prefers-reduced-motion:reduce){
  .bday-card *,.bday-card{animation:none!important}
  .bday-name span{opacity:1;transform:none}
  .bday-star,.bday-balloon{display:none}
  .bday-scrim{display:none}
  .bday-bear,.bday-card,.bday-cake{transition:opacity .3s ease;animation:none!important}
  .bday-card::before,.flame{animation:none}
  .is-cream,.is-brown{transform:none;opacity:0}
  .is-in .bday-bear{opacity:1}
  .is-in.is-fade .bday-bear{opacity:0;transform:none;filter:none}
  .bday-cake{transform:translate(-50%,0)}
}