/* Never show React-hydrated hero copy / video — keep only the slideshow stack */
section[aria-label="Home hero"] > div:not(:has(.hero-fulham-video-root)) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
section[aria-label="Home hero"] video {
  display: none !important;
}
section[aria-label="Home hero"] .hero-fulham-video-root > :not(.hero-home-slideshow) {
  display: none !important;
  visibility: hidden !important;
}
section[aria-label="Home hero"] .hero-fulham-video-root img:not(.hero-home-slide-img),
section[aria-label="Home hero"] .hero-fulham-video-root picture,
section[aria-label="Home hero"] .hero-fulham-video-root canvas {
  display: none !important;
  visibility: hidden !important;
}
section[aria-label="Home hero"] .max-w-4xl,
section[aria-label="Home hero"] h1,
section[aria-label="Home hero"] .max-w-2xl {
  display: none !important;
}

/* Home hero — cinematic crossfade slideshow (transform + opacity only, GPU-friendly)
   Cycle: 21s = 5×(3s hold) + 5×(1s crossfade). Opacity uses soft multi-stop ramps in fade zones. */
.hero-home-slideshow {
  position: absolute;
  inset: 0;
  isolation: isolate;
  contain: strict;
  opacity: 1;
}
.hero-home-slideshow.hero-home-ready {
  opacity: 1;
}
.hero-home-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  animation-duration: 21s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  will-change: opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
  contain: strict;
}
.hero-home-slide:nth-child(1) {
  animation-name: hero-xfade-1;
}
.hero-home-slide:nth-child(2) {
  animation-name: hero-xfade-2;
}
.hero-home-slide:nth-child(3) {
  animation-name: hero-xfade-3;
}
.hero-home-slide:nth-child(4) {
  animation-name: hero-xfade-4;
}
.hero-home-slide:nth-child(5) {
  animation-name: hero-xfade-5;
}
.hero-home-slide-zoom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.hero-home-slide-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  image-rendering: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Fade zones ≈ 4.76% of timeline (= 1s @ 21s). Holds ≈ 14.29% (= 3s). */
/* First slide: fully opaque at t=0 so first paint never shows empty hero behind slideshow */
@keyframes hero-xfade-1 {
  0%,
  19.05% {
    opacity: 1;
  }
  20.2% {
    opacity: 0.88;
  }
  21.8% {
    opacity: 0.52;
  }
  23% {
    opacity: 0.22;
  }
  23.81%,
  100% {
    opacity: 0;
  }
}
@keyframes hero-xfade-2 {
  0%,
  19.05% {
    opacity: 0;
  }
  20% {
    opacity: 0.12;
  }
  21.5% {
    opacity: 0.48;
  }
  23.2% {
    opacity: 0.85;
  }
  23.81%,
  38.1% {
    opacity: 1;
  }
  39.3% {
    opacity: 0.88;
  }
  40.8% {
    opacity: 0.52;
  }
  42% {
    opacity: 0.22;
  }
  42.86%,
  100% {
    opacity: 0;
  }
}
@keyframes hero-xfade-3 {
  0%,
  38.1% {
    opacity: 0;
  }
  39% {
    opacity: 0.12;
  }
  40.5% {
    opacity: 0.48;
  }
  42.2% {
    opacity: 0.85;
  }
  42.86%,
  57.14% {
    opacity: 1;
  }
  58.3% {
    opacity: 0.88;
  }
  59.8% {
    opacity: 0.52;
  }
  61% {
    opacity: 0.22;
  }
  61.9%,
  100% {
    opacity: 0;
  }
}
@keyframes hero-xfade-4 {
  0%,
  57.14% {
    opacity: 0;
  }
  58% {
    opacity: 0.12;
  }
  59.5% {
    opacity: 0.48;
  }
  61.2% {
    opacity: 0.85;
  }
  61.9%,
  76.19% {
    opacity: 1;
  }
  77.3% {
    opacity: 0.88;
  }
  78.8% {
    opacity: 0.52;
  }
  80% {
    opacity: 0.22;
  }
  80.95%,
  100% {
    opacity: 0;
  }
}
@keyframes hero-xfade-5 {
  0%,
  76.19% {
    opacity: 0;
  }
  77% {
    opacity: 0.12;
  }
  78.5% {
    opacity: 0.48;
  }
  80.2% {
    opacity: 0.85;
  }
  80.95%,
  95.24% {
    opacity: 1;
  }
  96.4% {
    opacity: 0.88;
  }
  97.9% {
    opacity: 0.52;
  }
  99.1% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-home-slide {
    animation: none !important;
    will-change: auto;
  }
  .hero-home-slide {
    opacity: 0;
  }
  .hero-home-slide:first-child {
    opacity: 1;
  }
  .hero-home-slideshow {
    opacity: 1;
    transition: none;
  }
}

/* Full-viewport hero — JS (hero-home-override.js) also sets height in px from visualViewport / innerHeight */
html:has(.home-premium),
body:has(.home-premium) {
  min-height: 100% !important;
}
body:has(.home-premium) {
  overflow-x: hidden !important;
}
.home-premium {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100lvh !important;
  min-height: 100dvh !important;
  min-height: 100vh !important;
}
main.flex-1:has(.home-premium) {
  min-height: 100lvh !important;
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
}
main.flex-1 > div:has(.home-premium) {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100lvh !important;
  min-height: 100dvh !important;
  opacity: 1 !important;
  transform: none !important;
}
.home-premium > section:first-of-type,
section[aria-label="Home hero"],
section[aria-label="Home hero"].uktop-hero-fullscreen {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  overflow-y: hidden !important;
  flex: 0 0 auto !important;
  flex-shrink: 0;
  position: relative;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: auto !important;
  right: auto !important;
  /* Css fallback until JS applies pixel height — vh helps desktop full-bleed */
  height: 100vh !important;
  height: 100dvh !important;
  height: 100lvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  min-height: 100lvh !important;
  min-height: -webkit-fill-available !important;
  max-height: none !important;
}
.hero-fulham-video-root,
.hero-home-slideshow,
.hero-home-slide,
.hero-home-slide-zoom {
  min-height: 100% !important;
}
.hero-home-slide-img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
}

.hero-fulham-video-root {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  background-color: #06090e;
}

/* Soft luxury vignette over photography only */
.hero-fulham-video-root::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
      ellipse 95% 85% at 50% 45%,
      transparent 0%,
      rgba(8, 12, 18, 0.14) 62%,
      rgba(6, 10, 16, 0.28) 100%
    ),
    linear-gradient(to bottom, rgba(5, 8, 14, 0.18) 0%, transparent 42%, rgba(4, 7, 12, 0.22) 100%);
}
.hero-fulham-video {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%) scale(1.04);
  object-fit: cover;
  filter: saturate(1.05) contrast(1.04);
  will-change: transform;
  animation: hero-kenburns 20.27s ease-in-out infinite alternate;
}
@keyframes hero-kenburns {
  0% {
    transform: translate(-50%, -50%) scale(1.04);
  }
  100% {
    transform: translate(-50%, -48%) scale(1.1);
  }
}
@media (max-width: 768px) {
  .hero-fulham-video {
    animation-duration: 22s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fulham-video {
    animation: none;
    transform: translate(-50%, -50%) scale(1.05);
  }
}
.hero-fulham-parallax-layer {
  position: absolute;
  inset: -4%;
  background: radial-gradient(ellipse 85% 70% at 50% 40%, transparent 0%, rgba(0, 0, 0, 0.12) 100%);
  transform: translate3d(0, var(--hero-parallax-y, 0px), 0);
  transition: transform 0.15s ease-out;
  pointer-events: none;
}
.hero-cinematic-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.07) 48%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 52%,
    transparent 62%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: hero-sheen 14s ease-in-out infinite;
  mix-blend-mode: soft-light;
  pointer-events: none;
  opacity: 0.85;
}
@keyframes hero-sheen {
  0%,
  100% {
    background-position: 120% 0;
  }
  50% {
    background-position: -20% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cinematic-sheen {
    animation: none;
    opacity: 0.35;
  }
}
.hero-cinematic-particles {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.55;
  animation: hero-drift 22s linear infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}
@keyframes hero-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-24px, -18px, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cinematic-particles {
    animation: none;
  }
}
.hero-fulham-glass-edge {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 120px rgba(255, 255, 255, 0.04), inset 0 -80px 140px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.home-premium .home-hero-slideshow-hide {
  display: none !important;
}