@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@800&display=swap');

/* Cannadreams kiosk start screen (v11)
   Loaded from AIQ Head Code. AIQ has no background-image setting and no control
   over the start-screen layout, so both are done here.
   The app renders: H2 headline, Custom Image logo, Tap to Start button, in that
   DOM order, inside [data-testid="kiosk-start-fullscreen"].
   Positions are in vh so they hold on any screen height. */

[data-testid="kiosk-start-fullscreen"]{
  background-image:url("https://cannadreams.nyc/images/kiosk/welcome-bg-v2.jpg")!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}

/* let the two wrappers fill the screen so children can be placed absolutely */
[data-testid="kiosk-start-fullscreen"]>div,
[data-testid="kiosk-start-fullscreen"]>div>div{
  position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;
  width:100%!important;max-width:none!important;height:100%!important;
  display:block!important;margin:0!important;padding:0!important;
}

/* logo, moved above the headline */
[data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(1){
  position:absolute!important;top:9.4vh!important;left:0!important;right:0!important;
  width:100%!important;height:auto!important;
}
/* The uploaded logo PNG is 540x330 but the solid mark only fills 48.1% of its
   width and 77% of its height, the rest is a soft transparent glow. So the box
   has to be sized well past the mark you actually want to see.
   36vh box  ->  27.7vh mark. The approved mockup's mark is 34.7vh.
   45vh box  ->  34.7vh mark, and 19.9% of screen width, both exact matches.
   Row top drops to 9.4vh so the mark's ink still starts at the mockup's 14.4vh.
   max-width + object-fit are a guard so a portrait screen letterboxes instead
   of overflowing or stretching. */
[data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(1) img{
  height:45vh!important;width:auto!important;
  max-width:92vw!important;object-fit:contain!important;
}

/* headline.
   57.5vh, was 59.5vh. The button moved up twice (76.11 -> 72.8 -> 71vh) while
   this stayed put, which left 10.55vh of air above the headline against 4.80vh
   below it, a 2.20 ratio where the approved mockup is 1.28. Lifting it 2vh
   gives 8.6vh above and 6.7vh below and restores that rhythm.
   Measured ink, not boxes: the ink starts 0.22vh below this top value. */
[data-testid="kiosk-start-fullscreen"]>div>div>h2{
  position:absolute!important;top:57.5vh!important;left:0!important;right:0!important;width:100%!important;
  font-family:'Anton',Impact,sans-serif!important;font-size:7.2vh!important;line-height:1!important;
  letter-spacing:.005em!important;text-transform:uppercase!important;margin:0!important;
  text-align:center!important;   /* the app supplies this today; do not rely on it */
  background:linear-gradient(180deg,#ffffff 0%,#8fe1ff 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  /* Option C: the existing dark shadow for legibility, plus a cyan halo so the
     type reads as a lit sign against the night sky. 2.41vh = the 26px blur it
     was picked at on a 1080 screen, in vh so it holds at any resolution. */
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.45))
         drop-shadow(0 0 2.41vh rgba(122,214,249,.85))!important;
}

/* button row. 71vh sits the pill optically centred between the headline and the
   delivery line baked into the background: 4.3vh of air above, 4.6vh below.
   Was 72.8vh; owner asked for it slightly higher.
   NOTE: only margin is reset here. Resetting padding on `> *` was more specific
   than the button rule below and silently flattened the button to zero padding. */
[data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(2){
  position:absolute!important;top:71vh!important;left:0!important;right:0!important;
  width:100%!important;height:auto!important;margin:0!important;padding:0!important;
  display:flex!important;align-items:flex-start!important;justify-content:center!important;
}
[data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(2)>*{margin:0!important;}

/* The button, measured off the approved mockup rather than approximated.
   In kiosk-welcome-FINAL-1920x1080.png the pill is 598x97px on a 1080-tall
   canvas = 55.37vh wide by 8.98vh tall, label 34px = 3.15vh in Archivo 800 at
   .10em, shadow 0 22px 52px rgba(18,162,214,.45).
   Width is set explicitly instead of by padding: the mockup was drawn in
   Archivo and the kiosk's own body font is DM Sans, so equal padding gives an
   unequal pill. Archivo is imported above so the label matches too, and if it
   fails to load the label simply sits narrower inside a pill that is still the
   right size. min() keeps it on screen if the kiosk is ever run portrait. */
[data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(2)>button{
  height:8.98vh!important;min-height:8.98vh!important;
  width:min(55.37vh,92vw)!important;min-width:0!important;max-width:92vw!important;
  padding:0!important;border:0!important;border-radius:999px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  background:linear-gradient(180deg,#7ad6f9 0%,#12a2d6 100%)!important;
  color:#03121c!important;
  font-family:'Archivo',-apple-system,'DM Sans',sans-serif!important;
  font-size:3.15vh!important;font-weight:800!important;letter-spacing:.10em!important;
  text-transform:uppercase!important;line-height:1!important;white-space:nowrap!important;
  /* mockup glow, plus the navy halo ring the owner picked (option E). The ring
     is an outset box-shadow, not a border, so it adds no layout width and the
     pill stays 55.37 x 8.98vh. It gives the bottom edge something hard to read
     against, which is the one place the glow softened the silhouette. */
  box-shadow:0 2.04vh 4.81vh rgba(18,162,214,.45),
             0 0 4.81vh rgba(122,214,249,.85),
             0 0 0 .28vh rgba(3,18,28,.55)!important;
}
[data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(2)>button *{
  font-family:'Archivo',-apple-system,'DM Sans',sans-serif!important;
  font-size:3.15vh!important;font-weight:800!important;letter-spacing:.10em!important;
  text-transform:uppercase!important;color:#03121c!important;line-height:1!important;
}


/* ---------------------------------------------------------------------------
   Sparkle.
   Four glints twinkle in and out on a stagger, so at most one is bright at a
   time. They sit OUTSIDE the pill so the label is never competed with.

   Why they hang off two different elements: the button has overflow:hidden of
   its own, so anything on button::before / ::after gets clipped at the pill
   edge. The row and the full-screen wrapper are both overflow:visible and both
   had free ::before / ::after (content was `none` on all four), so the glints
   live there instead.

   Positions tightened twice. v10 sits each glint ON the pill's visible edge.
   That edge is a stadium, so the two big glints are placed along a radius from
   the cap centre (which is 23.195vh from screen centre, at 75.49vh, radius
   4.49vh) rather than off the bounding box, which would leave the corners
   looking loose while the flat sides looked tight.
   Row coordinates are relative to the row, whose top is the pill top (71vh).
   Wrapper coordinates are screen-absolute. Pill half-width is 27.685vh, hence
   the calc() offsets from centre.
   --------------------------------------------------------------------------- */
@keyframes cdSparkle{
  0%,100%{opacity:.10;transform:scale(.32)}
  8%     {opacity:.28;transform:scale(.55)}
  18%    {opacity:.95;transform:scale(1)}
  30%    {opacity:.30;transform:scale(.58)}
  46%    {opacity:.10;transform:scale(.32)}
}
[data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(2)::before,[data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(2)::after,
[data-testid="kiosk-start-fullscreen"]>div>div::before,[data-testid="kiosk-start-fullscreen"]>div>div::after{
  content:""!important;display:block!important;position:absolute!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 0C55 35 65 45 100 50 65 55 55 65 50 100 45 65 35 55 0 50 35 45 45 35 50 0Z' fill='white'/></svg>")!important;
  background-size:contain!important;background-repeat:no-repeat!important;
  filter:drop-shadow(0 0 .75vh rgba(190,240,255,.95))!important;
  pointer-events:none!important;z-index:2!important;
  animation:cdSparkle 5.2s ease-in-out infinite!important;
}
/* big, off the top-left shoulder */
[data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(2)::before{width:2.95vh!important;height:2.95vh!important;
  left:calc(50% - 29.07vh)!important;top:-1.02vh!important;animation-delay:0s!important;}
/* big, off the right cap */
[data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(2)::after{width:2.75vh!important;height:2.75vh!important;
  left:calc(50% + 27.13vh)!important;top:2.28vh!important;animation-delay:1.7s!important;}
/* small, above centre */
[data-testid="kiosk-start-fullscreen"]>div>div::before{width:1.75vh!important;height:1.75vh!important;
  left:calc(50% - 5.83vh)!important;top:69.25vh!important;animation-delay:3.4s!important;}
/* small, below right */
[data-testid="kiosk-start-fullscreen"]>div>div::after{width:1.90vh!important;height:1.90vh!important;
  left:calc(50% + 23.24vh)!important;top:79.10vh!important;animation-delay:.85s!important;}

@media (prefers-reduced-motion:reduce){
  [data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(2)::before,[data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(2)::after,[data-testid="kiosk-start-fullscreen"]>div>div::before,[data-testid="kiosk-start-fullscreen"]>div>div::after{
    animation:none!important;opacity:.42!important;transform:scale(.7)!important;}
}


/* ===========================================================================
   PORTRAIT.
   The physical kiosk is a vertical panel, which nothing above was built for.
   Every size in this file is in vh, and on a 9:16 screen vh is the LONG axis,
   so the headline rendered at roughly 138px and wrapped onto two lines that
   collided with the button, and the 16:9 background cover-cropped so hard that
   "FREE" and "MANHATTAN!" ran off both edges.

   In portrait the constraint is WIDTH, so everything below is sized in vw and
   the background is swapped for a 1080x1920 render whose delivery copy is set
   in two lines. Layout, measured against a 1080x1920 screen:
     logo ink   378 - 868      headline ink 1039 - 1115
     button    1248 - 1402     delivery ink 1549 - 1621 (baked into the image)
   which leaves gaps of 171 / 133 / 147px down the stack.
   =========================================================================== */
@media (orientation:portrait){

  [data-testid="kiosk-start-fullscreen"]{
    background-image:url("https://cannadreams.nyc/images/kiosk/welcome-bg-portrait-v1.jpg")!important;
  }

  /* Size the logo by WIDTH. Driving it off height letterboxes the padded PNG
     inside a tall box and leaves dead space above and below the mark, which is
     what pushed the logo out of position on the real screen. */
  [data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(1){top:16vh!important;}
  [data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(1) img{
    width:96vw!important;height:auto!important;
    max-width:96vw!important;max-height:none!important;object-fit:fill!important;
  }

  /* one line, with margin to spare even if Anton falls back to Impact */
  [data-testid="kiosk-start-fullscreen"]>div>div>h2{top:54vh!important;font-size:7.8vw!important;}

  [data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(2){top:65vh!important;}
  [data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(2)>button{
    height:14.26vw!important;min-height:14.26vw!important;
    width:88vw!important;max-width:88vw!important;
    font-size:5.0vw!important;
    box-shadow:0 2.90vw 6.90vw rgba(18,162,214,.45),
               0 0 6.90vw rgba(122,214,249,.85),
               0 0 0 .40vw rgba(3,18,28,.55)!important;
  }
  [data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(2)>button *{font-size:5.0vw!important;}

  /* Sparkle rescaled and re-placed around the portrait pill: half-width 44vw,
     height 14.26vw, cap radius 7.13vw, cap centres at +/- 36.87vw. */
  [data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(2)::before,[data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(2)::after,[data-testid="kiosk-start-fullscreen"]>div>div::before,[data-testid="kiosk-start-fullscreen"]>div>div::after{
    filter:drop-shadow(0 0 1.2vw rgba(190,240,255,.95))!important;
  }
  [data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(2)::before{width:4.69vw!important;height:4.69vw!important;
    left:calc(50% - 46.20vw)!important;top:-1.63vw!important;}
  [data-testid="kiosk-start-fullscreen"]>div>div>div:nth-of-type(2)::after{width:4.37vw!important;height:4.37vw!important;
    left:calc(50% + 43.89vw)!important;top:3.51vw!important;}
  [data-testid="kiosk-start-fullscreen"]>div>div::before{width:2.78vw!important;height:2.78vw!important;
    left:calc(50% - 9.28vw)!important;top:calc(65vh - 2.78vw)!important;}
  [data-testid="kiosk-start-fullscreen"]>div>div::after{width:3.02vw!important;height:3.02vw!important;
    left:calc(50% + 36.90vw)!important;top:calc(65vh + 12.86vw)!important;}
}