:root {
  --fx-reveal-distance: 11px;
  --fx-reveal-duration: 1000ms;
  --fx-reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fx-accent-warm: #c08b5a;
  --fx-accent-deep: #8f5d32;
  --fx-glow-soft: rgba(255, 233, 204, 0.38);
  --fx-shadow-strong: 0 24px 54px rgba(20, 14, 10, 0.35);
  --fx-shadow-soft: 0 14px 30px rgba(20, 14, 10, 0.2);
}

html {
  scroll-behavior: smooth;
}

.reveal {
  opacity: 0;
  transform: translateY(var(--fx-reveal-distance));
  filter: blur(6px);
  transition:
    opacity var(--fx-reveal-duration) var(--fx-reveal-ease),
    transform var(--fx-reveal-duration) var(--fx-reveal-ease),
    filter var(--fx-reveal-duration) var(--fx-reveal-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.reveal[data-reveal="left"] {
  transform: translateX(calc(-1 * var(--fx-reveal-distance)));
}

.reveal[data-reveal="right"] {
  transform: translateX(var(--fx-reveal-distance));
}

.reveal[data-reveal="scale"] {
  transform: translateY(14px) scale(0.96);
}

.reveal[data-reveal="hero"] {
  transform: translateY(18px) scale(1.05);
  filter: blur(10px) saturate(0.9);
}

.reveal.is-visible[data-reveal="hero"] {
  transform: translateY(0) scale(1);
  filter: blur(0) saturate(1);
}

.section-title {
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--beige-light), var(--fx-accent-warm));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--fx-reveal-ease);
}

.section-title.is-visible::after {
  transform: scaleX(1);
}

.main_screen .main_right::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(680px 680px at 20% 18%, rgba(255, 239, 218, 0.16), transparent 60%),
    radial-gradient(460px 460px at 85% 20%, rgba(173, 120, 72, 0.12), transparent 65%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.main_screen .buttons .btn {
  position: relative;
  box-shadow: var(--fx-shadow-soft);
  overflow: hidden;
}

.main_screen .buttons .btn::after {
  content: "";
  position: absolute;
  inset: -40% -120%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-60%);
  transition: transform 900ms var(--fx-reveal-ease);
}

.main_screen .buttons .btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--fx-shadow-strong);
}

.main_screen .buttons .btn:hover::after {
  transform: translateX(60%);
}

.story-preview,
.about-card,
.review-platform,
.grid-item,
.contacts-overlay {
  transition: transform 350ms var(--fx-reveal-ease), box-shadow 350ms var(--fx-reveal-ease);
}

.story-preview:hover,
.grid-item:hover {
  box-shadow: var(--fx-shadow-soft);
}

.about-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--fx-shadow-soft);
}

.review-platform:hover {
  transform: translateY(-4px);
  box-shadow: var(--fx-shadow-soft);
}

.contacts-overlay:hover {
  transform: translateY(-4px);
  box-shadow: var(--fx-shadow-soft);
}

.booking-inner {
  position: relative;
}

.booking-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(420px 420px at 15% 20%, rgba(255, 239, 218, 0.55), transparent 60%),
    radial-gradient(520px 520px at 85% 80%, rgba(166, 124, 82, 0.22), transparent 60%);
  opacity: 0.65;
  animation: floatGlow 14s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.booking-inner > * {
  position: relative;
  z-index: 1;
}

.booking-hero {
  transition: transform 600ms var(--fx-reveal-ease);
}

.booking-hero:hover {
  transform: scale(1.02);
}

.btn-telegram {
  position: relative;
  overflow: hidden;
}

.btn-telegram::after {
  content: "";
  position: absolute;
  inset: -40% -140%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-60%);
  transition: transform 900ms var(--fx-reveal-ease);
}

.btn-telegram:hover {
  transform: translateY(-2px);
}

.btn-telegram:hover::after {
  transform: translateX(60%);
}

.picker-modal.active .picker-panel {
  box-shadow: var(--fx-shadow-strong);
}

@keyframes floatGlow {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(2%, -2%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .main_screen::after,
  .booking-inner::before {
    animation: none;
  }

  .main_screen .btn::after,
  .btn-telegram::after {
    transition: none;
  }
}