/* nain.lt — four comic panels, split by zigzag gutters. Borderless.
   Palette inherited from the portfolio (me.nain.lt). */

:root {
  --roots:  #FFB020;   /* Zulkernain : amber   */
  --motion: #FF2E9A;   /* DJ Devyni  : magenta */
  --impact: #2EE86C;   /* Quiz       : green   */
  --build:  #9D4DFF;   /* Finass     : violet  */

  --gutter: #FFFCF4;   /* the white space between panels */
  --label:  #FFFCF4;

  --ease: cubic-bezier(.22,.68,0,1);
  --font-display: 'Bangers', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
}
:root[data-theme="dark"] {
  --gutter: #0B0B10;
  --roots:  #FBAF2B;
  --motion: #F45CAB;
  --impact: #34D06A;
  --build:  #9E76F7;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  min-height: 100dvh;
  background: var(--gutter);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.strip {
  position: relative;
  width: 100%;
  height: 100dvh;
}

.panel {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--c);
  text-decoration: none;
  transition: filter .35s var(--ease);
}

.art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* light rakes across each panel from its top corner */
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(158deg, rgba(255,255,255,.06), transparent 46%, rgba(0,0,0,.1));
}

/* zigzag boundaries — each panel is clipped out of the full frame,
   so the gutters tile perfectly no matter the viewport. */
.panel--1 { clip-path: polygon(0 0, 50.5% 0, 46.5% 24%, 49.5% 47.35%, 34% 50.75%, 0 46.75%); }
.panel--2 { clip-path: polygon(51.5% 0, 100% 0, 100% 47.75%, 67% 43.75%, 50.5% 47.35%, 47.5% 24%); }
.panel--3 { clip-path: polygon(0 49.25%, 34% 53.25%, 45.5% 50.7%, 49.5% 76%, 44.5% 100%, 0 100%); }
.panel--4 { clip-path: polygon(46.5% 50.7%, 67% 46.25%, 100% 50.25%, 100% 100%, 45.5% 100%, 50.5% 76%); }

.panel__title {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  transform: translate(-50%, -50%) rotate(var(--rot));
  margin: 0;
  width: max-content;
  max-width: 40%;
  color: var(--label);
  font-weight: 700;
  font-size: clamp(1rem, 2.1vw, 2rem);
  line-height: 1.02;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-align: center;
  color: #FFFCF4;
  -webkit-text-stroke: 4px #0D0D0D;
  paint-order: stroke fill;
  text-shadow: 5px 5px 0 rgba(13,13,13,.55);
  transition: transform .35s var(--ease);
}

.panel--1 { --cx: 25%;   --cy: 23%; --rot: -2.5deg; }
.panel--2 { --cx: 75.5%; --cy: 22%; --rot:  1.8deg; }
.panel--3 { --cx: 23%;   --cy: 75%; --rot: -1.6deg; }
.panel--4 { --cx: 74%;   --cy: 76%; --rot:  2.4deg; }

.panel:hover, .panel:focus-visible { outline: none; filter: saturate(1.3) brightness(1.07); }
.panel:hover .panel__title, .panel:focus-visible .panel__title {
  transform: translate(-50%, -50%) rotate(0deg) scale(1.1);
}
.panel:focus-visible .panel__title { text-decoration: underline; text-underline-offset: 6px; }

/* ── Mobile: the strip turns and reads top to bottom ───── */
@media (max-width: 860px) {
  .panel__title { max-width: 40vw; font-size: clamp(.95rem, 4.4vw, 1.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* DJ Devyni has no site yet — the panel renders but does not navigate. */
.panel[data-soon] { cursor: default; }
.panel[data-soon]:hover { filter: none; }
.panel[data-soon]:hover .panel__title { transform: translate(-50%, -50%) rotate(var(--rot)); }