/* THE LITTLE LENS — Iris mascot rig (scoped). From the design handoff's
   little-lens.css, but ONLY the rig section, with the CSS variables scoped to
   .pup-box (NOT :root) and no global reset / sheet-layout rules — so it can't
   touch the rest of the web app. Design box 280×300, scaled per instance via --s. */
.pup-box{
  --ink:#08080a; --panel2:#17171a; --panel3:#1d1d22; --border:#27272d; --hair:#1e1e23;
  --gold0:#f3d590; --gold1:#eccb78; --gold2:#cf971f; --gold3:#b97a18;
  --cream:#f6ecd6; --amber:#f0b24a; --pink:#f3a8b6;
  --red:#ff3b53; --brand:#c8102e; --green:#3fd08a;
  --fur0:#2b2b31; --fur1:#141417; --fur2:#0a0a0c;
  --font:'Outfit',system-ui,sans-serif; --serif:'Newsreader',Georgia,serif; --mono:'JetBrains Mono',monospace;
  position:relative;
}
.iris-face{ position:relative; }
.iris-face svg{ position:absolute; inset:0; width:100%; height:100%; }
.pup{ position:absolute; left:50%; top:50%; width:280px; height:300px;
  transform:translate(-50%,-50%) scale(var(--s,1)); transform-origin:center; }
.pup *{ position:absolute; }
.pup .face svg{ inset:0; width:100%; height:100%; overflow:visible; }

.pup .puddle{ left:50%; bottom:-6px; width:210px; height:46px; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(207,151,31,.28), transparent 76%); }

.pup .tail{ left:176px; top:150px; width:38px; height:120px; border-radius:22px 22px 20px 20px;
  background:linear-gradient(180deg,#1d1d22,#0a0a0c); transform-origin:50% 90%; transform:rotate(28deg);
  box-shadow:-2px 4px 8px -4px #000; }
.pup .haunch{ top:232px; width:90px; height:68px; border-radius:50% 50% 46% 46%/ 74% 74% 40% 40%;
  background:linear-gradient(165deg, #1b1b21 0%, #111114 46%, #0a0a0c 100%); }
.pup .haunch.l{ left:38px; } .pup .haunch.r{ left:152px; }
.pup .body{ left:74px; top:148px; width:132px; height:152px; border-radius:46% 46% 40% 40%/ 54% 54% 46% 46%;
  background:radial-gradient(72% 60% at 50% 16%, #28282e, #131316 54%, #0a0a0c);
  box-shadow:0 14px 30px -16px #000, 0 0 0 1px rgba(255,255,255,.03) inset; }
.pup .blaze{ left:108px; top:190px; width:64px; height:88px;
  background:radial-gradient(circle at 50% 32%, #f6ecd6 0%, #e3d6b6 48%, rgba(216,203,168,0) 78%); opacity:.96; }
.pup .legf{ top:236px; width:30px; height:64px; border-radius:15px 15px 11px 11px;
  background:linear-gradient(#1b1b21,#0f0f13); box-shadow:0 4px 9px -5px #000;
  transition:transform .4s cubic-bezier(.3,.7,.3,1); }
.pup .legf::after{ content:''; position:absolute; left:-7px; bottom:-3px; width:44px; height:34px;
  border-radius:48% 48% 44% 44%/ 58% 58% 44% 44%;
  background:linear-gradient(#efe4cd,#cdbe9a);
  box-shadow:0 4px 8px -4px #000, inset 6px -7px 0 -5px rgba(0,0,0,.20), inset -6px -7px 0 -5px rgba(0,0,0,.20); }
.pup .legf.l{ left:104px; transform-origin:50% 0; } .pup .legf.r{ left:146px; }

.pup .head-grp{ left:0; top:0; width:280px; height:300px; transform-origin:140px 168px;
  transform:rotate(var(--tilt,0deg)); transition:transform .5s cubic-bezier(.3,.7,.3,1); }
.pup .ear{ width:62px; height:104px; background:linear-gradient(160deg,#1e1e23,#0b0b0d 82%);
  border-radius:52% 52% 48% 48%/ 38% 38% 62% 62%;
  box-shadow:0 0 0 1px rgba(255,231,176,.05) inset, -3px 7px 12px -6px #000;
  transform-origin:64% 12%; transition:transform .5s cubic-bezier(.3,.7,.3,1); }
.pup .ear.l{ left:60px; top:34px; transform:rotate(-7deg); }
.pup .ear.r{ left:158px; top:34px; transform:rotate(-7deg) scaleX(-1); }
.pup .head{ left:66px; top:34px; width:148px; height:132px; border-radius:50% 50% 46% 46%;
  background:radial-gradient(60% 50% at 50% 24%, #2c2c33, #151518 46%, #0b0b0d 100%);
  box-shadow:0 10px 26px -14px #000, 0 0 0 1px rgba(255,255,255,.04) inset; }
.pup .face{ left:94px; top:40px; width:92px; height:92px; }
.pup .muzzle{ left:100px; top:114px; width:80px; height:60px; border-radius:50%;
  background:radial-gradient(circle at 50% 28%, #4a4a52 0%, #2a2a30 46%, rgba(20,20,23,0) 76%); }
.pup .nose{ left:124px; top:130px; width:32px; height:23px; border-radius:50% 50% 50% 50%/ 60% 60% 42% 42%;
  background:radial-gradient(circle at 42% 30%, #3a3a40, #0a0a0c 75%); box-shadow:0 1px 2px rgba(255,255,255,.12) inset; }
.pup .tongue{ left:129px; top:148px; width:23px; height:31px; border-radius:9px 9px 13px 14px;
  background:linear-gradient(180deg,#e67e95 0%,#f3a1b2 40%,#f7adbb 72%,#eb89a0 100%);
  box-shadow:inset 0 3px 4px -1px rgba(255,255,255,.5), inset 0 -5px 7px -2px rgba(168,52,82,.45), 0 4px 6px -2px rgba(0,0,0,.38);
  display:none; transform-origin:50% 0; }
.pup .tongue::after{ content:''; position:absolute; left:50%; top:4px; width:2.5px; height:46%; transform:translateX(-50%);
  background:linear-gradient(rgba(158,46,76,.6), rgba(158,46,76,0)); border-radius:2px; }
.pup .glint{ width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #fff, #f5c45a 55%, rgba(245,196,90,0) 78%); opacity:.0; }
.pup .glint.l{ left:118px; top:62px; } .pup .glint.r{ left:158px; top:78px; }
.pup.g-on .glint{ opacity:.95; }
.pup .lid{ left:96px; top:84px; width:88px; height:18px; border-radius:0 0 44px 44px;
  background:#0d0d10; box-shadow:0 -1px 0 rgba(246,236,214,.25) inset; display:none; }

.pup.e-perk .ear.l{ transform:rotate(-25deg); } .pup.e-perk .ear.r{ transform:rotate(-25deg) scaleX(-1); }
.pup.e-back .ear.l{ transform:rotate(12deg); } .pup.e-back .ear.r{ transform:rotate(12deg) scaleX(-1); }
.pup.e-one  .ear.l{ transform:rotate(-26deg); } .pup.e-one  .ear.r{ transform:rotate(4deg) scaleX(-1); }

.pup.p-wave .legf.l{ animation:pawWave 1s ease-in-out infinite; }
.pup.t-on .tongue{ display:block; }
.pup.t-on.m-cheer .tongue, .pup.t-on.m-happy .tongue{ animation:tongueB 1.1s ease-in-out infinite; }
.pup.eyes-shut .lid{ display:block; }

.pup .acc{ display:none; }
.pup.a-hearts .acc.hearts, .pup.a-zzz .acc.zzz, .pup.a-confetti .acc.confetti,
.pup.a-thought .acc.thought, .pup.a-spark .acc.spark, .pup.a-rec .acc.rec, .pup.a-frame .acc.frame,
.pup.a-flash .acc.flash, .pup.a-excl .acc.excl, .pup.a-focusbox .acc.focusbox,
.pup.a-bulb .acc.bulb, .pup.a-sweat .acc.sweat{ display:block; }

.pup .acc.flash i{ left:90px; top:36px; width:100px; height:100px; border-radius:50%;
  border:3px solid rgba(255,247,230,.95); opacity:0; animation:flashRing 2s ease-out infinite; }
.pup .acc.excl b{ left:196px; top:18px; font-family:var(--serif); font-weight:600; font-size:40px; color:var(--gold1);
  text-shadow:0 0 16px rgba(236,203,120,.6); animation:popB 1.1s ease-in-out infinite; }
.pup .acc.focusbox i{ width:22px; height:22px; border:2.5px solid var(--green); opacity:.92; animation:afLock 2.2s ease-in-out infinite; }
.pup .acc.focusbox i:nth-child(1){ left:86px;  top:38px; border-right:0; border-bottom:0; }
.pup .acc.focusbox i:nth-child(2){ left:172px; top:38px; border-left:0; border-bottom:0; }
.pup .acc.focusbox i:nth-child(3){ left:86px;  top:118px; border-right:0; border-top:0; }
.pup .acc.focusbox i:nth-child(4){ left:172px; top:118px; border-left:0; border-top:0; }
.pup .acc.focusbox b{ left:124px; top:150px; font-family:var(--mono); font-weight:700;
  font-size:11px; letter-spacing:.16em; color:var(--green); }
.pup .acc.bulb b{ left:198px; top:18px; width:28px; height:28px; border-radius:50% 50% 50% 50%/ 54% 54% 46% 46%;
  background:radial-gradient(circle at 40% 34%, #fff6da, #f0c66b 52%, #cf971f);
  box-shadow:0 0 18px rgba(236,203,120,.75); animation:popB 1.2s ease-in-out infinite; }
.pup .acc.bulb b::after{ content:''; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%);
  width:12px; height:6px; border-radius:0 0 4px 4px; background:#8c6414; }
.pup .acc.bulb i{ width:7px; height:7px; border-radius:50%; background:var(--gold1); opacity:0; }
.pup .acc.bulb i:nth-child(2){ left:184px; top:24px; animation:tw 1.6s ease-in-out .2s infinite; }
.pup .acc.bulb i:nth-child(3){ left:230px; top:36px; animation:tw 1.6s ease-in-out .8s infinite; }
.pup .acc.sweat b{ left:186px; top:56px; width:14px; height:19px; border-radius:54% 46% 50% 50%/ 76% 76% 44% 44%;
  background:linear-gradient(#c6ddff,#7fb0e8); box-shadow:0 0 8px rgba(127,176,232,.5); transform:rotate(8deg);
  animation:drip 2s ease-in-out infinite; }

.pup .acc.hearts i{ width:24px; height:22px; background:var(--red); display:block;
  clip-path:path('M12 21 C12 21 1 13 1 7 A5 5 0 0 1 12 6 A5 5 0 0 1 23 7 C23 13 12 21 12 21 Z');
  filter:drop-shadow(0 0 8px rgba(255,59,83,.5)); }
.pup .acc.hearts i.a{ left:70px; top:30px; animation:heartF 1.6s ease-in-out infinite; }
.pup .acc.hearts i.b{ left:190px; top:24px; animation:heartF 1.6s ease-in-out .5s infinite; }
.pup .acc.zzz span{ font-family:var(--mono); font-weight:700; color:var(--gold1); opacity:0; }
.pup .acc.zzz span:nth-child(1){ left:196px; top:64px; font-size:18px; animation:zzz 3s ease-out infinite; }
.pup .acc.zzz span:nth-child(2){ left:212px; top:46px; font-size:24px; animation:zzz 3s ease-out 1s infinite; }
.pup .acc.zzz span:nth-child(3){ left:232px; top:24px; font-size:30px; animation:zzz 3s ease-out 2s infinite; }
.pup .acc.confetti i{ width:9px; height:9px; border-radius:2px; opacity:0; }
.pup .acc.confetti i:nth-child(1){ left:60px;  top:30px; background:var(--gold1); animation:conf 1.6s ease-in 0s infinite; }
.pup .acc.confetti i:nth-child(2){ left:120px; top:14px; background:var(--red);   animation:conf 1.6s ease-in .25s infinite; }
.pup .acc.confetti i:nth-child(3){ left:176px; top:22px; background:var(--cream); animation:conf 1.6s ease-in .5s infinite; border-radius:50%; }
.pup .acc.confetti i:nth-child(4){ left:208px; top:36px; background:var(--gold2); animation:conf 1.6s ease-in .15s infinite; }
.pup .acc.confetti i:nth-child(5){ left:88px;  top:16px; background:var(--green); animation:conf 1.6s ease-in .4s infinite; border-radius:50%; }
.pup .acc.thought b{ left:198px; top:30px; width:34px; height:34px; border-radius:50% 50% 50% 6px;
  background:var(--panel2); border:1px solid var(--border); color:var(--gold1); font-family:var(--serif);
  font-size:22px; display:grid; place-items:center; animation:bob 2.4s ease-in-out infinite; }
.pup .acc.thought i{ width:7px; height:7px; border-radius:50%; background:var(--panel3); }
.pup .acc.thought i:nth-child(1){ left:188px; top:70px; } .pup .acc.thought i:nth-child(2){ left:180px; top:84px; width:5px; height:5px; }
.pup .acc.spark i{ color:var(--gold1); width:14px; height:14px; opacity:.0;
  background:conic-gradient(from 0deg, transparent 0 8%, var(--gold1) 12% 13%, transparent 17% 33%, var(--gold1) 37% 38%, transparent 42% 58%, var(--gold1) 62% 63%, transparent 67% 83%, var(--gold1) 87% 88%, transparent 92%);
  -webkit-mask:radial-gradient(circle, #000 60%, transparent 62%); }
.pup .acc.spark i:nth-child(1){ left:64px; top:48px; animation:tw 1.8s ease-in-out 0s infinite; }
.pup .acc.spark i:nth-child(2){ left:202px; top:60px; animation:tw 1.8s ease-in-out .6s infinite; transform:scale(1.4); }
.pup .acc.spark i:nth-child(3){ left:200px; top:120px; animation:tw 1.8s ease-in-out 1.1s infinite; transform:scale(.8); }
.pup .acc.rec .dot{ left:108px; top:14px; width:13px; height:13px; border-radius:50%; background:var(--red);
  box-shadow:0 0 12px var(--red); animation:recP 1.1s ease-in-out infinite; }
.pup .acc.rec b{ left:128px; top:13px; font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.18em; color:var(--red); }
.pup .acc.frame i{ width:22px; height:22px; border:2.5px solid var(--gold1); opacity:.85; }
.pup .acc.frame i:nth-child(1){ left:30px; top:24px; border-right:0; border-bottom:0; border-radius:5px 0 0 0; }
.pup .acc.frame i:nth-child(2){ right:30px; left:auto; top:24px; border-left:0; border-bottom:0; border-radius:0 5px 0 0; }
.pup .acc.frame i:nth-child(3){ left:30px; top:236px; border-right:0; border-top:0; border-radius:0 0 0 5px; }
.pup .acc.frame i:nth-child(4){ right:30px; left:auto; top:236px; border-left:0; border-top:0; border-radius:0 0 5px 0; }
.pup .acc.frame .tag{ left:74px; top:268px; white-space:nowrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:#1a140b; font-weight:700;
  background:linear-gradient(150deg,#f0c66b,#cf971f); padding:5px 11px; border-radius:8px; box-shadow:0 6px 16px -8px rgba(236,203,120,.8); }

.pup.an-breathe{ animation:breathe 4s ease-in-out infinite; }
.pup.an-breathe .head-grp{ animation:bobHead 4s ease-in-out infinite; }
.pup.an-bounce{ animation:bounceJoy 1.2s cubic-bezier(.3,.7,.3,1) infinite; }
.pup.an-heart{ animation:heartBeat 1.3s ease-in-out infinite; }
.pup.an-sleep{ animation:sleepB 4.6s ease-in-out infinite; }
.pup .tail.wag{ animation:wag 1.1s ease-in-out infinite; }
.pup .tail.fast{ animation:wag .42s ease-in-out infinite; }
.pup.blink .face{ animation:llBlink 5s ease-in-out infinite; }

@keyframes breathe{ 0%,100%{ transform:translate(-50%,-50%) scale(var(--s)); } 50%{ transform:translate(-50%,-51%) scale(calc(var(--s)*1.012)); } }
@keyframes bobHead{ 0%,100%{ transform:rotate(var(--tilt,0deg)) translateY(0); } 50%{ transform:rotate(var(--tilt,0deg)) translateY(-2px); } }
@keyframes bounceJoy{ 0%{ transform:translate(-50%,-50%) scale(var(--s)); } 24%{ transform:translate(-50%,-56%) scale(var(--s)); } 48%{ transform:translate(-50%,-50%) scale(var(--s)); } 70%{ transform:translate(-50%,-53%) scale(var(--s)); } 100%{ transform:translate(-50%,-50%) scale(var(--s)); } }
@keyframes heartBeat{ 0%,100%{ transform:translate(-50%,-50%) scale(var(--s)); } 18%{ transform:translate(-50%,-50%) scale(calc(var(--s)*1.045)); } 36%{ transform:translate(-50%,-50%) scale(var(--s)); } }
@keyframes sleepB{ 0%,100%{ transform:translate(-50%,-49%) scale(var(--s)); } 50%{ transform:translate(-50%,-50.5%) scale(calc(var(--s)*1.015)); } }
@keyframes wag{ 0%,100%{ transform:rotate(20deg); } 50%{ transform:rotate(40deg); } }
@keyframes llBlink{ 0%,7%,12%,100%{ transform:scaleY(1); } 9.5%{ transform:scaleY(.08); } }
@keyframes pawWave{ 0%,100%{ transform:rotate(-46deg); } 50%{ transform:rotate(-58deg); } }
@keyframes tongueB{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(1.12); } }
@keyframes heartF{ 0%{ transform:translateY(4px) scale(.8); opacity:0; } 30%{ opacity:1; } 100%{ transform:translateY(-22px) scale(1.05); opacity:0; } }
@keyframes zzz{ 0%{ transform:translateY(6px); opacity:0; } 25%{ opacity:1; } 100%{ transform:translateY(-26px); opacity:0; } }
@keyframes conf{ 0%{ transform:translateY(0) rotate(0); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateY(-30px) rotate(180deg); opacity:0; } }
@keyframes tw{ 0%,100%{ opacity:0; transform:scale(.6); } 50%{ opacity:1; transform:scale(1); } }
@keyframes recP{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@keyframes flashRing{ 0%{ transform:scale(.45); opacity:0; } 6%{ opacity:1; } 32%{ transform:scale(1.5); opacity:0; } 100%{ opacity:0; } }
@keyframes popB{ 0%,100%{ transform:translateY(0) scale(1); } 30%{ transform:translateY(-5px) scale(1.12); } }
@keyframes afLock{ 0%,40%,100%{ transform:scale(1); opacity:.92; } 12%{ transform:scale(1.18); opacity:.5; } }
@keyframes drip{ 0%,60%,100%{ transform:translateY(0) rotate(8deg); opacity:.95; } 80%{ transform:translateY(6px) rotate(8deg); opacity:.5; } }
@media (prefers-reduced-motion: reduce){ .pup, .pup *, .pup .acc *{ animation:none !important; } }