/* =========================================================
   Devil Dog Design — Share Card (Mobile-First, Responsive)
   (dog animation bounded, aligned, and LEFT→RIGHT)
   ========================================================= */

/* -------- Base / Reset -------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  animation-timing-function: linear;
}

html, body { height: 100%; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  display: flex;
  align-items: center;                 /* horizontal center */
  justify-content: center;             /* vertical center */
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  min-height: 100svh;
  max-width: 100%;
  overflow-x: hidden;
  padding: max(10px, env(safe-area-inset-top))
           max(10px, env(safe-area-inset-right))
           max(10px, env(safe-area-inset-bottom))
           max(10px, env(safe-area-inset-left));
  background: #e9e9e9 url(images/ddd-G-logo-image.png) repeat fixed;
  background-size: 75px;
  opacity: 1;
}

/* New wrapper: keeps animation on top of the card */
.card-stack {
  display: flex;
  flex-direction: column;
  align-items: center;                 /* lane & card share the same center */
  gap: 0;                            /* tiny gap so nothing overlaps/clips */
}

img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }

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

/* -------- Main Card Container -------- */
.container {
  width: min(92vw, 400px);
  min-height: clamp(480px, calc(100svh - 96px), 820px);
  padding: 20px;
  margin: 0;                             /* centered by wrapper */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  text-align: center;
  background-color: #167C79;
     border: black solid 1px;

  border-radius: 20px;
  box-shadow: 0 5px 10px #94b6b2;
  isolation: isolate;
  overflow: hidden;
}

h1 {
  margin: 0 auto;
  width: 100%;
  max-width: 28ch;
  font-size: clamp(18px, 8vw, 24px);
  line-height: 1.2;
  font-weight: 700;
  color: #FFF;
}

/* =========================================================
   Dog Animation — lane matches card width & is tall enough
   ========================================================= */

/* The lane sits directly above the card; same width as .container */
.animation {
  width: min(92vw, 400px);
  height: 48px;                        /* >= sprite(34px) + hop clearance */
  margin: 0 auto;   
margin-bottom: -2px;  /* micro overlap without cutting */
/* no negative margins => no clipping */
  position: relative;
  overflow: hidden;                    /* clip at edges of the lane */
  pointer-events: none;
}

/* Walk path wrapper: moves left -> right, clipped by .animation */
.dogWalkRight {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  transform-origin: bottom center;
  animation: dogWalkLTR 28s linear infinite;
  will-change: transform;
}

/* Dog sprites sit on the "ground" (bottom of lane) */
.dog,
.dogUp {
  width: 50px;
  height: 34px;                        /* true sprite height (prevents cut) */
  position: absolute;
  left: 0;
  bottom: 0;                           /* feet on baseline */
  background-repeat: no-repeat;
  transform-origin: bottom;
  will-change: transform, opacity;
  image-rendering: -webkit-optimize-contrast;
}

/* Alternate frames for the hop illusion */
.dog {
  background-image: url("images/ddd-cartoon-dogWalk1.png");
  animation: dogHop 450ms infinite;
}
.dogUp {
  background-image: url("images/ddd-cartoon-dogWalk2.png");
  animation: dogSwitch 450ms infinite;
}

/* LEFT-to-RIGHT travel, clipped by the lane. scaleX(1) faces right. */
@keyframes dogWalkLTR {
  0%   { transform: translateX(-20%) scaleX(1); }   /* off-screen left */
  100% { transform: translateX(110%) scaleX(1); }   /* off-screen right */
}

/* Hop cycle (subtle and safe within the lane height) */
@keyframes dogHop {
  0%, 100% { transform: translateY(0) scaleY(0.96); opacity: 1; }
  50%      { transform: translateY(-2px) scaleY(1);  opacity: 0; }
}
@keyframes dogSwitch {
  0%, 100% { transform: translateY(0) scaleY(0.96); opacity: 0; }
  50%      { transform: translateY(-2px) scaleY(1);  opacity: 1; }
}

/* -------- Joke / Text Panel -------- */
.jokeDiv {
  --bg-image: url("images/ddd-logo-image.png");
  --bg-image-size: 180px;
  --bg-image-opacity: 0.1;
  width: 100%;
  min-height: clamp(200px, 30vh, 360px);
  padding: 18px;
  margin: 6px auto 0;
  display: grid;
  place-items: center;
  text-align: center;
     border: black solid 1px;

  border-radius: 16px;
  box-shadow: inset 0 0 5px #707070;
  background-color: #e9e9e9;
  position: relative;
  overflow: hidden;
}

.jokeDiv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: var(--bg-image-opacity);
  background-image: var(--bg-image);
  background-size: var(--bg-image-size);
  background-repeat: no-repeat;
  background-position: center;
}

#jokes p {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 10px;
  color: #2c2c2c;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  font-size: 32px;
  /*font-size: clamp(16px, 1vw, 28px);  fallback only */
  max-height: 100%;
  overflow: hidden;
white-space: normal;
  word-break: normal;      /* was: break-word */
  overflow-wrap: normal;   /* was: break-word */
  hyphens: none;           /* was: auto */
}

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

/* -------- Buttons & Share -------- */
.button-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.button-row #getJokeButton,
.button-row #shareBtn {
  flex: 0 1 auto;
  min-width: 120px;
}



#getJokeButton {
  min-width: 80px;
  padding: 10px 30px;
  margin: 5px auto 0;
  font: 500 16px 'Outfit', system-ui, sans-serif;
  background-color: #9E9E9E;
  color: #fff;
  border-radius: 8px;
  border: black solid 1px;
   box-shadow: black 0 5px;
  cursor: pointer;
touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  will-change: transform;
  transition: transform 160ms; 
}

#shareBtn {
  min-width: 80px;
  padding: 10px 20px;
  margin: 5px auto 0;
  font: 500 16px 'Outfit', system-ui, sans-serif;
  background-color: #FF8E89;
  color: #fff;
    border-radius: 8px;

   border: black solid 1px;
   box-shadow: black 0 5px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  will-change: transform;
  transition: transform 160ms; 
}


#getJokeButton:hover,
#getJokeButton:focus,
#shareBtn:hover,
#shareBtn:focus { 
   transform: scale(1.04); 
}

#shareBtn {  margin-top: 4px; margin-bottom: 4px; font-size: 14px; }

/* -------- Logo & Contacts (inside card) -------- */
.ddd { width: clamp(80px, 28vw, 120px); margin: 12px auto 0; }

.contacts-block { margin-top: 2px; text-align: center; }
.contact {
  margin: 2px auto 0;
  text-align: center;
  font-size: clamp(13px, 3.6vw, 16px);
  color: #FFF;
}

/* -------- Viewport Tweaks -------- */
@media (min-width: 480px) {
  .container { width: min(92vw, 420px); min-height: clamp(520px, 80vh, 860px); }
  .animation { width: min(92vw, 420px); height: 56px; }   /* taller lane on desktop */
  .dogWalkRight { animation-duration: 32s; }              /* slower on wider screens */
}

@media (max-width: 480px) {
  .animation { height: 48px; }                             /* keep lane >= 48px on phones */
  .dogWalkRight { animation-duration: 26s; }               /* slightly slower on mobile */
}

@media (max-width: 340px) {
  .container { padding: 16px; }
  .jokeDiv   { padding: 12px; }
  button, #shareBtn { min-width: 140px; padding: 10px 16px; }
}