/* Base tokens, skeletons and preloader styles.
   Source: assets/css/frontend.css lines 1-184. Header-specific rules live in 60-header.css. */

:root {
  --hwh-black: #0f0f0f;
  --hwh-cream: #fafafa;
  --hwh-nude: #f5ede6;
  --hwh-gold: #c9a96e;
  --hwh-line: rgba(15, 15, 15, 0.12);
}

[class*="hwh-"] :where(h1, h2, h3, h4, h5, h6, p, a, span, li, label, button) {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

body.hwh-has-custom-footer #colophon,
body.hwh-has-custom-footer footer.site-footer:not(.hwh-footer) {
  display: none;
}

/* Shared image skeletons and reserved ratios. */
.hwh-skeleton {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--hwh-nude);
}

.hwh-skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: hwh-shimmer 1.4s infinite;
}

.hwh-skeleton img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hwh-ratio-portrait {
  aspect-ratio: 4 / 5;
}

.hwh-ratio-tall {
  aspect-ratio: 3 / 4;
}

@keyframes hwh-shimmer {
  to { transform: translateX(100%); }
}

/* Global preloader. */
.hwh-preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--hwh-preloader-bg, var(--hwh-black));
  transition: opacity .42s ease, visibility .42s ease;
}

.hwh-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.hwh-preloader-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--hwh-preloader-accent, var(--hwh-gold));
  animation: hwh-progress var(--hwh-preloader-duration, 1.8s) ease forwards;
}

.hwh-preloader-content {
  display: grid;
  place-items: center;
  gap: 18px;
  text-align: center;
}

.hwh-preloader-logo-img,
.hwh-preloader-logo img {
  width: var(--hwh-preloader-logo-size, 92px);
  height: var(--hwh-preloader-logo-size, 92px);
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
}

.hwh-preloader-content span {
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--hwh-preloader-text-size, clamp(26px, 4vw, 54px));
  letter-spacing: .02em;
}

.hwh-preloader-content i {
  width: 34px;
  height: 34px;
  display: block;
  border: 1px solid rgba(255,255,255,.24);
  border-top-color: var(--hwh-preloader-accent, var(--hwh-gold));
  border-radius: 50%;
  animation: hwh-spin .9s linear infinite;
}

.hwh-preloader-logo-fade .hwh-preloader-content,
.hwh-preloader-content-logo-fade {
  animation: hwh-preloader-fade 1.4s ease-in-out infinite alternate;
}

.hwh-preloader-progress-line .hwh-preloader-content i {
  display: none;
}

.hwh-preloader-progress-line .hwh-preloader-progress {
  height: 4px;
}

.hwh-preloader-luxury-wordmark .hwh-preloader-logo-img {
  display: none;
}

.hwh-preloader-luxury-wordmark .hwh-preloader-content span {
  color: var(--hwh-preloader-accent, var(--hwh-gold));
  text-transform: uppercase;
  letter-spacing: .18em;
}

.hwh-preloader-spinner-minimal .hwh-preloader-logo-img {
  display: none;
}

.hwh-preloader-curtain-reveal::before,
.hwh-preloader-curtain-reveal::after {
  content: "";
  position: absolute;
  inset: 0 50% 0 0;
  background: #050505;
  animation: hwh-curtain-left var(--hwh-preloader-duration, 2.6s) ease forwards;
}

.hwh-preloader-curtain-reveal::after {
  inset: 0 0 0 50%;
  animation-name: hwh-curtain-right;
}

.hwh-preloader-curtain-reveal .hwh-preloader-content {
  position: relative;
  z-index: 1;
}

@keyframes hwh-progress {
  to { width: 100%; }
}

@keyframes hwh-spin {
  to { transform: rotate(360deg); }
}

@keyframes hwh-preloader-fade {
  from { opacity: .52; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hwh-curtain-left {
  to { transform: translateX(-102%); }
}

@keyframes hwh-curtain-right {
  to { transform: translateX(102%); }
}
