/* Dogo coming soon page: one comic panel. No scripts, no third-party requests, no cookies. */

@font-face {
  font-family: "Bangers";
  src: url("/bangers-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Comic Neue";
  src: url("/comic-neue-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #141414;
  --sky: #43c4f3;
  --sky-light: #6dd5f8;
  --dots: #1a9fe0;
  --yellow: #ffd23f;
  --red: #e5262e;
  --fur: #f2b13e;
  --fur-shade: #cf8b24;
  --patch: #cf8426;
  --ear: #c47a22;
  --iris: #8a5a24;
  --cream: #fff3d9;
  --frame-gap: clamp(6px, 1.4vmin, 14px);
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }
body { background: #fff; color: var(--ink); }
.defs { position: absolute; }

.page { position: relative; min-height: 100svh; overflow: hidden; text-align: center; }

/* Sky: sunburst and halftone, like a printed comic */
.sky { position: absolute; inset: 0; overflow: hidden; background: var(--sky); }
.rays { position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg at 50% 62%, var(--sky) 0deg 7deg, var(--sky-light) 7deg 14deg); }
.dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--dots) 2px, transparent 2.4px);
  background-size: 11px 11px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
}
.cloud { position: absolute; overflow: visible; fill: #fff; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; animation: drift 28s ease-in-out infinite alternate; }
.cloud-a { width: clamp(100px, 16vw, 230px); left: 6%;  top: 34%; }
.cloud-b { width: clamp(90px, 13vw, 190px);  left: 82%; top: 22%; animation-duration: 36s; animation-direction: alternate-reverse; }
.cloud-c { width: clamp(70px, 10vw, 140px);  left: 76%; top: 52%; animation-duration: 44s; }

.frame {
  position: absolute; inset: var(--frame-gap);
  border: clamp(4px, .7vmin, 7px) solid var(--ink);
  box-shadow: 0 0 0 calc(var(--frame-gap) + 4px) #fff;
  pointer-events: none;
}

main {
  position: relative;
  height: 100svh;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(22px, 4.5vh, 48px);
}

.logo {
  font-family: "Bangers", Impact, "Arial Black", sans-serif;
  font-size: clamp(3rem, min(15vw, 9vh), 6.2rem);
  line-height: 1;
  letter-spacing: .05em;
  color: var(--yellow);
  -webkit-text-stroke: .035em var(--ink);
  paint-order: stroke fill;
  text-shadow: .055em .055em 0 var(--red), .085em .085em 0 var(--ink);
  transform: rotate(-3deg);
  /* Sits in the middle of whatever sky is left above the bubble */
  margin-block: auto;
}

.meanwhile {
  position: absolute;
  left: clamp(30px, 3vw, 48px);
  top: clamp(30px, 5vh, 48px);
  max-width: 15.5em;
  padding: .5em .7em;
  background: var(--yellow);
  border: 4px solid var(--ink);
  font-family: "Comic Neue", "Comic Sans MS", sans-serif;
  font-weight: 700;
  font-size: clamp(.9rem, 1.25vw, 1.15rem);
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.bubble {
  position: relative;
  max-width: calc(100% - 44px);
  padding: .34em .72em .36em;
  background: #fff;
  border: clamp(4px, .7vmin, 6px) solid var(--ink);
  border-radius: 999px;
  font-family: "Bangers", Impact, "Arial Black", sans-serif;
  font-weight: 400;
  font-size: clamp(3.1rem, min(13.5vw, 12vh), 7.4rem);
  line-height: .98;
  letter-spacing: .035em;
  text-transform: uppercase;
  animation: pop .55s .2s cubic-bezier(.2, 1.7, .4, 1) both;
}

.hero {
  flex: none;
  position: relative;
  display: block;
  width: min(115vw, calc((100svh - 330px) * 1.351));
  height: auto;
  margin-top: -3px;
  overflow: visible;
}

.caption {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 4.2vh, 44px);
  width: max-content;
  max-width: calc(100% - 56px);
  transform: translateX(-50%) rotate(-1.2deg);
  padding: .5em .85em;
  background: var(--yellow);
  border: 4px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  font-family: "Comic Neue", "Comic Sans MS", sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, min(3.9vw, 2.7vh), 1.55rem);
  line-height: 1.15;
  text-transform: uppercase;
}

/* The drawing */
.ink { stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.range-far { fill: #7f97ff; }
.range-mid { fill: #5468e0; }
.snow, .summit { fill: #fdfeff; }
.rock { fill: #7a5cc9; }
.snow-shade { fill: #bfd3ff; }
.hatch path, .line, .brow, .mouth, .strain path, .tail-line { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.hatch path { stroke-width: 4; }
.line { stroke-width: 7; }
.line-thin { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.flag { fill: var(--red); }
.fur { fill: var(--fur); }
.fur-shade { fill: var(--fur-shade); }
.patch { fill: var(--patch); }
.cream { fill: var(--cream); }
.nose, .pupil { fill: var(--ink); }
.eye { fill: #fff; stroke-width: 5; }
.glint { fill: #fff; }
.shine { fill: #fff; opacity: .55; }
.iris { fill: var(--iris); }
.ear { fill: var(--ear); }

.grin { fill: #8c2b38; stroke-width: 5; }
.tongue { fill: #ff8d9a; stroke-width: 4.5; }
.brow { fill: none; stroke-width: 7; }
.mouth { stroke-width: 5.5; }
.strain path { stroke-width: 6; }
.tag { fill: var(--yellow); stroke-width: 4; }
.drop { fill: #8fdcff; stroke-width: 4; }
.tail-ink, .tail-fur, .collar-ink, .collar { fill: none; stroke-linecap: round; }
.tail-ink { stroke: var(--ink); stroke-width: 29; }
.tail-fur { stroke: var(--fur); stroke-width: 17; }
.collar-ink { stroke: var(--ink); stroke-width: 20; }
.collar { stroke: var(--red); stroke-width: 9; }
.tail-fill { fill: #fff; }
.tail-line { stroke-width: 6; }

/* Movement: every few seconds he bears down. The rest is still. */
.dog, .tail, .strain, .drop { transform-box: view-box; }
.eyes { transform-box: fill-box; transform-origin: center; animation: blink 6s linear infinite; }
.dog { animation: bear-down 5s ease-in-out infinite; }
.tail { transform-origin: 200px 262px; animation: quiver 5s ease-in-out infinite; }
.strain { animation: effort 5s ease-in-out infinite; }
.drop { animation: sweat 5s ease-in infinite; }
.drop-2 { animation-delay: -.6s; }

@keyframes bear-down {
  0%, 62%, 100% { transform: translate(0, 0); }
  66% { transform: translate(-2px, 1px); }
  70% { transform: translate(2px, 0); }
  74% { transform: translate(-2px, 1px); }
  78% { transform: translate(2px, 0); }
  82% { transform: translate(-1px, 1px); }
  86% { transform: translate(0, 0); }
}
@keyframes quiver {
  0%, 62%, 88%, 100% { transform: rotate(0deg); }
  70% { transform: rotate(-5deg); }
  78% { transform: rotate(4deg); }
}
@keyframes effort {
  0%, 60%, 92%, 100% { opacity: .95; }
  72%, 82% { opacity: 1; transform: scale(1); }
}
@keyframes sweat {
  0%, 60% { transform: translateY(0); opacity: 1; }
  88% { transform: translateY(26px); opacity: 1; }
  92% { transform: translateY(34px); opacity: 0; }
  93% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.08); } }
@keyframes drift { from { transform: translateX(-16px); } to { transform: translateX(24px); } }
@keyframes pop { from { transform: scale(.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Narrow screens: the corner caption would crowd the logo */
@media (max-width: 760px) {
  .meanwhile { display: none; }
  .bubble { padding: .32em .62em .34em; }
}

/* Phones held sideways */
@media (max-height: 480px) {
  .logo { position: absolute; left: 26px; top: 20px; font-size: 2.3rem; }
  .meanwhile { display: none; }
  .bubble { font-size: 2.9rem; }
  .hero { width: calc((100svh - 118px) * 1.351); }
  .caption { font-size: .85rem; bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}