@import "tailwindcss";

/* Тема zoai: светлая и тёмная по настройке устройства. Макет — https://claude.ai/artifact/LKciSgiWzPBmRJuatr9ENz
   Отпечатки и крафт остаются «бумажными» в обеих темах. */
:root {
  --paper: #ece7f1;
  --surface: #ffffff;
  --ink: #2b1838;
  --muted: #57456a;
  --line: #d6cde0;
  --accent: #a432e7;
  --accent-ink: #7a1fb3;
  --print: #ffffff;
  --film: #2b1838;
  --ok: #2e7d4f;
  --ok-soft: #dcefe3;
  --warn: #8a5a00;
  --warn-soft: #f6e7c8;
  --bad: #9a3a24;
  --bad-soft: #f6ddd6;
  --shadow: rgb(43 24 56 / 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1424;
    --surface: #2a2034;
    --ink: #f1eaf6;
    --muted: #beb1ce;
    --line: #4a3d58;
    --accent-ink: #d7a8ff;
    --print: #f4eee8;
    --film: #110b16;
    --ok: #7fd6a0;
    --ok-soft: #1f3a2a;
    --warn: #ffd08a;
    --warn-soft: #3d2f16;
    --bad: #ff9c85;
    --bad-soft: #3e1e1a;
    --shadow: rgb(0 0 0 / 0.4);
  }
}

@theme inline {
  --color-paper: var(--paper);
  --color-surface: var(--surface);
  --color-ink: var(--ink);
  --color-muted: var(--muted);
  --color-line: var(--line);
  --color-accent: var(--accent);
  --color-accent-ink: var(--accent-ink);
  --color-print: var(--print);
  --color-film: var(--film);
  --color-film-ink: #f3ecf8;
  --color-film-muted: #d6cbe0;
  --color-film-link: #e3c8ff;
  --color-kraft: #d9b98a;
  --color-kraft-ink: #3a1e55;
  --color-ok: var(--ok);
  --color-ok-soft: var(--ok-soft);
  --color-warn: var(--warn);
  --color-warn-soft: var(--warn-soft);
  --color-bad: var(--bad);
  --color-bad-soft: var(--bad-soft);
  --font-sans: "Geologica", ui-sans-serif, system-ui, sans-serif;
  --font-hand: "Caveat", cursive;
}

@layer base {
  html { color-scheme: light dark; }
  :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
}

@layer components {
  .btn {
    @apply inline-flex min-h-12 cursor-pointer items-center justify-center rounded-full bg-accent px-6 font-semibold text-white hover:brightness-110;
  }
  .btn-ghost {
    @apply inline-flex min-h-11 cursor-pointer items-center justify-center rounded-full border border-line px-5 font-medium text-ink hover:border-muted;
  }
  .link { @apply text-accent-ink underline-offset-4 hover:underline; }
  .back-link { @apply inline-flex min-h-11 items-center text-sm text-muted hover:text-ink; }
  .field { @apply w-full rounded-lg border border-line bg-surface px-3 py-2 text-ink placeholder:text-muted/70; }
  .panel { @apply rounded-xl bg-surface p-5 shadow-[0_2px_10px_var(--shadow)]; }
  .note { @apply rounded-lg px-4 py-3 text-sm; }

  /* Фото в белой рамке, как отпечаток. В сетке .prints слегка разворачиваются. */
  .print { @apply block bg-print p-1.5 pb-2 shadow-[0_2px_8px_var(--shadow)]; }
  .prints > li:nth-child(odd) .print { rotate: -1deg; }
  .prints > li:nth-child(even) .print { rotate: 1deg; }
  /* Услуга на главной: отпечаток выглядывает из крафтового конверта. */
  .envelope { @apply relative block h-60 text-left; }
  .envelope .print { @apply absolute inset-x-3 top-0 h-44 transition-transform duration-300; }
  .envelope:hover .print, .envelope:focus-visible .print { translate: 0 -0.75rem; }
  .envelope-body {
    @apply absolute inset-x-0 bottom-0 flex h-32 flex-col justify-end gap-0.5 rounded-sm bg-kraft p-3 shadow-[0_6px_14px_var(--shadow)];
    clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 100%, 0 100%);
  }
  /* Заглушки обложек услуг до настоящих примеров. */
  .cover-shoot { background: linear-gradient(170deg, #f7c98e, #d9774a 55%, #6a3550); }
  .cover-card { background: linear-gradient(170deg, #f3dde8, #c98ab0 55%, #6a3d6a); }
  .cover-video { background: linear-gradient(170deg, #cfe0f0, #7e8fc8 55%, #3e3570); }
  .cover-idea { background: linear-gradient(170deg, #e9d8ff, #a97be0 55%, #4a2a70); }

  .print-caption { @apply px-0.5 pt-1.5 font-hand text-2xl leading-none font-bold text-kraft-ink; }
}

/* Ожидание: кадры постепенно проявляются. */
@keyframes develop {
  from { opacity: 0.15; filter: blur(6px) grayscale(1); }
  to { opacity: 0.9; filter: blur(0) grayscale(0); }
}
.developing { animation: develop 3s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .developing { animation: none; opacity: 0.5; }
  .prints > li .print { rotate: none; }
}