/* Da Angelo — Italian LED Architecture
   Thin illuminated lines · precise grid · Milan atelier aesthetic */

:root {
  --led-cream: rgba(247, 245, 241, 0.55);
  --led-cream-bright: rgba(247, 245, 241, 0.85);
  --led-glow-cream: 0 0 8px rgba(247, 245, 241, 0.45), 0 0 20px rgba(247, 245, 241, 0.18);
  --led-glow-tri: 0 0 6px rgba(0, 146, 70, 0.35), 0 0 12px rgba(206, 43, 55, 0.25);
  --led-pulse: ledPulse 3.5s ease-in-out infinite;
}

@keyframes ledPulse {
  0%, 100% { opacity: 0.72; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.15); }
}

@keyframes ledScan {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── LED line primitives ── */
.led-line {
  display: block;
  height: 1px;
  border: none;
  margin: 0;
  background: var(--led-cream);
  box-shadow: var(--led-glow-cream);
}

.led-line--tricolore {
  height: 2px;
  background: linear-gradient(90deg,
    var(--italy-green) 0%, var(--italy-green) 33.33%,
    var(--italy-white) 33.33%, var(--italy-white) 66.66%,
    var(--italy-red) 66.66%, var(--italy-red) 100%);
  box-shadow: var(--led-glow-tri), 0 0 24px rgba(247, 245, 241, 0.12);
  animation: var(--led-pulse);
}

.led-line--gold {
  background: linear-gradient(90deg, transparent, var(--led-cream-bright) 20%, var(--led-cream-bright) 80%, transparent);
  animation: var(--led-pulse);
}

.led-line--wide {
  width: 100%;
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
}

.led-divider {
  padding: 0;
  margin: 0;
  border: none;
  position: relative;
  z-index: 2;
}

.led-divider .wrap {
  padding: 0;
}

/* ── Section left-edge LED accent ── */
.section-led {
  position: relative;
}

.section-led::before {
  content: '';
  position: absolute;
  top: clamp(2rem, 5vw, 3.5rem);
  left: max(calc((100vw - var(--wrap)) / 2 - 12px), 4vw);
  width: 2px;
  height: clamp(48px, 8vw, 72px);
  background: linear-gradient(180deg, var(--italy-green), var(--accent2) 45%, var(--italy-red));
  box-shadow: var(--led-glow-tri), 0 0 16px rgba(247, 245, 241, 0.2);
  border-radius: 1px;
  animation: var(--led-pulse);
  pointer-events: none;
  z-index: 0;
}

.section-led > .wrap,
.section-led > .wrap > * {
  position: relative;
  z-index: 1;
}

/* ── Eyebrow with LED tricolore strip above ── */
.eyebrow--led {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding-top: 0.15rem;
}

.eyebrow--led::before {
  content: '';
  display: block;
  width: 42px;
  height: 2px;
  background: linear-gradient(90deg, var(--italy-green), var(--accent2), var(--italy-red));
  box-shadow: var(--led-glow-tri);
  border-radius: 1px;
  animation: var(--led-pulse);
}

/* ── Section titles — LED underline upgrade ── */
.section-title::after {
  height: 1px;
  width: 56px;
  margin-top: 0.75rem;
  background: linear-gradient(90deg, var(--italy-green), var(--accent2) 50%, var(--italy-red));
  box-shadow: var(--led-glow-tri), 0 0 12px rgba(247, 245, 241, 0.25);
  animation: var(--led-pulse);
}

.section-title--center::after {
  margin-left: auto;
  margin-right: auto;
}

/* ── Corner bracket LED frames ── */
.led-corners {
  position: relative;
}

.led-corners::before,
.led-corners::after,
.led-corners > .led-corner-bl,
.led-corners > .led-corner-br {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 4;
}

.led-corners::before {
  top: -1px; left: -1px;
  border-top: 1px solid var(--led-cream-bright);
  border-left: 1px solid var(--led-cream-bright);
  box-shadow: -2px -2px 12px rgba(247, 245, 241, 0.35);
}

.led-corners::after {
  top: -1px; right: -1px;
  border-top: 1px solid var(--led-cream-bright);
  border-right: 1px solid var(--led-cream-bright);
  box-shadow: 2px -2px 12px rgba(247, 245, 241, 0.35);
}

.led-corners > .led-corner-bl {
  bottom: -1px; left: -1px;
  border-bottom: 1px solid var(--led-cream-bright);
  border-left: 1px solid var(--led-cream-bright);
  box-shadow: -2px 2px 12px rgba(247, 245, 241, 0.35);
}

.led-corners > .led-corner-br {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid var(--led-cream-bright);
  border-right: 1px solid var(--led-cream-bright);
  box-shadow: 2px 2px 12px rgba(247, 245, 241, 0.35);
}

/* ── Glass rim lighting ── */
.glass-card,
.glass-frame {
  position: relative;
  border-color: rgba(247, 245, 241, 0.22) !important;
  box-shadow:
    0 0 0 1px rgba(247, 245, 241, 0.06) inset,
    0 0 24px rgba(247, 245, 241, 0.04),
    0 24px 60px rgba(0, 0, 0, 0.4) !important;
}

.glass-card::before,
.glass-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(0, 146, 70, 0.35) 0%,
    rgba(247, 245, 241, 0.5) 35%,
    rgba(247, 240, 228, 0.15) 50%,
    rgba(247, 245, 241, 0.5) 65%,
    rgba(206, 43, 55, 0.35) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: 0.65;
  animation: var(--led-pulse);
}

/* ── Header / Nav LED underlines ── */
.header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 5%,
    rgba(0, 146, 70, 0.4) 20%,
    rgba(247, 245, 241, 0.55) 50%,
    rgba(206, 43, 55, 0.4) 80%,
    transparent 95%);
  box-shadow: 0 0 12px rgba(247, 245, 241, 0.15);
  opacity: 0;
  transition: opacity 0.35s;
}

.header.solid::after {
  opacity: 1;
}

.nav--guest a:not(.nav-cta),
.nav--guest .nav-link-btn {
  position: relative;
  padding-bottom: 4px;
}

.nav--guest a:not(.nav-cta)::after,
.nav--guest .nav-link-btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--italy-green), var(--accent2), var(--italy-red));
  box-shadow: 0 0 8px rgba(247, 245, 241, 0.4);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav--guest a:not(.nav-cta):hover::after,
.nav--guest .nav-link-btn:hover::after {
  transform: scaleX(1);
}

.nav--guest .nav-cta {
  box-shadow: 0 4px 14px rgba(247, 245, 241, 0.22), 0 0 0 1px rgba(247, 245, 241, 0.25) inset !important;
}

/* ── Hero — Italian professional ── */
.hero {
  border-bottom: 1px solid rgba(247, 245, 241, 0.12);
}

.hero-copy {
  position: relative;
}

.hero-copy::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1.25rem;
  width: 1px;
  height: 100%;
  min-height: 280px;
  background: linear-gradient(180deg, transparent, var(--accent2) 15%, var(--accent2) 85%, transparent);
  box-shadow: 0 0 10px rgba(247, 245, 241, 0.35);
  opacity: 0.7;
}

.hero-copy .pill--glow {
  border-color: rgba(247, 245, 241, 0.4);
  box-shadow: 0 0 16px rgba(247, 245, 241, 0.12), inset 0 0 12px rgba(247, 245, 241, 0.04);
}

.hero-welcome {
  position: relative;
  display: inline-block;
  padding-bottom: 0.35rem;
}

.hero-welcome::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--italy-green), var(--accent2), var(--italy-red));
  box-shadow: var(--led-glow-tri);
  animation: var(--led-pulse);
}

.hero-badge {
  border-color: rgba(247, 245, 241, 0.18) !important;
  box-shadow: 0 0 0 1px rgba(247, 245, 241, 0.04) inset;
}

.hero-badge:hover {
  border-color: rgba(247, 245, 241, 0.42) !important;
  box-shadow: 0 0 20px rgba(247, 245, 241, 0.1), 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

.hero-shot {
  box-shadow:
    0 0 0 1px rgba(247, 245, 241, 0.15),
    0 0 40px rgba(247, 245, 241, 0.08),
    0 32px 80px rgba(0, 0, 0, 0.5) !important;
}

.hero-shot-glow {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(0, 146, 70, 0.12) 0%,
    transparent 30%,
    rgba(247, 245, 241, 0.15) 50%,
    transparent 70%,
    rgba(206, 43, 55, 0.1) 100%);
  pointer-events: none;
  z-index: 0;
  animation: var(--led-pulse);
}

.shot-tag {
  border: 1px solid rgba(247, 245, 241, 0.35);
  box-shadow: 0 0 12px rgba(247, 245, 241, 0.2);
}

/* Marquee LED strip — hairlines only (flag borders killed in italian-viva) */
.marquee {
  border-top: 1px solid rgba(247, 245, 241, 0.14);
  border-bottom: 1px solid rgba(247, 245, 241, 0.1);
  box-shadow: none;
}

.marquee::before {
  display: none;
}

/* ── Trust bar LED grid ── */
.trust-bar {
  border-top: 1px solid rgba(247, 245, 241, 0.2) !important;
  border-bottom: 1px solid rgba(247, 245, 241, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(247, 245, 241, 0.08), inset 0 -1px 0 rgba(247, 245, 241, 0.08);
}

.trust-stat {
  border-right-color: rgba(247, 245, 241, 0.14) !important;
}

/* ── Cards — LED rim on hover ── */
.da-claim,
.da-guest-pillar,
.community-card,
.events-card,
.world-card,
.experience-step,
.rooms-card {
  border-color: rgba(247, 245, 241, 0.14) !important;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s !important;
}

.da-claim:hover,
.da-guest-pillar:hover,
.community-card:hover,
.events-card:hover,
.world-card:hover,
.experience-step:hover,
.rooms-card:hover {
  border-color: rgba(247, 245, 241, 0.38) !important;
  box-shadow:
    0 0 0 1px rgba(247, 245, 241, 0.08),
    0 0 24px rgba(247, 245, 241, 0.06),
    0 20px 48px rgba(0, 0, 0, 0.35) !important;
}

/* ── Footer LED divider ── */
.footer {
  border-top: none !important;
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--wrap), 92vw);
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--italy-green) 15%,
    var(--accent2) 50%,
    var(--italy-red) 85%,
    transparent);
  box-shadow: var(--led-glow-tri), 0 0 32px rgba(247, 245, 241, 0.15);
  animation: var(--led-pulse);
}

.footer-bottom {
  border-top: 1px solid rgba(247, 245, 241, 0.12);
  margin-top: 2rem;
  padding-top: 1.25rem;
}

.footer-italy i {
  box-shadow: 0 0 6px currentColor;
}

.footer-italy i:nth-child(1) { box-shadow: 0 0 8px rgba(0, 146, 70, 0.5); }
.footer-italy i:nth-child(2) { box-shadow: 0 0 6px rgba(255, 255, 255, 0.3); }
.footer-italy i:nth-child(3) { box-shadow: 0 0 8px rgba(206, 43, 55, 0.45); }

/* ── Host strip — quiet tricolor hairline (no LED pulse) ── */
.ai-concierge__inner::before {
  height: 2px !important;
  box-shadow: none !important;
  animation: none !important;
  background: linear-gradient(90deg, #009246 0 32%, #f5ede0 32% 68%, #ce2b37 68% 100%) !important;
  opacity: 0.85;
}

/* ── Sticky CTA LED rim ── */
.sticky-cta {
  border-top: 1px solid rgba(247, 245, 241, 0.2);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(247, 245, 241, 0.1);
}

/* Lounge live board — cream LED status (brand lock, no neon mint) */
.lounge-ui__live {
  background: rgba(0, 146, 70, 0.14) !important;
  border-color: rgba(0, 146, 70, 0.4) !important;
  color: #f7f5f1 !important;
}
.lounge-ui__headline.is-all-free { color: #009246 !important; }
.lounge-ui__headline.is-partial { color: #f7f5f1 !important; }
.lounge-ui__headline.is-full { color: #ce2b37 !important; }
.lounge-ui--web .lu-group {
  background: #0a0a0a !important;
  border-color: rgba(247, 245, 241, 0.12) !important;
  box-shadow: none !important;
}
.lu-group__title { color: #f7f5f1 !important; }

@media (max-width: 768px) {
  .section-led::before { display: none; }
  .hero-copy::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .led-line--tricolore,
  .led-line--gold,
  .section-title::after,
  .section-led::before,
  .eyebrow--led::before,
  .hero-welcome::after,
  .footer::before,
  .glass-card::before,
  .glass-frame::before,
  .hero-shot-glow,
  .marquee::before {
    animation: none !important;
  }
}