/* Lussyca — intro de marca + logo con brillo recorriendo el wordmark */

/* ── Wrapper reutilizable (header app + landing) — shine sobre PNG ── */
.lussyca-logo-shine {
  position: relative;
  display: inline-block;
  line-height: 0;
  filter: drop-shadow(0 6px 22px rgba(196, 120, 80, .28));
}
.lussyca-logo-shine > img,
.lussyca-logo-shine > svg {
  display: block;
  position: relative;
  z-index: 1;
}
/* Shine layers sobre el PNG legacy (headers con .lussyca-logo-shine + --ls-word) */
.lussyca-logo-shine::before,
.lussyca-logo-shine::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 2;
  pointer-events: none;
  -webkit-mask: var(--ls-word) center / contain no-repeat;
  mask: var(--ls-word) center / contain no-repeat;
}
.lussyca-logo-shine::before {
  background: linear-gradient(
    105deg,
    transparent 32%,
    rgba(255, 210, 190, .55) 44%,
    rgba(255, 252, 245, .90) 50%,
    rgba(255, 210, 190, .5) 56%,
    transparent 68%
  );
  background-size: 320% 100%;
  background-position: 200% 0;
  mix-blend-mode: screen;
  animation: lussyca-shine-loop 4.2s ease-in-out infinite;
}
.lussyca-logo-shine::after {
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(196, 120, 80, .38) 49%,
    rgba(255, 235, 210, .72) 52%,
    transparent 64%
  );
  background-size: 340% 100%;
  background-position: 220% 0;
  mix-blend-mode: soft-light;
  animation: lussyca-shine-loop 4.2s ease-in-out .55s infinite;
}
@keyframes lussyca-shine-loop {
  0%, 18% { background-position: 200% 0; }
  52%      { background-position: -90% 0; }
  100%     { background-position: -90% 0; }
}

/* ── Intro splash ────────────────────────────────────────────────────────── */
#lussyca-intro {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(65% 55% at 50% 38%, rgba(196, 120, 80, .20), transparent 72%),
    radial-gradient(55% 45% at 50% 68%, rgba(139, 92, 46, .10), transparent 70%),
    #07070A;
  opacity: 1;
  transition: opacity .65s ease;
}
#lussyca-intro.lussyca-intro-out {
  opacity: 0;
  pointer-events: none;
}

/* ── Bloque central del intro ─────────────────────────────────────────────── */
.lussyca-intro-logo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  opacity: 0;
  transform: translateY(20px) scale(.93);
  animation: lussyca-rise 1.1s cubic-bezier(.22, 1, .36, 1) .06s forwards;
}

/* ── Halo radial detrás del símbolo ─────────────────────────────────────── */
.lussyca-intro-halo {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 160%;
  height: 140%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(196, 120, 80, .40) 0%,
    rgba(140, 70, 40, .14) 45%,
    transparent 72%);
  animation: lussyca-halo-pulse 2.6s ease-in-out infinite;
  filter: blur(10px);
}

/* ── Símbolo corazón (grande, en intro) ────────────────────────────────── */
.li-symbol-wrap {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: scale(.72);
  animation: lussyca-symbol-in .95s cubic-bezier(.34, 1.56, .64, 1) .14s forwards;
  margin-bottom: 6px;
}
.li-heart {
  display: block;
  width: min(110px, 22vw);
  height: auto;
  filter: drop-shadow(0 8px 28px rgba(196, 120, 80, .45))
          drop-shadow(0 0 48px rgba(196, 120, 80, .18));
  animation: lussyca-heart-breathe 3s ease-in-out 1.2s infinite;
}

/* ── Wordmark inline SVG ─────────────────────────────────────────────────── */
.li-word-wrap {
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: lussyca-word-in .85s ease .42s forwards;
}
.li-wordmark {
  display: block;
  width: min(580px, 88vw);
  height: auto;
  filter: drop-shadow(0 12px 44px rgba(196, 120, 80, .32));
}

/* ── Tagline con reglas ──────────────────────────────────────────────────── */
.li-tag-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  opacity: 0;
  animation: lussyca-word-in .8s ease 1.1s forwards;
}
.li-rule {
  flex: 1;
  height: 0;
  border-top: 0.6px solid rgba(196, 120, 80, .38);
  min-width: 40px;
  max-width: 80px;
}
.li-tag {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247, 240, 232, .50);
  white-space: nowrap;
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes lussyca-rise    { to { opacity: 1; transform: none; } }
@keyframes lussyca-word-in { to { opacity: 1; } }
@keyframes lussyca-symbol-in { to { opacity: 1; transform: scale(1); } }
@keyframes lussyca-heart-breathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 8px 28px rgba(196,120,80,.45)) drop-shadow(0 0 48px rgba(196,120,80,.18)); }
  50%       { transform: scale(1.04); filter: drop-shadow(0 12px 42px rgba(196,120,80,.58)) drop-shadow(0 0 70px rgba(196,120,80,.28)); }
}
@keyframes lussyca-halo-pulse {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.10); }
}

/* ── Logos fijos (headers) ──────────────────────────────────────────────── */
.lussyca-logo-mark  { height: 36px; width: auto; display: block; }
.ln-logo-img        { height: 44px; width: auto; display: block; }
.topnav-logo-img    { height: 32px; width: auto; display: block; }
.wa-brand-wordmark  { height: 28px; width: auto; display: block; }
.gate-wordmark      { height: 34px; width: auto; display: block; }
.ln-header .lussyca-logo-shine {
  filter: drop-shadow(0 4px 16px rgba(196, 120, 80, .28));
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .li-heart   { width: min(88px, 22vw); }
  .li-wordmark { width: min(92vw, 480px); }
  .ln-logo-img { height: 36px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lussyca-intro-logo,
  .li-symbol-wrap,
  .li-word-wrap,
  .li-tag-row,
  .li-heart,
  .lussyca-intro-halo { animation: none !important; opacity: 1 !important; transform: none !important; }
  .lussyca-logo-shine::before,
  .lussyca-logo-shine::after { animation: none !important; opacity: 0 !important; }
}