:root {
  --paper: #efe7d7;
  --paper-2: #d8d0c2;
  --ink: #351239;
  --lilac: #ad82bf;
  --neon: #d7ff18;
  --pink: #ff4f9a;
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}
a { color: inherit; }
h1, h2, p { margin: 0; }

/*
  SITE-02A-R.4.2 · LILAC / NEON FLOOR · LAUNCH-PREVIEW CANDIDATE
  Radical reduction: lilac field + neon floor + one pink slit + one cream corner.
  The floor performs a lift / drop / rebound while the slit flexes open.
  Default = accessible static-open fallback. Supported normal-motion browsers
  progressively replace it with the reversible closed-entry scroll sequence.
*/
.work-address {
  position: relative;
  min-height: max(238svh, 91rem);
  overflow: clip;
  background: var(--paper);
}

.stage {
  position: sticky;
  top: 0;
  height: max(100svh, 44rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--lilac);
}

.plane,
.paper-strip {
  position: absolute;
  pointer-events: none;
  transform-origin: center;
  will-change: transform, clip-path;
}

.plane-berry {
  z-index: 1;
  inset: -3vh -2vw -3vh -2vw;
  background: var(--lilac);
  clip-path: none;
  transform: none;
}

.paper-strip {
  display: block;
  z-index: 5;
  top: -1px;
  left: -1px;
  width: clamp(7rem, 14vw, 13rem);
  height: clamp(6.5rem, 18vh, 11rem);
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 78% 62%, 42% 100%, 0 72%);
}

/* Neon floor: low -> lift -> drop -> rebound -> settle. */
.plane-green {
  z-index: 3;
  left: -3vw;
  bottom: -7vh;
  width: 106vw;
  height: 48vh;
  background: var(--neon);
  clip-path: polygon(
    0 21%,
    7% 14%,
    14% 22%,
    23% 8%,
    32% 20%,
    43% 5%,
    54% 18%,
    66% 4%,
    76% 20%,
    88% 7%,
    100% 19%,
    100% 100%,
    0 100%
  );
  transform-origin: 50% 100%;
  transform: translateY(0);
}

/* Pink is an opening, not a decorative zigzag. */
.plane-pink {
  z-index: 6;
  top: -2vh;
  left: 50%;
  width: clamp(4.4rem, 7vw, 7.5rem);
  height: 106vh;
  margin-left: calc(clamp(4.4rem, 7vw, 7.5rem) / -2);
  background: var(--pink);
  clip-path: polygon(
    35% 0,
    65% 0,
    62% 31%,
    84% 50%,
    62% 69%,
    66% 100%,
    34% 100%,
    38% 69%,
    16% 50%,
    38% 31%
  );
  transform-origin: 50% 50%;
  transform: translateX(0) rotate(0deg);
}

.works {
  position: absolute;
  z-index: 12;
  inset: 0;
}
.work {
  position: absolute;
  display: block;
  width: fit-content;
  max-width: min(43vw, 27rem);
  text-decoration: none;
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  touch-action: manipulation;
  overflow: visible;
  clip-path: none;
  visibility: visible;
}
.work-algo {
  left: clamp(2rem, 11vw, 11rem);
  top: 46vh;
  color: var(--paper);
  transform: rotate(-5deg);
}
.work-verfuegung {
  right: clamp(2rem, 7vw, 7rem);
  top: 58vh;
  color: #e62e7e;
  transform: rotate(5deg);
}
.work-title {
  display: block;
  overflow: visible;
  font-size: clamp(1.75rem, 3vw, 3.25rem);
  line-height: .8;
  letter-spacing: -.065em;
  font-weight: 900;
  transition: translate 90ms steps(2, end);
}
.work:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: .5rem;
}
.work-verfuegung:focus-visible { outline-color: var(--ink); }

.identity {
  position: absolute;
  z-index: 13;
  top: clamp(5rem, 11vh, 7.5rem);
  right: clamp(1.5rem, 4.5vw, 4.5rem);
  color: var(--paper);
  clip-path: inset(0);
  visibility: visible;
  will-change: transform, clip-path;
}
.identity h1 {
  display: flex;
  gap: .24em;
  width: max-content;
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: clamp(1.1rem, 1.55vw, 1.55rem);
  line-height: .84;
  padding-bottom: .20em;
  letter-spacing: -.055em;
  font-weight: 900;
}

.site-footer {
  position: absolute;
  z-index: 20;
  left: clamp(1rem, 2.3vw, 2.2rem);
  right: clamp(1rem, 2.3vw, 2.2rem);
  bottom: clamp(.75rem, 1.5vh, 1.25rem);
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  color: var(--ink);
  font-size: clamp(.64rem, .75vw, .74rem);
  line-height: 1;
  letter-spacing: .015em;
  visibility: visible;
}
.site-footer a { text-decoration-thickness: 1px; text-underline-offset: .18em; }
.site-footer a:hover,
.site-footer a:focus-visible { color: #b51f64; }

/*
  Zweitblick cursor: native-feeling plum arrow with a slightly misregistered
  pink cut behind it. CSS-only, no follower DOM, no lag, fine pointers only.
*/
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .work-address {
    cursor:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath d='M8.4 3.6L10.45 4.2L10.05 13.55L8.95 19.15L7.95 13.75Z' fill='%23ff4f9a' fill-opacity='.82'/%3E%3Cpath d='M2 1.5V18.2L6.55 13.85L10.25 21.35L13.05 19.95L9.35 12.7L15.65 12.5Z' fill='%23351239' stroke='%23efe7d7' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E")
      2 2,
      auto;
  }
  .work,
  .site-footer a { cursor: pointer; }
}

@media (pointer: fine) and (prefers-reduced-motion: reduce) {
  .work-address { cursor: auto; }
  .work,
  .site-footer a { cursor: pointer; }
}

@keyframes neon-floor {
  0%, 14% { transform: translateY(24vh); }
  31% { transform: translateY(4vh); }
  44% { transform: translateY(-15vh); }
  58% { transform: translateY(5vh); }
  71% { transform: translateY(-4vh); }
  82%, 100% { transform: translateY(0); }
}

/* Slit flexes with the floor: line -> mouth -> pinch -> relaxed open. */
@keyframes neon-slit {
  0%, 14% {
    clip-path: polygon(
      47% 0, 53% 0, 53% 31%, 54% 50%, 53% 69%,
      53% 100%, 47% 100%, 47% 69%, 46% 50%, 47% 31%
    );
    transform: translateX(0) rotate(0deg);
  }
  31% {
    clip-path: polygon(
      44% 0, 56% 0, 56% 31%, 66% 50%, 56% 69%,
      57% 100%, 43% 100%, 44% 69%, 34% 50%, 44% 31%
    );
    transform: translateX(-.25vw) rotate(-.5deg);
  }
  44% {
    clip-path: polygon(
      36% 0, 64% 0, 61% 31%, 88% 50%, 61% 69%,
      65% 100%, 35% 100%, 39% 69%, 12% 50%, 39% 31%
    );
    transform: translateX(.35vw) rotate(.6deg);
  }
  58% {
    clip-path: polygon(
      42% 0, 58% 0, 58% 31%, 70% 50%, 58% 69%,
      59% 100%, 41% 100%, 42% 69%, 30% 50%, 42% 31%
    );
    transform: translateX(-.2vw) rotate(-.35deg);
  }
  71% {
    clip-path: polygon(
      33% 0, 67% 0, 63% 31%, 86% 50%, 63% 69%,
      67% 100%, 33% 100%, 37% 69%, 14% 50%, 37% 31%
    );
    transform: translateX(.15vw) rotate(.25deg);
  }
  82%, 100% {
    clip-path: polygon(
      35% 0, 65% 0, 62% 31%, 84% 50%, 62% 69%,
      66% 100%, 34% 100%, 38% 69%, 16% 50%, 38% 31%
    );
    transform: translateX(0) rotate(0deg);
  }
}

/*
  Titles stay fully absent until the whole word can enter as a body.
  This removes the tiny square/dash fragments seen in the 44/60% audit frames.
  Once visible, only transform changes; no reveal clip remains to trim glyphs.
*/
@keyframes reveal-algo {
  0%, 47.9% {
    visibility: hidden;
    pointer-events: none;
    clip-path: none;
    transform: translate(-1.5vw, 4vh) rotate(-64deg);
  }
  48% {
    visibility: visible;
    pointer-events: auto;
    clip-path: none;
    transform: translate(-1.5vw, 4vh) rotate(-64deg);
  }
  58% {
    visibility: visible;
    pointer-events: auto;
    clip-path: none;
    transform: translate(.7vw, -.7vh) rotate(12deg);
  }
  70%, 100% {
    visibility: visible;
    pointer-events: auto;
    clip-path: none;
    transform: translate(0, 0) rotate(-5deg);
  }
}

@keyframes reveal-verfuegung {
  0%, 58.9% {
    visibility: hidden;
    pointer-events: none;
    clip-path: none;
    transform: translate(2vw, 3vh) rotate(72deg);
  }
  59% {
    visibility: visible;
    pointer-events: auto;
    clip-path: none;
    transform: translate(2vw, 3vh) rotate(72deg);
  }
  69% {
    visibility: visible;
    pointer-events: auto;
    clip-path: none;
    transform: translate(-.7vw, -.8vh) rotate(-11deg);
  }
  79%, 100% {
    visibility: visible;
    pointer-events: auto;
    clip-path: none;
    transform: translate(0, 0) rotate(5deg);
  }
}

@keyframes reveal-identity {
  0%, 71.9% {
    visibility: hidden;
    clip-path: inset(0 100% 0 0);
    transform: translateX(.8rem);
  }
  72% {
    visibility: visible;
    clip-path: inset(0 100% 0 0);
    transform: translateX(.8rem);
  }
  82%, 100% {
    visibility: visible;
    clip-path: inset(0);
    transform: translateX(0);
  }
}

@keyframes reveal-legal {
  0%, 91.9% {
    visibility: hidden;
    pointer-events: none;
  }
  92%, 100% {
    visibility: visible;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .plane-green,
    .plane-pink,
    .work,
    .identity,
    .site-footer {
      animation-duration: 1ms;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: 0% 100%;
    }
    .plane-green { animation-name: neon-floor; }
    .plane-pink { animation-name: neon-slit; }
    .work-algo { animation-name: reveal-algo; }
    .work-verfuegung { animation-name: reveal-verfuegung; }
    .identity { animation-name: reveal-identity; }
    .site-footer { animation-name: reveal-legal; }
  }

  .work-algo:hover .work-title,
  .work-algo:focus-visible .work-title,
  .work-algo:active .work-title {
    translate: -.15em -.04em;
  }
  .work-verfuegung:hover .work-title,
  .work-verfuegung:focus-visible .work-title,
  .work-verfuegung:active .work-title {
    translate: .16em -.05em;
  }
}

/* Utility pages stay terse. */
.utility-page {
  min-height: max(100svh, 36rem);
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 2.5vw, 2.2rem);
}
.utility-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid currentColor;
  padding-bottom: .75rem;
  font-size: .72rem;
  font-weight: 400;
}
.utility-head h1 { font: inherit; }
.utility-state {
  margin-top: auto;
  align-self: flex-end;
  max-width: 31rem;
  text-align: right;
  font-size: .72rem;
  line-height: 1.45;
}

/*
  /legal/ is intentionally boring: one lilac field and dry utility type.
  No neon floor, no slit, no miniature performance of the homepage.
*/
body.legal-surface { background: var(--lilac); }
.legal-surface .utility-page {
  background: var(--lilac);
  color: var(--ink);
}
.legal-surface .utility-head {
  border-bottom: 0;
  color: var(--ink);
  font-size: clamp(.64rem, .72vw, .72rem);
  font-weight: 400;
}
.legal-surface .utility-head a,
.legal-surface .utility-state a {
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.legal-surface .utility-state {
  margin-bottom: 0;
  max-width: 30rem;
  color: var(--ink);
  font-size: clamp(.64rem, .72vw, .72rem);
  line-height: 1.45;
}
.legal-surface .utility-state > a:first-child {
  display: inline;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

@media (max-width: 760px) {
  .work-address { min-height: max(252svh, 94rem); }
  .stage { height: max(100svh, 43rem); }

  .paper-strip {
    width: 30vw;
    min-width: 7rem;
    height: 19vh;
  }

  .plane-green {
    left: -7vw;
    bottom: -7vh;
    width: 114vw;
    height: 48vh;
    clip-path: polygon(
      0 22%,
      9% 15%,
      19% 24%,
      31% 7%,
      43% 21%,
      55% 5%,
      68% 20%,
      82% 8%,
      100% 22%,
      100% 100%,
      0 100%
    );
  }

  .plane-pink {
    left: 52%;
    width: clamp(3.2rem, 13vw, 4.6rem);
    margin-left: calc(clamp(3.2rem, 13vw, 4.6rem) / -2);
  }

  .work { max-width: 78vw; }
  .work-title { font-size: clamp(2rem, 9.7vw, 3rem); }
  .work-algo {
    left: 1.2rem;
    top: 43vh;
  }
  .work-verfuegung {
    right: 1.1rem;
    top: 58vh;
  }
  .identity {
    top: 11vh;
    right: 1.1rem;
  }
  .identity h1 { font-size: clamp(1.15rem, 5.5vw, 1.65rem); }
  .site-footer { font-size: .64rem; }

  .legal-surface .utility-state { max-width: 18rem; }
}

@media (max-width: 380px) {
  .work-title { font-size: clamp(1.9rem, 9.3vw, 2.65rem); }
}

@media (max-height: 650px) and (min-width: 761px) {
  .work-address { min-height: 92rem; }
  .stage { height: 44rem; }
  .work-algo { top: 20rem; }
  .work-verfuegung { top: 25rem; }
  .identity { top: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .plane-green,
  .plane-pink,
  .work,
  .identity,
  .site-footer,
  .work-title {
    animation: none !important;
    transition: none !important;
  }
}