* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #f2f2f2; }
.home-main { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
.homepage-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.click-zone { position: absolute; z-index: 30; display: block; border: 0; padding: 0; background: transparent; cursor: pointer; }
/* Opening hitboxes: sakto sa name/button sa homepage */
.allowlist-zone { left: 18.0%; top: 50.0%; width: 15.0%; height: 7.0%; }
.artcontest-zone { right: 18.0%; top: 50.0%; width: 15.0%; height: 7.0%; }
.scroll-popdown { position: absolute; inset: 0; z-index: 20; pointer-events: none; opacity: 0; }
.scroll-popdown.active, .scroll-popdown.closing { z-index: 100; pointer-events: auto; opacity: 1; }
.scroll-image { position: absolute; top: -2px; height: calc(100vh + 4px); width: auto; max-width: none; max-height: none; object-fit: contain; user-select: none; -webkit-user-drag: none; transform: translateY(-105%); opacity: 0; }
.scroll-popdown.active .scroll-image { animation: kuonScrollDrop 720ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.scroll-popdown.closing .scroll-image { animation: kuonScrollUp 520ms cubic-bezier(0.7, 0, 0.84, 0) forwards; }
@keyframes kuonScrollDrop { 0% { transform: translateY(-105%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes kuonScrollUp { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-105%); opacity: 0; } }
.scroll-popdown.allowlist-active .scroll-image { left: 0; }
.scroll-popdown.artcontest-active .scroll-image { right: 0; }
/* Back hitbox: sakto sa arrow icon sa scroll image */
.scroll-back-zone { position: absolute; z-index: 90; display: none; border: 0; padding: 0; background: transparent; cursor: pointer; width: 7.2vh; height: 6.2vh; top: 2.7vh; }
.scroll-popdown.active .scroll-back-zone { display: block; }
.scroll-popdown.allowlist-active .scroll-back-zone { left: 59.0vh; }
.scroll-popdown.artcontest-active .scroll-back-zone { right: 13.8vh; width: 10vh; height: 8vh; top: 2.0vh; }
@media (max-width: 768px) {
  .allowlist-zone { left: 13%; top: 48%; width: 25%; height: 8%; }
  .artcontest-zone { right: 13%; top: 48%; width: 25%; height: 8%; }
  .scroll-image { height: 100vh; }
  .scroll-back-zone { width: 8vh; height: 7vh; top: 2.5vh; }
  .scroll-popdown.allowlist-active .scroll-back-zone { left: 58.5vh; }
  .scroll-popdown.artcontest-active .scroll-back-zone { right: 13.5vh; width: 10vh; height: 8vh; top: 2.0vh; }
}

/* Prevent hidden homepage buttons from being clicked while a scroll is open */
.home-main.scroll-open .click-zone { pointer-events: none; }
.home-main.scroll-open .scroll-back-zone { pointer-events: auto; }


/* Art Contest active task links + entry fields */
.artcontest-controls { position: absolute; inset: 0; z-index: 60; display: none; pointer-events: none; }
.scroll-popdown.artcontest-active.active.art-controls-ready .artcontest-controls { display: block; pointer-events: none; }
.scroll-popdown.artcontest-active.active.art-controls-ready .art-task-link,
.scroll-popdown.artcontest-active.active.art-controls-ready .art-submit-zone,
.scroll-popdown.artcontest-active.active.art-controls-ready .art-entry-input { pointer-events: auto; }
.art-task-link, .art-submit-zone, .art-entry-input { position: absolute; z-index: 65; }
.art-task-link, .art-submit-zone { display: block; border: 0; padding: 0; background: transparent; cursor: pointer; }
.art-follow-link { right: 44.0vh; top: 12.7vh; width: 28.2vh; height: 7.4vh; }
.art-repost-link { right: 15.0vh; top: 12.7vh; width: 27.7vh; height: 7.4vh; }
.art-comment-link { right: 29.0vh; top: 22.0vh; width: 28.2vh; height: 7.6vh; }
.art-entry-input { right: 22.0vh; width: 39.8vh; height: 4.7vh; border: 0; outline: none; border-radius: 1.0vh; background: transparent; color: #111; font: 700 1.65vh/1 Arial, sans-serif; padding: 0 1.4vh; }
.art-username-input { top: 39.1vh; }
.art-share-input { top: 53.2vh; }
.art-submit-zone { right: 20.2vh; top: 67.1vh; width: 34.6vh; height: 9.2vh; }
.art-entry-input::placeholder { color: rgba(0,0,0,0.45); }

@media (max-width: 768px) {
  .art-follow-link { right: 44.0vh; top: 12.7vh; width: 28.2vh; height: 7.4vh; }
  .art-repost-link { right: 15.0vh; top: 12.7vh; width: 27.7vh; height: 7.4vh; }
  .art-comment-link { right: 29.0vh; top: 22.0vh; width: 28.2vh; height: 7.6vh; }
  .art-entry-input { right: 22.0vh; width: 39.8vh; height: 4.7vh; font-size: 1.65vh; }
  .art-username-input { top: 39.1vh; }
  .art-share-input { top: 53.2vh; }
  .art-submit-zone { right: 20.2vh; top: 67.1vh; width: 34.6vh; height: 9.2vh; }
}

/* Allowlist PFP active task links + entry fields */
.allowlist-controls { position: absolute; inset: 0; z-index: 60; display: none; pointer-events: none; }
.scroll-popdown.allowlist-active.active.allow-controls-ready .allowlist-controls { display: block; pointer-events: none; }
.scroll-popdown.allowlist-active.active.allow-controls-ready .allow-task-link,
.scroll-popdown.allowlist-active.active.allow-controls-ready .allow-submit-zone,
.scroll-popdown.allowlist-active.active.allow-controls-ready .allow-entry-input { pointer-events: auto; }
.allow-task-link, .allow-submit-zone, .allow-entry-input { position: absolute; z-index: 65; }
.allow-task-link, .allow-submit-zone { display: block; border: 0; padding: 0; background: transparent; cursor: pointer; }
.allow-follow-link { left: 16.0vh; top: 12.7vh; width: 28.2vh; height: 7.4vh; }
.allow-repost-link { left: 45.0vh; top: 12.7vh; width: 27.7vh; height: 7.4vh; }
.allow-comment-link { left: 30.5vh; top: 22.0vh; width: 28.2vh; height: 7.6vh; }
.allow-entry-input { left: 19.2vh; width: 39.8vh; height: 4.7vh; border: 0; outline: none; border-radius: 1.0vh; background: transparent; color: #111; font: 700 1.65vh/1 Arial, sans-serif; padding: 0 1.4vh; }
.allow-username-input { top: 39.1vh; }
.allow-share-input { top: 53.2vh; }
.allow-submit-zone { left: 25.0vh; top: 67.1vh; width: 34.6vh; height: 9.2vh; }
.allow-entry-input::placeholder { color: rgba(0,0,0,0.45); }

@media (max-width: 768px) {
  .allow-follow-link { left: 16.0vh; top: 12.7vh; width: 28.2vh; height: 7.4vh; }
  .allow-repost-link { left: 45.0vh; top: 12.7vh; width: 27.7vh; height: 7.4vh; }
  .allow-comment-link { left: 30.5vh; top: 22.0vh; width: 28.2vh; height: 7.6vh; }
  .allow-entry-input { left: 19.2vh; width: 39.8vh; height: 4.7vh; font-size: 1.65vh; }
  .allow-username-input { top: 39.1vh; }
  .allow-share-input { top: 53.2vh; }
  .allow-submit-zone { left: 25.0vh; top: 67.1vh; width: 34.6vh; height: 9.2vh; }
}


/* KUON submit button alignment fix */
.submit-btn,
#submitArtContest,
#submitAllowlist,
[id*="submit"] {
  transform: translateY(-12px);
}


/* Functional center HOMEPAGE button hitbox */
.homepage-zone{
  position:absolute;
  left:50%;
  top:67.5%;
  width:17vw;
  height:6vw;
  min-width:220px;
  min-height:70px;
  max-width:340px;
  max-height:115px;
  transform:translate(-50%,-50%);
  background:transparent;
  border:0;
  cursor:pointer;
  z-index:6;
  -webkit-tap-highlight-color:transparent;
}
.homepage-zone:focus,
.homepage-zone:active{
  outline:none;
  background:transparent;
}