/* Hero3-style preloader + scroll-driven video hero, used on the homepage.
   Scoped so it never touches the site's existing css/style.css or css/inline.css. */
.hero3-root {
  --h3-bg-base: #000;
  --h3-box-width: 54vw;
  --h3-box-aspect: 1.92 / 1;
  --h3-box-radius: 16px;
  --h3-box-offset-y: 3vh;
  --h3-box-max-height: calc(100vh - 2 * var(--h3-hero-gap) - 2 * var(--h3-box-offset-y) - 4vh);
  --h3-container-max: 1700px;
  --h3-box-left: max(20px, (100% - var(--h3-container-max)) / 2);
  --h3-box-offset-x: calc(var(--h3-box-left) + var(--h3-box-width) / 2 - 50%);
  --h3-box-h: min(calc(var(--h3-box-width) / 1.92), var(--h3-box-max-height));
  --h3-ease: cubic-bezier(.22, .61, .36, 1);
  --h3-hero-gap: 20vh;
  line-height: 1.6;
}
@media (max-width: 900px) {
  .hero3-root {
    --h3-box-width: 74vw;
    --h3-box-aspect: 4 / 5;
    --h3-box-max-height: 46svh;
    --h3-box-radius: 14px;
    --h3-box-offset-y: 2svh;
    --h3-box-offset-x: 0px;
    --h3-box-h: min(calc(var(--h3-box-width) * 1.25), var(--h3-box-max-height));
  }
}

.hero3-eyebrow { font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: #1fb3e0; font-weight: 600; }

.hero3-preloader {
  position: fixed; inset: 0; z-index: 9999; background: #000;
  transition: opacity .8s var(--h3-ease), visibility 0s linear .8s;
}
.hero3-preloader__video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px), (orientation: portrait) {
  .hero3-preloader__video { object-fit: contain; }
}
.hero3-preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- Hero (scroll-driven) ---------- */
.hero3-hero { position: relative; z-index: 2; height: 460vh; background: #000; }
.hero3-hero__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  opacity: 0; transition: opacity 1.2s var(--h3-ease) .1s;
}
body:not(.hero3-is-loading) .hero3-hero__stage { opacity: 1; }

.hero3-hero__backdrop { position: absolute; inset: 0; background: var(--h3-bg-base); pointer-events: none; }

.hero3-hero__aboutpreview {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--h3-hero-gap); z-index: 1; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(1.5rem, 6vw, 4rem) 0 var(--h3-box-left);
  background:
    radial-gradient(circle at top right, #004b6b, transparent 35%),
    radial-gradient(circle at bottom left, rgba(0, 12, 41, .25), transparent 30%),
    linear-gradient(135deg, #000000 0%, #000000 40%, #000000 100%);
}
.hero3-hero__aboutpreview h2 { margin: .35rem 0 0; font-size: clamp(1.4rem, 3.2vw, 2.3rem); font-weight: 700; color: #fff; font-family: 'Titillium Web', sans-serif; }
.hero3-hero__aboutpreview .hero3-eyebrow { font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: #1fb3e0; font-weight: 600; }
.hero3-hero__bg {
  position: absolute; inset: 0; will-change: opacity;
  background:
    radial-gradient(circle at right top, rgb(0, 0, 0), transparent 35%),
    radial-gradient(circle at left bottom, rgba(84, 89, 103, 0.25), transparent 30%),
    linear-gradient(135deg, rgb(0, 0, 0) 0%, rgb(15, 28, 41) 40%, rgb(15, 29, 45) 100%);
}

.hero3-hero__title {
  --h3-title-fs: 2.7vw;
  position: absolute; left: calc(var(--h3-box-left) + 2vw); top: calc(61% - .86 * var(--h3-title-fs)); margin: 0;
  font-size: var(--h3-title-fs); line-height: .86; font-weight: 700; letter-spacing: -.02em; color: #fff;
  transform-origin: 0 0; white-space: nowrap; pointer-events: none; will-change: transform, opacity;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35); font-family: 'Titillium Web', sans-serif;
}
.hero3-hero__title span { display: block; }
.hero3-hero__titlesub { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; white-space: nowrap; pointer-events: none; font-size: clamp(.7rem, 1.2vw, .88rem); font-weight: 700; color: #4fd8f5; will-change: opacity, transform; text-shadow: 0 0 14px rgba(79, 216, 245, .4); }
.hero3-hero__titlesub[data-h3-titlesub] { color: #f7cf6b; text-shadow: 0 0 14px rgba(247, 207, 107, .5); animation: h3HeroLabelGlow 3.4s ease-in-out infinite; }

.hero3-hero__titlebg {
  position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; will-change: opacity;
  background: rgba(120, 124, 130, .32); border: 1px solid rgba(255, 255, 255, .22); border-radius: 16px;
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .5);
}

.hero3-hero__flip { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.hero3-hero__flipcard {
  position: relative; width: 100%; height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; gap: .55em;
  padding: 1.5em 1.7em; perspective: 1400px;
  background:
    radial-gradient(circle at bottom right, #000000, transparent 35%), radial-gradient(circle at top left, rgba(0, 12, 41, 0.25), transparent 30%), linear-gradient(223deg, #003e59 0%, #000000 40%, #000000 100%) !important;
  border: 1px solid rgba(165, 232, 255, .42); border-radius: 24px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 0 0 1px rgba(79, 216, 245, .10),
    0 0 38px rgba(79, 216, 245, .26),
    0 26px 60px -22px rgba(0, 0, 0, .65),
    inset 0 1px 0 rgba(255, 255, 255, .30);
}
.hero3-hero__fliptext { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; transform-style: preserve-3d; will-change: transform; }
.hero3-hero__flipface {
  position: absolute; inset: 0; box-sizing: border-box; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: .55em;
}
.hero3-hero__flipface--back { transform: rotateY(180deg); }
@property --h3-flip-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.hero3-hero__flipcard::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; box-sizing: border-box;
  background: conic-gradient(from var(--h3-flip-angle), transparent 0 72%, #bdf2ff 84%, #fff 88%, #bdf2ff 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; animation: h3HeroFlipLight 3.2s linear infinite;
}
@keyframes h3HeroFlipLight { to { --h3-flip-angle: 360deg; } }
.hero3-hero__flipbadge {
  position: absolute; z-index: 2; top: -16px; right: 18px; padding: 8px 18px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #2b1c00; white-space: nowrap;
  background: linear-gradient(135deg, #fbe08a, #e2a52f); font-family: 'Titillium Web', sans-serif;
  box-shadow: 0 0 16px rgba(247, 200, 90, .55), 0 6px 14px -6px rgba(0, 0, 0, .6);
}
.hero3-hero__badgespark {
  position: absolute; top: -9px; right: -9px; width: 12px; height: 12px; background: #fff8e6;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 5px rgba(255, 224, 140, .9)); animation: h3HeroTwinkle 2.4s ease-in-out infinite;
}
@keyframes h3HeroTwinkle { 0%, 100% { opacity: .35; scale: .7; } 50% { opacity: 1; scale: 1; } }
.hero3-hero__offerheadline {
  margin: 0; padding-bottom: .5em; border-bottom: 1px solid rgba(226, 165, 47, .55);
  font-size: clamp(.78rem, 1.5vw, 1rem); line-height: 1.3; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: #6fe3ff; text-shadow: 0 0 14px rgba(79, 216, 245, .4); white-space: normal;
  font-family: 'Titillium Web', sans-serif;
}
.hero3-hero__offerbody {
  margin: 0; font-size: clamp(.92rem, 1.6vw, 1.08rem); line-height: 1.4; font-weight: 500;
  color: rgba(255, 255, 255, .88); white-space: normal; font-family: 'Titillium Web', sans-serif;
}
.hero3-hero__offervalue {
  display: inline-block; margin: .2em 0 0; padding: .5em 1.1em; border-radius: 12px;
  border: 1.5px solid #e2a52f; background: rgba(226, 165, 47, .1);
  font-size: clamp(1.05rem, 2vw, 1.4rem); line-height: 1.25; font-weight: 700; letter-spacing: -.01em;
  color: #ffe39a; text-shadow: 0 2px 10px rgba(0, 0, 0, .4); white-space: normal;
  box-shadow: 0 0 22px rgba(226, 165, 47, .3), inset 0 1px 0 rgba(255, 255, 255, .15);
  font-family: 'Titillium Web', sans-serif;
}
.hero3-hero__spark {
  position: absolute; width: 9px; height: 9px; background: #ffe39a;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 4px rgba(255, 214, 120, .9)); opacity: .85; animation: h3HeroTwinkle 3.6s ease-in-out infinite;
}
.hero3-hero__spark--a { top: 20px; left: 16px; animation-delay: .4s; }
.hero3-hero__spark--b { bottom: 24px; left: 50%; width: 6px; height: 6px; animation-delay: 1.6s; }
.hero3-hero__spark--c { top: 42%; right: 36%; width: 7px; height: 7px; animation-delay: 2.6s; }

@property --h3-pulse { syntax: '<number>'; inherits: true; initial-value: 0; }
.hero3-hero__offercard {
  position: absolute; inset: 0; pointer-events: none; --h3-amp: 1;
  scale: calc(1 + .045 * var(--h3-pulse) * var(--h3-amp));
  animation: h3HeroPulse 3.4s ease-in-out infinite, h3HeroFloat 7s ease-in-out infinite;
}
@keyframes h3HeroPulse { 0%, 100% { --h3-pulse: 0; } 50% { --h3-pulse: 1; } }
@keyframes h3HeroFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.hero3-hero__title[data-h3-title] { animation: h3HeroFloat 7s ease-in-out infinite; }
@keyframes h3HeroLabelGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(247, 207, 107, .35); }
  50% { text-shadow: 0 0 10px rgba(255, 214, 120, .95), 0 0 24px rgba(247, 170, 50, .65); }
}
@media (prefers-reduced-motion: reduce) {
  .hero3-hero__offercard, .hero3-hero__title[data-h3-title], .hero3-hero__titlesub { animation: none; }
  .hero3-hero__offercard { scale: none; }
}
@media (max-width: 900px) {
  .hero3-hero__title { --h3-title-fs: 6vw; left: 6vw; top: calc(50% + var(--h3-box-offset-y) - var(--h3-box-h) / 2 - 20px - 2 * .86 * var(--h3-title-fs)); }
}
.hero3-hero__frame {
  position: absolute; left: calc(50% + var(--h3-box-offset-x)); top: calc(50% + var(--h3-box-offset-y)); transform: translate(-50%, -50%);
  width: var(--h3-box-width); aspect-ratio: var(--h3-box-aspect); max-height: var(--h3-box-max-height);
  pointer-events: none; visibility: hidden;
}
.hero3-hero__media {
  position: absolute; inset: 0; overflow: hidden; background: #000;
  will-change: clip-path;
  clip-path: inset(var(--h3-cy, 20%) var(--h3-cx, 19%) var(--h3-cy, 20%) var(--h3-cx, 19%) round var(--h3-box-radius));
  box-shadow: 0 20px 48px -26px rgba(0, 0, 0, .55);
}
.hero3-hero__video { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; }
.hero3-hero__shade {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 55%,
    rgba(2, 8, 16, .5) 66%,
    rgba(2, 8, 16, .85) 78%,
    rgba(2, 8, 16, .94) 100%
  );
}

.hero3-hero__cards { position: absolute; inset: 0; pointer-events: none; }
.hero3-card {
  position: absolute; color: #fff; opacity: 0; will-change: opacity, transform;
  transform: translate(var(--h3-tx, 0), var(--h3-ty, 0));
  width: min(560px, 90vw); padding: clamp(1rem, 2.2vw, 1.8rem) clamp(1.1rem, 2.6vw, 2.2rem) clamp(1.1rem, 2.4vw, 2rem);
  background: rgba(120, 124, 130, .32); border: 1px solid rgba(255, 255, 255, .22); border-radius: 16px;
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .5);
}
.hero3-card .hero3-eyebrow { font-size: clamp(.62rem, 1.1vw, .8rem); color: #4fd8f5; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.hero3-card h2 {
  font-size: clamp(1.7rem, 4vw, 3.4rem); line-height: 1.06; font-weight: 700; letter-spacing: -.01em;
  margin-top: .5rem; text-wrap: balance; color: #fff; font-family: 'Titillium Web', sans-serif;
}
.hero3-card--video-a { right: 6vw; bottom: calc(var(--h3-hero-gap) + 3vh); }
.hero3-card--video-b { right: 6vw; bottom: calc(var(--h3-hero-gap) + 5vh); }
@media (max-width: 900px) {
  .hero3-card { --h3-tx: -50%; }
  .hero3-card--video-a, .hero3-card--video-b { left: 50%; right: auto; bottom: calc(var(--h3-hero-gap) + 3svh); width: 88vw; }
  .hero3-card--video-a h2, .hero3-card--video-b h2 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .hero3-hero__flipcard { padding: 1em 1.1em; border-radius: 18px; }
  .hero3-hero__flipface { gap: .35em; }
  .hero3-hero__flipbadge { top: -12px; right: 12px; padding: 5px 12px; font-size: .64rem; }
  .hero3-hero__offerheadline { font-size: .72rem; padding-bottom: .35em; }
  .hero3-hero__offerbody { font-size: .82rem; line-height: 1.3; }
  .hero3-hero__offervalue { font-size: .95rem; padding: .4em .8em; }
  .hero3-hero__aboutpreview { padding-left: var(--h3-box-left); padding-right: 1.25rem; justify-content: flex-end; padding-bottom: 12px; }
  .hero3-hero__aboutpreview h2 { font-size: clamp(1.1rem, 5.5vw, 1.7rem); }
}

.hero3-hero__hint {
  position: absolute; left: 50%; top: calc(50% + var(--h3-box-offset-y) + var(--h3-box-h) / 2 + 40px); transform: translateX(-50%); z-index: 5;
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 30px;
  border-radius: 999px; overflow: hidden; isolation: isolate;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* On shorter laptop screens (~14") the media box takes up more of the
   viewport height, so the +40px offset below it lands inside the
   About-preview strip and overlaps its heading. Pull it up on this
   width/height range only - phones (<=900px) and taller desktop
   monitors keep the original +40px. */
@media (min-width: 901px) and (max-width: 1440px) and (max-height: 820px) {
  .hero3-hero__hint { top: calc(50% + var(--h3-box-offset-y) + var(--h3-box-h) / 2 + 4px); }
}
.hero3-hero__hint::after {
  content: ""; position: absolute; z-index: -1; inset: 2px;
  border-radius: 999px; background: #071015;
}
.hero3-hero__hint::before {
  content: ""; position: absolute; z-index: -2; left: 50%; top: 50%;
  width: 260px; height: 260px; margin: -130px 0 0 -130px;
  background: conic-gradient(from 0deg, transparent 0 55%, #3be6ff 85%, #ffffff 100%);
  animation: h3HintSpin 2.4s linear infinite;
}
.hero3-hero__hint-text {
  position: relative;
  font-family: "Rajdhani", "Segoe UI", sans-serif !important; font-weight: 700; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .12em; color: #eafcff; white-space: nowrap;
  text-shadow: 0 0 8px rgba(59, 230, 255, .5);
}
.hero3-hero__hint-chev {
  position: relative; flex-shrink: 0; color: #3be6ff;
  filter: drop-shadow(0 0 4px rgba(59, 230, 255, .8));
  animation: h3HintChevBounce 1.6s ease-in-out infinite;
}
.hero3-hero__hint:focus-visible { outline: 1px solid rgba(59, 230, 255, .7); outline-offset: 4px; }
@media (max-width: 900px) {
  .hero3-hero__hint { left: 50%; top: auto; bottom: 110px; gap: 8px; padding: 10px 18px; }
  .hero3-hero__hint-text { font-size: .68rem; }
  .hero3-hero__hint-chev { width: 11px; height: 7px; }
}
@keyframes h3HintSpin { to { transform: rotate(360deg); } }
@keyframes h3HintChevBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

@media (prefers-reduced-motion: reduce) {
  .hero3-hero { height: 100svh; }
  .hero3-hero__media { clip-path: none; }
  .hero3-card--video-b { opacity: 1; }
  .hero3-hero__title, .hero3-hero__titlebg, .hero3-hero__titlesub, .hero3-hero__flip { display: none; }
  .hero3-hero__hint, .hero3-hero__hint::before, .hero3-hero__hint-chev { animation: none; }
  .hero3-preloader { transition-duration: .01s !important; }
}

/* ---------- Page integration ---------- */
/* css/inline.css sets overflow-x:hidden on both html and body, which makes body its own scroll
   container and stops position:sticky on the hero stage from following the page. */
html, body { overflow-x: clip !important; overflow-y: visible !important; }
html body.hero3-is-loading, html body.furniture-cart-open { overflow: hidden !important; }

/* Preloader sits above the site's fixed buttons (z-index 999); the header fades in on top of it. */
.hero3-preloader { z-index: 1000; }