/* =========================================================================
   little machines .fun  —  landing page
   theme sampled from the CATBEATS / LITTLE MACHINES artwork:
   e-shop-sticker meets laboratory-kawaii
   ========================================================================= */

:root{
  --paper:   #f0efe9;   /* off-white border of the artwork            */
  --gold:    #ecb055;   /* mustard panel                              */
  --gold-dk: #e0982f;
  --ink:     #362b27;   /* chunky near-black line work                */
  --orange:  #e3602c;   /* glasses / accents                          */
  --mint:    #86be95;   /* screen glow                                */
  --sky:     #71c6de;   /* siamese eyes                               */
  --olive:   #a2ba55;   /* the little green guy                       */
  --pink:    #f0b8c4;

  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --radius: 20px;
  --line: 4px solid var(--ink);

  --font-display: "Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-body: ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100svh;
  overflow-x:hidden;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--gold);
  background-image:
    radial-gradient(circle at 50% 0%, #f0c274 0%, var(--gold) 45%, var(--gold-dk) 120%);
  line-height:1.5;
}

/* film grain / paper tooth over everything ------------------------------- */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.visually-hidden{
  position:absolute!important; width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------- layout */
.wrap{
  max-width:620px;
  margin:0 auto;
  padding:clamp(1.25rem, 4vw, 2.75rem) clamp(1rem, 5vw, 2rem) 2.5rem;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:clamp(1.1rem, 3.5vw, 1.9rem);
}

/* ------------------------------------------------------------- brandmark */
.brandmark{
  margin:0;
  text-align:center;
  font-family:var(--font-mono);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:lowercase;
  font-size:clamp(.8rem, 2.6vw, 1rem);
  color:var(--ink);
}
.brandmark .tld{ color:var(--orange); }

/* ------------------------------------------------------------------ hero */
.hero{
  margin:0;
  background:var(--paper);
  border:var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transform:rotate(-1.1deg);
}
.hero img{
  display:block;
  width:100%;
  height:auto;
  border-bottom:var(--line);
}
.lab-tag{
  font-family:var(--font-mono);
  font-size:clamp(.6rem, 2.1vw, .72rem);
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:.5rem .75rem;
  display:flex;
  align-items:center;
  gap:.4rem;
  color:var(--ink);
  background:repeating-linear-gradient(45deg,#fff 0 8px,#f4f2ea 8px 16px);
}
.lab-tag .dot{
  width:.6rem;height:.6rem;border-radius:50%;
  background:var(--orange);
  border:2px solid var(--ink);
  flex:none;
  animation:blink 1.6s steps(1,end) infinite;
}
@keyframes blink{ 0%,60%{opacity:1} 61%,100%{opacity:.25} }

/* ----------------------------------------------------------------- pitch */
.pitch{ text-align:center; }
.kicker{
  margin:0 0 .35rem;
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:clamp(.72rem,2.5vw,.9rem);
  color:var(--ink);
  opacity:.75;
}
.pitch h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  line-height:1;
  font-size:clamp(2.1rem, 9vw, 3.6rem);
  letter-spacing:.005em;
  text-transform:uppercase;
  text-shadow:3px 3px 0 var(--paper), 4px 4px 0 var(--ink);
}
.pitch h1 .band{
  display:block;
  color:var(--orange);
  font-size:1.18em;
}
.pitch h1 .line2{ display:block; }
.pitch h1 .bang{ color:var(--sky); }
.tagline{
  margin:.7rem 0 0;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.05rem, 4vw, 1.4rem);
}
.cta-line{
  margin:0;
  text-align:center;
  font-weight:700;
  font-family:var(--font-display);
  font-size:clamp(1rem, 3.6vw, 1.25rem);
  color:var(--ink);
}
.cta-line::after{ content:" ✦"; color:var(--orange); }

/* -------------------------------------------------------------- card box */
.card{
  background:var(--paper);
  border:var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* -------------------------------------------------- dato-duo firmware card */
.dato-card{
  display:flex;
  align-items:center;
  text-decoration:none;
  color:var(--ink);
  background:#c3e3cd;                 /* light mint — keeps green identity, more readable */
  border:var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(.9rem, 3.5vw, 1.2rem) clamp(1rem, 4vw, 1.4rem);
  transform:rotate(-.8deg);
  transition:transform .1s ease, box-shadow .1s ease;
}
.dato-card:hover{ transform:rotate(-.8deg) translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
.dato-card:active{ transform:rotate(-.8deg) translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
.dato-card:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.dato-card-text{ flex:1 1 auto; min-width:0; }
/* device graphic as a fixed-size background — no replaced-element sizing to
   trip over (was an <img>; Edge and Chrome disagreed on how to size it) */
.dato-card-art{
  flex:0 0 auto;
  margin-left:clamp(.75rem, 3vw, 1.25rem);
  width:clamp(84px, 24vw, 128px);
  height:clamp(63px, 18vw, 96px);
  background:url("dato/dato.png") center / contain no-repeat;
}
.dato-card-title{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.35rem, 5.5vw, 1.85rem);
  line-height:1.05;
  letter-spacing:-.01em;
}
.dato-card-sub{
  display:block;
  margin-top:.2rem;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(.95rem, 3.6vw, 1.15rem);
  opacity:.8;
}
.dato-card-go{
  display:block;
  margin-top:.5rem;
  font-family:var(--font-mono);
  font-size:.74rem;
  font-weight:700;
  color:var(--orange);
}

/* --------------------------------------------------------------- signup */
.signup{
  padding:clamp(1rem, 4vw, 1.5rem);
  transform:rotate(.8deg);
}
.signup form{ margin:0; }

.field-row{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}
#email{
  flex:1 1 12rem;
  min-width:0;
  font:inherit;
  font-size:1.05rem;
  padding:.8rem .9rem;
  color:var(--ink);
  background:#fff;
  border:3px solid var(--ink);
  border-radius:12px;
  box-shadow:inset 2px 2px 0 rgba(54,43,39,.12);
}
#email::placeholder{ color:#9a8f88; }
#email:focus-visible{
  outline:none;
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(227,96,44,.35);
}

.btn-submit{
  flex:0 0 auto;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  cursor:pointer;
  padding:.8rem 1.3rem;
  color:var(--paper);
  background:var(--orange);
  border:3px solid var(--ink);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  transition:transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.btn-submit:hover{ background:#f0713c; }
.btn-submit:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.btn-submit:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
.btn-submit[disabled]{ opacity:.6; cursor:progress; }

/* beta-tester opt-in */
.beta-opt{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:.85rem 0 0;
  font-family:var(--font-mono);
  font-size:.8rem;
  line-height:1.3;
  color:var(--ink);
  cursor:pointer;
}
.beta-opt input{
  flex:none;
  width:1.15rem;
  height:1.15rem;
  accent-color:var(--orange);
  cursor:pointer;
}
.beta-opt input:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
.beta-opt:has(:checked) span{ color:var(--orange); font-weight:700; }

/* honeypot — visually gone, still in the DOM for bots */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-status{
  margin:.8rem 0 0;
  min-height:1.2em;
  font-family:var(--font-mono);
  font-size:.86rem;
  font-weight:700;
}
.form-status.is-ok{ color:#2f8f4e; }
.form-status.is-err{ color:var(--orange); }

.fine-print{
  margin:.55rem 0 0;
  font-family:var(--font-mono);
  font-size:.72rem;
  opacity:.7;
}

/* --------------------------------------------------------------- discord */
.discord{
  margin:-.4rem 0 0;
  text-align:center;
}
.discord a{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.82rem;
  text-transform:lowercase;
  letter-spacing:.03em;
  text-decoration:none;
  color:var(--ink);
  padding:.5rem .85rem;
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:999px;
  box-shadow:var(--shadow-sm);
  transition:transform .08s ease, box-shadow .08s ease, color .15s ease;
}
.discord a:hover{ color:#5865F2; }        /* discord blurple */
.discord a:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.discord a:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
.discord-ico{ flex:none; }

/* ---------------------------------------------------------------- footer */
.foot{
  margin-top:.5rem;
  text-align:center;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.04em;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
}
.foot > span{ opacity:.7; }
.foot-link{
  color:var(--ink);
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid var(--orange);
  padding-bottom:1px;
  transition:color .15s ease, border-color .15s ease;
}
.foot-link:hover{ color:var(--orange); }
.foot-link:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
.foot .dedication{
  margin-top:.5rem;
  max-width:46ch;
  font-style:italic;
  opacity:.6;
  line-height:1.6;
}
.foot .dedication span{ color:var(--orange); font-style:normal; }

/* ------------------------------------------------------- sound toggle UI */
.sound-toggle{
  position:fixed;
  top:.9rem; right:.9rem;
  z-index:50;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  cursor:pointer;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:.5rem .7rem;
  color:var(--ink);
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:999px;
  box-shadow:var(--shadow-sm);
  transition:transform .08s ease, box-shadow .08s ease;
}
.sound-toggle:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.sound-toggle:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }

.sound-toggle .eq{
  display:inline-flex;
  align-items:flex-end;
  gap:2px;
  height:14px;
}
.sound-toggle .eq i{
  width:3px;
  background:var(--orange);
  height:4px;
  border-radius:1px;
}
.sound-toggle.is-on .eq i{ animation:bounce .9s ease-in-out infinite; }
.sound-toggle.is-on .eq i:nth-child(2){ animation-delay:.15s; }
.sound-toggle.is-on .eq i:nth-child(3){ animation-delay:.30s; }
.sound-toggle.is-on .eq i:nth-child(4){ animation-delay:.45s; }
@keyframes bounce{ 0%,100%{height:4px} 50%{height:14px} }

.sound-toggle:not(.is-on) .eq i{ height:4px; opacity:.5; background:var(--ink); }
.sound-toggle .sound-label::after{ content:" off"; }
.sound-toggle.is-on .sound-label::after{ content:" on"; color:var(--orange); }
.sound-toggle.is-armed .sound-label::after{ content:" \25B6"; color:var(--orange); }

/* waiting-for-a-tap: gentle nudge, no fake EQ dance */
.sound-toggle.is-armed{ animation:nudge 1.8s ease-in-out infinite; }
.sound-toggle.is-armed .eq i{ height:4px; opacity:.6; background:var(--orange); }
@keyframes nudge{ 0%,92%,100%{transform:none} 96%{transform:translateY(-2px) rotate(-2deg)} }

/* ------------------------------------------------------ bigger displays */
@media (min-width:720px){
  .wrap{ padding-top:3.25rem; gap:2.1rem; }
  .hero{ transform:rotate(-1.6deg); }
  .signup{ transform:rotate(1deg); }
}

/* -------------------------------------------------------- gentle motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .hero,.signup,.dato-card{ transform:none; }
  .dato-card:hover,.dato-card:active{ transform:none; }
}