/* THEGROWNS — APPROVED 4K ARTWORK */
/* Staging only. Original layout and artwork remain intact. */

.tg-homepage .tg-hero__visual {
  background-image: url('../tg-4k-master/TheGrowns_4K_Master_Assets/01_Hero/hero-approved.webp');
}

.tg-homepage .tg-category--weight {
  --tg-ribbon: url('../tg-4k-master/TheGrowns_4K_Master_Assets/02_Category_Ribbons/WEBP/weight-red.webp');
}
.tg-homepage .tg-category--recovery {
  --tg-ribbon: url('../tg-4k-master/TheGrowns_4K_Master_Assets/02_Category_Ribbons/WEBP/recovery-green.webp');
}
.tg-homepage .tg-category--performance {
  --tg-ribbon: url('../tg-4k-master/TheGrowns_4K_Master_Assets/02_Category_Ribbons/WEBP/performance-blue.webp');
}
.tg-homepage .tg-category--skin {
  --tg-ribbon: url('../tg-4k-master/TheGrowns_4K_Master_Assets/02_Category_Ribbons/WEBP/skin-violet.webp');
}
.tg-homepage .tg-category--women {
  --tg-ribbon: url('../tg-4k-master/TheGrowns_4K_Master_Assets/02_Category_Ribbons/WEBP/women-pink.webp');
}
.tg-homepage .tg-category--hormone {
  --tg-ribbon: url('../tg-4k-master/TheGrowns_4K_Master_Assets/02_Category_Ribbons/WEBP/hormone-amber.webp');
}
.tg-homepage .tg-category--aging {
  --tg-ribbon: url('../tg-4k-master/TheGrowns_4K_Master_Assets/02_Category_Ribbons/WEBP/aging-bronze.webp');
}
.tg-homepage .tg-category--cognitive {
  --tg-ribbon: url('../tg-4k-master/TheGrowns_4K_Master_Assets/02_Category_Ribbons/WEBP/cognitive-cyan.webp');
}

.tg-homepage .tg-process {
  background-image:
    linear-gradient(90deg, rgba(250,249,255,.82), rgba(250,249,255,.36)),
    url('../tg-4k-master/TheGrowns_4K_Master_Assets/03_Process_Zen_Waves/process-zen-waves-approved.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.tg-homepage .tg-essentials {
  background-image:
    linear-gradient(90deg, #f8f7fddd 0%, #f8f7fdb0 33%, transparent 55%),
    url('../tg-4k-master/TheGrowns_4K_Master_Assets/04_Research_Essentials/research-essentials-pearlescent-approved.webp');
}


/* HERO REFINEMENT — seamless 4K artwork */
@media (min-width: 851px) {
  .tg-homepage .tg-hero__visual {
    width: 118%;
    min-height: 640px;
    margin-left: -6%;
    background-size: cover;
    background-position: 54% center;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,.65) 12%,
      #000 27%,
      #000 88%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,.65) 12%,
      #000 27%,
      #000 88%,
      transparent 100%
    );
  }
}

@media (max-width: 850px) {
  .tg-homepage .tg-hero__visual {
    background-size: cover;
    background-position: center;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
  }
}

/* HERO V2 — balanced artwork, preserve complete bottle */
@media (min-width: 851px) {
  .tg-homepage .tg-hero__visual {
    width: 100%;
    min-height: 610px;
    margin-left: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-mask-image:
      radial-gradient(ellipse 72% 57% at 54% 50%,
        #000 58%, rgba(0,0,0,.8) 75%, transparent 100%);
    mask-image:
      radial-gradient(ellipse 72% 57% at 54% 50%,
        #000 58%, rgba(0,0,0,.8) 75%, transparent 100%);
  }
}

/* THEGROWNS — SIGNATURE CINEMATIC HERO */
.tg-homepage.tg-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #faf9ff;
}

.tg-homepage.tg-hero::after {
  display: none;
}

.tg-homepage .tg-hero__motion {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #faf9ff url('../tg-animated-hero/TheGrowns_Signature_Hero_Loop/thegrowns-signature-hero-poster-4000.webp') center center / cover no-repeat;
}

.tg-homepage .tg-hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.tg-homepage .tg-hero__layout {
  position: relative;
  z-index: 2;
  grid-template-columns: 1fr 1fr;
}

.tg-homepage .tg-hero__copy {
  position: relative;
  z-index: 3;
}

.tg-homepage .tg-hero__visual {
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  pointer-events: none;
}

.tg-homepage .tg-hero__motion::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(250,249,255,.35) 0%,
    rgba(250,249,255,.15) 38%,
    transparent 65%
  );
  pointer-events: none;
}

@media (max-width: 850px) {
  .tg-homepage .tg-hero__video {
    display: none;
  }

  .tg-homepage .tg-hero__motion {
    background-position: 62% center;
  }

  .tg-homepage .tg-hero__layout {
    grid-template-columns: 1fr;
  }

  .tg-homepage .tg-hero__visual {
    min-height: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tg-homepage .tg-hero__video {
    display: none;
  }
}

/* THEGROWNS — HERO DESCRIPTION LEGIBILITY */
.tg-homepage .tg-hero__intro {
  color: #30263e !important;
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 500;
  line-height: 1.65;
  text-shadow: 0 1px 12px rgba(255,255,255,.65);
}


/* THEGROWNS — REFINED HERO TEXT COMPOSITION */
.tg-homepage .tg-hero__motion::after {
  background: linear-gradient(
    90deg,
    rgba(250,249,255,.82) 0%,
    rgba(250,249,255,.70) 19%,
    rgba(250,249,255,.38) 34%,
    rgba(250,249,255,0) 54%
  );
}

.tg-homepage .tg-hero__intro {
  color: #211b2c !important;
  font-size: clamp(16px, 1.1vw, 18px) !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  letter-spacing: .005em;
  text-shadow: none !important;
  max-width: 410px;
  margin-top: 26px;
  margin-bottom: 30px;
}

@media (max-width: 850px) {
  .tg-homepage .tg-hero__motion::after {
    background: linear-gradient(
      90deg,
      rgba(250,249,255,.9),
      rgba(250,249,255,.55) 70%,
      rgba(250,249,255,.2)
    );
  }
}

/* THEGROWNS — PEACEFUL STATIC HERO */
.tg-homepage .tg-hero__video {
  display: none !important;
}



/* THEGROWNS — EPIC BEAM V3 */
/* Stationary artwork; full-image forward and powerful reverse sweep */

.tg-homepage .tg-hero__video {
  display: none !important;
}

.tg-homepage .tg-hero__motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background-image:
    url('../tg-animated-hero/TheGrowns_Signature_Hero_Loop/thegrowns-signature-hero-poster-4000.webp') !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* Single beam, including its brighter returning pass */
.tg-homepage .tg-hero__motion::before {
  content: "";
  position: absolute;
  inset: -15% -20%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 34%,
    rgba(180,135,255,.08) 40%,
    rgba(225,205,255,.30) 45%,
    rgba(255,255,255,.92) 49.5%,
    rgba(255,255,255,1) 50%,
    rgba(211,165,255,.55) 52%,
    rgba(163,105,255,.18) 58%,
    transparent 66%
  );
  transform: translate3d(-125%,0,0);
  opacity: 0;
  will-change: transform, opacity;
  animation: tg-epic-beam-v3 8s linear infinite;
}

/* The existing readability gradient stays separate from the beam */
.tg-homepage .tg-hero__motion::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(250,249,255,.82) 0%,
    rgba(250,249,255,.70) 19%,
    rgba(250,249,255,.38) 34%,
    transparent 54%
  );
  opacity: 1;
  animation: none !important;
}

/* No TG-specific spotlight */
.tg-homepage .tg-hero__layout::before {
  display: none !important;
  animation: none !important;
}

@keyframes tg-epic-beam-v3 {
  /* First pass: elegant, controlled */
  0% {
    transform: translate3d(-125%,0,0);
    opacity: 0;
    filter: brightness(1);
  }
  5% {
    opacity: .38;
  }
  32% {
    transform: translate3d(125%,0,0);
    opacity: .38;
  }
  34% {
    opacity: 0;
  }

  /* Return: fast, wide and dramatically brighter */
  39% {
    transform: translate3d(125%,0,0);
    opacity: 0;
    filter: brightness(1.8);
  }
  41% {
    opacity: 1;
  }
  55% {
    transform: translate3d(-125%,0,0);
    opacity: 1;
    filter: brightness(1.8);
  }
  58% {
    opacity: 0;
  }

  /* Rest */
  100% {
    transform: translate3d(-125%,0,0);
    opacity: 0;
    filter: brightness(1);
  }
}

@media (max-width: 850px) {
  .tg-homepage .tg-hero__motion::before {
    animation: none !important;
    opacity: 0 !important;
  }

  .tg-homepage .tg-hero__motion::after {
    background: linear-gradient(
      90deg,
      rgba(250,249,255,.90),
      rgba(250,249,255,.55) 70%,
      rgba(250,249,255,.20)
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .tg-homepage .tg-hero__motion::before {
    animation: none !important;
    opacity: 0 !important;
  }
}


/* Accessories: premium full-width collection finale, white artwork field. */
.tg-homepage .tg-category-grid .tg-category--accessories {
  grid-column:1 / -1;
  min-height:180px;
  padding:30px 34px;
  background:#fff;
  border:1px solid rgba(26,26,34,.09);
  overflow:hidden;
}
.tg-homepage .tg-category--accessories::after {
  content:"";
  position:absolute;
  z-index:0;
  inset:0 0 0 auto;
  width:55%;
  background-image:url('https://thegrowns.com/wp-content/uploads/2026/10/Black-ribbon.webp');
  background-position:right center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:none;
  opacity:1;
  pointer-events:none;
}
.tg-homepage .tg-category--accessories::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  background:linear-gradient(90deg,#fff 0%,#fff 37%,rgba(255,255,255,.82) 50%,transparent 77%);
  pointer-events:none;
}
.tg-homepage .tg-category--accessories > * {position:relative;z-index:2}
.tg-homepage .tg-category--accessories .tg-category__accent {background:#17171d}
.tg-homepage .tg-category--accessories .tg-category__title {max-width:270px;font-size:23px}
.tg-homepage .tg-category--accessories .tg-category__description {max-width:300px}
@media(max-width:600px) {
 .tg-homepage .tg-category-grid .tg-category--accessories {min-height:180px;padding:22px}
 .tg-homepage .tg-category--accessories::after {width:85%;opacity:.50}
 .tg-homepage .tg-category--accessories::before {background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.95) 48%,rgba(255,255,255,.30) 100%)}
}