/* First-load splash. The route logo stays centered while its circular progress completes. */
html{scrollbar-gutter:stable}
html.kymaSplashActive:not(.kymaSplashScrollReady){overflow-x:hidden;overflow-y:scroll}
html.kymaSplashActive:not(.kymaSplashScrollReady) body{overflow:hidden}

.kymaSplash{
  --kyma-splash-reveal-duration:1100ms;
  --kyma-splash-transition-easing:cubic-bezier(.22,.61,.36,1);
  --kyma-splash-color:#c990df;
  --kyma-splash-logo:url("assets/hades-header-logo-new.png");
  --kyma-splash-logo-ratio:978/171;
  position:fixed;
  z-index:1000;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:transparent;
  opacity:1;
  pointer-events:auto;
  isolation:isolate;
}
.kymaSplash.isPassThrough{pointer-events:none}
.kymaSplashBackdrop{
  position:absolute;
  z-index:0;
  inset:0;
  background:#f9fdff;
  opacity:1;
  pointer-events:none;
  will-change:opacity;
}
.kymaSplash.isFading .kymaSplashBackdrop{
  opacity:0;
  transition:opacity var(--kyma-splash-reveal-duration) var(--kyma-splash-transition-easing);
}
.kymaSplashLogoWrap{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:clamp(290px,34vw,470px);
  aspect-ratio:1;
  opacity:1;
  transition:opacity var(--kyma-splash-reveal-duration) ease-out,transform var(--kyma-splash-reveal-duration) var(--kyma-splash-transition-easing);
}
.kymaSplash.isFading .kymaSplashLogoWrap{
  opacity:0;
  transform:scale(.96);
}
.kymaSplashLogo{
  display:block;
  z-index:1;
  width:72%;
  height:auto;
  aspect-ratio:var(--kyma-splash-logo-ratio);
  background:var(--kyma-splash-logo) center/contain no-repeat;
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  transform-origin:50% 50%;
  will-change:transform,opacity;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.kymaSplashProgress{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  transform:rotate(-90deg);
}
.kymaSplashProgressTrack,
.kymaSplashProgressValue{
  fill:none;
  stroke-width:2.2;
  vector-effect:non-scaling-stroke;
}
.kymaSplashProgressTrack{stroke:color-mix(in srgb,var(--kyma-splash-color) 18%,#dce4e8)}
.kymaSplashProgressValue{
  stroke:url("#kymaSplashHomeGradient");
  stroke-linecap:round;
  stroke-dasharray:351.86;
  stroke-dashoffset:351.86;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--kyma-splash-color) 42%,transparent));
}
html[data-splash-calendar] .kymaSplashProgressValue{stroke:var(--kyma-splash-color)}
html[data-splash-calendar="kyma"] .kymaSplash,
html[data-splash-calendar="ddinggul"] .kymaSplash,
html[data-splash-calendar="chaenna"] .kymaSplash,
html[data-splash-calendar="chorok"] .kymaSplash,
html[data-splash-calendar="jumeok"] .kymaSplash{
  --kyma-splash-logo-ratio:auto;
}
html[data-splash-calendar="kyma"] .kymaSplash{--kyma-splash-color:#b46ac1;--kyma-splash-logo:url("assets/member-logo-kyma-v2.png")}
html[data-splash-calendar="ddinggul"] .kymaSplash{--kyma-splash-color:#f2c73e;--kyma-splash-logo:url("assets/member-logo-singgyul-v2.png")}
html[data-splash-calendar="chaenna"] .kymaSplash{--kyma-splash-color:#7899c5;--kyma-splash-logo:url("assets/member-logo-chaenna-v2.png")}
html[data-splash-calendar="chorok"] .kymaSplash{--kyma-splash-color:#aecb55;--kyma-splash-logo:url("assets/member-logo-chorok-v2.png")}
html[data-splash-calendar="jumeok"] .kymaSplash{--kyma-splash-color:#e99cbe;--kyma-splash-logo:url("assets/member-logo-sompunch-v2.png")}
html[data-splash-calendar] .kymaSplashLogo{width:68%;height:28%;background-size:contain}

html.kymaSplashHomeHidden .siteHeader,
html.kymaSplashHomeHidden .carouselScene,
html.kymaSplashHomeHidden .memberLiveSection,
html.kymaSplashHomeHidden .quickLinksSection,
html.kymaSplashHomeHidden .weekScheduleSection,
html.kymaSplashHomeHidden .musicDock,
html.kymaSplashHomeHidden .heroMeta{
  opacity:0!important;
}
html.kymaSplashLettersHidden .heroKy,
html.kymaSplashLettersHidden .heroMa{
  opacity:0!important;
}
html.kymaSplashActive body>:not(.kymaSplash):not(script){
  opacity:0;
}
html.kymaSplashActive.kymaSplashScrollReady body>:not(.kymaSplash):not(script){
  opacity:1;
  transition:opacity var(--kyma-splash-reveal-duration) var(--kyma-splash-transition-easing);
}
@media(max-width:760px){
  .kymaSplashLogoWrap{width:min(78vw,350px)}
  .kymaSplashProgressTrack,.kymaSplashProgressValue{stroke-width:2.5}
}
