/* ========================================
   RC2 — Premium Feel Pass
   Subtle refinements: rhythm, motion, consistency
   ======================================== */

:root {
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.22);
  --shadow-card-hover: 0 12px 36px rgba(0, 0, 0, 0.32);
  --shadow-gold-hover: 0 8px 28px rgba(201, 168, 76, 0.12);
  --line-height-body: 1.7;
  --line-height-prose: 1.75;
  --line-height-heading: 1.2;
  --reveal-distance: 14px;
  --reveal-duration: 0.62s;
  --card-lift: -3px;
  --card-lift-subtle: -2px;
}

/* ---- Global rhythm & typography ---- */
body {
  line-height: var(--line-height-body);
  text-rendering: optimizeLegibility;
}

.hero__subtitle {
  line-height: var(--line-height-prose);
  text-wrap: pretty;
}

.hero__booking-note {
  line-height: 1.5;
}

.content-list li {
  line-height: 1.65;
}

.content-card > p:not([class]) {
  line-height: var(--line-height-prose);
}

.area-hub-intro,
.area-place__text {
  line-height: var(--line-height-prose);
}

.section-header {
  margin-bottom: var(--space-block, 56px);
}

.section-title {
  line-height: var(--line-height-heading);
  text-wrap: balance;
}

.section-eyebrow + .section-title {
  margin-top: 0;
}

/* ---- Unified scroll reveal ---- */
[data-animate] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition:
    opacity var(--reveal-duration) var(--ease-premium),
    transform var(--reveal-duration) var(--ease-premium);
  will-change: opacity, transform;
}

[data-animate].visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* ---- Card system (shared hover language) ---- */
.product-brands__card,
.feature-card,
.selector-card,
.ceramic-package,
.stat,
.contact__form,
.content-card,
.content-hub-card,
.vchub-category-card,
.area-factor,
.area-place,
.area-cluster,
.area-cluster__link,
.community-stat,
.community-event-card {
  border-radius: var(--radius-md);
}

.content-card {
  transition:
    border-color var(--transition),
    box-shadow var(--duration-normal) var(--ease-premium);
}

.content-card:hover {
  box-shadow: var(--shadow-card);
}

.product-brands__card,
.feature-card,
.selector-card,
.ceramic-package,
.stat {
  transition:
    border-color var(--transition),
    transform var(--duration-normal) var(--ease-premium),
    box-shadow var(--duration-normal) var(--ease-premium),
    background var(--transition);
}

.product-brands__card:hover {
  transform: translateY(var(--card-lift-subtle));
  box-shadow: var(--shadow-card-hover);
}

.feature-card:hover {
  transform: translateY(var(--card-lift));
  box-shadow: var(--shadow-card-hover), var(--shadow-gold-hover);
}

.selector-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover), var(--shadow-gold-hover);
}

.ceramic-package:hover,
.stat:hover {
  transform: translateX(4px);
}

.trust-card {
  transition:
    border-color var(--transition),
    background var(--transition);
}

.trust-card:hover {
  background: rgba(255, 255, 255, 0.015);
}

/* ---- Homepage prose rhythm ---- */
.product-brands__intro,
.selector__intro,
.ceramic__desc,
.services__desc,
.about__content p,
.local-seo__content p,
.booking-cta__desc {
  line-height: var(--line-height-prose);
  text-wrap: pretty;
}

.services__desc + .services__desc,
.ceramic__desc + .ceramic__desc {
  margin-top: 0;
}

.services__content > .btn,
.ceramic__content > .btn {
  margin-top: 32px;
}

.trust-card p,
.feature-card p,
.ceramic-package p {
  line-height: var(--line-height-prose);
}

.trust-card h3,
.trust-card h2 {
  line-height: var(--line-height-heading);
}

/* ---- Homepage booking CTA ---- */
.booking-cta__inner {
  transition:
    border-color var(--transition),
    box-shadow var(--duration-normal) var(--ease-premium);
}

.booking-cta__inner:hover {
  border-color: rgba(212, 175, 55, 0.22);
  box-shadow: var(--shadow-card);
}

.booking-cta__actions {
  gap: 14px;
}

/* ---- FAQ accordion ---- */
.faq__item {
  transition:
    border-color var(--transition),
    box-shadow var(--duration-normal) var(--ease-premium);
}

.faq__item summary {
  transition: color var(--transition);
}

.faq__item summary::after {
  transition: transform var(--duration-fast) var(--ease-premium);
}

.faq__item[open] summary::after {
  transform: rotate(0deg);
}

.faq__item[open] .faq__answer {
  animation: rc2FaqReveal var(--duration-normal) var(--ease-premium) forwards;
}

@keyframes rc2FaqReveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq__cta {
  margin-top: 44px;
}

/* ---- Content ecosystem ---- */
.content-page {
  padding-bottom: var(--space-section-sm, 72px);
}

.content-hero {
  padding: 52px 0 60px;
}

.content-hero__title {
  line-height: var(--line-height-heading);
}

.content-hero__lead {
  line-height: var(--line-height-prose);
}

.content-body {
  padding-top: 60px;
}

.content-main h2 {
  line-height: var(--line-height-heading);
  margin-top: 44px;
  margin-bottom: 18px;
}

.content-main h2:first-child {
  margin-top: 0;
}

.content-main p {
  line-height: var(--line-height-prose);
  margin-bottom: 18px;
}

.content-main p + p {
  margin-top: -4px;
}

.content-cta {
  margin-top: 48px;
  transition:
    border-color var(--transition),
    box-shadow var(--duration-normal) var(--ease-premium);
}

.content-cta:hover {
  border-color: rgba(212, 175, 55, 0.22);
  box-shadow: var(--shadow-card);
}

.content-hub-card,
.vchub-category-card,
.vchub-article-list a {
  transition:
    border-color var(--transition),
    background var(--transition),
    transform var(--duration-normal) var(--ease-premium),
    box-shadow var(--duration-normal) var(--ease-premium);
}

.content-hub-card:hover,
.vchub-category-card:hover {
  transform: translateY(var(--card-lift-subtle));
  box-shadow: var(--shadow-card);
}

.vchub-article-list a:hover {
  transform: translateX(3px);
}

.content-aside {
  gap: 18px;
}

.area-cluster__link:hover {
  transform: translateY(var(--card-lift-subtle));
  box-shadow: var(--shadow-card);
}

.area-factor,
.area-place {
  transition:
    border-color var(--transition),
    background var(--transition);
}

.area-factor:hover,
.area-place:hover {
  background: rgba(255, 255, 255, 0.025);
}

.content-faq .faq__item {
  border-radius: var(--radius-md);
}

/* ---- Booking wizard premium feel ---- */
.booking-page .booking-wizard,
.booking-summary-card,
.booking-progress {
  transition: box-shadow var(--duration-normal) var(--ease-premium);
}

.booking-option__card,
.booking-package__card,
.booking-upgrade,
.booking-pill__label,
.booking-date__card,
.booking-time__label {
  transition:
    border-color var(--transition),
    background var(--transition),
    transform var(--duration-normal) var(--ease-premium),
    box-shadow var(--duration-normal) var(--ease-premium);
}

.booking-option__card:hover,
.booking-package__card:hover {
  box-shadow: var(--shadow-card);
}

.booking-step__header {
  margin-bottom: 32px;
  padding-bottom: 22px;
}

.booking-step__title {
  line-height: var(--line-height-heading);
}

.booking-step__desc {
  line-height: var(--line-height-prose);
}

.booking-confirmation {
  padding: 56px 36px;
}

.booking-confirmation__icon {
  transition: transform var(--duration-normal) var(--ease-premium);
}

.booking-confirmation--visible .booking-confirmation__icon {
  animation: rc2ConfirmPop 0.55s var(--ease-premium) forwards;
}

@keyframes rc2ConfirmPop {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }

  70% {
    transform: scale(1.04);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.booking-progress__step--active .booking-progress__dot {
  transition:
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--duration-normal) var(--ease-premium),
    transform var(--duration-normal) var(--ease-premium);
}

.booking-nav {
  margin-top: 36px;
  padding-top: 28px;
}

/* ---- Community ---- */
.community-hero__intro p {
  line-height: var(--line-height-prose);
}

.community-stat,
.community-event-card {
  transition:
    border-color var(--transition),
    transform var(--duration-normal) var(--ease-premium),
    box-shadow var(--duration-normal) var(--ease-premium);
}

.community-stat:hover,
.community-event-card:hover {
  transform: translateY(var(--card-lift-subtle));
  box-shadow: var(--shadow-card);
}

/* ---- Trust strip ---- */
.trust-strip__item {
  transition: background var(--transition);
}

/* ---- Navigation & header ---- */
.header {
  transition:
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--duration-normal) var(--ease-premium);
}

.nav__links a:not(.nav__cta) {
  transition: color var(--transition);
}

/* ---- Footer breathing room ---- */
.footer {
  padding-top: 64px;
  padding-bottom: max(40px, env(safe-area-inset-bottom, 0px));
}

/* ---- Mobile premium rhythm ---- */
@media (max-width: 991px) {
  :root {
    --reveal-distance: 10px;
    --reveal-duration: 0.52s;
  }

  .section-header {
    margin-bottom: 40px;
  }

  .faq {
    padding: var(--space-section-sm, 72px) 0;
  }

  .local-seo {
    padding: var(--space-section-sm, 72px) 0;
  }

  .content-hero {
    padding: 36px 0 44px;
  }

  .content-body {
    padding-top: 48px;
  }

  .content-cta {
    margin-top: 40px;
  }

  .faq__cta {
    margin-top: 36px;
  }

  [data-animate] {
    transform: translate3d(0, var(--reveal-distance), 0);
  }
}

@media (max-width: 767px) {
  .section-header {
    margin-bottom: 32px;
  }

  .hero__badges {
    gap: 10px;
    margin-bottom: 32px;
  }

  .hero__actions {
    gap: 14px;
  }

  .booking-cta__inner {
    padding: 32px 24px;
    gap: 28px;
  }

  .content-card {
    padding: 22px 20px;
  }

  .booking-confirmation {
    padding: 44px 24px;
  }

  .booking-nav {
    margin-top: 28px;
    padding-top: 24px;
  }
}