/* =====================================================================
   Dovanų burtai – 3D išvaizda. Spalvos imamos iš progos temos
   (--bg, --bg2, --red, --red-d, --gold, --green), todėl kiekviena
   proga atrodo savaip.
   ===================================================================== */
:root{
  --glow: color-mix(in srgb, var(--red) 55%, transparent);
  --glow2: color-mix(in srgb, var(--gold) 45%, transparent);
  --hi: color-mix(in srgb, var(--red) 70%, #fff);
  --card-top:#fffdf9; --card-bot:#f4ecdf;
}

/* ---------- fonas su švytėjimu ---------- */
body{
  background:
    radial-gradient(60% 40% at 15% 0%, var(--glow2), transparent 70%),
    radial-gradient(55% 45% at 100% 15%, var(--glow), transparent 70%),
    radial-gradient(80% 60% at 50% 110%, color-mix(in srgb, var(--bg2) 90%, #fff 10%), transparent 70%),
    linear-gradient(180deg, var(--bg2), var(--bg) 65%) fixed !important;
  background-attachment: fixed !important;
  min-height:100vh;
}

/* ---------- pavadinimas ---------- */
header h1{
  color:#fff8ec;
  text-shadow:
    0 1px 0 color-mix(in srgb, var(--gold) 70%, #000),
    0 2px 0 color-mix(in srgb, var(--gold) 60%, #000),
    0 3px 0 color-mix(in srgb, var(--gold) 50%, #000),
    0 4px 0 color-mix(in srgb, var(--gold) 40%, #000),
    0 8px 14px rgba(0,0,0,.45),
    0 0 40px var(--glow2);
  letter-spacing:-.015em;
}
header .star{
  display:inline-block !important; font-size:52px !important;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.45)) drop-shadow(0 0 18px var(--glow2));
  animation: float3d 4s ease-in-out infinite;
}
@keyframes float3d{
  0%,100%{transform:translateY(0) rotate(-4deg) scale(1)}
  50%{transform:translateY(-8px) rotate(4deg) scale(1.05)}
}

/* ---------- kortelės ---------- */
.card{
  background: linear-gradient(180deg, var(--card-top), var(--card-bot)) !important;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -3px 0 rgba(0,0,0,.05),
    0 2px 3px rgba(0,0,0,.10),
    0 10px 20px rgba(0,0,0,.18),
    0 30px 50px -18px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.04) !important;
  border-radius:22px !important;
  position:relative;
}
.card::before{ /* blizgesys viršuje */
  content:"";position:absolute;inset:0 0 auto 0;height:40%;border-radius:22px 22px 0 0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.55), transparent);
}
.card > *{position:relative}
.card h2{ text-shadow:0 1px 0 #fff, 0 2px 2px rgba(0,0,0,.08); }

/* režimų kortelės pradžioje – pakyla ir pasisuka */
.mode{transform-style:preserve-3d;transition:transform .25s ease, box-shadow .25s ease}
.mode:hover{transform:perspective(900px) rotateX(3deg) translateY(-4px)}
.mode .e{
  width:64px;height:64px;border-radius:20px;display:flex !important;align-items:center;justify-content:center;font-size:34px !important;
  background:linear-gradient(145deg, #fff, #efe4cf);
  box-shadow: inset 0 2px 0 #fff, inset 0 -4px 0 rgba(0,0,0,.08), 0 8px 16px rgba(0,0,0,.18);
}

/* ---------- 3D mygtukai ---------- */
.btn-primary, a.btn-primary{
  background: linear-gradient(180deg, var(--hi), var(--red) 55%, var(--red-d)) !important;
  border:1px solid color-mix(in srgb, var(--red-d) 80%, #000) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 5px 0 color-mix(in srgb, var(--red-d) 75%, #000),
    0 10px 18px var(--glow) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  transform:translateY(0);transition:transform .08s, box-shadow .08s, filter .15s !important;
}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:active, a.btn-primary:active{
  transform:translateY(4px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 color-mix(in srgb, var(--red-d) 75%, #000), 0 3px 8px var(--glow) !important;
}
.btn-primary:disabled{filter:grayscale(.8) brightness(1.1);box-shadow:0 3px 0 #a99f92 !important;text-shadow:none}
.btn-big{margin-bottom:5px}

.btn-ghost, .dother{
  background:linear-gradient(180deg,#fff,#f3ece0) !important;
  border:1px solid #e3d9c7 !important;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #ddd2bf, 0 6px 10px rgba(0,0,0,.08) !important;
  transition:transform .08s, box-shadow .08s !important;
}
.btn-ghost:active, .dother:active{transform:translateY(3px) !important;box-shadow: inset 0 1px 0 #fff, 0 0 0 #ddd2bf, 0 2px 4px rgba(0,0,0,.08) !important}
.dother{border-radius:12px;margin-top:2px}

.btn-sms{background:linear-gradient(180deg,#5a8cf0,#2d6cdf 60%,#2257b8) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 0 #1a4590,0 8px 14px rgba(45,108,223,.35) !important;text-shadow:0 1px 1px rgba(0,0,0,.3)}
.btn-wa{background:linear-gradient(180deg,#3cc274,#1f9e55 60%,#178043) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 0 #116332,0 8px 14px rgba(31,158,85,.35) !important;text-shadow:0 1px 1px rgba(0,0,0,.3)}
.btn-sms:active,.btn-wa:active{transform:translateY(3px) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 rgba(0,0,0,.3) !important}
.btn-danger{background:linear-gradient(180deg,#fff,#fbeeec) !important;box-shadow:inset 0 1px 0 #fff,0 3px 0 #efc9c3,0 6px 10px rgba(179,38,30,.1) !important}
.btn-danger:active{transform:translateY(3px)}
.btn-donate{background:linear-gradient(180deg, color-mix(in srgb,var(--gold) 70%,#fff), var(--gold)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 0 color-mix(in srgb,var(--gold) 60%,#000),0 8px 14px var(--glow2) !important}

/* ---------- progų plytelės kaip klavišai ---------- */
.th{
  background:linear-gradient(180deg,#fff,#f1e9db) !important;
  border:1px solid #e6dccb !important;
  box-shadow: inset 0 1px 0 #fff, 0 4px 0 #dccfb9, 0 8px 14px rgba(0,0,0,.10) !important;
  transition:transform .1s, box-shadow .1s !important;
}
.th .e{filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));transition:transform .2s}
.th:hover .e{transform:translateY(-3px) scale(1.1)}
.th.on{
  transform:translateY(3px);
  background:linear-gradient(180deg, color-mix(in srgb,var(--red) 14%,#fff), color-mix(in srgb,var(--red) 22%,#fff)) !important;
  border-color:var(--red) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.12), 0 1px 0 var(--red-d), 0 0 0 3px var(--glow) !important;
}

/* ---------- laukeliai ---------- */
input, select, textarea{
  background:linear-gradient(180deg,#f7f3ec,#fff 40%) !important;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.07), 0 1px 0 #fff !important;
}
input:focus, select:focus, textarea:focus{box-shadow: inset 0 2px 3px rgba(0,0,0,.05), 0 0 0 4px var(--glow) !important}

/* ---------- eilutės, pill'ai, juostos ---------- */
.send, .prow, .wishbox, .dopt{
  background:linear-gradient(180deg,#fff,#fbf7f0) !important;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #e9e0d0, 0 8px 16px rgba(0,0,0,.07) !important;
}
.send.done{background:linear-gradient(180deg,#f3faf5,#e6f2ea) !important}
.dopt{transition:transform .1s, box-shadow .1s}
.dopt:hover{transform:translateY(-3px)}
.dopt:active{transform:translateY(2px);box-shadow: inset 0 1px 0 #fff, 0 1px 0 #e9e0d0 !important}
.dopt .de{filter:drop-shadow(0 5px 4px rgba(0,0,0,.25))}
.pill{background:linear-gradient(180deg,#fff,#efe6d6) !important;box-shadow:inset 0 1px 0 #fff,0 2px 0 #e2d7c4,0 3px 6px rgba(0,0,0,.06)}
.status.ok{box-shadow:0 2px 0 #b9d8c5}
.progress{box-shadow:inset 0 2px 4px rgba(0,0,0,.15);height:12px !important}
.progress i{background:linear-gradient(180deg, var(--hi), var(--red)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 10px var(--glow)}
.notice{box-shadow:inset 0 1px 0 #fff, 0 3px 0 #efdfb3, 0 8px 16px rgba(0,0,0,.08)}
.steps li::before{background:linear-gradient(180deg, var(--hi), var(--red-d)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 0 color-mix(in srgb,var(--red-d) 70%,#000),0 4px 6px rgba(0,0,0,.2)}
.feat li span{filter:drop-shadow(0 4px 4px rgba(0,0,0,.2))}

/* ---------- 3D dovanėlė ---------- */
.gift{perspective:600px;filter:drop-shadow(0 18px 14px rgba(0,0,0,.35))}
.gift::after{ /* šešėlis ant „grindų“ */
  content:"";position:absolute;left:10px;right:10px;bottom:-14px;height:18px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.35), transparent);z-index:-1;
}
.gift .box{
  background:
    linear-gradient(90deg, rgba(0,0,0,.18), transparent 25%, transparent 75%, rgba(0,0,0,.22)),
    linear-gradient(180deg, var(--hi), var(--red) 45%, var(--red-d)) !important;
  box-shadow: inset 0 -6px 10px rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.25);
}
.gift .lid{
  background:
    linear-gradient(90deg, rgba(0,0,0,.15), transparent 20%, transparent 80%, rgba(0,0,0,.2)),
    linear-gradient(180deg, color-mix(in srgb,var(--red) 70%,#fff), var(--red-d)) !important;
  box-shadow: 0 6px 8px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.35);
}
.gift .rv,.gift .rh{
  background:linear-gradient(90deg, color-mix(in srgb,var(--gold) 60%,#000), var(--gold) 35%, color-mix(in srgb,var(--gold) 50%,#fff) 50%, var(--gold) 65%, color-mix(in srgb,var(--gold) 60%,#000)) !important;
}
.gift .bow{filter:drop-shadow(0 4px 3px rgba(0,0,0,.3))}
.gift.wiggle{animation:wig3d 2.2s ease-in-out infinite !important}
@keyframes wig3d{
  0%,100%{transform:perspective(600px) rotateY(-12deg) rotateX(6deg) translateY(0)}
  25%{transform:perspective(600px) rotateY(12deg) rotateX(4deg) translateY(-6px)}
  50%{transform:perspective(600px) rotateY(-8deg) rotateX(8deg) translateY(0) rotate(-3deg)}
  60%{transform:perspective(600px) rotateY(-8deg) rotateX(8deg) rotate(3deg)}
  70%{transform:perspective(600px) rotateY(-8deg) rotateX(8deg) rotate(0)}
}

/* ---------- ištrauktas vardas ---------- */
.result .to{
  color:var(--red) !important;
  text-shadow:
    0 1px 0 color-mix(in srgb,var(--red) 70%,#000),
    0 2px 0 color-mix(in srgb,var(--red) 60%,#000),
    0 3px 0 color-mix(in srgb,var(--red) 50%,#000),
    0 6px 10px rgba(0,0,0,.25),
    0 0 30px var(--glow);
  animation: pop3d .7s cubic-bezier(.2,1.6,.4,1);
}
@keyframes pop3d{from{transform:perspective(500px) rotateX(70deg) scale(.6);opacity:0}to{transform:none;opacity:1}}

/* ---------- toast & modal ---------- */
.modal{background:linear-gradient(180deg,var(--card-top),var(--card-bot)) !important;box-shadow:inset 0 1px 0 #fff,0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.4) !important}
.toast{box-shadow:0 10px 30px rgba(0,0,0,.4)}

@media (prefers-reduced-motion: reduce){
  header .star,.gift.wiggle,.result .to{animation:none !important}
  .mode:hover{transform:none}
}

/* =====================================================================
   KINEMATOGRAFINIAI EFEKTAI – tik traukiant burtus ir atidarant dovaną
   ===================================================================== */
.dshow{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%, color-mix(in srgb,var(--bg2) 85%,#000) 0%, #04080a 80%);opacity:0;transition:opacity .35s}
.dshow.on{opacity:1}.dshow.out{opacity:0}
.ds-glow{position:absolute;width:70vmin;height:70vmin;border-radius:50%;background:radial-gradient(circle,var(--glow2),transparent 65%);filter:blur(10px);animation:dsPulse 1.2s ease-in-out infinite}
@keyframes dsPulse{50%{transform:scale(1.12);opacity:.8}}
.ds-rays{position:absolute;width:160vmax;height:160vmax;opacity:0;
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb,var(--gold) 45%,transparent) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 55%);mask:radial-gradient(circle,#000 0,transparent 55%);transition:opacity .4s}
.dshow.boom .ds-rays{opacity:.9;animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ds-stage{position:relative;text-align:center;color:#fff}
.ds-cards{position:relative;width:200px;height:120px;margin:0 auto 18px}
.ds-cards i{position:absolute;inset:0;border-radius:16px;background:linear-gradient(145deg,var(--red),var(--red-d));border:2px solid var(--gold);box-shadow:0 20px 40px rgba(0,0,0,.5)}
.ds-cards i:nth-child(1){animation:shuf 0.5s ease-in-out infinite}
.ds-cards i:nth-child(2){animation:shuf 0.5s ease-in-out .16s infinite reverse}
.ds-cards i:nth-child(3){animation:shuf 0.5s ease-in-out .33s infinite}
@keyframes shuf{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-60px) rotate(-12deg)}75%{transform:translateX(60px) rotate(12deg)}}
.dshow.boom .ds-cards i{animation:none;transform:translateY(-30px) scale(.8);opacity:0;transition:all .5s}
.ds-slot{min-width:240px;padding:16px 26px;border-radius:18px;background:rgba(255,255,255,.08);border:1.5px solid color-mix(in srgb,var(--gold) 60%,transparent);
  box-shadow:0 0 40px var(--glow2), inset 0 1px 0 rgba(255,255,255,.2);backdrop-filter:blur(6px);font-family:Fraunces,serif;font-size:clamp(26px,7vw,40px);font-weight:700;min-height:1.8em}
.ds-slot span{display:inline-block}
.ds-slot span.flip{animation:flipIn .12s ease-out}
@keyframes flipIn{from{transform:translateY(-40%) scale(.92);opacity:.35;filter:blur(2px)}to{transform:none;opacity:1}}
.dshow.boom .ds-slot{transform:scale(1.15);transition:transform .4s cubic-bezier(.2,1.8,.4,1);font-size:52px}
.ds-cap{margin-top:16px;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2)}
.dshow.boom .ds-cap{font-family:Fraunces,serif;letter-spacing:0;text-transform:none;font-size:30px;color:#fff;text-shadow:0 0 30px var(--glow2);animation:pop3d .6s cubic-bezier(.2,1.6,.4,1)}
.ds-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.dshow.boom .ds-flash{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}

/* dovanos atidarymas */
.gift{cursor:pointer;outline:none}
.gift:focus-visible{box-shadow:0 0 0 4px var(--glow);border-radius:12px}
.g-rays,.g-flash{position:absolute;left:50%;top:55%;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%) scale(0);opacity:0}
.g-rays{width:520px;height:520px;z-index:-1;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--gold) 70%,#fff) 0 7deg,transparent 7deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 62%);mask:radial-gradient(circle,#000 0,transparent 62%)}
.g-flash{width:240px;height:240px;background:radial-gradient(circle,#fff,color-mix(in srgb,var(--gold) 70%,#fff) 35%,transparent 70%);z-index:3}
.gift.charging{animation:charge .75s cubic-bezier(.4,0,.6,1) both !important}
@keyframes charge{0%{transform:rotate(0)}20%{transform:rotate(-4deg) scale(1.02)}40%{transform:rotate(5deg) scale(1.04)}60%{transform:rotate(-7deg) scale(1.06)}80%{transform:rotate(8deg) scale(1.08)}100%{transform:rotate(0) scale(1.1)}}
.gift.charging .g-flash{opacity:.5;transform:translate(-50%,-50%) scale(.6);transition:all .7s}
.gift.open{animation:none !important;transform:scale(1.1)}
.gift.open .lid{transform:translate(40px,-170px) rotate(38deg) !important;opacity:0;transition:transform .8s cubic-bezier(.2,.8,.3,1),opacity .8s .3s}
.gift.open .bow{transform:translate(-30px,-190px) rotate(-60deg);opacity:0;transition:transform .8s cubic-bezier(.2,.8,.3,1),opacity .8s .3s}
.gift.open .g-rays{opacity:1;transform:translate(-50%,-50%) scale(1);transition:transform .9s cubic-bezier(.2,.9,.3,1),opacity .3s;animation:spinR 6s linear infinite}
@keyframes spinR{to{transform:translate(-50%,-50%) scale(1) rotate(360deg)}}
.gift.open .g-flash{opacity:1;transform:translate(-50%,-50%) scale(2.6);transition:transform .5s ease-out,opacity .9s .2s}
.gift.gone{opacity:0;transform:scale(.6);transition:all .35s}
.result .to .lt{display:inline-block;opacity:0;animation:ltIn .5s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes ltIn{from{opacity:0;transform:translateY(30px) rotateX(80deg) scale(.6);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.result.show{animation:resIn .6s ease}
@keyframes resIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.demo-bar{text-align:center;margin-bottom:14px}
@media (prefers-reduced-motion: reduce){.dshow,.g-rays,.g-flash{display:none !important}}