/* apollo.css — Apollo "The Long Lens" re-skin (from the design handoff). Loads ON
   TOP of iris-mascot.css; overrides are scoped to .pup.apollo so Iris (.pup) is
   untouched. Variables scoped to .apollo-box (not :root) so nothing leaks. */
.apollo-box{
  --tan0:#e7be7c; --tan1:#c6883f; --tan2:#9a5f28; --tan3:#5e3a18;
  --kblack0:#241d15; --kblack1:#100c08; --paw:#e9d3a4; --inear:#e3a59c;
  --bronze:#e0892b; --bronzehi:#ffd28a;
  position:relative;
}

.pup.apollo .puddle{ background:radial-gradient(closest-side, rgba(224,137,43,.26), transparent 76%); }

.pup.apollo .tail{ left:172px; top:140px; width:44px; height:132px; border-radius:24px 24px 30px 22px;
  background:linear-gradient(170deg,#c6883f 0%,#8a5a26 52%,#241d15 100%);
  box-shadow:-2px 4px 8px -4px #000; transform:rotate(34deg); transform-origin:50% 88%; }

.pup.apollo .body{ background:radial-gradient(74% 62% at 50% 14%, #d39d52, #b27a35 50%, #7c5021 100%);
  box-shadow:0 14px 30px -16px #000, 0 0 0 1px rgba(255,255,255,.04) inset; }
.pup.apollo .saddle{ left:74px; top:150px; width:132px; height:92px; border-radius:46% 46% 46% 46%/ 66% 66% 34% 34%;
  background:radial-gradient(82% 76% at 50% 6%, #2a2118 0%, #16100b 56%, rgba(16,12,8,0) 88%); }
.pup.apollo .blaze{ left:114px; top:198px; width:52px; height:78px;
  background:radial-gradient(circle at 50% 28%, #ecd5a2 0%, #d2ad6e 52%, rgba(210,173,110,0) 82%); opacity:.85; }
.pup.apollo .legf{ background:linear-gradient(#b9803a,#7c5021); }
.pup.apollo .legf::after{ background:linear-gradient(#ecdab0,#cdb27e);
  box-shadow:0 4px 8px -4px #000, inset 6px -7px 0 -5px rgba(60,38,12,.22), inset -6px -7px 0 -5px rgba(60,38,12,.22); }

.pup.apollo .head{ left:62px; top:36px; width:156px; height:134px; border-radius:52% 52% 46% 46%;
  background:radial-gradient(58% 52% at 50% 26%, #e2b66f, #c0883f 48%, #6f4a20 100%);
  box-shadow:0 10px 26px -14px #000, 0 0 0 1px rgba(255,255,255,.05) inset; }

.pup.apollo .face{ left:100px; top:42px; width:80px; height:80px; }

.pup.apollo .muzzle{ display:none; }
.pup.apollo .mask{ left:104px; top:114px; width:72px; height:56px;
  border-radius:46% 46% 50% 50%/ 38% 38% 64% 64%;
  background:radial-gradient(66% 74% at 50% 24%, #271e15 0%, #100b06 64%, rgba(16,11,6,0) 90%); }

.pup.apollo .brow{ width:30px; height:13px; opacity:.92;
  background:radial-gradient(60% 100% at 50% 20%, #2c2118, #150e08 80%);
  border-radius:60% 60% 50% 50%/ 86% 86% 24% 24%; }
.pup.apollo .brow.l{ left:104px; top:36px; transform:rotate(11deg); }
.pup.apollo .brow.r{ left:146px; top:36px; transform:rotate(-11deg); }

.pup.apollo .nose{ left:124px; top:120px; width:32px; height:23px;
  background:radial-gradient(circle at 42% 30%, #2c241c, #080604 75%); }

.pup.apollo .ear{ width:66px; height:120px; border-radius:50% 50% 44% 44%/ 60% 60% 40% 40%;
  background:linear-gradient(158deg,#c89549 0%,#8a5a26 58%,#2e1f11 100%);
  clip-path:polygon(50% 0%, 88% 58%, 84% 100%, 16% 100%, 12% 58%);
  box-shadow:none; transform-origin:50% 96%; }
.pup.apollo .ear::after{ content:''; position:absolute; left:50%; top:30px; transform:translateX(-50%);
  width:24px; height:58px; background:linear-gradient(#e3a59c,#b06f66);
  clip-path:polygon(50% 0%, 84% 66%, 50% 100%, 16% 66%); opacity:.85; }
.pup.apollo .ear.l{ left:56px; top:4px; transform:rotate(-7deg); }
.pup.apollo .ear.r{ left:158px; top:4px; transform:rotate(7deg) scaleX(-1); }

.pup.apollo.e-perk .ear.l{ transform:rotate(-3deg) scaleY(1.04); }
.pup.apollo.e-perk .ear.r{ transform:rotate(3deg) scaleY(1.04) scaleX(-1); }
.pup.apollo.e-rest .ear.l{ transform:rotate(-7deg); }
.pup.apollo.e-rest .ear.r{ transform:rotate(38deg) scaleX(-1); }
.pup.apollo.e-one .ear.l{ transform:rotate(-4deg); }
.pup.apollo.e-one .ear.r{ transform:rotate(38deg) scaleX(-1); }
.pup.apollo.e-back .ear.l{ transform:rotate(34deg); }
.pup.apollo.e-back .ear.r{ transform:rotate(34deg) scaleX(-1); }

.pup.apollo .glint{ background:radial-gradient(circle at 38% 34%, #fff, #e89a3a 55%, rgba(232,154,58,0) 78%); }

.pup.apollo .tongue{ left:121px; top:143px; width:38px; height:35px; border-radius:13px 13px 19px 19px;
  background:linear-gradient(180deg,#df768d 0%,#f0a0ae 44%,#ec8ba0 100%);
  box-shadow:inset 0 3px 4px -1px rgba(255,255,255,.45), inset 0 -6px 8px -2px rgba(168,52,82,.42), 0 4px 6px -2px rgba(0,0,0,.4); }
.pup.apollo.t-on.m-happy .tongue, .pup.apollo.t-on.m-cheer .tongue,
.pup.apollo.t-on.m-bow .tongue, .pup.apollo.t-on.m-zoomies .tongue{ animation:tongueB 1s ease-in-out infinite; }

.pup.apollo .maw{ display:none; left:116px; top:142px; width:48px; height:40px; border-radius:50% 50% 52% 52%/ 40% 40% 60% 60%;
  background:radial-gradient(60% 70% at 50% 24%, #6e2f3a 0%, #3a1620 70%); box-shadow:inset 0 3px 5px rgba(0,0,0,.5); }
.pup.apollo.m-yawn .maw{ display:block; }
.pup.apollo.m-yawn .tongue{ display:block; top:160px; height:26px; }

.pup.apollo.an-bow{ animation:apBow 1.8s cubic-bezier(.3,.7,.3,1) infinite; }
.pup.apollo.an-bow .tail{ animation:apTailUp 1.8s ease-in-out infinite; }
.pup.apollo.an-zoom{ animation:apZoom .5s ease-in-out infinite; }
.pup.apollo.an-yawn .head-grp{ animation:apYawn 3.4s ease-in-out infinite; }

@keyframes apBow{ 0%,100%{ transform:translate(-50%,-50%) scale(var(--s)) rotate(0deg); }
  40%{ transform:translate(-50%,-46%) scale(var(--s)) rotate(0deg); }
  55%{ transform:translate(-50%,-46%) scale(var(--s)) rotate(0deg); } }
@keyframes apTailUp{ 0%,100%{ transform:rotate(34deg); } 50%{ transform:rotate(8deg); } }
@keyframes apZoom{ 0%,100%{ transform:translate(-52%,-50%) scale(var(--s)) rotate(-3deg); }
  50%{ transform:translate(-48%,-50%) scale(var(--s)) rotate(3deg); } }
@keyframes apYawn{ 0%,70%,100%{ transform:rotate(var(--tilt,0deg)); } 12%,40%{ transform:rotate(calc(var(--tilt,0deg) - 4deg)) translateY(-2px); } }

.pup.apollo .acc.speed i{ position:absolute; height:4px; border-radius:3px;
  background:linear-gradient(90deg, rgba(224,137,43,0), var(--bronze)); opacity:0; }
.pup.apollo .acc.speed i:nth-child(1){ left:8px;  top:120px; width:54px; animation:apSpeed .5s linear 0s infinite; }
.pup.apollo .acc.speed i:nth-child(2){ left:0px;  top:150px; width:70px; animation:apSpeed .5s linear .12s infinite; }
.pup.apollo .acc.speed i:nth-child(3){ left:12px; top:182px; width:46px; animation:apSpeed .5s linear .24s infinite; }
.pup.apollo.a-speed .acc.speed{ display:block; }
@keyframes apSpeed{ 0%{ opacity:0; transform:translateX(18px); } 40%{ opacity:.9; } 100%{ opacity:0; transform:translateX(-10px); } }