/* JAY-G — responsive, aspect-ratio locked landing page */
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:#090909}
body{overflow-x:hidden;overscroll-behavior-x:none}
.page{
  width:100%;
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#090909;
}

/* The artwork ALWAYS keeps its original 1672:941 ratio.
   Nothing is stretched to the phone's portrait ratio. */
.art{
  position:relative;
  width:min(100vw,177.6833vh);
  aspect-ratio:1672/941;
  overflow:hidden;
  background:#151515;
  isolation:isolate;
  container-type:inline-size;
}
.background{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:fill;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

/* Masks cover ONLY the old sample numbers in the supplied artwork. */
.digit-mask{
  position:absolute;
  z-index:2;
  top:39.4%;
  height:10.5%;
  border-radius:14px;
  background:rgba(18,18,18,.72);
  filter:blur(2.2px);
  box-shadow:0 0 18px 7px rgba(12,12,12,.32);
  pointer-events:none;
}
.mask-1{left:12.2%;width:14.5%}
.mask-2{left:31%;width:13.8%}
.mask-3{left:54%;width:13.8%}
.mask-4{left:73.2%;width:14.7%}

.countdown{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.unit{
  position:absolute;
  top:39.2%;
  height:12%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f1f1f1;
  font-family:"Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  /* cqw makes the type scale from the ARTWORK width, not the device width. */
  font-size:clamp(24px,7.1cqw,118px);
  font-weight:900;
  line-height:.88;
  letter-spacing:-.055em;
  text-shadow:0 2px 1px rgba(0,0,0,.55),0 0 5px rgba(255,255,255,.14);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;
}
.unit span{display:block;min-width:2ch;text-align:center}
.unit-days{left:12.8%;width:13%}
.unit-hours{left:31.6%;width:13%}
.unit-minutes{left:54.6%;width:13%}
.unit-seconds{left:73.8%;width:13%}

/* Portrait phones: show the COMPLETE artwork, centered, with no crop. */
@media (max-aspect-ratio:1/1){
  .page{
    align-items:center;
    justify-content:center;
  }
  .art{
    width:100vw;
    height:auto;
    flex:none;
  }
}

@media (max-width:600px){
  .digit-mask{
    top:39.6%;
    height:10%;
    border-radius:9px;
    filter:blur(1.6px);
  }
  .unit{
    top:39.3%;
    font-size:clamp(24px,7.05cqw,44px);
  }
  .unit-days{left:12.4%;width:14%}
  .unit-hours{left:31.2%;width:14%}
  .unit-minutes{left:54.2%;width:14%}
  .unit-seconds{left:73.4%;width:14%}
}

/* Very narrow devices: preserve the composition rather than letting text
   collide with the artwork. */
@media (max-width:360px){
  .unit{font-size:24px}
  .digit-mask{filter:blur(1.2px)}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
}