/* The homepage mascot has its own stage: its motion never moves the copy or links. */
.refonte-mascot.home-mascot{
 --mascot-ink:#244632;
 --mascot-coral:#f77760;
 display:flex;
 flex-direction:column;
 align-items:stretch;
 gap:8px;
 min-height:480px;
 padding:24px 24px 14px;
 color:var(--mascot-ink);
}
.refonte-mascot.home-mascot>div{
 position:relative;
 width:100%;
 min-width:0;
 z-index:1;
}
.home-mascot .home-mascot-copy{
 flex:0 0 auto;
 min-height:166px;
}
.home-mascot .home-mascot-copy h2{
 max-width:15ch;
 min-height:2.26em;
 margin:0 0 10px;
 font-size:clamp(25px,2.2vw,30px);
 line-height:1.13;
 letter-spacing:-.045em;
 text-wrap:balance;
}
.home-mascot .home-mascot-copy p{
 max-width:34ch;
 min-height:3.1em;
 margin:0 0 3px;
 color:#526c54;
 font-size:14px;
 line-height:1.55;
}
.home-mascot .home-mascot-copy .text-button{
 display:inline-flex;
 align-items:center;
 justify-content:flex-start;
 gap:8px;
 min-height:44px;
 max-width:100%;
 margin:0;
 padding:5px 0;
 border:0;
 border-radius:0;
 background:none;
 color:var(--mascot-ink);
 font:750 13px/1.4 var(--font-ui,system-ui,sans-serif);
 text-align:left;
 text-decoration:none;
}
.home-mascot .home-mascot-copy .text-button[hidden]{display:none}
.home-mascot .home-mascot-copy .text-button:hover{
 text-decoration:underline;
 text-underline-offset:4px;
 box-shadow:none;
}
.home-mascot .home-mascot-stage{
 flex:1 0 220px;
 min-height:220px;
 isolation:isolate;
 perspective:700px;
 pointer-events:none;
}
.home-mascot-stage .home-mascot-actor{
 position:absolute;
 inset:0 0 7px;
 z-index:2;
 display:flex;
 align-items:flex-end;
 justify-content:center;
 transform-origin:50% 82%;
 backface-visibility:visible;
}
.refonte-mascot.home-mascot .home-mascot-image{
 display:block;
 position:static;
 inset:auto;
 width:100%;
 height:100%;
 max-width:100%;
 max-height:none;
 margin:0;
 object-fit:contain;
 object-position:center bottom;
 transform-origin:50% 82%;
 user-select:none;
 -webkit-user-drag:none;
}
.home-mascot .home-mascot-shadow{
 position:absolute;
 z-index:0;
 left:calc(50% - 46px);
 bottom:2px;
 width:92px;
 height:10px;
 border-radius:50%;
 background:#52633a;
 opacity:.13;
 filter:blur(4px);
}
.home-mascot .home-mascot-whirl{
 position:absolute;
 z-index:3;
 left:12%;
 bottom:0;
 width:76%;
 height:74%;
 overflow:visible;
 fill:none;
 stroke:var(--mascot-coral);
 stroke-width:2.7;
 stroke-linecap:round;
 opacity:0;
 transform-origin:50% 67%;
}
.home-mascot-whirl path:nth-child(2){stroke:#9bb67a;stroke-width:2.1}
.home-mascot-whirl path:nth-child(3){stroke:#d0dcaa;stroke-width:3.2}
.home-mascot-stage[data-motion="twirl"] .home-mascot-whirl{
 animation:mascot-whirl .8s cubic-bezier(.33,.04,.22,1) both;
}
.home-mascot-stage[data-motion="twirl"] .home-mascot-shadow{
 animation:mascot-shadow-turn .8s ease-in-out both;
}
.home-mascot[data-running="true"] .home-mascot-stage:not([data-motion="twirl"]) .home-mascot-image{
 animation:mascot-breathe 3.8s ease-in-out infinite;
}
.home-mascot[data-running="true"][data-scene="plant"] .home-mascot-stage:not([data-motion="twirl"]) .home-mascot-image{
 animation:mascot-joy 4.4s ease-in-out infinite;
}
.home-mascot .home-mascot-controls{
 display:none;
 flex:0 0 44px;
 min-height:44px;
 align-items:center;
 justify-content:space-between;
 gap:6px;
 margin-top:0;
 border-top:1px solid #c9d7b778;
}
.home-mascot[data-enhanced="true"] .home-mascot-controls{display:flex}
.home-mascot .home-mascot-controls button{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-height:44px;
 min-width:44px;
 max-width:100%;
 padding:8px 6px;
 border:0;
 border-radius:9px;
 background:transparent;
 color:var(--mascot-ink);
 font:650 11px/1.4 var(--font-ui,system-ui,sans-serif);
 white-space:nowrap;
 cursor:pointer;
}
.home-mascot .home-mascot-controls button:hover{background:#ffffff8c;box-shadow:none}
.home-mascot .home-mascot-controls button:disabled{opacity:.5;cursor:default}
.home-mascot .home-mascot-controls button[hidden]{display:none}
.home-mascot [data-mascot-position]{
 flex:0 0 auto;
 min-width:29px;
 color:#617351;
 font-size:10px;
 line-height:1.4;
 text-align:center;
 font-variant-numeric:tabular-nums;
}
.home-mascot :is(a,button):focus-visible{
 outline:3px solid #6550ad;
 outline-offset:3px;
}
@keyframes mascot-breathe{
 0%,100%{transform:translateY(0) rotate(-.7deg)}
 50%{transform:translateY(-4px) rotate(.7deg)}
}
@keyframes mascot-joy{
 0%,12%,30%,100%{transform:translateY(0) rotate(0)}
 18%{transform:translateY(-10px) rotate(-3deg)}
 24%{transform:translateY(-3px) rotate(2deg)}
 65%{transform:translateY(-3px) rotate(.6deg)}
}
@keyframes mascot-whirl{
 0%,100%{opacity:0;transform:scale(.65,.8) rotate(-7deg)}
 18%{opacity:0;transform:scale(.75,.85) rotate(-7deg)}
 36%{opacity:.7;transform:scale(1.04,.94) rotate(4deg)}
 57%{opacity:.82;transform:scale(.95,1.04) rotate(-5deg)}
 76%{opacity:.34;transform:scale(1.1,.88) rotate(6deg)}
}
@keyframes mascot-shadow-turn{
 0%,100%{transform:scaleX(1);opacity:.13}
 45%{transform:scaleX(.63);opacity:.2}
 78%{transform:scaleX(1.14);opacity:.1}
}
@media(min-width:761px) and (max-width:1100px){
 .refonte-mascot.home-mascot{padding:22px 20px 12px}
 .home-mascot .home-mascot-copy h2{font-size:27px}
 .home-mascot .home-mascot-copy p{font-size:13px}
 .home-mascot .home-mascot-copy .text-button{font-size:12px}
}
@media(max-width:760px){
 .refonte-mascot.home-mascot{
  gap:0;
  min-height:390px;
  padding:16px 22px 8px;
 }
 .home-mascot .home-mascot-copy{min-height:150px}
 .home-mascot .home-mascot-copy h2{max-width:20ch;font-size:25px;margin-bottom:8px}
 .home-mascot .home-mascot-copy p{max-width:35ch;font-size:13px;margin-bottom:1px}
 .home-mascot .home-mascot-stage{flex-basis:180px;min-height:180px}
 .home-mascot-stage .home-mascot-actor{inset:0 0 5px}
 .home-mascot .home-mascot-whirl{left:17%;width:66%}
 .home-mascot .home-mascot-shadow{height:8px;bottom:1px}
 .home-mascot .home-mascot-controls{margin-top:0}
 .home-mascot .home-mascot-controls button{font-size:11px;padding-inline:8px}
}
@media(prefers-reduced-motion:reduce){
 .home-mascot .home-mascot-image,
 .home-mascot .home-mascot-whirl,
 .home-mascot .home-mascot-shadow{animation:none!important;transition:none!important}
 .home-mascot .home-mascot-whirl{display:none}
}
@media print{
 .home-mascot .home-mascot-controls,.home-mascot .home-mascot-whirl{display:none!important}
 .home-mascot .home-mascot-image,.home-mascot .home-mascot-shadow{animation:none!important}
}
