html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

html, body {
    max-width: 100%;
}

section[id] {
    scroll-margin-top: 80px;
}

body {
    overflow-x: hidden;
}

/* навбар после скролла (тогглит script.js) */
#nav.scrolled {
    background-color: rgba(17, 28, 51, 0.95);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* ===== HERO ===== */

/* плавающие цветовые пятна */
.blob {
    animation: blob 14s ease-in-out infinite;
    will-change: transform;
}
.blob2 { animation-duration: 18s; animation-delay: -4s; }
.blob3 { animation-duration: 11s; animation-delay: -2s; }

@keyframes blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.08); }
    66%      { transform: translate(-30px, 25px) scale(0.95); }
}

/* анимированный градиентный заголовок */
.anim-gradient {
    background-image: linear-gradient(90deg, #ff6a3d, #ff9d5c, #2dd4bf, #5eead4, #ff6a3d);
    background-size: 300% 100%;
    animation: gradmove 7s linear infinite;
}

@keyframes gradmove {
    to { background-position: 300% 0; }
}

/* тонкая сетка-паттерн в hero */
.hero-grid {
    background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* появление контента hero */
.fade-up {
    opacity: 0;
    transform: translateY(26px);
    animation: fadeUp .8s cubic-bezier(.2, .7, .2, 1) forwards;
}

@keyframes fadeUp {
    to { opacity: 1; transform: none; }
}

/* ===== Плавна поява при скролі (script.js) ===== */
/* ховаємо лише коли JS увімкнено — інакше контент видно завжди */
.js-reveal .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .75s cubic-bezier(.2, .7, .2, 1),
                transform .75s cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform;
}
.js-reveal .reveal.in {
    opacity: 1;
    transform: none;
}

/* ===== КОЛАЖНИЙ / ЖУРНАЛЬНИЙ СТИЛЬ (під логотип) ===== */

/* «вирвана» паперова картка: рвані краї + scrapbook-тінь */
.paper-card {
    position: relative;
    background: transparent;
    border: none !important;
    border-radius: 0;
    box-shadow: none;
}
.paper-card::before {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: 0;
    background: #fdfaf2;
    filter: url(#paper-edge);
    box-shadow: 0 16px 32px -18px rgba(17, 28, 51, .45),
                0 2px 0 rgba(17, 28, 51, .05);
}
/* контент над паперовим шаром */
.paper-card > * {
    position: relative;
    z-index: 1;
}
/* легкий безлад — картки трохи нахилені */
.paper-card:nth-of-type(3n+1) { transform: rotate(-1.1deg); }
.paper-card:nth-of-type(3n+2) { transform: rotate(0.8deg); }
.paper-card:nth-of-type(3n+3) { transform: rotate(-0.4deg); }
.paper-card:hover { transform: rotate(0) translateY(-4px); z-index: 5; transition: transform .25s ease; }

/* шматок скотчу зверху на великих картках */
.paper-card--tape::after {
    content: "";
    position: absolute;
    top: -11px;
    left: 50%;
    width: 86px;
    height: 26px;
    z-index: 2;
    transform: translateX(-50%) rotate(-3deg);
    background: rgba(45, 212, 191, .4);
    border-left: 1px dashed rgba(255, 255, 255, .35);
    border-right: 1px dashed rgba(255, 255, 255, .35);
    box-shadow: 0 1px 5px rgba(17, 28, 51, .12);
}
.paper-card--tape:nth-of-type(even)::after {
    transform: translateX(-50%) rotate(4deg);
    background: rgba(255, 106, 61, .38);
}

/* варіант із теплою рамкою (для «що НЕ брати») */
.paper-card--warn::before { background: #fbf1e6; }

/* eyebrow → журнальна вирізка-маркер (фон рветься, текст лишається чітким) */
.eyebrow-tag {
    position: relative;
    display: inline-block;
    padding: .3em .85em;
    color: #111c33 !important;
    transform: rotate(-1.5deg);
}
.eyebrow-tag::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #ffd864;
    box-shadow: 2px 2px 0 rgba(17, 28, 51, .18);
    filter: url(#paper-edge);
}

/* заголовки — підсвічені маркером, як у журналі (обіймає текст, по рядках) */
.marker-text {
    display: inline-block;
    background: linear-gradient(transparent 56%,
                rgba(255, 213, 79, .85) 56%, rgba(255, 213, 79, .85) 93%, transparent 93%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0 .12em;
}

/* доступность: уважаем reduce-motion */
@media (prefers-reduced-motion: reduce) {
    .blob, .anim-gradient, .fade-up, .animate-bounce, .animate-ping { animation: none !important; }
    .fade-up { opacity: 1; transform: none; }
    .paper-card { transform: none !important; }
    .js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}