/* ============================================================
   dream : color — skin.
   Cream construction paper; everything starts as uncolored
   pencil wireframes that reveal the page beneath, then gets
   painted in by the brush. Tagline + change-dream button are
   hand-written. Classes prefixed df-cb- are created only by
   this dream's JS.
   ============================================================ */

html[data-theme="color"] body {
  color: #4A443B;
  background-color: #F4F1E9;
  /* the brush drag must never turn into a text selection */
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
  /* construction-paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.055'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="color"] #stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 45%, transparent 62%, rgba(120,100,60,0.10) 100%);
}

/* ---- uncolored wireframe copy: transparent fill, pencil stroke.
   Fallback first for browsers without text-stroke, then the real look. */
html[data-theme="color"] .df-name,
html[data-theme="color"] .df-sub-text,
html[data-theme="color"] .df-tagline,
html[data-theme="color"] .df-soon,
html[data-theme="color"] .df-copyright {
  color: rgba(74,68,59,0.4);
  text-shadow: none;
}
@supports (-webkit-text-stroke: 1px black) {
  html[data-theme="color"] .df-name,
  html[data-theme="color"] .df-sub-text,
  html[data-theme="color"] .df-tagline,
  html[data-theme="color"] .df-soon,
  html[data-theme="color"] .df-copyright {
    color: transparent;
    -webkit-text-stroke: 1px rgba(74,68,59,0.5);
  }
  html[data-theme="color"] .df-name { -webkit-text-stroke-width: 1.3px; }
  html[data-theme="color"] .df-tagline { -webkit-text-stroke-width: 0.8px; }
  html[data-theme="color"] .df-copyright { -webkit-text-stroke-width: 0.7px; }
}

/* the booking link's border affordance can't ride currentColor here —
   the sketch state above sets the anchor's color transparent — so pin
   it to the pencil ink */
html[data-theme="color"] a.df-book { border-bottom-color: rgba(74,68,59,0.5); }
html[data-theme="color"] a.df-book:hover { border-bottom-color: rgba(74,68,59,0.85); }

/* painted characters take their assigned crayon color */
html[data-theme="color"] .df-char { transition: color 0.2s ease-out; }
html[data-theme="color"] .df-char.painted {
  color: var(--pc);
  -webkit-text-stroke-color: transparent;
  animation: df-cb-pop 0.35s ease-out;
}

/* the business statement + button are hand-written */
html[data-theme="color"] .df-tagline,
html[data-theme="color"] #df-change-dream,
html[data-theme="color"] .df-cb-hint {
  font-family: "Segoe Print", "Bradley Hand", "Marker Felt", "Noteworthy", "Comic Sans MS", cursive;
}
html[data-theme="color"] .df-tagline { font-size: clamp(1.1rem, 2vw, 1.4rem); }

/* pencil-sketch dividers */
html[data-theme="color"] .df-rule {
  height: 0;
  background: none;
  border-top: 1.5px dashed rgba(74,68,59,0.45);
}

/* logo: faint pencil version beneath, full-color copy revealed by the brush */
html[data-theme="color"] .df-logo img {
  filter: grayscale(1) contrast(1.15) opacity(0.28);
}
html[data-theme="color"] .df-color-logo {
  position: absolute;
  inset: 0;
  clip-path: circle(0px at 50% 50%);
}
html[data-theme="color"] .df-color-logo img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 14px rgba(120,100,60,0.25));
}

/* ---- the icon page ---- */
.df-cb-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

.df-cb-icon {
  position: absolute;
  transform: rotate(var(--rot, 0deg));
}
.df-cb-sketch,
.df-cb-paint {
  position: absolute;
  inset: 0;
}
.df-cb-sketch { color: rgba(120,112,98,0.75); }
.df-cb-paint {
  color: var(--pc);
  clip-path: circle(0px at 50% 50%);
}
.df-cb-paint svg { filter: drop-shadow(0 1px 3px rgba(120,100,60,0.3)); }
.df-cb-blob {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pc) 0%, transparent 72%);
  opacity: 0.26;
}
.df-cb-icon.done { animation: df-cb-pop 0.4s ease-out; }

@keyframes df-cb-pop {
  0% { transform: rotate(var(--rot, 0deg)) scale(1); }
  45% { transform: rotate(var(--rot, 0deg)) scale(1.22); }
  100% { transform: rotate(var(--rot, 0deg)) scale(1); }
}

/* ---- chrome on paper ---- */
html[data-theme="color"] #df-dream-label { color: rgba(120,112,98,0.75); }

html[data-theme="color"] #df-change-dream {
  color: #4A443B;
  background: transparent;
  border: 1.6px solid rgba(74,68,59,0.65);
  /* the classic wobbly hand-drawn box */
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
}
html[data-theme="color"] #df-change-dream:hover {
  color: #201C15;
  border-color: #4A443B;
  background: rgba(74,68,59,0.06);
  box-shadow: none;
}

html[data-theme="color"] .df-copyright { letter-spacing: 0.06em; }

.df-cb-hint {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  bottom: 64px;
  z-index: 7;
  font-size: 1.05rem;
  color: rgba(74,68,59,0.6);
  pointer-events: none;
  animation: df-fade-in 1s 1.2s ease-out both;
  transition: opacity 0.8s;
}
.df-cb-hint.out { opacity: 0; }