/* Impulsee home page: giant title, link tiles, and a collage of app bits
   floating in the background. Loaded only by index.html. */

body.home {
  /* The app's own values: `danger`, `success`, and the five energy levels
     (lv1 Quick one … lv5 Carnage). --orange comes from style.css. */
  --amber: #f7b500;
  --lv1: #fff0c8;
  --lv2: #ffe07a;
  --lv3: #ffc629;
  --lv4: #ffa219;
  --lv5: #ff7a00;
  --peach: #f9d6b4;
  --cream: #f4ecd8;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(circle, rgba(30, 27, 20, .13) 1.4px, transparent 1.6px) 0 0 / 26px 26px,
    var(--bg);
}

.shell {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  margin: auto;
  padding: 48px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.brand { position: relative; margin-bottom: 6px; }

/* The app icon: a button that does nothing but press, on its own orange
   layer like the app's buttons (no ink shadow). */
.logo-btn {
  display: block;
  padding: 0;
  margin: 0;
  font: inherit;
  background: none;
  border: 4px solid var(--ink);
  border-radius: 28%;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Holding it for 5s is the easter egg: no image menu, selection or zoom. */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  --lift: 8px;
  --b: 4px;
  --back: var(--orange);
  rotate: -6deg;
  transition:
    rotate .25s cubic-bezier(.3, 1.6, .5, 1),
    scale .25s cubic-bezier(.3, 1.6, .5, 1),
    transform .17s cubic-bezier(.25, .46, .45, .94),
    box-shadow .17s cubic-bezier(.25, .46, .45, .94);
}
.logo-btn:active { transition-duration: .25s, .25s, .11s, .11s; }
.logo-btn:focus-visible { outline: 3px dashed var(--ink); outline-offset: 6px; }
.logo {
  display: block;
  width: clamp(110px, 22vw, 168px);
  height: auto;
}

.brand:hover .logo-btn { rotate: 4deg; scale: 1.06; }

.badge {
  position: absolute;
  width: clamp(64px, 12vw, 92px);
  right: -38%;
  top: -14%;
  animation: spin 14s linear infinite;
}

.badge text {
  fill: #fffbec;
  font: 900 13px "Inter", sans-serif;
}

.mega {
  font-size: clamp(76px, 19vw, 230px);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: .86;
  margin: 18px 0 18px;
  color: var(--ink);
  text-shadow: .035em .035em 0 var(--primary);
  padding-right: .05em; /* room for the shadow on the last letter */
}

.lede {
  display: inline-block;
  max-width: 520px;
  margin: 0 0 36px;
  padding: 10px 18px;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  rotate: -1deg;
}

/* ---------- Tiles ---------- */

.dash {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.tile {
  position: relative;
  display: block;
  text-align: left;
  background: var(--card);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 20px;
  padding: 20px 56px 20px 22px;
  text-decoration: none;
  /* Raised (style.css); amber layer unless the face is amber. */
  --lift: 6px;
  cursor: pointer;
}

.tile span { display: block; font-size: 24px; font-weight: 900; letter-spacing: -0.6px; line-height: 1.15; }
.tile small { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; opacity: .75; overflow-wrap: anywhere; }

.tile i {
  position: absolute;
  right: 16px;
  top: 50%;
  translate: 0 -50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 3px solid currentColor;
  border-radius: 50%;
  transition: rotate .2s;
}
.tile i svg { width: 19px; height: 19px; display: block; }

.t-yellow { background: var(--primary); --back: var(--orange); }
.t-orange { background: var(--orange); }
.t-ink { background: var(--ink); color: #fffbec; --back: var(--orange); }

.tile:hover i { rotate: 45deg; }
.tile:focus-visible { outline: 3px dashed var(--ink); outline-offset: 5px; }

/* ---------- Beta sign-up ---------- */

button.tile { font: inherit; width: 100%; cursor: pointer; }

.t-beta {
  grid-column: 1 / -1;
  background: var(--primary);
  --back: var(--orange);
  padding-top: 24px;
  padding-bottom: 24px;
  rotate: -.6deg;
}
.t-beta span { font-size: 30px; }
.t-beta .tag {
  position: absolute;
  top: -14px;
  right: 64px;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--primary);
  border-radius: 999px;
  padding: 4px 10px;
  rotate: 3deg;
}
.t-beta i { background: var(--card); }

.beta {
  width: min(440px, calc(100% - 32px));
  margin: auto;
  padding: 28px 24px 24px;
  background: var(--bg);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 8px 8px 0 var(--ink);
  text-align: left;
}
.beta::backdrop { background: rgba(30, 27, 20, .55); }
.beta[open] { animation: pop .22s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes pop { from { opacity: 0; scale: .92; } }

.beta h2 { font-size: 30px; font-weight: 900; letter-spacing: -1px; line-height: 1.1; margin: 10px 0 6px; }
.beta-sub { margin: 0 0 20px; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--ink-soft); }

.beta-close {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--card); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 50%;
  cursor: pointer;
  --lift: 3px;
}
.beta-close svg { width: 16px; height: 16px; }

.os { border: 0; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.os legend { padding: 0; margin-bottom: 6px; font-size: 10px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; }
.os-btn { position: relative; cursor: pointer; }
.os-btn input { position: absolute; opacity: 0; pointer-events: none; }
.os-btn span {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 8px 12px;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 16px;
  font-weight: 900; font-size: 18px; letter-spacing: -.3px;
  --lift: 4px;
}
.os-btn svg { width: 34px; height: 34px; }
/* Picked = pressed onto its layer and left there, amber. */
.os-btn input:checked + span {
  background: var(--primary);
  --back: var(--orange);
  transform: translate(var(--lift), var(--lift));
  box-shadow: 0 0 0 calc(var(--b) * -1) var(--back), 0 0 0 0 var(--ink);
}
.os-btn input:focus-visible + span { outline: 3px dashed var(--ink); outline-offset: 4px; }

.beta-input {
  width: 100%;
  font: 600 16px "Inter", sans-serif; /* 16px stops iOS zooming in */
  color: var(--ink);
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
}
.beta-input:focus { outline: none; box-shadow: 4px 4px 0 var(--orange); }

.beta-msg { min-height: 20px; margin: 8px 0 10px; font-size: 14px; font-weight: 700; color: #c2410c; }

.beta-submit {
  width: 100%;
  font: 900 20px "Inter", sans-serif;
  letter-spacing: -.3px;
  color: var(--ink);
  background: var(--orange);
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
}
.beta-submit:disabled { opacity: .6; cursor: progress; }
.beta-done .beta-sub { margin-bottom: 22px; }

@media (max-width: 600px) {
  .t-beta span { font-size: 25px; }
  .t-beta .tag { right: 18px; }
  .beta { padding: 24px 18px 18px; }
}

/* ---------- Collage ---------- */

.collage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.bit {
  position: absolute;
  rotate: var(--r, 0deg);
  animation: float var(--t, 7s) ease-in-out var(--delay, 0s) infinite alternate;
}

.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.blob-a { width: 520px; height: 520px; background: var(--primary); top: -180px; left: -140px; }
.blob-b { width: 460px; height: 460px; background: var(--orange); bottom: -200px; right: -120px; opacity: .35; }

/* Shared app styling. Cards are flat now, like the app's: just the
   outline. Buttons, picked chips and the level plaques are .raised. */
.panel {
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 14px;
}
.panel-cream { background: var(--cream); }
.panel-peach { background: var(--peach); }
.panel-yellow { background: var(--primary); }

.chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  padding: 2px 8px;
}
.chip-yellow { background: var(--primary); }
.chip-orange { background: var(--orange); }

.bigpill {
  border: 3px solid var(--ink);
  border-radius: 16px;
  --lift: 5px;
  padding: 12px 18px;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.5px;
  text-align: center;
  white-space: nowrap;
}
/* Level plaques sit on the next level up; 5 sits on 3 (as in the app). */
.lv1 { background: var(--lv1); --back: var(--lv2); }
.lv3 { background: var(--lv3); --back: var(--lv4); }
.lv5 { background: var(--lv5); --back: var(--lv3); }
/* The Create crew button: `success` face, orange layer. */
.pill-amber { background: var(--amber); --back: var(--orange); font-size: 18px; padding: 10px; }

.pill {
  display: inline-block;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
}
/* A picked time chip: amber, standing on an orange layer. */
.pill-on { background: var(--primary); --lift: 3px; --b: 2.5px; --back: var(--orange); }
/* The I'm in button: white face, amber layer, the app's 16px corners. */
.btn-in {
  display: inline-block;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  padding: 9px 16px;
  font-weight: 900;
  font-size: 15px;
  white-space: nowrap;
  --lift: 4px;
  --b: 2.5px;
}

.sq {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  /* The composer's nudges: light amber on an orange layer. */
  background: var(--lv2);
  border: 3px solid var(--ink);
  border-radius: 12px;
  --lift: 4px;
  --back: var(--orange);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
}

/* Individual app pieces */
.c-shout { top: 7%; left: 3%; --r: -8deg; --t: 6s; }
.shout {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--orange);
  border: 3px solid var(--ink);
  border-radius: 18px;
  --lift: 7px;
  padding: 16px 30px;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.shout svg { width: 28px; height: 28px; }

.c-howbig { top: 5%; right: 3%; width: 270px; --r: 7deg; --t: 8s; --delay: -2s; }
.c-howbig .bigpill { margin: 10px 0 14px; }
.slider {
  position: relative;
  height: 34px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.slider b { position: relative; z-index: 1; width: 2.5px; height: 10px; background: rgba(30, 27, 20, .35); border-radius: 2px; }
.slider .fill { position: absolute; inset: 0 55% 0 0; background: var(--primary); border-radius: 999px 0 0 999px; }
.slider .thumb {
  position: absolute;
  z-index: 2;
  left: 34%;
  top: 50%;
  translate: 0 -50%;
  /* The app's thumb at rest: no shadow, a touch smaller than when held. */
  width: 45px;
  height: 45px;
  background: var(--primary);
  border: 3px solid var(--ink);
  border-radius: 50%;
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}
.slider .thumb i { width: 3px; height: 14px; background: var(--ink); border-radius: 2px; }

.c-when { bottom: 6%; left: 3%; width: 270px; --r: 5deg; --t: 9s; --delay: -4s; }
.when-row { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 12px; }
.time { font-weight: 900; font-size: 28px; letter-spacing: -1px; line-height: 1; text-align: center; }
.time small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0; opacity: .6; margin-top: 4px; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pills .pill { font-size: 12px; padding: 5px 10px; }

.c-carnage { bottom: 9%; right: 4%; width: 230px; --r: -6deg; --t: 7s; --delay: -1s; }

.c-crew { top: 40%; right: -50px; width: 250px; --r: -9deg; --t: 10s; --delay: -3s; }
.crew-title { font-weight: 900; font-size: 24px; letter-spacing: -0.6px; margin-bottom: 8px; }
.label { display: block; font-size: 10px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 4px; }
.input { background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 12px; font-weight: 600; font-size: 14px; margin-bottom: 12px; }

.c-imin { top: 44%; left: 4%; display: flex; align-items: center; gap: 8px; --r: -10deg; --t: 6s; --delay: -2s; }
.avatars { display: flex; }
.avatars span {
  width: 40px; height: 40px; margin-left: -12px;
  display: grid; place-items: center;
  border: 3px solid var(--ink); border-radius: 50%;
  font-weight: 900; font-size: 12px;
}
.avatars span:first-child { margin-left: 0; background: var(--primary); }
.avatars span:nth-child(2) { background: var(--orange); }
.avatars span:nth-child(3) { background: #fff; }

.c-30 { bottom: 28%; right: 13%; --r: 8deg; --t: 5s; --delay: -1s; }
.sq-plus { background: var(--amber); }
.c-plus { top: 31%; right: 9%; --r: 12deg; --t: 6s; --delay: -3s; }

/* Doodles */
.d-squig1 { width: 170px; top: 4%; left: 36%; --r: -6deg; --t: 8s; }
.d-squig2 { width: 210px; bottom: 3%; left: 42%; --r: 4deg; --t: 9s; --delay: -5s; }
.d-zig { width: 140px; top: 66%; right: 22%; --r: -14deg; --t: 7s; }
.d-arrow { width: 110px; top: 22%; left: 20%; --r: 8deg; --t: 8s; --delay: -3s; }
.d-ring { width: 220px; height: 220px; border: 3px solid var(--ink); border-radius: 50%; top: -90px; left: 52%; }
.d-grid {
  width: 130px; height: 90px; bottom: 14%; right: 30%;
  background: radial-gradient(circle, var(--ink) 3px, transparent 3.5px) 0 0 / 18px 18px;
  --r: 12deg;
}

/* Small app pieces */
.a-quiet { top: 60%; left: 6%; --r: -12deg; --t: 6s; }
.a-quiet .bigpill { font-size: 18px; padding: 8px 14px; }
.a-whenchip { top: 20%; right: 25%; --r: 10deg; --t: 4s; scale: 1.4; }
.a-1hr { top: 12%; left: 26%; --r: -12deg; --t: 5s; }
.a-now { bottom: 30%; left: 14%; --r: 8deg; --t: 5s; }
.a-mega { top: 31%; left: 8%; --r: -14deg; --t: 4s; --delay: -1s; }
.a-howchip { top: 53%; left: 9%; --r: 9deg; --t: 6s; scale: 1.3; }
.megabtn {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  background: var(--primary);
  border: 3px solid var(--ink); border-radius: 50%;
  --lift: 4px;
  --back: var(--orange);
}
.megabtn svg { width: 26px; height: 26px; }

/* Acknowledgement of Country */
.ack {
  width: 100%;
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  background: rgba(255, 251, 236, .9);
  border: 3px solid var(--ink);
  border-radius: 18px;
  padding: 14px 18px;
}
.ack .flags { display: flex; gap: 8px; flex-shrink: 0; }
.ack img { display: block; width: 54px; height: auto; border: 2px solid var(--ink); border-radius: 4px; }
.ack p { margin: 0; font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--ink-soft); }

/* ---------- Easter egg: hold the icon for 5 seconds ----------
   A burst of little stickers from the icon, then the cat drops in on a
   raised card (orange layer, like the icon) with a sticker slapped on its
   corner. Tap anywhere, press Esc, or wait, and it tumbles away. */

/* Held past halfway: the icon trembles, harder as it goes. */
.logo-btn.charging { animation: charge 2.5s linear both; }
@keyframes charge {
  0%   { translate: 0 0; }
  10%  { translate: -1px 1px; }
  20%  { translate: 1px -1px; }
  30%  { translate: -1px -1px; }
  40%  { translate: 2px 1px; }
  50%  { translate: -2px 2px; }
  60%  { translate: 2px -2px; }
  70%  { translate: -3px -1px; }
  80%  { translate: 3px 2px; }
  90%  { translate: -3px 3px; }
  100% { translate: 3px -3px; }
}

.pop {
  position: fixed;
  z-index: 50;
  width: var(--s, 18px);
  height: var(--s, 18px);
  margin: calc(var(--s, 18px) / -2) 0 0 calc(var(--s, 18px) / -2);
  background: var(--c);
  border: 2.5px solid var(--ink);
  border-radius: var(--rad, 50%);
  pointer-events: none;
  animation: pop-fly .9s cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes pop-fly {
  0%   { transform: translate(0, 0) rotate(0) scale(.4); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--spin)) scale(1); opacity: 0; }
}

.cat-egg {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(30, 27, 20, .5);
  cursor: pointer;
  animation: cat-dim .25s ease-out both;
}
.cat-egg.out { animation: cat-dim .3s ease-in .15s reverse both; }
@keyframes cat-dim { from { background: rgba(30, 27, 20, 0); } }

.cat-wrap {
  position: relative;
  width: min(440px, 86vw);
  rotate: -4deg;
  animation: cat-in .8s cubic-bezier(.3, 1.45, .5, 1) both;
}
.cat-egg.out .cat-wrap { animation: cat-out .45s cubic-bezier(.5, 0, .9, .4) both; }
@keyframes cat-in {
  from { transform: translateY(-110vh) rotate(-24deg); }
}
@keyframes cat-out {
  to { transform: translateY(110vh) rotate(28deg); }
}

.cat-card {
  display: block;
  border: 4px solid var(--ink);
  border-radius: 26px;
  overflow: hidden;
  background: var(--card);
  --lift: 9px;
  --b: 4px;
  --back: var(--orange);
  animation: cat-sway 2.4s ease-in-out .8s infinite alternate;
}
.cat-card img { display: block; width: 100%; height: auto; }
@keyframes cat-sway {
  from { rotate: -1.5deg; }
  to   { rotate: 1.5deg; }
}

.cat-chip {
  position: absolute;
  z-index: 1;
  top: -18px;
  right: -14px;
  font-size: 15px;
  letter-spacing: 2px;
  padding: 6px 14px;
  border-width: 3px;
  border-radius: 12px;
  rotate: 9deg;
  animation: chip-slap .45s cubic-bezier(.3, 1.8, .5, 1) .6s both;
}
.cat-tag {
  position: absolute;
  z-index: 1;
  left: -12px;
  bottom: -16px;
  rotate: -7deg;
  animation: chip-slap .45s cubic-bezier(.3, 1.8, .5, 1) .8s both;
}
@keyframes chip-slap {
  from { scale: 2.4; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pop { display: none; }
  .logo-btn.charging { animation: none; }
  .cat-wrap, .cat-egg.out .cat-wrap, .cat-card, .cat-chip, .cat-tag { animation: none; }
  .cat-egg, .cat-egg.out { animation-duration: .01s; }
}

@keyframes float {
  from { transform: translateY(-8px); }
  to   { transform: translateY(10px); }
}
@keyframes spin { to { rotate: 360deg; } }

/* ---------- Smaller screens ---------- */

@media (max-width: 1280px) {
  .hide-md { display: none; }
  .c-when { left: -60px; bottom: 3%; }
  .c-carnage { right: -50px; bottom: 4%; }
  .c-plus { right: 2%; top: 36%; }
  .a-mega { left: 1%; top: 26%; }
}

@media (max-width: 900px) {
  .bit { scale: .75; }
  .c-shout { left: -30px; top: 2%; }
  .c-howbig { right: -50px; top: 1%; }
  .c-carnage { right: -30px; bottom: 2%; }
}

@media (max-width: 600px) {
  .hide-sm { display: none; }
  .bit { scale: .55; }
  .c-shout { top: 4px; left: -44px; }
  .c-howbig { top: -36px; right: -72px; }
  .c-carnage { bottom: 0; right: -40px; }
  .c-plus { display: none; }
  .a-quiet { display: none; }
  .a-whenchip { display: none; }
  .d-squig1 { top: auto; bottom: 1%; left: 22%; }
  .d-squig2 { display: none; }
  .d-ring { display: none; }
  .a-now { bottom: 1%; left: -4px; }
  .a-mega { display: none; }
  .a-1hr { display: none; }
  .ack { flex-direction: column; align-items: flex-start; }

  .hero { padding: 168px 16px 110px; }
  .dash { grid-template-columns: 1fr; gap: 14px; }
  .tile { padding: 16px 56px 16px 18px; }
  .tile span { font-size: 21px; }
  .lede { border-radius: 18px; font-size: 15px; margin-bottom: 28px; }
  .badge { right: -44%; top: -6%; }
}

@media (prefers-reduced-motion: reduce) {
  .bit, .badge { animation: none; }
}