/*
  ProДЕРЕВО redesign layer
  Основано на системе переменных из variables.css, но значения цветов
  оставлены в исходной тёплой палитре сайта.
*/

:root {
  /* Color tokens mapped to original palette */
  --color-midnight-abyss: hsl(var(--wood-dark));
  --color-ghost-white: hsl(var(--foreground));
  --color-storm-gray: hsl(var(--secondary));
  --color-comet: hsl(var(--primary));
  --color-arctic-mist: hsl(var(--gold-light));
  --color-celestial-light: hsl(var(--primary));
  --color-azure-glow: hsl(var(--gold));
  --color-slate-dew: hsl(var(--border));
  --color-whisper-blue: hsl(var(--muted-foreground));
  --color-neon-violet: hsl(var(--gold));
  --color-interstellar-gray: hsl(var(--muted-foreground));
  --color-twilight-gradient-overlay: hsl(var(--primary));
  --gradient-twilight-gradient-overlay: linear-gradient(0deg, hsl(var(--gold-light) / 0.14) 0%, hsl(var(--primary) / 0.08) 100%);
  --color-system-highlight-border: hsl(var(--primary));
  --gradient-system-highlight-border: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.20), transparent);

  /* Typography */
  --font-untitled-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-aeonikpro: 'Playfair Display', Georgia, serif;
  --font-dotdigital: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: 0.12em;
  --text-body: 14px;
  --leading-body: 1.55;
  --tracking-body: -0.01em;
  --text-body-lg: 16px;
  --leading-body-lg: 1.55;
  --tracking-body-lg: -0.01em;
  --text-subheading: 18px;
  --leading-subheading: 1.43;
  --tracking-subheading: -0.01em;
  --text-heading: 24px;
  --leading-heading: 1.28;
  --tracking-heading: -0.02em;
  --text-heading-lg: 30px;
  --leading-heading-lg: 1.16;
  --text-display: clamp(42px, 7vw, 84px);
  --leading-display: 0.98;
  --text-display-xl: clamp(52px, 9vw, 108px);
  --leading-display-xl: 0.94;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-100: 100px;
  --spacing-120: 120px;
  --spacing-200: 200px;

  --section-gap: clamp(72px, 10vw, 132px);
  --card-padding: clamp(22px, 3vw, 34px);
  --element-gap: 10px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-2xl: 18px;
  --radius-3xl: 28px;
  --radius-3xl-2: 34px;
  --radius-3xl-3: 44px;
  --radius-full: 999px;
  --radius-pill: 999px;
  --radius-cards: 28px;
  --radius-badges: 999px;
  --radius-inputs: 8px;
  --radius-buttons: 999px;

  /* Shadows */
  --shadow-sm: hsl(var(--primary) / 0.24) 0 0 10px 0;
  --shadow-md: hsl(var(--gold) / 0.20) 0 0 24px 0;
  --shadow-subtle: hsl(var(--primary) / 0.12) 0 0 0 1px inset;
  --shadow-subtle-2: hsl(var(--gold-light) / 0.10) -0.5px 0.5px 1px 0 inset, hsl(var(--primary) / 0.08) 0 0 96px 0 inset;
  --shadow-subtle-3: hsl(var(--primary) / 0.08) 0 0 0 1px inset;
  --shadow-subtle-4: hsl(var(--gold-light) / 0.12) 0 1px 1px 0 inset, hsl(var(--gold) / 0.06) 0 24px 48px 0 inset, rgba(8, 6, 4, 0.58) 0 24px 52px 0;
  --shadow-subtle-5: rgba(255, 255, 255, 0.10) 0 0 0 1px inset;
  --shadow-subtle-6: hsl(var(--primary) / 0.20) 0 1px 1px 0 inset, hsl(var(--gold-light) / 0.06) 0 24px 48px 0 inset, rgba(0, 0, 0, 0.34) 0 16px 32px 0;
  --shadow-subtle-7: hsl(var(--primary) / 0.20) 0 1px 1px 0 inset, hsl(var(--gold-light) / 0.06) 0 24px 48px 0 inset;

  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.2, 0.9, 0.18, 1.15);
  --duration-fast: 220ms;
  --duration-base: 420ms;
  --duration-slow: 900ms;
}

html {
  scroll-padding-top: 92px;
}

body {
  min-height: 100vh;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  font-family: var(--font-untitled-sans);
}

body::before {
  filter: saturate(1.06) contrast(1.03);
  transform: translateZ(0);
}

body::after {
  background:
    radial-gradient(circle at 20% 12%, hsl(var(--primary) / 0.12), transparent 28%),
    radial-gradient(circle at 82% 20%, hsl(var(--gold) / 0.10), transparent 30%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.58)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 72px);
  opacity: 0.92;
}

::selection {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary) / 0.85);
}

:is(a, button) {
  -webkit-tap-highlight-color: transparent;
}

:is(a, button):focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 4px;
}

header.sticky {
  border-bottom: 1px solid hsl(var(--primary) / 0.16) !important;
  background:
    linear-gradient(180deg, hsl(var(--background) / 0.88), hsl(var(--background) / 0.68)) !important;
  box-shadow: var(--shadow-subtle), 0 18px 42px rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(22px) saturate(1.25);
}

header .container {
  position: relative;
}

header .container::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -17px;
  height: 1px;
  background: var(--gradient-system-highlight-border);
  opacity: 0.9;
  pointer-events: none;
}

header nav a {
  position: relative;
  border-radius: var(--radius-pill);
  padding: 8px 2px;
}

header nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: hsl(var(--primary));
  box-shadow: 0 0 16px hsl(var(--primary) / 0.8);
  opacity: 0;
  transform: translateX(-50%) translateY(8px) scale(0.3);
  transition: opacity var(--duration-base) var(--ease-premium), transform var(--duration-base) var(--ease-premium);
}

header nav a:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

section {
  position: relative;
  isolation: isolate;
}

section[id], #contacts {
  scroll-margin-top: 96px;
}

section > .container,
.container.mx-auto {
  width: min(100% - 28px, 1180px);
}

section:first-of-type {
  min-height: min(850px, calc(100vh - 74px));
  display: grid;
  align-items: center;
}

section:first-of-type::before {
  content: "";
  position: absolute;
  inset: 18px max(12px, calc((100vw - 1180px) / 2)) auto;
  height: min(72vh, 680px);
  border: 1px solid hsl(var(--primary) / 0.14);
  border-radius: var(--radius-3xl-3);
  background:
    linear-gradient(180deg, hsl(var(--card) / 0.68), hsl(var(--wood-dark) / 0.25)),
    var(--gradient-twilight-gradient-overlay);
  box-shadow: var(--shadow-subtle-4);
  opacity: 0.62;
  z-index: -1;
  pointer-events: none;
}

section:first-of-type::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, hsl(var(--primary) / 0.18), transparent 24%),
    radial-gradient(circle at 12% 72%, hsl(var(--gold) / 0.10), transparent 26%),
    radial-gradient(circle at 86% 70%, hsl(var(--wood-light) / 0.16), transparent 30%);
  animation: ambientDrift 16s ease-in-out infinite alternate;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: var(--tracking-heading);
}

h1 {
  font-size: var(--text-display) !important;
  line-height: var(--leading-display) !important;
  text-wrap: balance;
}

h2 {
  text-wrap: balance;
}

p {
  letter-spacing: var(--tracking-body);
}

.text-gradient {
  background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--gold-light)) 44%, hsl(var(--gold))) !important;
  filter: drop-shadow(0 0 22px hsl(var(--primary) / 0.22));
}

.divider-gold {
  width: min(260px, 66vw) !important;
  height: 1px !important;
  background: var(--gradient-system-highlight-border) !important;
  box-shadow: 0 0 20px hsl(var(--primary) / 0.28);
}

.card-premium {
  border-radius: var(--radius-cards) !important;
  padding: var(--card-padding) !important;
  border: 1px solid hsl(var(--primary) / 0.16) !important;
  background:
    linear-gradient(180deg, hsl(var(--card) / 0.88), hsl(var(--wood-dark) / 0.74)) !important;
  box-shadow: var(--shadow-subtle-2), 0 18px 50px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(20px) saturate(1.08);
  transform-style: preserve-3d;
  isolation: isolate;
}

.card-premium::before {
  opacity: 0.055 !important;
  mix-blend-mode: screen;
}

.card-premium::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, transparent 6%, hsl(var(--primary) / 0.38), transparent 38%, hsl(var(--gold) / 0.22), transparent 70%);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-premium), filter var(--duration-base) var(--ease-premium);
}

.card-premium > * {
  position: relative;
  z-index: 1;
}

.card-premium:hover {
  transform: translateY(-8px) scale(1.01) !important;
  border-color: hsl(var(--primary) / 0.32) !important;
  box-shadow: var(--shadow-subtle-4), 0 26px 70px rgba(0, 0, 0, 0.34) !important;
}

.card-premium:hover::after {
  opacity: 1;
  filter: brightness(1.25);
}

.card-premium .h-14.w-14 {
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-subtle-7);
}

:is(a, button).btn-wood,
:is(a, button).btn-wood-outline {
  border-radius: var(--radius-buttons) !important;
  min-height: 48px;
  letter-spacing: 0.02em;
  transform: translateZ(0);
}

:is(a, button).btn-wood {
  border-color: hsl(var(--primary) / 0.26) !important;
  background:
    radial-gradient(circle at 20% 0%, hsl(var(--gold-light) / 0.34), transparent 34%),
    linear-gradient(135deg, hsl(var(--wood-light)) 0%, hsl(var(--wood-mid)) 48%, hsl(var(--wood-dark)) 100%) !important;
  box-shadow: var(--shadow-subtle-6), 0 16px 36px rgba(0,0,0,0.30) !important;
}

:is(a, button).btn-wood:hover {
  transform: translateY(-3px) scale(1.015) !important;
  box-shadow: var(--shadow-subtle-6), 0 22px 48px rgba(0,0,0,0.42), 0 0 28px hsl(var(--primary) / 0.18) !important;
}

:is(a, button).btn-wood-outline {
  color: hsl(var(--primary)) !important;
  border: 1px solid hsl(var(--primary) / 0.42) !important;
  background: hsl(var(--background) / 0.44) !important;
  box-shadow: var(--shadow-subtle-3) !important;
}

:is(a, button).btn-wood-outline:hover {
  color: hsl(var(--primary-foreground)) !important;
  background: hsl(var(--primary) / 0.92) !important;
  box-shadow: var(--shadow-md), 0 16px 34px rgba(0,0,0,0.34) !important;
}

:is(a, button).btn-wood::after,
:is(a, button).btn-wood-outline::after {
  background: linear-gradient(105deg, transparent 12%, rgba(255,255,255,0.16) 22%, transparent 34%) !important;
}

:is(a, button).btn-wood:hover::after,
:is(a, button).btn-wood-outline:hover::after {
  transform: translateX(120%) skewX(-8deg) !important;
}

.hero-fade {
  animation: heroFadeUpModern 1.05s var(--ease-premium) both !important;
}

section:first-of-type img[alt="ProДЕРЕВО"] {
  border-radius: var(--radius-3xl) !important;
  border-color: hsl(var(--primary) / 0.18) !important;
  box-shadow: var(--shadow-subtle-4), 0 0 80px hsl(var(--primary) / 0.10) !important;
  animation: logoFloat 7s ease-in-out infinite;
}

section:first-of-type .inline-flex.rounded-full,
section .mb-3.text-xs,
#contacts .text-\[10px\] {
  letter-spacing: 0.18em !important;
}

section:first-of-type .mb-6.inline-flex {
  border-radius: var(--radius-badges) !important;
  background: hsl(var(--background) / 0.62) !important;
  box-shadow: var(--shadow-subtle-5), 0 12px 30px rgba(0,0,0,0.20) !important;
}

section:first-of-type .mt-16 > div {
  min-width: 168px;
  border-radius: var(--radius-3xl) !important;
  border: 1px solid hsl(var(--primary) / 0.14) !important;
  background:
    radial-gradient(circle at 50% 0%, hsl(var(--primary) / 0.14), transparent 55%),
    hsl(var(--card) / 0.58) !important;
  box-shadow: var(--shadow-subtle-2), 0 16px 38px rgba(0,0,0,0.22) !important;
}

.float-soft:nth-child(2) {
  animation-delay: -1.7s;
}

.float-soft:nth-child(3) {
  animation-delay: -3.3s;
}

.bg-warm-gradient {
  background:
    linear-gradient(180deg, hsl(var(--warm-bg) / 0.70) 0%, transparent 100%) !important;
}

.border-y.border-primary\/20,
.border-t.border-primary\/20 {
  border-color: hsl(var(--primary) / 0.14) !important;
}

#advantages::before,
#contacts::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 0%, hsl(var(--gold) / 0.08), transparent 28%),
    radial-gradient(circle at 90% 80%, hsl(var(--primary) / 0.08), transparent 32%);
  pointer-events: none;
}

#gallery .gallery-stage {
  border-radius: var(--radius-3xl-2) !important;
  border: 1px solid hsl(var(--primary) / 0.22) !important;
  background: hsl(var(--card) / 0.78) !important;
  box-shadow: var(--shadow-subtle-4), 0 28px 70px rgba(0,0,0,0.34) !important;
}

#gallery .gallery-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 58%, rgba(0,0,0,0.32)),
    linear-gradient(110deg, transparent 0 42%, rgba(255,255,255,0.12) 48%, transparent 54%);
  transform: translateX(-120%);
  transition: transform 1.05s var(--ease-premium);
}

#gallery .gallery-stage:hover::after {
  transform: translateX(120%);
}

#gallery .gallery-stage img {
  transition: opacity var(--duration-base) var(--ease-premium), transform 1.2s var(--ease-premium), filter var(--duration-base) ease !important;
}

#gallery .gallery-stage:hover img {
  filter: saturate(1.08) contrast(1.03);
}

.gallery-thumb {
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-subtle-3), 0 12px 24px rgba(0,0,0,0.22);
  transform: translateZ(0);
}

.gallery-thumb:hover,
.gallery-thumb.border-primary {
  box-shadow: var(--shadow-sm), 0 18px 32px rgba(0,0,0,0.28);
}

#contacts a.group,
#contacts div.group {
  border-radius: var(--radius-3xl) !important;
  border-color: hsl(var(--primary) / 0.18) !important;
  background:
    linear-gradient(180deg, hsl(var(--card) / 0.76), hsl(var(--wood-dark) / 0.54)) !important;
  box-shadow: var(--shadow-subtle-2), 0 18px 42px rgba(0,0,0,0.24) !important;
}

#contacts a.group:hover,
#contacts div.group:hover {
  transform: translateY(-6px) !important;
  border-color: hsl(var(--primary) / 0.38) !important;
}

.contact-fab-link,
.contact-fab-btn {
  border-color: hsl(var(--primary) / 0.18) !important;
  box-shadow: var(--shadow-subtle-6), 0 20px 42px rgba(0,0,0,0.36) !important;
}

.contact-fab-link {
  border-radius: var(--radius-pill) !important;
  background: hsl(var(--card) / 0.92) !important;
}

.contact-fab-link:hover,
.contact-fab-btn:hover {
  transform: translateY(-4px) scale(1.02) !important;
}

.contact-fab-btn {
  background:
    radial-gradient(circle at 35% 18%, hsl(var(--gold-light) / 0.42), transparent 38%),
    linear-gradient(160deg, hsl(var(--wood-light)), hsl(var(--wood-dark))) !important;
}

footer {
  background: linear-gradient(180deg, hsl(var(--background) / 0.78), hsl(var(--wood-dark) / 0.94)) !important;
  box-shadow: var(--shadow-subtle), 0 -18px 46px rgba(0,0,0,0.18) !important;
}

.reveal {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  filter: blur(10px);
  transition:
    opacity var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium),
    filter var(--duration-slow) var(--ease-premium) !important;
  transition-delay: var(--reveal-delay, 0ms) !important;
}

.reveal-left {
  transform: translateX(-34px) scale(0.985) !important;
}

.reveal-right {
  transform: translateX(34px) scale(0.985) !important;
}

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: blur(0);
}

.card-premium.reveal:nth-child(2),
.gallery-thumb:nth-child(2) { --reveal-delay: 90ms; }
.card-premium.reveal:nth-child(3),
.gallery-thumb:nth-child(3) { --reveal-delay: 180ms; }
.card-premium.reveal:nth-child(4),
.gallery-thumb:nth-child(4) { --reveal-delay: 270ms; }
.card-premium.reveal:nth-child(5),
.gallery-thumb:nth-child(5) { --reveal-delay: 360ms; }
.card-premium.reveal:nth-child(6),
.gallery-thumb:nth-child(6) { --reveal-delay: 450ms; }
.card-premium.reveal:nth-child(7),
.gallery-thumb:nth-child(7) { --reveal-delay: 540ms; }
.card-premium.reveal:nth-child(8),
.gallery-thumb:nth-child(8) { --reveal-delay: 630ms; }
.card-premium.reveal:nth-child(9),
.gallery-thumb:nth-child(9) { --reveal-delay: 720ms; }

@keyframes heroFadeUpModern {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
    filter: blur(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0) rotateX(0deg); }
  50% { transform: translateY(-10px) rotateX(1.5deg); }
}

@keyframes ambientDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; }
  100% { transform: translate3d(0, -18px, 0) scale(1.04); opacity: 1; }
}

@media (max-width: 767px) {
  :root {
    --section-gap: 72px;
    --card-padding: 22px;
    --text-display: clamp(38px, 13vw, 58px);
  }

  html {
    scroll-padding-top: 76px;
  }

  header .container::after {
    bottom: -17px;
  }

  section:first-of-type {
    min-height: auto;
  }

  section:first-of-type::before {
    inset: 10px 10px auto;
    height: 72%;
    border-radius: var(--radius-3xl);
  }

  section:first-of-type .mt-16 > div {
    width: min(100%, 270px);
  }

  #contacts a.group,
  #contacts div.group {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}