/* ================================================================
   Casa Lujuria — REVAMP layer (loaded last)
   - static hero fan (no scroll-travel)
   - colorful lane interrupt in place of section two
   - more color, less "brick" on the big Anton headings
   ================================================================ */

:root {
  --violet: #2f6bff;
  --hotpink: #ff2f4d;
  --orange: #f7a521;
  --cyan: #29f7ff;
}

/* ---------------------------------------------------------------
   1) STATIC HERO FAN  (replaces the traveling React cards)
   The cards sit under the headline and stay put. Only a gentle
   idle bob on the whole group — no scroll coupling at all.
   --------------------------------------------------------------- */
.hero-fan {
  display: flex; justify-content: center; align-items: flex-end;
  margin: clamp(42px, 4.5vw, 68px) auto 6px; padding: 0 10px; max-width: 100%;
  pointer-events: none; position: relative; z-index: 4;
  animation: heroFanBob 7s ease-in-out infinite;
}
@keyframes heroFanBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.hcard {
  flex: 0 0 auto; width: clamp(96px, 12.5vw, 166px); margin-left: -24px;
  border-radius: 22px 8px 22px 8px; overflow: hidden; transform-origin: 50% 100%;
  box-shadow: 0 24px 55px rgba(0,0,0,.5), 0 0 0 1px rgba(242,178,51,.25);
}
.hcard:first-child { margin-left: 0; }
.hcard img { display: block; width: 100%; height: auto; }
.hero-fan .hcard:nth-child(1){ transform: rotate(-15deg) translateY(36px); }
.hero-fan .hcard:nth-child(2){ transform: rotate(-10deg) translateY(17px); }
.hero-fan .hcard:nth-child(3){ transform: rotate(-5deg)  translateY(5px); }
.hero-fan .hcard:nth-child(4){ transform: rotate(0deg)   translateY(0);   z-index: 3; }
.hero-fan .hcard:nth-child(5){ transform: rotate(5deg)   translateY(5px); }
.hero-fan .hcard:nth-child(6){ transform: rotate(10deg)  translateY(17px); }
.hero-fan .hcard:nth-child(7){ transform: rotate(15deg)  translateY(36px); }
@media (max-width: 640px) {
  .hero-fan .hcard:nth-child(1), .hero-fan .hcard:nth-child(7) { display: none; }
  .hcard { width: clamp(74px, 21vw, 108px); margin-left: -16px; }
  .hero-fan .hcard:nth-child(2){ transform: rotate(-12deg) translateY(22px); }
  .hero-fan .hcard:nth-child(6){ transform: rotate(12deg)  translateY(22px); }
}
@media (prefers-reduced-motion: reduce) { .hero-fan { animation: none; } }

/* tighten the hero now that the tall travel spacer is gone */
.hero-sec { min-height: 0 !important; padding-bottom: clamp(40px, 7vw, 84px) !important; }
/* keep the lede clearly BELOW the fan (no more text hiding behind cards) */
.hero-fan { margin-bottom: clamp(26px, 4.5vw, 48px); }
.hero-lede { margin-top: clamp(6px, 1.5vw, 16px) !important; position: relative; z-index: 6; }

/* ---------------------------------------------------------------
   2) COLORFUL LANE INTERRUPT  (new section two)
   Big color-coded lane words on a glowing gradient band.
   --------------------------------------------------------------- */
.lq-lanes {
  padding: clamp(46px, 7vw, 92px) 0; position: relative; z-index: 2; overflow: hidden;
  background:
    radial-gradient(60% 90% at 12% 0%, rgba(47,107,255,.20), transparent 45%),
    radial-gradient(60% 90% at 92% 100%, rgba(255,134,24,.16), transparent 45%),
    radial-gradient(50% 80% at 60% 40%, rgba(255,47,77,.12), transparent 50%),
    linear-gradient(160deg, #0c0509, #101a3340);
  border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
}
.lq-lanes-list { list-style: none; margin: 1.2rem 0 0; padding: 0; border-top: 1px solid var(--line, rgba(246,239,226,.12)); }
.lq-lanes-list li { border-bottom: 1px solid var(--line, rgba(246,239,226,.12)); }
.lq-lanes-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(12px, 2.4vw, 24px) 6px;
  font-family: var(--anton); text-transform: uppercase;
  font-size: clamp(34px, 7vw, 82px); line-height: 1; letter-spacing: -0.02em;
  color: var(--c, #fff); background-image: none;
  transition: color .25s ease, padding-left .25s ease, background .25s ease;
}
.lq-lanes-list a span {
  font-family: "Inter Tight", sans-serif; font-weight: 800; font-size: 0.42em;
  color: var(--c, #fff); transition: transform .25s ease; flex: 0 0 auto;
}
.lq-lanes-list a:hover { color: #fff; padding-left: 22px; background: linear-gradient(90deg, rgba(255,255,255,.05), transparent); }
.lq-lanes-list a:hover span { transform: translateX(10px); }

/* ---------------------------------------------------------------
   3) MORE COLOR ELSEWHERE
   --------------------------------------------------------------- */
/* recolor the second hook band cooler (rouge -> violet -> gold) */
.lq-hook--alt {
  background: linear-gradient(100deg, var(--rouge,#e5223f), #ff5f70 42%, var(--violet,#2f6bff) 66%, var(--gold,#f2b233)) !important;
}
/* ambient color glows on the darker sections so it isn't all wine */
.ls-fan-sec::after, .steps-grid ~ *::after { }
.ls-fan-sec { position: relative; }
.ls-fan-sec::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 85% 10%, rgba(47,107,255,.12), transparent 55%);
}
/* colored kicker ticks rotate hue by section for a livelier scan */
.ls-fan-head .eyebrow::before { background: linear-gradient(90deg, var(--violet), var(--hotpink)) !important; }
.feat-head .eyebrow::before   { background: linear-gradient(90deg, var(--hotpink), var(--orange)) !important; }

/* color-pop the serif accent words a touch brighter */
.shimmer-txt, .hero-serif { color: var(--rouge, #e5223f); }

/* ---------------------------------------------------------------
   SCANNABLE PROSE (low-attention / ADHD friendly)
   One idea per line, colored tick, bolded hook that carries the gist
   even if nobody reads the rest of the line.
   --------------------------------------------------------------- */
.ls-scan { list-style: none; margin: 0.3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.ls-scan li {
  position: relative; padding-left: 1.35rem;
  font-size: 0.98rem; line-height: 1.5; color: rgba(246,239,226, 0.66);
}
.ls-scan li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold, #f2b233), var(--rouge, #e5223f));
  box-shadow: 0 0 12px rgba(229,34,63, 0.5);
}
.ls-scan strong { color: #fff; font-weight: 800; }
.ls-scan a { font-weight: 700; }
@media (max-width: 640px) { .ls-scan li { font-size: 1rem; } }

/* ---------------------------------------------------------------
   4) DE-BRICK THE BIG HEADINGS ON MOBILE
   Anton all-caps at small widths reads as a solid block; give it
   air (line-height + tracking) and cap the size a little harder.
   --------------------------------------------------------------- */
@media (max-width: 640px) {
  .wrap h2, .ls-sec-head h2, .feat-h2, .show-h2, .cta-h2 {
    font-size: clamp(32px, 8.8vw, 54px) !important;
    line-height: 0.98 !important; letter-spacing: -0.01em !important;
  }
  .ls-disp-line { font-size: clamp(36px, 11vw, 60px) !important; line-height: 1 !important; }
  .lq-hook-text { font-size: clamp(26px, 7vw, 42px) !important; line-height: 1.06 !important; }
  .lq-lanes-list a { font-size: clamp(30px, 9vw, 56px) !important; }
}