.floating-crest{top:var(--crest-top,4%);left:var(--crest-left,26.25%);width:var(--crest-width,47.5%);height:var(--crest-height,auto);aspect-ratio:324/356;perspective:900px;pointer-events:none;--crest-mask:url(../../../assets/houses/gryffindor-cover-crest.png);position:absolute}.floating-crest-shadow{filter:blur(6px);opacity:.64;animation:8s ease-in-out infinite crest-metal-shadow;position:absolute;inset:0;transform:translate(5px,14px)scaleX(.94)}.floating-crest-shadow:before{content:"";-webkit-mask:var(--crest-mask) center/100% 100% no-repeat;mask:var(--crest-mask) center/100% 100% no-repeat;-webkit-mask:var(--crest-mask) center/100% 100% no-repeat;background:#190504;position:absolute;inset:0}.floating-crest-body{width:100%;height:100%;transform-style:preserve-3d;transform-origin:50%;animation:8s ease-in-out infinite crest-metal-turn;position:relative;transform:translateY(-6px)rotateY(-20deg)}.floating-crest-relief{-webkit-mask:var(--crest-mask) center/100% 100% no-repeat;mask:var(--crest-mask) center/100% 100% no-repeat;-webkit-mask:var(--crest-mask) center/100% 100% no-repeat;transform:translateZ(var(--crest-depth));filter:brightness(var(--edge-luminance));background:linear-gradient(#343d46 0%,#9aa7b1 10%,#e6edf2 18%,#f8fcff 21%,#77848e 24%,#323c46 34%,#161d25 43%,#697782 49%,#d9e4eb 52%,#fbfdff 54%,#929fa9 57%,#3c4853 68%,#7a8894 79%,#e2eaf0 89%,#f5f8fa 91%,#616e79 96%,#303c47 100%);position:absolute;inset:0;overflow:hidden}.floating-crest-relief:before{content:"";opacity:.3;background:repeating-linear-gradient(0deg,#ffffff12 0 .4px,#10182014 .4px .8px,#0000 .8px 1.8px);position:absolute;inset:0}.floating-crest-relief:after{content:"";mix-blend-mode:screen;opacity:.65;background:linear-gradient(90deg,#0000 20%,#e8f1f91a 32%,#f4f9ff99 39%,#ffffffeb 42%,#dce9f366 44%,#0000 53%,#fff3 70%,#0000 82%);animation:8s ease-in-out infinite crest-side-reflection;position:absolute;inset:0 -70%;transform:translate(-18%)}.floating-crest-face{position:absolute;inset:0;transform:translateZ(.1px)}.floating-crest-face>img{object-fit:contain;width:100%;height:100%;display:block}.floating-crest-finish{-webkit-mask:var(--crest-mask) center/100% 100% no-repeat;mask:var(--crest-mask) center/100% 100% no-repeat;-webkit-mask:var(--crest-mask) center/100% 100% no-repeat;mix-blend-mode:screen;position:absolute;inset:0;overflow:hidden}.floating-crest-light{opacity:.7;background:linear-gradient(90deg,#0000 32%,#ffe0a310 39%,#ffedc647 46%,#fff9e9a6 49%,#fff6dd70 51%,#ffe6ae29 55%,#0000 65%);animation:8s ease-in-out infinite crest-metal-light;position:absolute;inset:0 -75%;transform:translate(-24%)}.floating-crest:not([data-active=true]) .floating-crest-relief:after,.floating-crest:not([data-active=true]) :is(.floating-crest-body,.floating-crest-light,.floating-crest-shadow){animation-play-state:paused}@keyframes crest-side-reflection{0%,to{opacity:.5;transform:translate(-18%)}50%{opacity:.8;transform:translate(18%)}}@keyframes crest-metal-turn{0%,to{transform:translateY(-6px)rotateY(-20deg)}50%{transform:translateY(-6px)rotateY(20deg)}}@keyframes crest-metal-light{0%,to{transform:translate(-24%)}50%{transform:translate(24%)}}@keyframes crest-metal-shadow{0%,to{transform:translate(5px,14px)scaleX(.94)}25%,75%{transform:translateY(14px)scaleX(1)}50%{transform:translate(-5px,14px)scaleX(.94)}}@media (prefers-reduced-motion:reduce){.floating-crest-body{animation:none;transform:translateY(-6px)}.floating-crest-light{opacity:.22;animation:none;transform:translate(-12%)}.floating-crest-shadow{animation:none;transform:translateY(14px)}.floating-crest-relief:after{opacity:.35;animation:none;transform:translate(0)}}.crest-background-repair{object-fit:fill;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.floating-crest:is([data-house=slytherin],[data-house=ravenclaw]) .floating-crest-light{background:linear-gradient(90deg,#0000 32%,#dceaf310 39%,#e6f0f947 46%,#f7fbffa6 49%,#eff7ff70 51%,#d5e8f329 55%,#0000 65%)}.floating-crest-face>.floating-crest-cropped{object-fit:fill;max-width:none;position:absolute}.floating-crest:not([data-house=gryffindor]) .floating-crest-face{transform-origin:0 0;width:300%;height:300%;transform:translateZ(.1px)scale(.333333)}.floating-crest[data-house=slytherin]{top:calc(var(--crest-top) + 6px)}