/* ==========================================================================
   Home & Living — Cinematic Background & Motion System
   Layout lives in style.css. This file is motion only.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="up"]    { transform: translateY(48px); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

[data-reveal-delay="1"] { transition-delay: 0.12s; }
[data-reveal-delay="2"] { transition-delay: 0.24s; }
[data-reveal-delay="3"] { transition-delay: 0.36s; }
[data-reveal-delay="4"] { transition-delay: 0.48s; }
[data-reveal-delay="5"] { transition-delay: 0.60s; }

/* Ambient hero layers */
.cinematic-hero__canvas {
  z-index: 2;
  opacity: 0.85;
  pointer-events: none;
}

.cinematic-hero__layers { z-index: 1; }

.cinematic-hero__layer--1 {
  animation: ambientGlow 14s ease-in-out infinite alternate;
}

.cinematic-hero__layer--2 {
  filter: blur(40px);
  animation: driftLight 18s ease-in-out infinite alternate;
}

.cinematic-hero__overlay { z-index: 3; }

@keyframes ambientGlow {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.05) translate(-15px, 10px); }
  100% { transform: scale(1.02) translate(15px, -10px); }
}

@keyframes driftLight {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0.7; }
  100% { transform: translate(30px, -20px) rotate(4deg); opacity: 1; }
}

@keyframes goldShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes kenBurns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1.5%, -1%); }
}

@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes shineSweep {
  0%   { transform: translateX(-120%) skewX(-15deg); }
  100% { transform: translateX(220%) skewX(-15deg); }
}

.cinematic-hero__title em {
  background: linear-gradient(90deg, var(--terracotta), var(--champagne), var(--terracotta-l));
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: goldShimmer 8s ease-in-out infinite alternate;
}

.hero__showcase .home-showcase__item img {
  animation: kenBurns 22s ease-in-out infinite alternate;
}

.hero__showcase .home-showcase__item:nth-child(2) img { animation-duration: 26s; animation-delay: -4s; }
.hero__showcase .home-showcase__item:nth-child(3) img { animation-duration: 20s; animation-delay: -8s; }

@media (hover: hover) {
  .post-card {
    position: relative;
  }

  .post-card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.28) 50%, transparent 60%);
    transform: translateX(-120%) skewX(-15deg);
    pointer-events: none;
  }

  .post-card:hover .post-card__media::before {
    animation: shineSweep 0.9s ease forwards;
  }

  .btn-clay,
  .btn-gold,
  .btn-luxury,
  .btn-ink,
  .contact-form__button {
    position: relative;
    overflow: hidden;
  }

  .btn-clay::after,
  .btn-gold::after,
  .btn-luxury::after,
  .btn-ink::after,
  .contact-form__button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
    transform: translateX(-120%);
    pointer-events: none;
  }

  .btn-clay:hover::after,
  .btn-gold:hover::after,
  .btn-luxury:hover::after,
  .btn-ink:hover::after,
  .contact-form__button:hover::after {
    animation: shineSweep 0.7s ease forwards;
  }
}

.brand-mark {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.navbar-brand:hover .brand-mark {
  transform: rotate(-8deg) scale(1.06);
  box-shadow: 0 8px 20px rgba(201, 169, 98, 0.25);
}

.stat-card__icon { animation: floatSoft 5.5s ease-in-out infinite; }
.stat-card:nth-child(2) .stat-card__icon { animation-delay: 0.4s; }
.stat-card:nth-child(3) .stat-card__icon { animation-delay: 0.8s; }

.flash-stack .alert {
  animation: dropFade 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

body.is-nav-scrolled .category-bar {
  box-shadow: 0 8px 24px rgba(30, 27, 24, 0.04);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .cinematic-hero__layer--1,
  .cinematic-hero__layer--2,
  .cinematic-hero__title em,
  .hero__showcase .home-showcase__item img,
  .stat-card__icon {
    animation: none !important;
    filter: none !important;
  }
}

/* Phones only: switch off heavy decorative motion to speed up the page */
@media (max-width: 767px) {
  .site-cinematic__orb,
  .site-cinematic__spark {
    display: none !important;
  }

  .hero__showcase .home-showcase__item img,
  .cinematic-hero__layer--1,
  .cinematic-hero__layer--2 {
    animation: none !important;
  }
}

/* Phones only: switch off heavy decorative motion to speed up the page */
@media (max-width: 767px) {
  .site-cinematic__orb,
  .site-cinematic__spark {
    display: none !important;
  }

  .hero__showcase .home-showcase__item img,
  .cinematic-hero__layer--1,
  .cinematic-hero__layer--2,
  .cinematic-hero__title em {
    animation: none !important;
  }
}