/* CSS of the main page. Anything outside #pages-container */

:root{
  /* Main Content Div spacing calculations */
  /* These margins are applied at first. */
  /* If there is space left over, we try to equalize the margins first */
  /* And if space is still left over, it is distributed to both sides equally. */
  --mcd-left:170px;
  --mcd-right:64px;
  
  --mcd-difference: calc(var(--mcd-left) - var(--mcd-right));
  --mcd-margins: calc(var(--mcd-left) + var(--mcd-right));
  --mcd-width: min(calc(100vw - var(--mcd-margins)), 1000px);
  --mcd-space-around: calc(100vw - var(--mcd-width));
  --mcd-space-excess: calc( var(--mcd-space-around) - var(--mcd-margins));
  --mcd-space-equalize: min(var(--mcd-space-excess),var(--mcd-difference));
  --mcd-space-distributed: calc((var(--mcd-space-excess) - var(--mcd-space-equalize)) /2 );
  --mcd-margin-left: calc(var(--mcd-left) + var(--mcd-space-distributed));
  --mcd-margin-right: calc(var(--mcd-right) + var(--mcd-space-equalize) + var(--mcd-space-distributed));
  
  --mcd-inner-width: calc(var(--mcd-width) * 1.00);
  
  
  --pages-padding-lr: 48px;
  --pages-actual-width:calc(var(--mcd-inner-width) - 96px);
  
  /* MalangPony logo positioning */
  /* It's a bit complicated due to it being sticky at the bottom */

  /* Margin from main container */
  --intrologo-side-margins: 32px; 
  /* Roughly match the logo aspect ratio*/
  --intrologo-aspect-ratio:2.764; 
  /* Max height of logo. */
  --intrologo-max-height:50svh;
  /* The center position of logo, measured from the top of the screen.*/
  --intrologo-center-height-from-top:35svh;
  
  /* Automatically calculated values */
  --intrologo-max-width: calc((var(--mcd-inner-width) - ( var(--intrologo-side-margins) *2 )) * 0.9);
  --intrologo-height:min(
    400px, 
    var(--intrologo-max-height), 
    calc(var(--intrologo-max-width) / var(--intrologo-aspect-ratio)));
  /* Set the bottom margin so it sticks until reaching a certain scroll progress. */
  --intrologo-bottom-margin:calc(100svh - ( var(--intrologo-height) /2 ) - var(--intrologo-center-height-from-top));
  
  
  /* L2D size calculations
   *
   * Since hanmari takes up ~75% of the canvas size most of the time,
   * L2D Base Size is ~0.75 times the canvas size.
   * (On the Intro page, it's more closer to ~90% but still)
   * 
   * LBS should be min(30vw,40lvh)
   * But LBS should be at least --mcd-margin-right
   * And LBS should be not exceed 60lvh
   */
  --l2d-base-size: min(
      max(
        min(30vw,40lvh), 
        var(--mcd-margin-right)),
      min(60lvh));
  --l2d-canvas-size: calc(var(--l2d-base-size) / 0.75);
}
/* Mobile mode */
@media (width<640px) {
  :root{
    /* L2D size for mobile. */
    --l2d-base-size: min(60vw,33lvh);
  }
}

/* contains blanker and afterscroll */
#main-content-backdrop{
  --mcd-glow-width:32px;
  width:var(--mcd-width);
  margin-left:var(--mcd-margin-left);
  margin-right:var(--mcd-margin-right);
  
  position:relative;
  display:flex;
  flex-direction:column;
  
  min-height: 100lvh;
}

.anim-disabled #main-content-backdrop.on-intro-page{
  padding-top:48px;
}

/* MainContentBackdrop Backgrounds */
.dark-mode #main-content-backdrop:not(.on-intro-page){
  --mcb-glow-opacity:40%;
  --mcb-edge-opacity:60%;
  --mcb-center-opacity:50%;
  --mcb-color:#000;
}
.dark-mode #main-content-backdrop.on-intro-page{
  --mcb-glow-opacity:40%;
  --mcb-edge-opacity:70%;
  --mcb-center-opacity:60%;
  --mcb-color:#000;
}
.light-mode #main-content-backdrop:not(.on-intro-page){
  --mcb-glow-opacity:40%;
  --mcb-edge-opacity:70%;
  --mcb-center-opacity:60%;
  --mcb-color:#FFF;
}
.light-mode #main-content-backdrop.on-intro-page{
  --mcb-glow-opacity:40%;
  --mcb-edge-opacity:80%;
  --mcb-center-opacity:70%;
  --mcb-color:#FFF;
}
@property --mcb-opacity {
  syntax:"<number>";
  inherits:true;
  initial-value:0;
}
@property --mcb-color {
  syntax:"<color>";
  inherits:true;
  initial-value:#000;
}
#main-content-backdrop{
  transition-property: --mcb-opacity, --mcb-color;
  transition-duration:0.5s;
}
.anim-disabled #main-content-backdrop{
  transition-duration:0s;
}
#main-content-backdrop.activated{
  --mcb-opacity:1.0;
}
#main-content-backdrop{
  background-image: linear-gradient(
    to right,
    hsl(from var(--mcb-color) h s l / calc(var(--mcb-opacity) * var(--mcb-edge-opacity)  ))   0%,
    hsl(from var(--mcb-color) h s l / calc(var(--mcb-opacity) * var(--mcb-center-opacity)))  20%,
    hsl(from var(--mcb-color) h s l / calc(var(--mcb-opacity) * var(--mcb-center-opacity)))  80%,
    hsl(from var(--mcb-color) h s l / calc(var(--mcb-opacity) * var(--mcb-edge-opacity)  )) 100%);
  padding-left:0;
  padding-right:0;
}
.mcd-shadow{
  position:absolute;
  top:0;
  bottom:0;
}
#mcd-shadow-left{
  right:100%;
  left:calc(var(--mcd-glow-width) * -1);
  background-image: linear-gradient(
    to right,
    hsl(from var(--mcb-color) h s l / 0%                                                  )   0%,
    hsl(from var(--mcb-color) h s l / calc(var(--mcb-opacity) * var(--mcb-glow-opacity)  )) 100%);
}
#mcd-shadow-right{
  right:calc(var(--mcd-glow-width) * -1);
  left:100%;
  background-image: linear-gradient(
    to left,
    hsl(from var(--mcb-color) h s l / 0%                                                  )   0%,
    hsl(from var(--mcb-color) h s l / calc(var(--mcb-opacity) * var(--mcb-glow-opacity)  )) 100%);
}
.mobile-mode .mcd-shadow{
  display:none;
}


/* Contains all scrollable content. */
#content-scroller{
	position:absolute;
	bottom:0;
    right:0;
    left:0;
    top:0;
    z-index:10;
	overflow-y:scroll;
	overflow-x:hidden;
}

/* Make sure afterscroll content is not visible at the start */
#screen-blanker{
  height:min(200lvh,2000px);
}

#nonintro-header-content{
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:flex-start;
  
  position:absolute;
  /* #main-content-actual has 128px padding on top */
  top:16px;
  height:110px;
  right:0;
  left:24px;
  z-index:1;
  pointer-events:none;
}
.on-intro-page #nonintro-header-content{
  display:none;
}
#logo-header{
  max-height:100%;
  max-width:80%;
}

#main-content-actual{
  padding-top:128px; /* Space for the nonintro-header*/
  position:relative;
  display:flex;
  flex-direction:column;
  align-self:stretch;
  min-height:100svh;
}
.on-intro-page #main-content-actual{
  min-height: calc(100svh - var(--intrologo-height))
}

#main-content-filler{
  flex-grow:1;
}

/* Actual content after scrolling. */
#pages-container{
  
  align-self:stretch;
  display:flex;
  flex-direction:column;
  filter:brightness(30%);
  transition-property: filter;
  transition-duration:0.5s;
  position:relative;
  z-index:10;
  padding-left:var(--pages-padding-lr);
  padding-right:var(--pages-padding-lr);
}
.anim-disabled #pages-container{
  transition-duration:0s;
}
#pages-container.activated{
  filter:none;
}


#intro-logo{
  align-self:center;
  position:sticky;
  aspect-ratio:var(--intrologo-aspect-ratio);
  bottom:var(--intrologo-bottom-margin);
  height:var(--intrologo-height);
  display:none;
}
.on-intro-page #intro-logo{
  display:block;
}
#intro-logo > img{
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  object-fit:contain;
}


/* Sky color */
#sky-bg{
  background: linear-gradient(0deg,#181365,#4f3773,#6d4c79);
}

/* Scroll-inviter */
#scroll-inviter-container{
  position:absolute;
  top:70lvh;
  left:0;
  right:0;
  display:flex;
  flex-direction:row;
  justify-content:center;
}
@keyframes scroll-inviter-anim{
  from{
    margin-top:0px;
    opacity:0.5;
  }
  to{
    margin-top:24px;
    opacity:0.8;
  }
  
}
.anim-enabled #scroll-inviter{
  animation-name:scroll-inviter-anim;
}
#scroll-inviter{
  animation-direction:alternate;
  animation-duration:1.5s;
  animation-iteration-count:infinite;
  animation-timing-function: ease-in-out;
  
  opacity:0.5;
  
  color:var(--color-text-light);
  font-weight:700;
  
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.si-text{
  font-size:1.5em;
}
.si-arrow{
  font-size:4em;
  opacity:0.8;
}

/* Footer */
.main-content-divider{
  margin-top:32px;
  margin-bottom:16px;
  margin-left:64px;
  margin-right:64px;
  align-self:stretch;
  height:2px;
  opacity:0.5;
  background-image: linear-gradient(
    to right,
    hsl(from var(--color-text-auto) h s l / 0%) 0%,
    var(--color-text-auto) 10% 90%,
    hsl(from var(--color-text-auto) h s l / 0%) 100%)
}
#footer-content{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  flex-direction:column;
  padding-bottom:16px;
  gap:8px;
  line-height:1.5;
  
  /* This is so that the user can scroll all the way down to the page */
  /* and make hanmari sit in the footer space */
  /* so no actual page contents are covered */
  min-height:var(--l2d-base-size);
}
#footer-content .footer-text-mobile-break{
  display:none;
}
.footer-text-contact{
  font-weight:700;
}
#footer-sns-buttons{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:8px;
}
#footer-sns-buttons .link-button{
  --lb-color-text:#FFF;
  --lb-color-bg: light-dark(var(--template-malang-text),var(--template-malang-TWI));
}

.footer-disclaimer{
  text-align:center;
  font-size:0.8em;
  font-weight:400;
}

#footer-expander{
  flex-grow:1;
}
#footer-source{
  display:block;
  font-size:0.8em;
  align-self:flex-start;
  padding-left:24px;
}
#footer-source-link{
  font-weight:400;
}

/* Responsive Section */
/* Targeting down to 300px. */

/* Mobile mode */
@media (width<640px) {
  :root{
    --mcd-width:100vw;
    --mcd-inner-width:100vw;
    --mcd-margin-left:0px;
    --mcd-margin-right:0px;
    --intrologo-center-height-from-top:25svh;
  }
  #main-content-backdrop{
    width:100%;
    margin-left:0;
	margin-right:0;
  }
  #scroll-inviter-container{
    top:45svh;
  }
  #footer-content{
    align-items:flex-start;
  }
  .footer-disclaimer{
    text-align:left;
  }
  .main-content-divider{
    margin-right:32px;
    background-image: linear-gradient(
      to right,
      var(--color-text-auto) 0% 60%,
      hsl(from var(--color-text-auto) h s l / 0%) 100%)
  }
  #nonintro-header-content{
    justify-content:center;
    left:0;
  }
}

/* Smaller Mobiles */
@media (width<480px) {
  #footer-sns-buttons{
    flex-wrap:wrap;
    max-width:8.0em;
    justify-content:flex-start;
  }
  #footer-content .footer-text-mobile-break{
    display:inline;
  }
  #footer-source{
    display:none;
  }
}

/* Ridiculously Small Mobiles */
@media (width<360px) {
}

/* Mobile ladder */
/* PC <-640-> Big Mobile <-480-> Small Mobile <-360-> Ridiculous <-300-> I give up */
@media (width>=480px) and (width<640px) {
  /* 640 ~ 480 : Big Mobiles */
   #footer-content{
    margin-left:32px;
  }
  .main-content-divider{
    margin-left:32px;
  }
  :root{
    --pages-padding-lr: 24px;
    --pages-actual-width:calc(var(--mcd-inner-width) - 48px);
  }
  #footer-source{
    padding-left:0;
    padding-bottom:8px;
  }
}
@media (width>=360px) and (width<480px) {
  /* 480 ~ 360 : Small Mobiles */
  #footer-content{
    margin-left:20px;
  }
  .main-content-divider{
    margin-left:20px;
  }
  #nonintro-header-content{
    align-items:flex-end;
  }
  #logo-header{
    max-width:50%;
  }
  :root{
    --pages-padding-lr: 16px;
    --pages-actual-width:calc(var(--mcd-inner-width) - 32px);
  }
}
@media (width<360px) {
  /* 360 ~ 300 : Ridiculously Small Mobiles */
  #footer-content{
    margin-left:12px;
  }
  .main-content-divider{
    margin-left:12px;
  }
  #logo-header{
    display:none;
  }
  :root{
    --pages-padding-lr: 8px;
    --pages-actual-width:calc(var(--mcd-inner-width) - 16px);
  }
}