/* =========================================================
   THE BLUE VALLEY — 3rd Anniversary Livestream
   lhab3rd.hindia1024.com
   ========================================================= */

:root{
  --ink:#ffffff;
  --ink-soft:rgba(255,255,255,.82);
  --line:rgba(255,255,255,.85);
  --bg-tail:#648aad;          /* bottom colour of DESKTOP bg */
  --font: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* desktop artboard = 1441px wide -> all hero spacing is in vw
     so overlaid elements track the baked-in emboss artwork  */
  --pad: 4vw;
  --maxw: 1200px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background-color:var(--bg-tail);
  background-image:url("../ASSETS/DESKTOP_BG_2x.webp");
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% auto;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding:0 var(--pad);
}
.mark-kucing{
  position:absolute;
  top:3.1vw;
  left:4.5vw;
  width:2.9vw;
  min-width:26px;
}
.hero__lockup{
  max-width:var(--maxw);
  margin:0 auto;
  padding-top:39.5vw;            /* aligns under the embossed "Blue Valley" */
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
}
.logo-lhab{ width:17.5vw; min-width:150px; }
.logo-anniv{ width:24vw; min-width:200px; }

/* =========================================================
   PROMPT HEADLINE
   ========================================================= */
.prompt{
  max-width:var(--maxw);
  margin:0 auto;
  padding:8.5vw var(--pad) 0;
}
.prompt img{width:100%;}
.prompt__mobile{display:none;}

/* =========================================================
   POLAROIDS
   ========================================================= */
.polaroids{
  max-width:var(--maxw);
  margin:0 auto;
  padding:5vw var(--pad) 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3.2vw;
}
.polaroid{
  margin:0;
  filter:drop-shadow(0 14px 26px rgba(30,60,90,.28));
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.polaroid:nth-child(1){transform:rotate(-.6deg);}
.polaroid:nth-child(2){transform:rotate(.4deg);}
.polaroid:nth-child(3){transform:rotate(-.3deg);}
.polaroid:hover{transform:rotate(0) translateY(-6px);}

/* =========================================================
   FORM
   ========================================================= */
.form-wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:9vw var(--pad) 0;
}
#submission-form{
  width:100%;
  max-width:470px;
  margin:0 auto;
}
.field{margin-bottom:3.2rem;}
.field:last-of-type{margin-bottom:2.2rem;}

.label-img{margin:0 auto;}
.label-upload{width:172px;}
.label-nama{width:176px;}
.label-cerita{width:290px;}

.field__hint{
  margin:.5rem 0 0;
  line-height:1.5;
  text-align:center;
  font-size:.72rem;
  font-weight:300;
  letter-spacing:.02em;
  color:var(--ink-soft);
}

/* --- dropzone --- */
.dropzone{
  position:relative;
  margin-top:1.6rem;
  min-height:132px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px dashed var(--line);
  cursor:pointer;
  overflow:hidden;
  transition:background-color .25s ease, border-color .25s ease;
}
.dropzone:hover,
.dropzone:focus-visible,
.dropzone.is-dragover{
  background:rgba(255,255,255,.12);
  border-color:#fff;
  outline:none;
}
.dropzone__text{
  font-size:.78rem;
  font-weight:300;
  letter-spacing:.01em;
  color:var(--ink-soft);
  padding:1rem;
  text-align:center;
  pointer-events:none;
}
.dropzone__preview{
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
}
.dropzone.has-file{min-height:230px;}
.dropzone__clear{
  position:absolute;
  top:8px;right:8px;
  width:28px;height:28px;
  border:none;border-radius:50%;
  background:rgba(20,45,70,.65);
  color:#fff;font-size:18px;line-height:1;
  cursor:pointer;
  backdrop-filter:blur(4px);
}

/* --- text inputs --- */
.input,.textarea{
  display:block;
  width:100%;
  margin-top:1.5rem;
  background:transparent;
  border:1.5px solid var(--line);
  border-radius:0;
  color:#fff;
  font-family:var(--font);
  font-size:.95rem;
  font-weight:300;
  padding:.85rem 1rem;
  transition:background-color .25s ease, border-color .25s ease;
  -webkit-appearance:none;
}
.input{height:52px;padding:0 1rem;}
.textarea{min-height:150px;resize:vertical;line-height:1.5;}
.input:focus,.textarea:focus{
  outline:none;
  background:rgba(255,255,255,.12);
  border-color:#fff;
}
.field__count{
  margin:.45rem 0 0;
  text-align:right;
  font-size:.68rem;
  font-weight:300;
  color:rgba(255,255,255,.6);
}
.field__meta{
  margin:.55rem 0 0;
  text-align:center;
  font-size:.68rem;
  font-weight:300;
  letter-spacing:.02em;
  color:rgba(255,255,255,.6);
}
.field__error{
  margin:.55rem 0 0;
  font-size:.72rem;
  font-weight:400;
  color:#ffd9d9;
}
.field__error--center{text-align:center;}

/* --- consent --- */
.consent{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  cursor:pointer;
  padding-left:.2rem;
}
.consent input{position:absolute;opacity:0;width:0;height:0;}
.consent__box{
  flex:0 0 auto;
  width:15px;height:15px;
  margin-top:1px;
  border:1.5px solid #fff;
  background:transparent;
  transition:background-color .2s ease;
}
.consent input:checked + .consent__box{
  background:#fff;
  box-shadow:inset 0 0 0 3px var(--bg-tail);
}
.consent input:focus-visible + .consent__box{outline:2px solid #fff;outline-offset:2px;}
.consent__text{
  font-size:.72rem;
  font-weight:300;
  line-height:1.45;
  color:var(--ink-soft);
}
.consent__text a{text-decoration:underline;text-underline-offset:2px;}

/* --- submit --- */
.submit{
  display:block;
  margin:3.2rem auto 0;
  background:none;border:none;padding:0;
  cursor:pointer;
  transition:transform .3s ease, opacity .3s ease;
}
.submit img{width:150px;}
.submit:hover{transform:translateY(-2px) scale(1.03);}
.submit:disabled{opacity:.45;cursor:progress;transform:none;}

.form-status{
  margin:1.4rem 0 0;
  text-align:center;
  font-size:.78rem;
  font-weight:300;
  color:var(--ink-soft);
  min-height:1.2em;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  padding:9vw var(--pad) 4rem;
  text-align:center;
}
.footer__logo{
  width:64px;
  margin:0 auto 3.2rem;
}
.footer__meta,
.footer__social{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:2.6rem;
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.04em;
}
.footer__meta{margin-bottom:1.6rem;color:var(--ink-soft);}
.footer__meta a{text-decoration:underline;text-underline-offset:3px;}
.footer__social a{text-decoration:none;transition:opacity .2s ease;}
.footer__social a:hover{opacity:.6;}

/* =========================================================
   CONSENT LINK + GATED CHECKBOX
   ========================================================= */
.consent__link{
  background:none;border:none;padding:0;
  font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;
}
.consent__link:hover{opacity:.7;}
.consent input:disabled + .consent__box{opacity:.4;}
.consent:has(input:disabled){cursor:default;}

/* =========================================================
   TERMS LIGHTBOX
   ========================================================= */
.terms{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
  background:rgba(30,62,92,.72);
  backdrop-filter:blur(10px);
  animation:fade .3s ease;
}
.terms[hidden]{display:none;}
.terms__card{
  width:100%;max-width:520px;
  max-height:min(82vh,680px);
  display:flex;flex-direction:column;
  padding:2.4rem 2.2rem 2rem;
  border:1.5px solid rgba(255,255,255,.75);
  background:rgba(255,255,255,.10);
}
.terms__title{
  margin:0 0 1.4rem;
  font-size:1.05rem;font-weight:500;letter-spacing:.01em;
}
.terms__body{
  overflow-y:auto;
  padding-right:.9rem;
  font-size:.82rem;font-weight:300;line-height:1.65;
  color:var(--ink-soft);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.45) transparent;
}
.terms__body::-webkit-scrollbar{width:5px;}
.terms__body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.45);}
.terms__body p{margin:0 0 1rem;}
.terms__body ul{margin:0 0 1rem;padding-left:1.1rem;}
.terms__body li{margin-bottom:.6rem;}
.terms__body a{text-decoration:underline;text-underline-offset:2px;color:#fff;}

.terms__nudge{
  margin:1rem 0 0;
  font-size:.68rem;font-weight:300;letter-spacing:.02em;
  color:rgba(255,255,255,.65);
  text-align:center;
  transition:opacity .3s ease;
}
.terms__nudge.is-done{opacity:0;}

.terms__actions{
  display:flex;gap:.8rem;
  margin-top:1.6rem;
}
.terms__btn{
  flex:1;
  padding:.85rem 1rem;
  background:transparent;
  border:1.5px solid #fff;color:#fff;
  font-family:var(--font);font-size:.74rem;font-weight:400;letter-spacing:.06em;
  cursor:pointer;
  transition:background-color .25s ease,color .25s ease,opacity .25s ease;
}
.terms__btn:hover{background:#fff;color:#2c5378;}
.terms__btn--primary{background:#fff;color:#2c5378;}
.terms__btn--primary:hover{opacity:.85;background:#fff;color:#2c5378;}
.terms__btn:disabled{
  opacity:.35;cursor:not-allowed;
  background:transparent;color:#fff;
}

@media (max-width:860px){
  .terms__card{padding:2rem 1.5rem 1.6rem;max-height:86vh;}
  .terms__title{font-size:.98rem;}
  .terms__actions{flex-direction:column-reverse;}
}

/* =========================================================
   SUCCESS OVERLAY
   ========================================================= */
.success{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
  background:rgba(30,62,92,.72);
  backdrop-filter:blur(10px);
  animation:fade .35s ease;
}
.success[hidden]{display:none;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.success__card{
  max-width:400px;width:100%;
  padding:3rem 2rem;
  text-align:center;
  border:1.5px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.08);
}
.success__mark{width:34px;margin:0 auto 1.6rem;}
.success__card h2{margin:0 0 .6rem;font-size:1.35rem;font-weight:500;letter-spacing:.01em;}
.success__card p{margin:0 0 2rem;font-size:.85rem;font-weight:300;color:var(--ink-soft);line-height:1.5;}
.success__btn{
  background:transparent;border:1.5px solid #fff;color:#fff;
  font-family:var(--font);font-size:.75rem;letter-spacing:.06em;
  padding:.8rem 1.8rem;cursor:pointer;
  transition:background-color .25s ease,color .25s ease;
}
.success__btn:hover{background:#fff;color:#2c5378;}

/* =========================================================
   MOBILE  (<= 860px)
   ========================================================= */
@media (max-width:860px){
  :root{
    --pad:5.5vw;
    --bg-tail:#1b3f5e;
  }
  body{
    background-image:url("../ASSETS/MOBILE_BG_2x.webp");
  }

  .mark-kucing{
    position:static;
    width:7.2vw;
    min-width:24px;
    margin:0 auto;
    padding-top:4vw;
  }
  .hero__lockup{
    padding-top:135vw;              /* under the mobile emboss lockup */
    flex-direction:column;
    align-items:center;
    gap:1.2rem;
  }
  .logo-lhab{width:40vw;min-width:0;}
  .logo-anniv{width:48vw;min-width:0;}

  .prompt{padding-top:9vw;}
  .prompt__desktop{display:none;}
  .prompt__mobile{display:block;}

  .polaroids{
    grid-template-columns:1fr;
    gap:7vw;
    padding-top:9vw;
    max-width:340px;
  }
  .polaroid:hover{transform:none;}

  .form-wrap{padding-top:14vw;}
  .label-upload{width:140px;}
  .label-nama{width:144px;}
  .label-cerita{width:236px;}
  .submit img{width:128px;}

  .footer{padding-top:16vw;}
  .footer__logo{width:56px;margin-bottom:2.4rem;}
  .footer__meta,
  .footer__social{
    flex-direction:column;
    gap:.55rem;
  }
  .footer__meta{margin-bottom:2rem;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}