/* ==========================================================================
   L2SoulPlay — Intro "Coming soon" (se carga después de style.css)
   ========================================================================== */

.intro {
  min-height: 100vh; min-height: 100svh;
  padding: 84px 0 0;
  justify-content: flex-start;
}

/* Barra superior: idioma */
.intro__top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: flex-end;
  height: 72px; margin: 0 auto;
}
.intro__lang { display: flex; gap: 6px; }
.intro__lang .mobile-lang__btn { background: rgba(10, 7, 4, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

.intro__content { flex: 1 0 auto; justify-content: center; padding-bottom: 36px; }
.intro__logo { width: min(600px, 86vw); }

/* "PRÓXIMAMENTE" con líneas doradas */
.intro__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 4px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(.82rem, 1.6vw, 1.05rem);
  letter-spacing: .5em; padding-left: .5em; text-transform: uppercase;
  color: var(--gold-hi); text-shadow: 0 0 14px rgba(255, 150, 40, .8), 0 2px 4px #000;
}
.intro__eyebrow::before, .intro__eyebrow::after {
  content: ''; width: clamp(34px, 8vw, 90px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-light));
}
.intro__eyebrow::after { background: linear-gradient(90deg, var(--gold-light), transparent); }

.intro__title {
  max-width: 900px; margin-top: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 3vw, 2.15rem); line-height: 1.2; letter-spacing: .02em;
  color: #fbf3df; text-shadow: 0 2px 18px rgba(0, 0, 0, .95), 0 0 28px rgba(255, 150, 40, .25);
}
.intro__title em {
  display: block; margin-top: 4px; font-style: normal; font-size: clamp(2.2rem, 6.4vw, 4.4rem); line-height: 1.05; letter-spacing: .06em;
  background: linear-gradient(180deg, #fff7d1 0%, #ffd56b 30%, #ff9a24 60%, #d9520c 85%, #8a2c00 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 0 14px rgba(255, 130, 30, .75)) drop-shadow(0 2px 0 #2a1103);
  animation: introBurn 2.6s ease-in-out infinite;
}
@keyframes introBurn { 50% { filter: drop-shadow(0 0 24px rgba(255, 150, 30, 1)) drop-shadow(0 2px 0 #2a1103); } }

/* Características: una ventana de Lineage II con slots reales del cliente (assets/img/l2ui) */
.intro__features {
  --sep: rgba(156, 136, 100, .42);
  --sep-v: linear-gradient(180deg, transparent, var(--sep) 25%, var(--sep) 75%, transparent) 0 0 / 1px 100% no-repeat;
  --sep-h: linear-gradient(90deg, transparent, var(--sep) 20%, var(--sep) 80%, transparent) 0 0 / 100% 1px no-repeat;
  position: relative; isolation: isolate; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%; max-width: 880px; margin: 50px 0 0; padding: 16px 18px 16px;
  text-align: left;
}
/* cuerpo y marco de ventana Classic: Windows_DF_Large_Bg_Darker, 9-slice 32 */
.intro__features::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border: 32px solid transparent;
  border-image: url("../img/l2ui/wnd-body-dark.png") 32 fill / 32px stretch;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5));
}
/* filigrana superior: OnScreenMessageWnd_DF_TopDeco */
.intro__features::after {
  content: ''; position: absolute; left: 50%; top: -24px; width: 223px; height: 31px; margin-left: -111.5px;
  /* 31 de 32 filas: la última es sombra y oscurecería la línea bronce del borde */
  background: url("../img/l2ui/crest.png") 0 0 / 223px 32px no-repeat; pointer-events: none;
}
.intro__feature {
  --icon: 40px;
  position: relative; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 12px;
}
.intro__feature + .intro__feature { background: var(--sep-v); }
/* fila seleccionada (ListCtrl_DF_Highlight_Tail), sólo en hover */
.intro__feature::after {
  content: ''; position: absolute; z-index: -1; inset: 5px 6px; opacity: 0;
  background: url("../img/l2ui/list-hl.png") 0 0 / 100% 100% no-repeat;
  transition: opacity .15s ease;
}

/* slot (ItemWindow_DF_SlotBox_Default) + ícono dorado + marco (ItemWindow_DF_Frame) */
.intro__feature-slot {
  position: relative; flex: none; width: calc(var(--icon) + 4px); height: calc(var(--icon) + 4px);
  background: url("../img/l2ui/slot-bg.png") 0 0 / 100% 100% no-repeat;
}
.intro__feature-slot svg {
  position: absolute; left: 50%; top: 50%; width: calc(var(--icon) * .6); height: calc(var(--icon) * .6); transform: translate(-50%, -50%);
  color: var(--gold-hi); filter: drop-shadow(0 0 4px rgba(255, 190, 80, .55));
}
.intro__feature-slot::after {
  content: ''; position: absolute; left: 1px; top: 1px; width: calc(var(--icon) + 2px); height: calc(var(--icon) + 2px);
  background: url("../img/l2ui/slot-frame.png") 0 0 / 100% 100% no-repeat;
}

/* nombre con el color de texto de ventana/tooltip del juego */
.intro__feature strong {
  min-width: 0;
  font: 700 14px/1.25 Tahoma, Verdana, 'Segoe UI', Arial, sans-serif; letter-spacing: 0; text-transform: none;
  color: #ece3c9; text-shadow: 0 1px 1px #000; overflow-wrap: break-word;
  transition: color .15s ease;
}

/* hover L2: marco del slot iluminado (ItemWindow_DF_Frame_Over) + fila resaltada */
@media (hover: hover) {
  .intro__feature:hover::after { opacity: .5; }
  .intro__feature:hover .intro__feature-slot::after { background-image: url("../img/l2ui/slot-frame-over.png"); }
  .intro__feature:hover strong { color: #fff6dc; }
}

/* 2 x 2 en tablets y teléfonos */
@media (max-width: 940px) {
  .intro__features { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; padding: 12px 10px 12px; }
  .intro__feature { justify-content: flex-start; padding: 9px 10px; }
  .intro__feature + .intro__feature { background: none; }
  .intro__feature:nth-child(2) { background: var(--sep-v); }
  .intro__feature:nth-child(3) { background: var(--sep-h); }
  .intro__feature:nth-child(4) { background: var(--sep-v), var(--sep-h); }
}
@media (max-width: 640px) {
  .intro__features { margin-top: 40px; padding-left: 6px; padding-right: 6px; }
  .intro__features::after { top: -17px; width: 168px; height: 24px; margin-left: -84px; background-size: 100% 100%; }
  .intro__feature { --icon: 32px; gap: 7px; padding: 8px 5px; }
  .intro__feature strong { font-size: 13px; }
}
@media (max-width: 360px) {
  .intro__features { padding-left: 5px; padding-right: 5px; }
  .intro__feature { gap: 6px; padding: 8px 4px; }
  .intro__feature strong { font-size: 12px; }
}

/* Llamado a la fan page */
.intro__cta { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.intro__fb svg { width: 22px; height: 22px; }
.intro__note { font-size: 1.02rem; font-style: italic; color: var(--night-muted); text-shadow: 0 1px 6px #000; }

.intro__footer {
  position: relative; z-index: 2; padding: 18px 24px 22px; text-align: center;
  font-family: var(--font-sans); font-size: .74rem; color: rgba(241, 230, 207, .5);
  border-top: 1px solid rgba(232, 196, 112, .16);
}
.intro__legal { margin-top: 4px; font-size: .66rem; color: rgba(241, 230, 207, .36); }

@media (max-width: 640px) {
  .intro { padding-top: 70px; }
  .intro__top { height: 60px; }
  .intro__lang .mobile-lang__btn { padding: 5px 9px; font-size: .72rem; }
  .intro__eyebrow { letter-spacing: .34em; padding-left: .34em; }
  .intro__cta { width: 100%; max-width: 340px; }
  .intro__cta .btn { width: 100%; min-width: 0; padding-left: 1.1rem; padding-right: 1.1rem; white-space: normal; text-align: center; letter-spacing: .1em; }
}