/* ====== Base ====== */
* { box-sizing: border-box; }
html, body { height: 100%; }
::selection { background: #fff; color: #000; }
:root {
  --bg: #000;
  --fg: #fff;
  --muted: rgba(255,255,255,.8);
  --space: clamp(16px, 2vw, 28px);
  --space-lg: clamp(24px, 18vw, 140px);
  --maxw: 1800px;
  --ease-out: cubic-bezier(.215,.61,.355,1);
  --time-blink-speed: 1s;
  --spark-rotate-open: .5turn;         /* = 180deg */
  --spark-rotate-hover: 0turn;         /* = 0deg */
  --spark-dur: .8s; 
  --frames-dur: 400ms;
}

/* ====== Typefaces ====== */
@font-face {
	font-family: 'KiwariMono-Regular';
	src: url('fonts/kiwari-mono-regular.eot');
	src: url('fonts/kiwari-mono-regular.eot?#iefix') format('embedded-opentype'),
             url('fonts/kiwari-mono-regular.woff2') format('woff2'),
	     url('fonts/kiwari-mono-regular.woff') format('woff'),
	     url('fonts/kiwari-mono-regular.ttf') format('truetype'),
	     url('fonts/kiwari-mono-regular.svg#youworkforthem') format('svg');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'KiwariMono-Medium';
	src: url('fonts/kiwari-mono-medium.eot');
	src: url('fonts/kiwari-mono-medium.eot?#iefix') format('embedded-opentype'),
             url('fonts/kiwari-mono-medium.woff2') format('woff2'),
	     url('fonts/kiwari-mono-medium.woff') format('woff'),
	     url('fonts/kiwari-mono-medium.ttf') format('truetype'),
	     url('fonts/kiwari-mono-medium.svg#youworkforthem') format('svg');
	font-weight: 500;
	font-style: normal;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ====== Layout ====== */
.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr;
  position: relative;
}

/* Top meta */
.meta {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px clamp(16px, 3vw, 28px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  font-family: 'KiwariMono-Medium';
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 500;
  letter-spacing: .02em;
  z-index: 10;
  pointer-events: none; /* non-blocking; anchors re-enable below */
}
.meta a { pointer-events: auto; }

.meta-left { justify-self: start; display: flex; gap: 8px; align-items: baseline; opacity: .9; margin-top: 4px; }
.meta-center { justify-self: center; }
.meta-right { justify-self: end; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;}
.email {
  color: var(--fg);
  text-decoration: none;
}
.meta-right a:hover, .email:hover { border-bottom-color: var(--fg); }
.dot { opacity: 1; }

.meta-right .menu {
  display: inline-block;
  padding: 4px 6px 6px 6px;
  background: none;
  color: #fff;
  text-decoration: none;
}
.meta-right .menu:hover {
  padding: 4px 6px 6px 6px;
  background: #fff;
  color: #000;
  text-decoration: none;
}

/* Main block */
.content {
  min-height: 100dvh;
  padding: var(--space-lg) var(--space);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 30px;
  width: min(var(--maxw), 92vw);
}

.title {
  font-family: 'DM Sans';
  font-weight: 500;
  line-height: 1.06;
  margin: 0;
  font-size: clamp(32px, 3.5vw, 84px);
  letter-spacing: -0.01em;
}

.title .spark {
  width: 0.5em;
  height: 0.5em;
  margin: 0 0 .15ch 0.25ch;
  vertical-align: -0.08em;
  display: inline-block;
  transform-origin: 50% 50%;
  transition: transform var(--spark-dur) var(--ease-out),
              opacity   var(--spark-dur) var(--ease-out);
}

.subtitle {
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 12px 0;
  font-size: clamp(22px, 3.5vw, 36px);
  letter-spacing: -0.005em;
  max-width: 28ch;
}

.lead {
  margin: 0;
  padding-left: clamp(70px, 15vw, 400px);
  color: var(--muted);
  font-family: 'KiwariMono-Regular';
  font-size: clamp(16px, 1.4vw, 30px);
  line-height: 1.4;
  max-width: 100ch;
  letter-spacing: .01em;
}

/* Bottom-right mark */
.mark {
  position: fixed;
  right: calc(var(--space) + env(safe-area-inset-right, 0));
  bottom: calc(var(--space) + env(safe-area-inset-bottom, 0));
  opacity: .95;
  z-index: 5;
}
.mark .frame { opacity: 0; }
.mark .frame.f1 { opacity: 1; }
@keyframes show-f1 {  0%,19.9%{opacity:1} 20%,79.9%{opacity:0} 80%,100%{opacity:1} }
@keyframes show-f2 {  0%,19.9%{opacity:0} 20%,39.9%{opacity:1} 40%,100%{opacity:0} }
@keyframes show-f3 {  0%,39.9%{opacity:0} 40%,59.9%{opacity:1} 60%,100%{opacity:0} }
@keyframes show-f4 {  0%,59.9%{opacity:0} 60%,79.9%{opacity:1} 80%,100%{opacity:0} }
.mark.frames-fwd .frame.f1 { animation: show-f1 var(--frames-dur) steps(1, end) both; }
.mark.frames-fwd .frame.f2 { animation: show-f2 var(--frames-dur) steps(1, end) both; }
.mark.frames-fwd .frame.f3 { animation: show-f3 var(--frames-dur) steps(1, end) both; }
.mark.frames-fwd .frame.f4 { animation: show-f4 var(--frames-dur) steps(1, end) both; }

@media (prefers-reduced-motion: reduce) {
  .mark.frames-fwd .frame { animation: none !important; }
}

/* Bottom-left */
.corner-left {
  position: fixed;
  left: calc(var(--space) + env(safe-area-inset-left, 0));
  bottom: calc(var(--space) + env(safe-area-inset-bottom, 0));
  z-index: 5;
  color: var(--muted);
  font-family: 'KiwariMono-Medium';
  font-size: clamp(14px, 1.4vw, 16px);
  color: #4E4E4E;
  line-height: 1.6;
  letter-spacing: .01em;

  /* если нужны кликабельные ссылки, снимите прозрачную подчеркивающую рамку как у .meta-right a */
}
.corner-left a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.corner-left a:hover { border-bottom-color: var(--fg); }

/* TIME */
#time .time-colon {
  display: inline-block;
  width: 1ch;
  text-align: center;
  animation: time-blink var(--time-blink-speed, 1s) steps(1, start) infinite;
}

@keyframes time-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Уважать системную настройку Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  #time .time-colon { animation: none; }
}

/* ====== Reveal animation ====== */
.reveal {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 1s var(--ease-out), opacity 1s var(--ease-out);
  will-change: transform, opacity;
}
.reveal.in {
  transform: translateY(0);
  opacity: 1;
}
.spark.reveal{                          /* до входа */
  transform: translateY(var(--spark-reveal-y, 10px)) rotate(0turn);
  opacity: 0;
}
.spark.reveal.in{                       /* после входа (по часовой) */
  /* поддержка старого var(--spark-rotate) на всякий случай */
  transform: translateY(0) rotate(var(--spark-rotate-open, var(--spark-rotate, .5turn)));
  opacity: 1;
}

/* ховер/тач: крутить обратно; класс .is-hovered. JS для тач-устройств */
.title .spark.reveal.in:hover,
.title .spark.reveal.in.is-hovered{
  transform: translateY(0) rotate(var(--spark-rotate-hover));
}

/* ──────────────────────────────────────────────────────────────────────────*/
/*                MOBILE LAYOUT (max-width: 820px)                           */
/*───────────────────────────────────────────────────────────────────────────*/
@media (max-width: 820px) {

  .meta {
    grid-template-areas:
      "left right"
      "center right";
    grid-template-columns: 1fr auto;
    row-gap: 10px;
    padding-top: calc(12px + env(safe-area-inset-top, 0));
  }

  .meta-left { grid-area: left; }
  .meta-center { grid-area: center; justify-self: start; }
  .meta-right { grid-area: right; align-items: end; }

  .content {
    width: 100vw;
    gap: 14px;
  }

  /* Левая верхняя колонка: две строки — 1) локация, 2) время */
  .meta-left {
    display: grid;                   /* заменяем flex на grid на мобиле */
    grid-template-columns: auto 1fr; /* ① иконка ② текст */
    column-gap: 8px;
    row-gap: 2px;
    align-items: start;
  }

  /* первый узел (иконка ✺) тянется на обе строки слева */
  .meta-left > :first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
    line-height: 1;
  }

  /* точку-разделитель убираем — она больше не нужна в 2-строчной раскладке */
  .meta-left .dot { display: none; }

  /* время уходит на вторую строку под локацию и не сжимается */
  #time {
    grid-column: 2;
    grid-row: 2;
    display: block;
    margin-top: 2px;
    white-space: nowrap; 
  }

}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; transform: none; opacity: 1; }
}