:root {--boradius:1rem;}

html {background-color: var(--custom9) !important;}
body {background: url('bg-frame.png') 50% 50% / cover no-repeat fixed !important;}
body:before {content: ""; background-color: var(--custom9); position: fixed; inset: 0; opacity: .7; mix-blend-mode:screen;}
html.mode-dim body:before {background-color: var(--dark); mix-blend-mode: color-burn;}
html.mode-dark body:before {background-color: var(--modedark); mix-blend-mode: color-burn;}
main {overflow: hidden;}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-weight: 300;}
h1 {line-height:1;}
h2 {line-height:1.2;}
h3 {line-height:1.3;}
h4 {line-height: 1.4;}
h5 {line-height: 1.5; font-size: 1.2rem;}
h6 {line-height: 1.5;}

.cover .top:before {background-image: url("cover-seal.png?v=1"); mask-image: url("cover-seal.gif"); mask-size: contain; -webkit-mask-image: url("cover-seal.gif"); -webkit-mask-size: contain;}
.cover.clicked .top:before {animation: none !important; background-image: url("cover-seal.gif") !important;}

.border {border-color:var(--primary) !important; border-radius: var(--boradius);}
[class*='frame-'] {position: relative; overflow: unset;}
[class*='frame-']:before, .frame-top-bottom:before {-webkit-mask-image: url('png-frame.png'); mask-image: url('png-frame.png'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: var(--primary); content:""; display: block; width:10rem; height: 4rem; top: -3rem; position: absolute; left: 50%; transform: translateX(-50%);}
.frame-bottom:before, .frame-bottom-top:before {top: auto; bottom: -3rem; transform: translateX(-50%) scale(-1);}
.bg-primary [class*='frame-']:before {background-color: var(--light);}

.spring {position: relative; overflow: unset; margin-top:2rem;}
.spring:before {background: url('png-spring.png') 50% 50% / contain no-repeat scroll transparent; content:""; display: block; width:calc(100% - 30px); height: 40px; top: -20px; position: absolute; left: 50%; transform: translateX(-50%);}
.countdown [class*='c-']:before {background-image: url('png-spring1.png') !important;}

:root {--divh:10rem;}
.divider-top, .divider-bottom {-webkit-mask-size: cover; -webkit-mask-repeat: repeat-y;}
.divider-top {z-index: 1; margin-top: calc(-1 * var(--divh)); padding-top:calc(0rem + var(--divh)) !important; -webkit-mask-image: url('divider-top.svg'); -webkit-mask-position: center top !important;}
.divider-bottom {z-index: 2; padding-bottom:calc(0rem + var(--divh)) !important; -webkit-mask-image: url('divider-bottom.svg'); -webkit-mask-position: center bottom !important;}
.divider-bottom + div {margin-top: calc(-1 * var(--divh)); z-index: 1; padding-top: calc(var(--divh) / 2);}

div:has(+ hr:is(.flower,.cloud,.bird)) {padding-bottom: 10rem;}
hr:is(.flower,.cloud,.bird) {background: url("bg-flower.png") 50% 50% / cover no-repeat scroll transparent; border:none; margin-block:-10rem 0; height:20rem; position: absolute; z-index: 1; transition: var(--translower); }
hr.cloud:has(+ div:hover) {transform: scale(1.2);}
hr.cloud {height: 25rem; margin-top: -12rem; background: url("bg-cloud.png") 50% 50% / cover no-repeat scroll var(--custom9); -webkit-mask-image: url("bg-cloud.png"); -webkit-mask-size: cover; -webkit-mask-position: 50% 50%; background-blend-mode: color-burn; -webkit-mask-repeat: no-repeat;}
hr.bird {height: 15rem; margin-top: -9.5rem; background: url("bg-birds.png") 50% 50% / cover no-repeat scroll transparent;}
hr:is(.flower,.cloud) + div {padding-top: 10rem;}
hr:is(.bird) + div {padding-top: 5rem;}
hr.cloud + div {padding-top: 5rem;}
div:has(+ hr.bird) {padding-bottom: 5rem !important;}

:root {}
.hero {min-height: 100svh;}
.hero:before {content:""; background: url("bg-frame.png") 50% 0% / cover no-repeat scroll var(--custom9); background-blend-mode: color-burn;  opacity: 1; position: absolute; inset:0; transition: var(--translowest);}
.hero:hover:before {-webkit-mask-position-y:100%; mask-position-y:100%; background-position-y:100%;}
.hero > .block-section-container {padding-block:3rem !important;}
.hero-cover {height: calc(100svh - 6rem); margin-inline:auto;}
.hero-cover:before {content:""; background: url("cover-front.png") 50% 50% / contain no-repeat scroll; position: absolute; inset:0; z-index: 5;}
.hero-cover .__content {height: 100%; width: 100%;}
.hero-cover .__content:before {display: none !important; opacity: 0 !important;}
.hero-cover img {object-fit: contain; width:100%; height:100%; -webkit-mask-image: url('cover-back.png'); mask-image: url('cover-back.png'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;}
.hero-cover + .block-header {text-align: center; background: url("ribbon.png") 50% 50% / contain no-repeat scroll; padding: 1rem; top: -8rem; margin-bottom: -8rem; position: relative; transform: rotate(-5deg) !important;}
.hero-cover + .block-header * {margin-bottom: 0;}

@media (max-width:767px) {
  .frame-top {margin-top: 4rem;}
  .frame-top-bottom:before {top: auto; bottom: -3rem; transform: translateX(-50%) scale(-1);}
  .frame-bottom-top:before {top: -3rem; bottom: auto; transform: translateX(-50%);}
} @media (max-width:558px) {
  h1 {font-size: 3.5rem;}
  .divider-bottom + div {padding-block: calc(var(--divh) / 1) calc(var(--divh) / 1.5);}
  .divider-top {padding-block:calc(var(--divh) / 1.5) !important;}

  hr.cloud {height: 20rem; margin-top: -10rem; background-size:cover; -webkit-mask-size: cover;}
}