/* ============================================================
 * ELITE PRIMITIVES — compartido por modelos 11-15
 * Glass, magnetic, kinetic type, chrome text, tilt, dyn island
 * ============================================================ */

/* --- Reduced motion: desactivar animaciones pesadas --- */
@media (prefers-reduced-motion: reduce) {
  .glass-card, .magnetic-btn, .text-kinetic, .text-chrome,
  .tilt-3d, .dyn-island-base, .aurora-bg {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
 * GLASS CARD / GLASS BUTTON
 * ============================================================ */
.glass-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--immo-radius, 20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}
.glass-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
  border-radius: inherit;
}

.glass-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.6rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.2),
              box-shadow .25s ease,
              background .25s ease;
}
.glass-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.glass-btn--primary {
  background: linear-gradient(135deg,
    rgba(var(--immo-primary-rgb, 139, 92, 246), 0.85),
    rgba(var(--immo-primary-rgb, 139, 92, 246), 0.65));
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* Fallback sin backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
  .glass-card, .glass-btn {
    background: rgba(20, 20, 30, 0.85);
  }
}

/* ============================================================
 * MAGNETIC BUTTON (wrapper para JS)
 * ============================================================ */
.magnetic-btn {
  display: inline-block;
  will-change: transform;
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.2);
}
.magnetic-btn__inner {
  display: inline-block;
  will-change: transform;
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.2);
}

/* ============================================================
 * KINETIC TYPOGRAPHY
 * ============================================================ */
.text-kinetic {
  display: inline-block;
  overflow: hidden;
}
.text-kinetic .char {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}
.text-kinetic.is-ready .char {
  animation: kinetic-reveal .9s cubic-bezier(.2, .9, .3, 1) forwards;
  animation-delay: calc(var(--char-i, 0) * 0.03s);
}
@keyframes kinetic-reveal {
  to { transform: translateY(0); }
}

/* ============================================================
 * CHROME TEXT
 * ============================================================ */
.text-chrome {
  background: linear-gradient(
    110deg,
    #c0c0c0 0%, #ffffff 20%, #a8a8a8 40%,
    #f5f5f5 55%, #808080 70%, #ffffff 85%, #c0c0c0 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: chrome-shimmer 6s linear infinite;
}
@keyframes chrome-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ============================================================
 * AURORA BG — 4 radial gradients apilados animados
 * ============================================================ */
.aurora-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.aurora-bg::before {
  content: '';
  position: absolute; inset: -20%;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 30%, rgba(139, 92, 246, .55), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(6, 182, 212, .45), transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(236, 72, 153, .4), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(59, 130, 246, .35), transparent 50%);
  filter: blur(60px) saturate(140%);
  animation: aurora-flow 22s ease-in-out infinite alternate;
  will-change: transform, background-position;
}
@keyframes aurora-flow {
  0%   { transform: translate(0, 0) rotate(0deg)   scale(1); }
  33%  { transform: translate(3%, -4%) rotate(5deg)  scale(1.08); }
  66%  { transform: translate(-2%, 3%) rotate(-3deg) scale(.95); }
  100% { transform: translate(2%, 2%)  rotate(2deg)  scale(1.05); }
}

/* ============================================================
 * 3D TILT
 * ============================================================ */
.tilt-3d {
  transform-style: preserve-3d;
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.2);
  will-change: transform;
}
.tilt-3d > * {
  transform: translateZ(20px);
}

/* ============================================================
 * DYNAMIC ISLAND (base compartida, cada modelo la tematiza)
 * ============================================================ */
.dyn-island-base {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 48px;
  padding: 0 1.25rem;
  border-radius: 999px;
  background: rgba(10, 10, 15, 0.78);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: .92rem;
  letter-spacing: .01em;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    height .45s cubic-bezier(.2, .9, .3, 1.2),
    max-width .45s cubic-bezier(.2, .9, .3, 1.2),
    border-radius .45s ease,
    background .3s ease;
  max-width: min(92vw, 760px);
  overflow: hidden;
}
.dyn-island-base.is-expanded {
  height: 64px;
  max-width: min(96vw, 920px);
}
.dyn-island-base .di-brand {
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: .5rem;
}
.dyn-island-base .di-spy {
  opacity: .7;
  font-size: .85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-align: center;
}
.dyn-island-base .di-nav {
  display: flex; gap: .25rem;
  list-style: none; margin: 0; padding: 0;
}
.dyn-island-base .di-nav a {
  color: #fff;
  text-decoration: none;
  padding: .4rem .75rem;
  border-radius: 999px;
  font-size: .88rem;
  opacity: .75;
  transition: background .2s, opacity .2s;
}
.dyn-island-base .di-nav a:hover,
.dyn-island-base .di-nav a.is-active {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}
.dyn-island-base .di-cta {
  flex-shrink: 0;
}

/* Mobile: colapsa a dot + menú off-canvas */
@media (max-width: 640px) {
  .dyn-island-base {
    height: 44px;
    padding: 0 .9rem;
    gap: .5rem;
    font-size: .85rem;
  }
  .dyn-island-base .di-nav { display: none; }
  .dyn-island-base .di-spy { font-size: .75rem; }
}

/* Scroll spy dot/line indicator */
.di-indicator {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--immo-primary, #8B5CF6);
  box-shadow: 0 0 12px currentColor;
  animation: di-pulse 2.4s ease-in-out infinite;
}
@keyframes di-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: .6; }
}

/* ============================================================
 * PILL BOUNCE (hover para dyn island neobrutalist)
 * ============================================================ */
@keyframes pill-bounce {
  0%   { transform: translateX(-50%) translateY(0); }
  50%  { transform: translateX(-50%) translateY(-6px); }
  100% { transform: translateX(-50%) translateY(0); }
}

/* ============================================================
 * CUSTOM CURSOR (opcional, JS lo activa)
 * ============================================================ */
.elite-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 20px; height: 20px;
  border: 1.5px solid var(--immo-primary, #8B5CF6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .25s, height .25s, background .25s, border-color .25s;
  mix-blend-mode: difference;
  will-change: transform;
}
.elite-cursor.is-hover {
  width: 48px; height: 48px;
  background: rgba(255, 255, 255, 0.15);
}
@media (hover: none), (pointer: coarse) {
  .elite-cursor { display: none !important; }
}

/* ============================================================
 * SCROLL PROGRESS BAR
 * ============================================================ */
.elite-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg,
    var(--immo-primary, #8B5CF6),
    var(--immo-secondary, #06B6D4));
  z-index: 1040;
  will-change: width;
  box-shadow: 0 0 8px rgba(139, 92, 246, .6);
}

/* ============================================================
 * SECTION FADE-UP (scroll-driven via GSAP / intersection)
 * ============================================================ */
.elite-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .9, .3, 1);
  will-change: opacity, transform;
}
.elite-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
 * BENTO GRID (usado por neobrutalist y editorial)
 * ============================================================ */
.bento-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(160px, auto);
}
.bento-grid > .bento-xl { grid-column: span 4; grid-row: span 2; }
.bento-grid > .bento-lg { grid-column: span 3; }
.bento-grid > .bento-md { grid-column: span 2; }
.bento-grid > .bento-sm { grid-column: span 2; }
@media (max-width: 768px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-grid > * { grid-column: span 2 !important; grid-row: auto !important; }
}

/* ============================================================
 * VIDEO / KENBURNS HERO BACKGROUND — compartido 11-18
 * ============================================================ */

.elite-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.elite-hero-media video,
.elite-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.elite-hero-media .elite-kenburns {
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  animation: elite-kenburns 22s ease-in-out infinite alternate;
}
@keyframes elite-kenburns {
  from { transform: scale(1.0) translate(0, 0); }
  to   { transform: scale(1.09) translate(-2%, -1%); }
}
.elite-hero-media__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Content must be z-index > 1 when elite-hero-media is used */
.elite-hero-content { position: relative; z-index: 2; }