/* ============================================================
   TWISTED PUZZLES — V9 EASY CONTROLS
   ============================================================
   THIS IS THE ONLY FILE YOU NEED TO EDIT FOR POSITION / SIZE.

   X: positive = move RIGHT, negative = move LEFT
   Y: positive = move DOWN,  negative = move UP

   Examples:
     --logo-y: 30px;      moves the logo down 30px
     --logo-x: -20px;     moves the logo left 20px
     --logo-width: 760px; makes the logo wider

   FONT WEIGHT GUIDE:
     300 = light
     400 = normal
     500 = medium
     600 = semi-bold
     700 = bold
     800 = extra-bold
     900 = black

   Keep units on values: px, %, vw, etc.
   ============================================================ */

:root{
  /* =========================
     DESKTOP CONTROLS
     ========================= */

  /* WHOLE CONTENT AREA */
  --content-width: 88vw;
  --content-max-width: 920px;
  --content-x: 0px;
  --content-y: 30px;
  --content-top-padding: clamp(38px,4.8vh,68px);

  /* 1. MAIN HEADLINE — "SOMETHING IS UNLOCKING SOON" */
  --headline-x: 0px;
  --headline-y: 20px;
  --headline-size: clamp(2.55rem,4.25vw,4.35rem);
  --headline-weight: 600;
  --headline-line-height: .95;
  --headline-letter-spacing: .055em;
  --headline-width: 920px;

  /* 2. TWISTED PUZZLES WORDMARK */
  --logo-x: -40px;
  --logo-y: 35px;
  --logo-width: min(1010px,77vw);
  --logo-space-above: clamp(58px,7.2vh,92px);

  /* 3. DESCRIPTION */
  --description-x: 0px;
  --description-y: 40px;
  --description-width: 820px;
  --description-size: clamp(1.05rem,1.25vw,1.18rem);
  --description-weight: 600;
  --description-line-height: 1.80;
  --description-space-above: clamp(30px,3.7vh,46px);

  /* 4. "NOTIFY ME WHEN THE DOORS OPEN" */
  --notify-x: 0px;
  --notify-y: 20px;
  --notify-size: clamp(1.3rem,1.7vw,1.55rem);
  --notify-weight: 800;
  --notify-letter-spacing: .19em;
  --notify-space-above: clamp(42px,5.2vh,66px);

  /* 5. TAGLINE — "EVERY PIECE HAS ITS PLACE" */
  --tagline-x: 0px;
  --tagline-y: -10px;
  --tagline-size: clamp(.92rem,1.12vw,1.12rem);
  --tagline-weight: 800;
  --tagline-letter-spacing: .22em;
  --tagline-group-space-above: clamp(62px,7.4vh,92px);

  /* 6. RED SUBTAGLINE — "THE FIRST PIECE IS ALMOST IN PLACE" */
  --subtagline-x: 0px;
  --subtagline-y: 0px;
  --subtagline-size: clamp(.92rem,1.12vw,1.12rem);
  --subtagline-weight: 700;
  --subtagline-letter-spacing: .19em;
  --subtagline-space-above: 12px;
  --subtagline-color: #a94444;

  /* 7. FOOTER */
  --footer-x: 0px;
  --footer-y: 0px;
  --footer-size: .61rem;
  --footer-weight: 400;
  --footer-side-padding: 4vw;
  --footer-bottom-padding: clamp(20px,2.4vw,36px);

  /* 8. BACKGROUND IMAGE */
  --background-x: 50%;
  --background-y: 46%;
  --background-zoom: 1;
}

/* ============================================================
   CONTROL WIRING — normally do not edit below this line
   ============================================================ */

.coming-soon{
  background:var(--ink);
}

.coming-soon::after{
  content:"";
  position:absolute;
  inset:-8%;
  z-index:-3;
  pointer-events:none;
  background:url("assets/background/shopbackground.webp")
             var(--background-x)
             var(--background-y)
             / cover
             no-repeat;
  transform:scale(var(--background-zoom));
  transform-origin:center center;
}

.coming-soon__content{
  width:min(var(--content-width),var(--content-max-width));
  padding-top:var(--content-top-padding);
  transform:translate(var(--content-x),var(--content-y));
}

.coming-soon__copy{
  width:min(100%,var(--headline-width));
  max-width:none;
  transform:translate(var(--headline-x),var(--headline-y));
}

.coming-soon h1{
  font-size:var(--headline-size);
  font-weight:var(--headline-weight);
  line-height:var(--headline-line-height);
  letter-spacing:var(--headline-letter-spacing);
}

.coming-soon__brand-lockup--wordmark-only{
  margin-top:var(--logo-space-above);
  transform:translate(var(--logo-x),var(--logo-y));
}

.coming-soon__brand-lockup--wordmark-only .coming-soon__wordmark{
  width:var(--logo-width);
}

.coming-soon__brand-lockup--wordmark-only + .coming-soon__intro{
  width:min(100%,var(--description-width));
  max-width:none;
  margin-top:var(--description-space-above);
  font-size:var(--description-size);
  font-weight:var(--description-weight);
  line-height:var(--description-line-height);
  transform:translate(var(--description-x),var(--description-y));
}

.launch-trigger{
  margin-top:var(--notify-space-above);
  font-size:var(--notify-size);
  font-weight:var(--notify-weight);
  letter-spacing:var(--notify-letter-spacing);
  transform:translate(var(--notify-x),var(--notify-y));
}

.coming-soon__tagline-group{
  margin-top:var(--tagline-group-space-above);
}

.coming-soon__tagline{
  font-size:var(--tagline-size);
  font-weight:var(--tagline-weight);
  letter-spacing:var(--tagline-letter-spacing);
  transform:translate(var(--tagline-x),var(--tagline-y));
}

.coming-soon__subtagline{
  margin-top:var(--subtagline-space-above);
  font-size:var(--subtagline-size);
  font-weight:var(--subtagline-weight);
  color:var(--subtagline-color);
  letter-spacing:var(--subtagline-letter-spacing);
  transform:translate(var(--subtagline-x),var(--subtagline-y));
}

.coming-soon__footer{
  padding-left:var(--footer-side-padding);
  padding-right:var(--footer-side-padding);
  padding-bottom:var(--footer-bottom-padding);
  font-size:var(--footer-size);
  font-weight:var(--footer-weight);
  transform:translate(var(--footer-x),var(--footer-y));
}

/* ============================================================
   MOBILE CONTROLS — phones/tablets up to 760px wide
   Change these without affecting desktop.
   ============================================================ */

@media (max-width:760px){
  :root{
    /* WHOLE CONTENT */
    --content-width: 88vw;
    --content-max-width: 920px;
    --content-x: 0px;
    --content-y: 0px;
    --content-top-padding: max(26px,3.5vh);

    /* HEADLINE */
    --headline-x: 0px;
    --headline-y: 0px;
    --headline-size: clamp(2.1rem,8.8vw,3.3rem);
    --headline-weight: 700;
    --headline-line-height: .95;
    --headline-letter-spacing: .055em;
    --headline-width: 920px;

    /* LOGO */
    --logo-x: 0px;
    --logo-y: 0px;
    --logo-width: min(530px,86vw);
    --logo-space-above: clamp(46px,6vh,66px);

    /* DESCRIPTION */
    --description-x: 0px;
    --description-y: 0px;
    --description-width: 540px;
    --description-size: .86rem;
    --description-weight: 500;
    --description-line-height: 1.5;
    --description-space-above: 30px;

    /* NOTIFY LINK */
    --notify-x: 0px;
    --notify-y: 0px;
    --notify-size: .68rem;
    --notify-weight: 600;
    --notify-letter-spacing: .14em;
    --notify-space-above: 36px;

    /* TAGLINE */
    --tagline-x: 0px;
    --tagline-y: 0px;
    --tagline-size: .82rem;
    --tagline-weight: 600;
    --tagline-letter-spacing: .16em;
    --tagline-group-space-above: 52px;

    /* RED SUBTAGLINE */
    --subtagline-x: 0px;
    --subtagline-y: 0px;
    --subtagline-size: .70rem;
    --subtagline-weight: 600;
    --subtagline-letter-spacing: .19em;
    --subtagline-space-above: 10px;

    /* FOOTER */
    --footer-x: 0px;
    --footer-y: 0px;
    --footer-size: .56rem;
    --footer-weight: 400;
    --footer-side-padding: 6vw;
    --footer-bottom-padding: max(18px,env(safe-area-inset-bottom));

    /* BACKGROUND */
    --background-x: 50%;
    --background-y: 0%;
    --background-zoom: 1;
  }
}

/* ============================================================
   MOBILE LANDSCAPE — DESKTOP REPLICA
   ============================================================
   IMPORTANT:
   Landscape does NOT reflow the page.
   It uses the approved 1536 x 934 desktop composition as a
   fixed reference canvas, then JavaScript scales the WHOLE page
   proportionally to fit the available landscape screen.

   This means headline / logo / description / CTA / taglines /
   footer keep the same proportions and wrapping as desktop.
   ============================================================ */

@media (orientation:landscape) and (max-height:760px){
  :root{
    /* Approved desktop values resolved on the 1536 x 934 reference canvas */
    --content-width: 1351.68px;
    --content-max-width: 920px;
    --content-x: 0px;
    --content-y: 30px;
    --content-top-padding: 44.832px;

    --headline-x: 0px;
    --headline-y: 20px;
    --headline-size: 65.28px;
    --headline-weight: 600;
    --headline-line-height: .95;
    --headline-letter-spacing: .055em;
    --headline-width: 920px;

    --logo-x: -40px;
    --logo-y: 35px;
    --logo-width: 1010px;
    --logo-space-above: 67.248px;

    --description-x: 0px;
    --description-y: 40px;
    --description-width: 820px;
    --description-size: 18.88px;
    --description-weight: 600;
    --description-line-height: 1.80;
    --description-space-above: 34.558px;

    --notify-x: 0px;
    --notify-y: 20px;
    --notify-size: 24.8px;
    --notify-weight: 800;
    --notify-letter-spacing: .19em;
    --notify-space-above: 48.568px;

    --tagline-x: 0px;
    --tagline-y: -10px;
    --tagline-size: 17.92px;
    --tagline-weight: 800;
    --tagline-letter-spacing: .22em;
    --tagline-group-space-above: 69.116px;

    --subtagline-x: 0px;
    --subtagline-y: 0px;
    --subtagline-size: 17.92px;
    --subtagline-weight: 700;
    --subtagline-letter-spacing: .19em;
    --subtagline-space-above: 12px;
    --subtagline-color: #a94444;

    --footer-x: 0px;
    --footer-y: 0px;
    --footer-size: .61rem;
    --footer-weight: 400;
    --footer-side-padding: 61.44px;
    --footer-bottom-padding: 36px;

    --background-x: 50%;
    --background-y: 46%;
    --background-zoom: 1;
  }

  html,body{
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
    background:var(--ink);
  }

  .coming-soon{
    position:fixed;
    left:50%;
    top:50%;
    width:1536px;
    height:934px;
    min-height:934px;
    transform:translate(-50%,-50%) scale(var(--landscape-scale,1));
    transform-origin:center center;
    background:var(--ink);
  }

  .coming-soon::after{
    inset:-8%;
    background:url("assets/background/shopbackground.webp") var(--background-x) var(--background-y) / cover no-repeat;
  }

  .coming-soon__content{
    width:min(var(--content-width),var(--content-max-width));
    padding-top:var(--content-top-padding);
  }

  .coming-soon__brand-lockup--wordmark-only + .coming-soon__intro{
    width:820px;
  }

  .coming-soon__footer{
    width:100%;
  }
}