.hero-magazine-container{--spine-shadow-color:#00000059;--spine-shadow-width:1.5em;justify-content:center;align-items:center;width:100%;padding-bottom:2rem;display:flex;container:magazine-container/inline-size}.hero-magazine-container .book-wrapper{justify-content:center;align-items:center;width:100%;font-size:clamp(4px,min(2.2cqi,1.8vh),40px);display:flex}.hero-magazine-container .book{perspective:180em;perspective-origin:30%;filter:drop-shadow(-1em 2em 2em #1c1a1733)drop-shadow(0 1em 1em #1c1a1726);width:42em;height:30em;transition:none;position:relative;transform:translateY(2em)translate(5em)rotate(2deg)rotateY(15deg)}.hero-magazine-container .page{box-sizing:border-box;transform-origin:100% 100%;width:21em;height:30em;transform-style:preserve-3d;background-color:#f8f9fa;background-position:0 0;background-size:21em 30em;border-right:1px solid #0000001a;border-radius:.2em 0 0 .2em;position:absolute;top:0;right:50%}.hero-magazine-container .page:first-child{transform:rotateX(15deg)rotateY(0)translateZ(-.8em);box-shadow:-.1em 0 #fff,-.2em 0 #f8f9fa,-.3em 0 #f8f9fa,-.4em 0 #e9ecef,-.5em 0 #e9ecef,-.6em 0 #dee2e6,-.7em 0 #dee2e6,-.8em 0 #ced4da,-.9em 0 #1e293b,-1em 0 #0f172a}.hero-magazine-container .page:first-child:before{content:"";pointer-events:none;z-index:2;background:linear-gradient(270deg,#0000004d 0%,#0000001a 30%,#0000 100%);width:3em;height:100%;position:absolute;top:0;right:0}.hero-magazine-container .page:nth-child(2){transform:rotateX(15deg)rotateY(3deg)translateZ(-.4em)}.hero-magazine-container .page:nth-child(2):before{content:"";pointer-events:none;z-index:2;background:linear-gradient(270deg,#00000059 0%,#0000001f 30%,#0000 100%);width:3em;height:100%;position:absolute;top:0;right:0}.hero-magazine-container .page:nth-child(3){box-shadow:inset calc(var(--spine-shadow-width)*-1)0 calc(var(--spine-shadow-width)*2)calc(var(--spine-shadow-width)*-1)var(--spine-shadow-color);background-position:0 0;background-size:21em 30em;animation:12s infinite staticLeftBg;overflow:hidden;transform:rotateX(15deg)rotateY(6deg)}.hero-magazine-container .page:nth-child(4){transform:rotateX(15deg)rotateY(177deg)}.hero-magazine-container .page:nth-child(5){transform:rotateX(15deg)rotateY(175.5deg)}.hero-magazine-container .page:nth-child(6){border-left:1px solid #0000001a;border-right:none;overflow:hidden;transform:rotateX(15deg)rotateY(174deg);box-shadow:-.1em 0 #fff,-.2em 0 #f8f9fa,-.3em 0 #e9ecef,-.4em 0 #dee2e6,-.5em 0 #ced4da,-.6em 0 #1e293b,-.7em 0 #0f172a}.hero-magazine-container .page:nth-child(6):after{content:"";box-sizing:border-box;transform-origin:50%;width:21em;height:30em;box-shadow:inset var(--spine-shadow-width)0 calc(var(--spine-shadow-width)*2)calc(var(--spine-shadow-width)*-1)var(--spine-shadow-color);background-position:0 0;background-size:21em 30em;animation:12s infinite staticRightBg;position:absolute;top:0;right:0;transform:rotateY(180deg)}.hero-magazine-container .gap{transform-origin:bottom;background:0 0;width:1em;height:30em;position:absolute;top:0;left:calc(50% - .5em);transform:rotateX(15deg)}.hero-magazine-container .gap:after{content:"";background:#d3d3d3;width:10px;height:100%;position:absolute;top:0;left:50%;transform:translate(-50%)}.hero-magazine-container .gap:before{content:"";pointer-events:none;background:linear-gradient(90deg,#0000 0%,#00000008 25%,#0000001a 40%,#00000047 48%,#00000059 50%,#00000047 52%,#0000001a 60%,#00000008 75%,#0000 100%);width:4em;height:100%;position:absolute;top:0;left:50%;transform:translate(-50%)}.hero-magazine-container .pages,.hero-magazine-container .flips{transform-style:preserve-3d}.hero-magazine-container .flip{box-sizing:border-box;transform-origin:100% 100%;perspective:420em;perspective-origin:50%;width:3.1em;height:30em;transform-style:preserve-3d;backface-visibility:hidden;background-size:21em 30em;position:absolute;top:0;right:calc(100% - .1em)}.hero-magazine-container .flip:before{content:"";background:linear-gradient(to right,#fff0 0%,rgba(255,255,255,var(--shine-intensity,.6))50%,#fff0 100%);opacity:0;pointer-events:none;z-index:5;animation:6s ease-in-out infinite lighting;position:absolute;inset:0}.hero-magazine-container .flip:after{content:"";box-sizing:border-box;backface-visibility:hidden;background-size:21em 30em;width:100%;height:100%;animation:12s infinite backBg;position:absolute;top:0;right:0;transform:rotateY(180deg)}.hero-magazine-container .flip.flip1{box-shadow:inset calc(var(--spine-shadow-width)*-1)0 calc(var(--spine-shadow-width)*2)calc(var(--spine-shadow-width)*-1)var(--spine-shadow-color);background-position:-18em 0;animation:6s ease-in-out infinite flip1,12s infinite frontBg;right:50%}.hero-magazine-container .flip.flip1:after{box-shadow:inset var(--spine-shadow-width)0 calc(var(--spine-shadow-width)*2)calc(var(--spine-shadow-width)*-1)var(--spine-shadow-color);background-position:0 0}.hero-magazine-container .flip:not(.flip1){transform-origin:100%;animation:6s ease-in-out infinite flip2,12s infinite frontBg;top:0}.hero-magazine-container .flip:not(.flip1):before{display:none}.hero-magazine-container .flip.flip2{background-position:-15em 0}.hero-magazine-container .flip.flip2:after{background-position:-3em 0}.hero-magazine-container .flip.flip3{background-position:-12em 0}.hero-magazine-container .flip.flip3:after{background-position:-6em 0}.hero-magazine-container .flip.flip4,.hero-magazine-container .flip.flip4:after{background-position:-9em 0}.hero-magazine-container .flip.flip5{background-position:-6em 0}.hero-magazine-container .flip.flip5:after{background-position:-12em 0}.hero-magazine-container .flip.flip6{background-position:-3em 0}.hero-magazine-container .flip.flip6:after{background-position:-15em 0}.hero-magazine-container .flip.flip7{background-position:0 0;width:3em}.hero-magazine-container .flip.flip7:after{background-position:-18em 0}@keyframes flip1{0%,20%{transform:rotateX(15deg)rotateY(6deg)}80%,to{transform:rotateX(15deg)rotateY(174deg)}}@keyframes flip2{0%,20%{transform:rotateY(0)translateY(0)}50%{transform:rotateY(-6deg)translateY(0)}to{transform:rotateY(0)translateY(0)}}@keyframes lighting{0%,20%{opacity:0}50%{opacity:1}80%,to{opacity:0}}@keyframes frontBg{0%,37.5%{background-image:var(--img-1)}37.51%,87.5%{background-image:var(--img-3)}87.51%,to{background-image:var(--img-1)}}@keyframes staticLeftBg{0%,5%{background-image:var(--img-1)}5.01%,55%{background-image:var(--img-3)}55.01%,to{background-image:var(--img-1)}}@keyframes staticRightBg{0%,45%{background-image:var(--img-2)}45.01%,95%{background-image:var(--img-4)}95.01%,to{background-image:var(--img-2)}}@keyframes backBg{0%,12.5%{background-image:var(--img-2)}12.51%,62.5%{background-image:var(--img-4)}62.51%,to{background-image:var(--img-2)}}