/* =====================================================================
   "Dog walk" styles (used by js/dogwalk.js)

   Builds on the line-up look in lineup-style.css: the same full-screen camera,
   top bar, bottom meter, green tick (.lu-ok) and message screens (.lu-msg).
   Only what is new for the dog walk is here, so deleting this file (and
   dogwalk.js) removes the feature's look completely.

   Contents
     1. Overlay
     2. Camera screen extras   (top buttons, caption, progress dots, intro card)
     3. The dog                (placement, bobbing, panting)
     4. Paw-print cue          (shown when facing the wrong way)
   ===================================================================== */


/* ---------- 1. Overlay ---------- */

#dog-overlay {
  position: fixed;
  inset: 0;
  z-index: 3100;
  background: #000;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
}

#dog-overlay .lu-full {
  position: absolute;
  inset: 0;
  background: #000;
}


/* ---------- 2. Camera screen extras ---------- */

/* Mute button and close button, side by side in the top bar. */
.dg-topbtns {
  display: flex;
  gap: 8px;
}

.lu-x i {
  font-size: 18px;
  line-height: 1;
}

/* The step's caption, in a strip under the top bar. Fades away after a few seconds. */
.dg-caption {
  position: absolute;
  left: 14px;
  right: 14px;
  top: calc(62px + env(safe-area-inset-top, 0px));
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  transition: opacity 1.2s;
}

.dg-caption.fade {
  opacity: 0;
}

/* Progress dots: how far along the chain of steps the guest is. */
.dg-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-bottom: 4px;
}

.dg-dots b {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
}

.dg-dots b.on {
  background: #E47A2E;
}

/* The dog's introduction: a cream card over the camera, with a "Let's go" button. */
.dg-intro {
  position: absolute;
  z-index: 5;
  left: 12px;
  right: 12px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  padding: 12px;
  border-radius: 12px;
  background: #fbeee0;
  color: #6b5c4d;
  font-size: 13px;
  line-height: 1.45;
}

.dg-intro b {
  display: block;
  margin-bottom: 3px;
  color: #1c2b4a;
  font-size: 15px;
}

.dg-intro .btn {
  margin-top: 10px;
}


/* ---------- 3. The dog ---------- */

/* dogwalk.js sets the left / top / size of #dg-dog on every frame to put the dog's feet on the ground. */
#dg-dog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  display: none;
  pointer-events: none;
  animation: dgGhostIn .8s ease-out;       /* fades in whenever it comes into view, like a ghost */
}

@keyframes dgGhostIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Walking: a small bob. */
#dg-dogbody {
  position: relative;
  display: inline-block;
  animation: dgBob .9s ease-in-out infinite;
}

#dg-dogimg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Sitting (waiting at the end of a walk): the body breathes and a tongue pants.
   The tongue is drawn in code, positioned over the sitting dog's mouth. */
#dg-tongue {
  display: none;
  position: absolute;
  left: 45.6%;
  top: 36.1%;
  width: 11%;
  height: 5.5%;
  transform-origin: 50% 8%;
  opacity: .85;
}

#dg-dog.sit #dg-dogbody {
  transform-origin: 50% 100%;
  animation: dgPantBody .5s ease-in-out infinite;
}

#dg-dog.sit #dg-tongue {
  display: block;
  animation: dgPantTongue .5s ease-in-out infinite;
}

@keyframes dgBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@keyframes dgPantBody {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.006, 1.011); }
}

@keyframes dgPantTongue {
  0%, 100% { transform: scaleY(.55); }
  50%      { transform: scaleY(1.1); }
}


/* ---------- 4. Paw-print cue ---------- */

/* A short trail of paw prints at the screen edge, left foot / right foot, zig-zagging towards the side the dog
   went and lighting up one after another. Shown only when the guest is facing well away from it. */
#dg-cue {
  position: absolute;
  top: 46%;
  display: none;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

#dg-cue.right {
  right: 10px;
  flex-direction: row;
}

#dg-cue.left {
  left: 10px;
  flex-direction: row-reverse;
}

#dg-cue i {
  display: block;
  width: 30px;
  height: 30px;
  opacity: .15;
  animation: dgPaw 1.2s linear infinite;
}

/* The prints alternate either side of the line of travel and each points a little off it, like real steps. */
#dg-cue.right i:nth-child(odd)  { transform: translateY(-11px) rotate(102deg); }
#dg-cue.right i:nth-child(even) { transform: translateY(11px) rotate(78deg); }
#dg-cue.left i:nth-child(odd)   { transform: translateY(-11px) rotate(-102deg); }
#dg-cue.left i:nth-child(even)  { transform: translateY(11px) rotate(-78deg); }

#dg-cue i svg {
  width: 100%;
  height: 100%;
  fill: #fff;
}

#dg-cue i:nth-child(1) { animation-delay: 0s; }
#dg-cue i:nth-child(2) { animation-delay: .25s; }
#dg-cue i:nth-child(3) { animation-delay: .5s; }

@keyframes dgPaw {
  0%       { opacity: .15; }
  30%      { opacity: 1; }
  70%, 100% { opacity: .15; }
}