/* ============================================================================
   base.css, скидання, типографіка, фон-плакат, рукописні компоненти,
   кнопки, курсор, плаваючий шар, лоадер, доступність.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 800px at 12% -8%, oklch(0.72 0.185 8 / 0.16), transparent 60%),
    radial-gradient(1100px 700px at 108% 8%, oklch(0.76 0.115 78 / 0.14), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, oklch(0.68 0.17 5 / 0.12), transparent 60%);
  background-attachment: fixed;
  overflow-x: clip;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Крейдяно-мальований шар сердечок/зірочок, що тягнеться через усю сторінку */
.poster-doodles {
  position: fixed; inset: 0; z-index: var(--z-doodle);
  pointer-events: none; opacity: 0.6;
  background-image: url("../assets/doodles.svg");
  background-size: 340px 340px;
  mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
}
/* Легка зернистість, «текстура паперу», трохи об'єму */
.poster-grain {
  position: fixed; inset: 0; z-index: var(--z-doodle); pointer-events: none;
  opacity: 0.045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
}
@media (prefers-reduced-motion: reduce) { .poster-grain { display: none; } }

::selection { background: var(--rose-bright); color: #fff; }

/* --- Типографіка ------------------------------------------------------ */
h1, h2, h3 { line-height: 1.04; text-wrap: balance; color: var(--ink); font-weight: 400; }
h4, h5, h6 { line-height: 1.2; text-wrap: balance; }
p { text-wrap: pretty; }
p, li { max-width: 68ch; }

.display { font-family: var(--font-display); letter-spacing: -0.01em; }
.heavy   { font-family: var(--font-heavy); font-weight: 700; letter-spacing: -0.03em; }
.hand    { font-family: var(--font-hand); font-weight: 600; line-height: 1.25; }

.h-mega { font-family: var(--font-heavy); font-weight: 800; font-size: var(--step-mega);
          line-height: 0.82; letter-spacing: -0.05em; }
.h-xl { font-family: var(--font-display); font-size: var(--step-5); line-height: 1; }
.h-l  { font-family: var(--font-display); font-size: var(--step-4); }
.h-m  { font-family: var(--font-display); font-size: var(--step-3); }
.h-s  { font-family: var(--font-display); font-size: var(--step-2); }

a { color: var(--raspberry); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

/* Рукописна «мітка» секції, навмисно НЕ uppercase-eyebrow (це був би AI-шаблон) */
.label {
  font-family: var(--font-hand); font-size: var(--step-1);
  color: var(--raspberry); font-weight: 700;
  display: inline-flex; align-items: center; gap: 0.5ch;
  transform: rotate(-2.5deg);
}
.label::before { content: "✿"; color: var(--gold-deep); font-size: 0.9em; }

/* --- Розкладка -------------------------------------------------------- */
.wrap { width: var(--container); margin-inline: auto; }
.wrap--wide { width: var(--container-wide); margin-inline: auto; }
.section { position: relative; z-index: var(--z-content); padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.stack > * + * { margin-top: var(--space-s); }
.center { text-align: center; }

/* --- Кнопки ---------------------------------------------------------- */
.btn {
  --_bg: var(--raspberry); --_fg: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: var(--step-0);
  color: var(--_fg); background: var(--_bg);
  border: none; border-radius: 100px; cursor: pointer;
  padding: 0.85em 1.6em; display: inline-flex; align-items: center; gap: 0.6ch;
  box-shadow: var(--shadow-m); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s;
  text-decoration: none; line-height: 1;
}
.btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-l); background: var(--raspberry-deep); }
.btn:active { transform: translateY(-1px) scale(0.99); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.btn--ghost { --_bg: transparent; --_fg: var(--raspberry); box-shadow: inset 0 0 0 2px var(--raspberry); }
.btn--ghost:hover { --_bg: var(--tint-rose); background: var(--tint-rose); }
.btn--gold { --_bg: var(--gold); --_fg: var(--wine); }

/* --- Рукописні/паперові компоненти ---------------------------------- */
.card-soft {
  background: var(--surface); border-radius: var(--radius-l);
  box-shadow: var(--shadow-m); padding: clamp(1.4rem, 1rem + 2vw, 2.6rem);
  border: 1.5px solid oklch(1 0 0 / 0.6);
}
.tape {
  position: absolute; width: 90px; height: 28px;
  background: oklch(0.76 0.115 78 / 0.55); backdrop-filter: blur(1px);
  box-shadow: 0 2px 6px oklch(0.4 0.1 356 / 0.15);
  left: 50%; top: -12px; translate: -50% 0; rotate: -4deg;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tape--rose { background: oklch(0.72 0.185 8 / 0.5); }
.sticker {
  display: inline-block; padding: 0.2em 0.7em; border-radius: 100px;
  background: var(--tint-gold); color: var(--gold-deep); font-weight: 700;
  font-size: var(--step--1); transform: rotate(-1.5deg);
}

/* Полароїд-рамка з місцем для фото */
.polaroid {
  background: #fff; padding: 12px 12px 46px; border-radius: 4px;
  box-shadow: var(--shadow-photo); position: relative;
}
.polaroid .frame {
  aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden;
  background: linear-gradient(135deg, var(--surface-warm), var(--bg-deep));
  display: grid; place-items: center; position: relative;
}
.polaroid img, .polaroid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.polaroid .cap { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center;
  font-family: var(--font-hand); font-size: var(--step-1); color: var(--ink-soft); }

/* Плейсхолдер «сюди фото», милий, не сірий прямокутник */
.ph {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 6px;
  text-align: center; color: var(--raspberry); padding: 1rem;
}
.ph .ph-heart { font-size: 2rem; animation: ph-beat 2.4s var(--ease-soft) infinite; }
.ph small { font-family: var(--font-hand); font-size: var(--step-0); color: var(--ink-muted); max-width: 22ch; }
@keyframes ph-beat { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.14);} }

/* --- Плаваючий шар (сердечка/конверти) ------------------------------ */
.float-layer { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-sticky); overflow: hidden; }
.floatie { position: absolute; pointer-events: auto; cursor: pointer; user-select: none;
  background: none; border: none; padding: 0; line-height: 1; -webkit-appearance: none; appearance: none;
  will-change: transform; filter: drop-shadow(0 6px 10px oklch(0.4 0.12 356 / 0.25)); }
.floatie svg { width: 100%; height: auto; display: block; }

/* --- Кастомний курсор ------------------------------------------------ */
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--raspberry); pointer-events: none; z-index: var(--z-cursor);
  translate: -50% -50%; mix-blend-mode: multiply; transition: width .2s, height .2s, background .2s;
}
.cursor-trail { position: fixed; inset: 0; pointer-events: none; z-index: calc(var(--z-cursor) - 1); }
body.has-cursor { cursor: none; }
body.has-cursor a, body.has-cursor button, body.has-cursor [data-cursor] { cursor: none; }

/* --- Лоадер ---------------------------------------------------------- */
.loader {
  position: fixed; inset: 0; z-index: var(--z-toast); display: grid; place-content: center;
  background: var(--bg); gap: 1rem; text-align: center; transition: opacity .8s var(--ease-out), visibility .8s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader .beat { font-size: 4rem; animation: ph-beat 1.1s var(--ease-soft) infinite; }
.loader .lt { font-family: var(--font-hand); font-size: var(--step-2); color: var(--raspberry); }

/* --- Доступність / рух ----------------------------------------------- */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -60px; left: 12px; z-index: var(--z-toast); background: var(--raspberry); color: #fff; padding: .6em 1em; border-radius: 8px; transition: top .2s; }
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  body.has-cursor { cursor: auto; }
  .cursor-dot, .cursor-trail { display: none; }
  .poster-doodles { opacity: 0.35; }
}

/* Приємний скролбар */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 12px; }
  ::-webkit-scrollbar-track { background: var(--bg-deep); }
  ::-webkit-scrollbar-thumb { background: var(--rose); border-radius: 20px; border: 3px solid var(--bg-deep); }
  ::-webkit-scrollbar-thumb:hover { background: var(--raspberry); }
}