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

html, body { margin: 0; height: 100%; overflow: hidden; background: #fff; }

body {
  color: #000;
  font: 14px/1.5 "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

a { color: #000; }
a:hover { color: #00e; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #00e; outline-offset: 3px; }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }

/* Layout: yellow column | the part | everything else. script.js drives the variables. */
.page {
  --split: 28%;
  --thick: 12px;
  --skew: 0deg;
  --grow: 0;
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: var(--split) var(--thick) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  touch-action: none;
}

.col {
  grid-column: 1;
  grid-row: 1 / 3;
  min-width: 0;
  overflow: hidden;
  padding: 24px;
  display: flex;
  align-items: flex-end;
  background: #e4ff3d;
}

.line {
  grid-column: 2;
  grid-row: 1 / 3;
  position: relative;
  z-index: 1;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}
.line::before { content: ""; position: absolute; inset: 0 -16px; }

.right {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  padding: 24px 32px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.foot {
  grid-column: 3;
  grid-row: 2;
  min-width: 0;
  margin: 0 32px 24px;
  padding-top: 14px;
  border-top: 4px solid #000;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  justify-content: space-between;
  align-items: baseline;
}

/* Mullet mode: business in front, party in the back. */
.page.mullet { grid-template-columns: minmax(0, 1fr) var(--thick) var(--split); }
.mullet .col { grid-column: 3; }
.mullet .right,
.mullet .foot { grid-column: 1; }

.word {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: 900 1em/0.8 "Inter Tight", Helvetica, Arial, sans-serif;
  white-space: nowrap;
}

.side {
  font-size: min(16vw, 22vh);
  letter-spacing: -0.05em;
  writing-mode: vertical-rl;
  transform: rotate(180deg) skewY(var(--skew));
  transition: transform 300ms ease-out;
}

.part {
  font-size: min(23vw, 40vh);
  letter-spacing: -0.06em;
  text-align: left;
  transform-origin: left bottom;
  transform: skewX(var(--skew));
  transition: transform 450ms ease-out;
}
.part.gone { transform: translateX(130vw) skewX(-24deg); }
.part.bored { animation: wobble 0.5s ease-in-out infinite; }

.hair {
  align-self: flex-end;
  height: 48px;
  min-width: 48px;
  padding: 10px;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.hair svg {
  display: block;
  flex: none;
  height: calc(28px + var(--grow) * 14px);
  aspect-ratio: 522 / 376;
  transition: height 200ms ease-out, transform 200ms ease-out;
}
.flipped .hair svg { transform: scaleX(-1); }

.msg {
  margin: 0;
  padding: 12px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.mail {
  display: inline-block;
  padding: 12px 0;
  background: #fff;
  font-weight: 500;
  transition: transform 160ms ease-out;
}

/* Easter egg layer: stickers, confetti, comb. */
.fx { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.sticker {
  position: absolute;
  padding: 4px 8px;
  background: #000;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  transition: top 700ms ease-in, transform 700ms ease-in;
}
.conf {
  position: absolute;
  height: auto;
  aspect-ratio: 522 / 376;
  animation: fall linear infinite;
}
.comb {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 26px;
  opacity: 0;
  transition: transform 60ms linear;
}
.comb.on { opacity: 1; }

/* Housekeeping: offered once the side effects hit the floor. */
.keep {
  display: none;
  position: absolute;
  z-index: 4;
  top: 24px;
  left: 24px;
  min-height: 44px;
  padding: 10px 14px;
  border: 2px solid #000;
  background: #fff;
  cursor: pointer;
}
.keep.on { display: block; }
.vac { display: none; position: absolute; left: 0; bottom: 1.5%; width: 180px; }
.vac.on { display: block; }
.sticker.sucked {
  opacity: 0;
  transition: top 300ms ease-in, left 300ms ease-in, transform 300ms ease-in, opacity 300ms ease-in;
}

.party .col { animation: party 1.2s steps(1) infinite; }

@keyframes fall { from { transform: translateY(-110vh) rotate(0deg); } to { transform: translateY(110vh) rotate(360deg); } }
@keyframes party { 0% { background: #e4ff3d; } 25% { background: #ff5a1f; } 50% { background: #ffb8d9; } 75% { background: #7df9ff; } }
@keyframes wobble { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }

/* Phones: both words run up the screen, footer goes full width. */
@media (max-width: 700px) {
  .col { grid-row: 1; padding: 16px; }
  .line { grid-row: 1; }
  .right { padding: 16px; }
  .foot,
  .mullet .foot {
    grid-column: 1 / 4;
    margin: 0;
    padding: 6px 16px max(14px, env(safe-area-inset-bottom));
    background: #fff;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    align-items: stretch;
  }
  .side,
  .part { font-size: min(38vw, 30vh); letter-spacing: -0.05em; }
  .part {
    writing-mode: vertical-rl;
    transform-origin: center;
    transform: rotate(180deg) skewY(var(--skew));
  }
  .part.gone { transform: translateY(-120vh) rotate(180deg); }
  .hair svg { height: calc(28px + var(--grow) * 10px); }
  .keep { top: 16px; left: 16px; }
  .vac { width: 120px; }
  .msg { min-height: 44px; padding: 0; }
  .mail { display: flex; align-items: center; min-height: 48px; padding: 0; font-size: 16px; }
}

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