/* Animated logo stages — one theme per page. Always the ORIGINAL logo. */
.lstage{position:relative;width:min(300px,64vw);aspect-ratio:1/1;margin:0 auto .6rem;isolation:isolate}
.lstage .lg,.lstage .frame-box{position:relative;z-index:2}
.lstage .lg-pic img{width:100%;height:auto;filter:drop-shadow(0 0 10px rgba(255,43,214,.65)) drop-shadow(0 0 28px rgba(0,240,255,.3))}
.lstage .fx{position:absolute;inset:0;pointer-events:none}
.lstage .back{z-index:1}.lstage .front{z-index:3}
.lstage svg{display:block}
.lstage .lg{animation:lsIn .9s cubic-bezier(.2,1.6,.4,1) both}
@keyframes lsIn{0%{opacity:0;transform:scale(.55) translateY(20px)}100%{opacity:1;transform:none}}

/* HOME: bounce-in, rainbow splash bursts, paint drips (inside .banner) */
.banner .drop-in{animation:homeIn 1.2s cubic-bezier(.3,1.7,.5,1) both;position:relative;z-index:2}
@keyframes homeIn{0%{opacity:0;transform:translateY(-60%) scale(.6)}55%{opacity:1;transform:translateY(4%) scale(1.04,.94)}75%{transform:translateY(-3%) scale(.98,1.03)}100%{transform:none}}
.banner .burst{position:absolute;inset:14%;border-radius:50%;z-index:0;background:conic-gradient(var(--pink),var(--orange),var(--lime),var(--cyan),var(--uv),var(--pink));
  -webkit-mask:radial-gradient(circle,transparent 52%,#000 54%,#000 64%,transparent 66%);mask:radial-gradient(circle,transparent 52%,#000 54%,#000 64%,transparent 66%);
  opacity:0;animation:burst 4.6s ease-out 1s infinite both}
.banner .burst.b2{animation-delay:3.3s}
@keyframes burst{0%{opacity:.95;transform:scale(.4) rotate(0)}70%{opacity:0;transform:scale(1.45) rotate(40deg)}100%{opacity:0;transform:scale(1.45)}}
.banner .hdrip{position:absolute;top:80%;width:11px;height:var(--h);z-index:1;border-radius:0 0 8px 8px;background:var(--c);box-shadow:0 0 10px var(--c);transform-origin:top;animation:hdrip 3.6s ease-in var(--d) infinite both}
.banner .hdrip::after{content:"";position:absolute;left:-2px;bottom:-12px;width:15px;height:15px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:inherit;animation:hdrop 3.6s ease-in var(--d) infinite both}
@keyframes hdrip{0%{transform:scaleY(0);opacity:1}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes hdrop{0%,50%{transform:translateY(0);opacity:1}100%{transform:translateY(36px);opacity:0}}

/* GALLERY: picture frame swings, camera flash */
.t-frame{aspect-ratio:1/1.1}
.t-frame .frame-box{margin-top:16%;padding:7%;border-radius:10px;background:linear-gradient(#141a4d,#0b0f30) padding-box,linear-gradient(135deg,#ffd36b,var(--pink),var(--cyan),#ffd36b) border-box;border:7px solid transparent;
  box-shadow:0 0 24px rgba(255,211,107,.45),inset 0 0 18px rgba(0,0,0,.6);transform-origin:50% -18%;animation:swing 4.2s ease-in-out infinite}
.t-frame .wire{position:absolute;left:0;right:0;top:-24%;width:100%;height:24%}
.t-frame .flash{position:absolute;inset:0;border-radius:4px;background:radial-gradient(circle at 70% 30%,#fff,rgba(255,255,255,.4) 40%,transparent 70%);opacity:0;animation:flash 4.2s linear infinite;pointer-events:none}
.t-frame .cam{position:absolute;right:-4%;bottom:2%;font-size:2.1rem;z-index:3;animation:cam 4.2s ease-in-out infinite;filter:drop-shadow(0 0 8px var(--cyan))}
@keyframes swing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes flash{0%,84%{opacity:0}87%{opacity:1}100%{opacity:0}}
@keyframes cam{0%,80%,100%{transform:scale(1) rotate(0)}86%{transform:scale(1.25) rotate(-12deg)}}

/* REVIEWS: stars pop in a row, logo wiggles, applause */
.t-stars .star{position:absolute;width:15%;color:#ffd36b;filter:drop-shadow(0 0 8px #ffb800);transform:translate(-50%,0);animation:starpop 3.6s cubic-bezier(.3,1.8,.5,1) var(--d) infinite both}
@keyframes starpop{0%{opacity:0;transform:translate(-50%,0) scale(0) rotate(-90deg)}14%{opacity:1;transform:translate(-50%,0) scale(1.25) rotate(0)}22%,82%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,0) scale(.2)}}
.t-stars .lg{animation:lsIn .9s cubic-bezier(.2,1.6,.4,1) both,wiggle 3.6s ease-in-out 1s infinite}
@keyframes wiggle{0%,30%,60%,100%{transform:rotate(0)}36%{transform:rotate(-5deg) scale(1.03)}42%{transform:rotate(5deg) scale(1.03)}48%{transform:rotate(-3deg)}54%{transform:rotate(2deg)}}
.t-stars .clap{position:absolute;bottom:6%;font-size:2rem;animation:clap .5s ease-in-out infinite alternate}
.t-stars .c1{left:-6%}.t-stars .c2{right:-6%;animation-delay:.25s}
@keyframes clap{to{transform:scale(1.2) rotate(-10deg)}}

/* WHO WE ARE: couple sways, hearts float up, est. sparkle */
.t-love .lg{transform-origin:50% 95%;animation:lsIn .9s cubic-bezier(.2,1.6,.4,1) both,sway 5s ease-in-out 1s infinite}
@keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.t-love .heart{position:absolute;top:6%;width:calc(15% * var(--s));color:var(--c);filter:drop-shadow(0 0 8px var(--c));animation:floatUp 4.4s ease-out var(--d) infinite both}
@keyframes floatUp{0%{opacity:0;transform:translate(0,40px) scale(.4)}20%{opacity:1}50%{transform:translate(-12px,-30px) scale(1)}100%{opacity:0;transform:translate(10px,-90px) scale(1.1)}}
.t-love .est{position:absolute;right:-4%;bottom:4%;font-family:var(--display);font-size:.9rem;color:#fff;background:linear-gradient(90deg,var(--pink),var(--uv));padding:.25rem .7rem;border-radius:999px;box-shadow:0 0 14px rgba(255,43,214,.7);transform:rotate(-8deg);animation:estGlow 2.6s ease-in-out infinite}
.t-love .est b{color:#ffd36b}
@keyframes estGlow{50%{box-shadow:0 0 26px rgba(255,211,107,.9)}}
.t-love .spark{position:absolute;color:#ffd36b;font-size:1.4rem;text-shadow:0 0 10px #ffd36b;animation:twinkle 2.8s ease-in-out var(--d) infinite both}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(90deg)}}

/* SOCIALS: likes/hearts bubble up, notification ping */
.t-social .lg{animation:lsIn .9s cubic-bezier(.2,1.6,.4,1) both,beat 1.8s ease-in-out 1s infinite}
@keyframes beat{0%,40%,100%{transform:scale(1)}10%{transform:scale(1.04)}20%{transform:scale(.99)}30%{transform:scale(1.03)}}
.t-social .bub{position:absolute;top:22%;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--c);color:#070a1f;box-shadow:0 0 14px var(--c);font:800 .95rem var(--body);animation:bubble 4.8s ease-out var(--d) infinite both}
.t-social .bub svg{width:22px;height:22px}
@keyframes bubble{0%{opacity:0;transform:translate(0,60px) scale(.3)}15%{opacity:1;transform:translate(0,20px) scale(1)}100%{opacity:0;transform:translate(14px,-120px) scale(.8)}}
.t-social .notif{position:absolute;right:6%;top:8%;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#ff2b55;color:#fff;font-weight:800;box-shadow:0 0 0 0 rgba(255,43,85,.7);animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,43,85,.75)}100%{box-shadow:0 0 0 22px rgba(255,43,85,0)}}

/* CANVAS ART: logo on an easel, brush strokes paint in behind */
.t-easel{aspect-ratio:1/1.12}
.t-easel .easel{position:absolute;left:6%;right:6%;top:4%;bottom:0;width:88%;height:96%}
.t-easel .canvas{position:absolute;left:10%;right:10%;top:10%;height:70%;background:#fff8e7;border-radius:6px;box-shadow:0 0 0 4px #c98a4b,0 0 24px rgba(255,122,0,.5);overflow:hidden}
.t-easel .canvas svg{width:100%;height:100%}
.t-easel .stroke{fill:none;stroke-width:9;stroke-linecap:round;opacity:.85;stroke-dasharray:130;stroke-dashoffset:0;animation:paintIn 5.6s ease-in-out var(--d) infinite both}
@keyframes paintIn{0%{stroke-dashoffset:130}30%,85%{stroke-dashoffset:0;opacity:.85}100%{stroke-dashoffset:0;opacity:0}}
.t-easel .lg{position:absolute;left:16%;right:16%;top:12%;animation:lsIn .9s cubic-bezier(.2,1.6,.4,1) .3s both}
.t-easel .brush{position:absolute;top:14%;left:0;font-size:2rem;filter:drop-shadow(0 0 8px var(--orange));animation:brush 5.6s ease-in-out infinite}
@keyframes brush{0%{transform:translate(10%,0) rotate(-20deg)}25%{transform:translate(220%,40%) rotate(10deg)}50%{transform:translate(40%,120%) rotate(-15deg)}75%{transform:translate(230%,180%) rotate(10deg)}100%{transform:translate(10%,0) rotate(-20deg)}}

/* PRIVACY: calm shield glow */
.t-safe .shield{position:absolute;inset:-4% 2% 0;width:96%;height:104%;filter:drop-shadow(0 0 12px var(--cyan));animation:breathe 3.6s ease-in-out infinite}
.t-safe .lg{transform:scale(.78);animation:none}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(.98)}50%{opacity:1;transform:scale(1.02)}}

/* 404: wobbly logo over a spreading paint spill */
.t-spill .lg{transform-origin:50% 100%;animation:lsIn .9s both,wobble 2.4s ease-in-out .9s infinite}
@keyframes wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg) translateX(-4px)}40%{transform:rotate(5deg) translateX(3px)}60%{transform:rotate(-3deg)}80%{transform:rotate(2deg)}}
.t-spill .puddle{position:absolute;left:5%;right:5%;bottom:-6%;height:20%;border-radius:50% 46% 54% 48%/60% 55% 45% 40%;background:radial-gradient(ellipse at 40% 40%,var(--pink),var(--uv) 55%,var(--cyan));box-shadow:0 0 24px rgba(255,43,214,.6);transform-origin:50% 50%;animation:spread 4.8s ease-in-out infinite}
@keyframes spread{0%{transform:scale(.35,.5)}60%,100%{transform:scale(1,1)}}
.t-spill .drop{position:absolute;left:62%;top:58%;width:16px;height:20px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:dropfall 2.4s ease-in infinite}
@keyframes dropfall{0%{opacity:0;transform:translateY(0)}20%{opacity:1}90%{opacity:1;transform:translateY(80px)}100%{opacity:0}}

/* THANKS: confetti splash */
.t-confetti .lg{animation:popIn 1s cubic-bezier(.3,1.8,.5,1) both,float 5s ease-in-out 1s infinite}
@keyframes popIn{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:scale(1)}}
.t-confetti .cf{position:absolute;left:50%;top:50%;width:12px;height:18px;border-radius:3px;background:var(--c);box-shadow:0 0 8px var(--c);transform:translate(var(--tx),var(--ty)) rotate(var(--r));animation:confetti 3.4s cubic-bezier(.1,.7,.3,1) var(--d) infinite both}
@keyframes confetti{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.3)}35%{opacity:1;transform:translate(var(--tx),var(--ty)) rotate(var(--r)) scale(1)}100%{opacity:0;transform:translate(var(--tx),calc(var(--ty) + 140px)) rotate(calc(var(--r) * 3)) scale(.8)}}

/* AFTER HOURS: neon sign flicker */
.t-night .neonring{position:absolute;inset:4%;border-radius:50%;border:4px solid var(--pink);box-shadow:0 0 18px var(--pink),inset 0 0 18px var(--uv);animation:flicker 5s linear infinite}
@keyframes flicker{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.25}}

/* header logo: tiny paint-roll wiggle on hover */
.brand:hover img{animation:wiggle 1s ease-in-out}

@media (max-width:520px){.lstage{width:min(240px,62vw)}.t-social .bub{width:34px;height:34px}.t-stars .clap,.t-frame .cam,.t-easel .brush{font-size:1.6rem}}
@media (prefers-reduced-motion:reduce){
  .lstage *,.lstage .lg,.banner .drop-in,.banner .burst,.banner .hdrip,.banner .hdrip::after{animation:none!important}
  .banner .burst,.banner .hdrip::after,.t-spill .drop{opacity:0}
  .t-stars .star{opacity:1;transform:translate(-50%,0)}
  .t-love .heart{opacity:.9;transform:translateY(-20px)}
  .t-social .bub{opacity:.9;transform:translateY(-10px)}
  .t-frame .flash{opacity:0}
}