/* Distinct Home / Levels / About / Agents layouts and actual independently moving Hermes layers */
.index{top:14px;left:3%;font-size:10px}
.hero{top:114px;left:3%;width:50%}
.gridspace{min-height:clamp(620px,73vh,770px)}
.hero h1{font-size:clamp(76px,9vw,150px);line-height:1;white-space:nowrap;letter-spacing:-.09em}
.character{transform:none!important}
.character .portrait{display:none}
.character .body-figure,.character .head-figure{position:absolute;inset:0;background-size:contain;background-position:center bottom;background-repeat:no-repeat;will-change:transform}
.character .body-figure{background-image:url('/approved-homepage-assets/hermes-body-layer.webp');animation:torsoBreathe 5.5s ease-in-out infinite alternate;transform-origin:50% 72%}
.character .head-figure{background-image:url('/approved-homepage-assets/hermes-head-layer.webp');animation:headTurn 7s ease-in-out infinite alternate;transform-origin:52% 43%;transition:filter .3s}
.character.activated .head-figure{animation:headNod 1.4s ease-in-out 2}
.character .core-light{position:absolute;width:14%;height:12%;top:54%;left:68%;border-radius:50%;background:radial-gradient(circle,#a2ffed80,#63ffe215,transparent 70%);box-shadow:0 0 20px #7afff73c;animation:breath 2.7s ease-in-out infinite alternate;pointer-events:none}
.section-detail{margin:19px 0 0 28%;font-size:11px;line-height:1.65;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.section-detail:empty{display:none}
.section-detail strong{grid-column:1/-1;color:#aaffef;letter-spacing:.15em}
.section-detail span{border-left:1px solid #84fff275;padding-left:8px}
.section-detail p{grid-column:1/-1;max-width:500px;color:#cfdddb}
.cards.about-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1180px;margin:0 auto;padding-bottom:42px}
.principle{min-height:168px;border:1px solid var(--line);background:#041217e8;padding:19px 22px;display:flex;flex-direction:column;gap:13px}
.principle b{color:#9dffed;font-size:18px}.principle strong{font-size:14px}.principle p{font-size:12px;line-height:1.7;color:#c7d8da;margin:0}
.cards.home-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1180px;margin:0 auto;padding-bottom:42px}
.cards.levels-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
.level-card{color:var(--text);font-family:inherit;text-align:left;cursor:pointer}
.tile-icon{flex:0 0 53px;display:grid;place-items:center;width:53px;height:63px;border:1px solid #a9eee080;background:#0d2b31;color:#c8fff3}
.tile-icon svg{width:31px;height:31px}
.level-card:hover .tile-icon{background:#1c6767}
.home-grid .tile-icon{width:70px;flex-basis:70px}
.cards.home-grid .agent{min-height:112px}
@keyframes headTurn{0%{transform:rotate(calc(var(--look,0deg) - 1.1deg)) translate(-1px,1px)}30%{transform:rotate(calc(var(--look,0deg) + .7deg)) translate(1px,-2px)}63%{transform:rotate(calc(var(--look,0deg) + 1.5deg)) translate(2px,1px)}100%{transform:rotate(calc(var(--look,0deg) - .5deg)) translate(-1px,0)}}
@keyframes headNod{0%,100%{transform:rotate(0)}40%{transform:rotate(2.5deg) translateY(3px)}65%{transform:rotate(-1deg) translateY(-2px)}}
@keyframes torsoBreathe{0%{transform:scaleY(.998)}100%{transform:scaleY(1.006)}}
@media(max-width:1250px){.hero{width:56%;top:107px}.hero h1{font-size:clamp(65px,9vw,125px)}.cards.levels-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:680px){
.gridspace{min-height:0}
.index{display:none}
.character{order:1;position:relative;right:auto;top:auto;width:min(95%,350px);height:440px;margin:0 auto;flex-shrink:0}
.hero{order:3;position:relative;top:auto;left:auto;width:100%;margin-top:25px}
.hero h1{font-size:clamp(58px,17vw,86px)}
.section-detail{margin-left:0;gap:4px;font-size:10px}
.section-detail span{font-size:9px}
.cards.levels-grid,.cards.home-grid,.cards.about-grid{grid-template-columns:1fr 1fr;max-width:none;padding:15px 5% 42px}
.cards.about-grid{grid-template-columns:1fr}
.cards.home-grid .agent{min-height:96px}
.principle{min-height:125px}
.character-details{margin-top:0;align-self:flex-end}
}
@media(prefers-reduced-motion:reduce){.body-figure,.head-figure,.core-light{animation:none!important}}