// chrome.jsx — Y2K visual primitives: chrome orbs, iridescent blobs, stars, stickers
const { useRef: __cr, useEffect: __ce, useState: __cs, useMemo: __cm } = React;

/* ════════════════════════════════════════════════════════
   CHROME ORB
   The signature element: a liquid metal 3D sphere
   ════════════════════════════════════════════════════════ */
function ChromeOrb({ size = 320, hue = 0, mouse, scrollOffset = 0, style = {}, kind = 'chrome' }) {
  const ref = __cr(null);
  const [rot, setRot] = __cs({ x: 0, y: 0 });

  __ce(() => {
    let raf;
    let t = 0;
    const tick = () => {
      t += 0.4;
      if (mouse) {
        setRot({
          x: (mouse.y - 0.5) * -30 + Math.sin(t * 0.01) * 4,
          y: (mouse.x - 0.5) * 40 + t * 0.3,
        });
      } else {
        setRot({ x: Math.sin(t * 0.012) * 8, y: t * 0.2 });
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [mouse]);

  const surfaces = {
    chrome: {
      conic: `conic-gradient(from ${rot.y}deg at 50% 50%,
        #1a1a24 0deg,
        #c8c4d8 25deg,
        #f8f4ff 60deg,
        #e8e0f0 90deg,
        #4a4458 130deg,
        #18141e 160deg,
        #8a8498 200deg,
        #f8f4ff 240deg,
        #b8b0c8 280deg,
        #2c2638 320deg,
        #1a1a24 360deg)`,
      glow: 'rgba(200, 200, 220, 0.4)',
    },
    iridescent: {
      conic: `conic-gradient(from ${rot.y}deg at 50% 50%,
        #FF3EA5 0deg,
        #9D5BFF 45deg,
        #4361FF 90deg,
        #2DD4FF 135deg,
        #C8FF3E 180deg,
        #FFD93E 225deg,
        #FF6B1A 270deg,
        #FF3EA5 315deg,
        #FF3EA5 360deg)`,
      glow: 'rgba(255, 100, 200, 0.6)',
    },
    warm: {
      conic: `conic-gradient(from ${rot.y}deg at 50% 50%,
        #3a2820 0deg,
        #d9b8a0 45deg,
        #fff5e8 90deg,
        #f0d4b8 130deg,
        #6b4838 180deg,
        #b08568 220deg,
        #fff5e8 270deg,
        #d9b8a0 315deg,
        #3a2820 360deg)`,
      glow: 'rgba(255, 180, 130, 0.5)',
    },
    azure: {
      conic: `conic-gradient(from ${rot.y}deg at 50% 50%,
        #0a1a3a 0deg,
        #4361FF 45deg,
        #b8d0ff 90deg,
        #f0f8ff 130deg,
        #2DD4FF 180deg,
        #b8eeff 220deg,
        #4361FF 270deg,
        #0a1a3a 315deg,
        #0a1a3a 360deg)`,
      glow: 'rgba(67, 97, 255, 0.5)',
    },
    lime: {
      conic: `conic-gradient(from ${rot.y}deg at 50% 50%,
        #1a2a0a 0deg,
        #C8FF3E 45deg,
        #f0ffb8 90deg,
        #fff8b8 130deg,
        #88c020 180deg,
        #d4f060 220deg,
        #C8FF3E 270deg,
        #1a2a0a 315deg,
        #1a2a0a 360deg)`,
      glow: 'rgba(200, 255, 60, 0.5)',
    },
  };

  const s = surfaces[kind] || surfaces.chrome;

  return (
    <div ref={ref} style={{
      width: size, height: size, position: 'relative',
      transform: `translate3d(${(mouse?.x ?? 0.5 - 0.5) * 30}px, ${scrollOffset}px, 0)`,
      ...style,
    }}>
      {/* Outer glow */}
      <div style={{
        position: 'absolute', inset: -size * 0.4, borderRadius: '50%',
        background: `radial-gradient(circle, ${s.glow}, transparent 65%)`,
        filter: 'blur(40px)',
        opacity: 0.9,
      }} />
      {/* Main orb */}
      <div style={{
        position: 'absolute', inset: 0, borderRadius: '50%',
        background: s.conic,
        boxShadow: `
          inset -${size * 0.08}px -${size * 0.08}px ${size * 0.2}px rgba(0,0,0,0.45),
          inset ${size * 0.05}px ${size * 0.05}px ${size * 0.15}px rgba(255,255,255,0.5),
          0 ${size * 0.1}px ${size * 0.25}px rgba(0,0,0,0.35)`,
        transform: `rotate3d(1, 0, 0, ${rot.x}deg)`,
        transition: 'transform 0.3s ease-out',
      }} />
      {/* Specular highlight 1 */}
      <div style={{
        position: 'absolute',
        left: '15%', top: '12%',
        width: '40%', height: '30%',
        borderRadius: '50%',
        background: 'radial-gradient(ellipse, rgba(255,255,255,0.85), transparent 70%)',
        filter: 'blur(8px)',
        pointerEvents: 'none',
      }} />
      {/* Specular highlight 2 — small bright */}
      <div style={{
        position: 'absolute',
        left: '22%', top: '18%',
        width: '14%', height: '10%',
        borderRadius: '50%',
        background: 'rgba(255,255,255,0.95)',
        filter: 'blur(2px)',
        pointerEvents: 'none',
      }} />
      {/* Bottom shadow rim */}
      <div style={{
        position: 'absolute',
        bottom: 0, left: '10%', width: '80%', height: 10,
        background: 'radial-gradient(ellipse, rgba(0,0,0,0.3), transparent 70%)',
        filter: 'blur(6px)',
        transform: 'translateY(20px)',
      }} />
    </div>
  );
}

/* ════════════════════════════════════════════════════════
   IRIDESCENT BLOB — organic shape with hue-shift fill
   ════════════════════════════════════════════════════════ */
function IridescentBlob({ size = 200, style = {}, hue = 0 }) {
  // Asymmetric organic borderRadius
  const [phase, setPhase] = __cs(0);
  __ce(() => {
    let raf;
    let t = 0;
    const tick = () => { t += 0.5; setPhase(t); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);
  const r1 = 50 + Math.sin(phase * 0.02) * 12;
  const r2 = 50 - Math.sin(phase * 0.02) * 12;
  const r3 = 50 + Math.cos(phase * 0.018) * 14;
  const r4 = 50 - Math.cos(phase * 0.018) * 14;

  return (
    <div style={{
      width: size, height: size, position: 'relative', ...style
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        borderRadius: `${r1}% ${r2}% ${r3}% ${r4}% / ${r3}% ${r4}% ${r1}% ${r2}%`,
        background: `conic-gradient(from ${phase + hue}deg at 50% 50%,
          #FF3EA5, #9D5BFF, #4361FF, #2DD4FF, #C8FF3E, #FFD93E, #FF6B1A, #FF3EA5)`,
        filter: 'saturate(1.3) blur(0.5px)',
        boxShadow: 'inset 0 -20px 40px rgba(0,0,0,0.2), inset 0 20px 40px rgba(255,255,255,0.4)',
        transition: 'border-radius 1s ease-out',
      }} />
      {/* Highlight */}
      <div style={{
        position: 'absolute', left: '20%', top: '15%',
        width: '40%', height: '30%', borderRadius: '50%',
        background: 'radial-gradient(ellipse, rgba(255,255,255,0.7), transparent 70%)',
        filter: 'blur(6px)',
      }} />
    </div>
  );
}

/* ════════════════════════════════════════════════════════
   ROTATING STICKER (Y2K badge)
   ════════════════════════════════════════════════════════ */
function ChromeSticker({ text, size = 160, color = 'lime' }) {
  // Generate text along a circle
  const chars = text.split('');
  const angleStep = 360 / chars.length;
  return (
    <div style={{
      width: size, height: size, position: 'relative',
    }} className="sticker-spin">
      <svg viewBox="0 0 200 200" style={{ width: '100%', height: '100%' }}>
        <defs>
          <path id={`tp-${text.replace(/\s+/g, '')}`} d="M 100,100 m -75,0 a 75,75 0 1,1 150,0 a 75,75 0 1,1 -150,0" />
        </defs>
        <circle cx="100" cy="100" r="92" fill="var(--ink)" />
        <circle cx="100" cy="100" r="58" fill="var(--bg)" />
        <text fontFamily="var(--font-mono)" fontSize="14" fontWeight="600" letterSpacing="2" fill="var(--bg)">
          <textPath href={`#tp-${text.replace(/\s+/g, '')}`}>{text + ' · ' + text + ' · '}</textPath>
        </text>
        <circle cx="100" cy="100" r="22" fill={`var(--${color})`} />
      </svg>
    </div>
  );
}

/* ════════════════════════════════════════════════════════
   STARBURST — classic Y2K star
   ════════════════════════════════════════════════════════ */
function Star({ size = 40, color, style = {} }) {
  return (
    <svg viewBox="0 0 100 100" width={size} height={size} style={style}>
      <path d="M50,5 L58,42 L95,50 L58,58 L50,95 L42,58 L5,50 L42,42 Z"
            fill={color || 'currentColor'} />
    </svg>
  );
}

/* ════════════════════════════════════════════════════════
   HOLO CARD — iridescent border + glassy fill
   ════════════════════════════════════════════════════════ */
function HoloCard({ children, style = {}, className = '' }) {
  return (
    <div className={className} style={{
      position: 'relative', borderRadius: 24, overflow: 'hidden',
      padding: 2, background: 'var(--iridescent)', backgroundSize: '200% 200%',
      animation: 'iridShift 8s linear infinite',
      ...style
    }}>
      <div style={{
        background: 'var(--paper)', borderRadius: 22, height: '100%',
        position: 'relative', zIndex: 1
      }}>
        {children}
      </div>
    </div>
  );
}

/* ════════════════════════════════════════════════════════
   3D MORPHING SHAPE — different per service
   ════════════════════════════════════════════════════════ */
function MorphShape({ kind = 'sphere', size = 200, mouse, hue = 0 }) {
  const [t, setT] = __cs(0);
  __ce(() => {
    let raf;
    let n = 0;
    const tick = () => { n += 0.5; setT(n); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  if (kind === 'sphere') {
    return <ChromeOrb size={size} mouse={mouse} kind="iridescent" />;
  }
  if (kind === 'torus') {
    return (
      <div style={{
        width: size, height: size, position: 'relative',
        transformStyle: 'preserve-3d', perspective: 800,
        transform: `rotateX(${50 + Math.sin(t * 0.01) * 10}deg) rotateZ(${t * 0.5}deg)`
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          borderRadius: '50%',
          background: 'var(--iridescent)',
          backgroundSize: '200% 200%',
          animation: 'iridShift 6s linear infinite',
          mask: `radial-gradient(circle, transparent 30%, black 32%, black 50%, transparent 52%)`,
          WebkitMask: `radial-gradient(circle, transparent 30%, black 32%, black 50%, transparent 52%)`,
          filter: 'saturate(1.4)',
          boxShadow: '0 30px 60px rgba(0,0,0,0.2)'
        }} />
      </div>
    );
  }
  if (kind === 'cube') {
    return (
      <div style={{
        width: size, height: size, position: 'relative',
        transformStyle: 'preserve-3d', perspective: 800,
        transform: `rotateX(${30 + Math.sin(t * 0.008) * 10}deg) rotateY(${t * 0.4}deg)`
      }}>
        {['front', 'back', 'right', 'left', 'top', 'bottom'].map((face, i) => {
          const half = size / 2;
          const transforms = {
            front: `translateZ(${half}px)`,
            back: `rotateY(180deg) translateZ(${half}px)`,
            right: `rotateY(90deg) translateZ(${half}px)`,
            left: `rotateY(-90deg) translateZ(${half}px)`,
            top: `rotateX(90deg) translateZ(${half}px)`,
            bottom: `rotateX(-90deg) translateZ(${half}px)`,
          };
          return (
            <div key={face} style={{
              position: 'absolute', inset: 0,
              transform: transforms[face],
              background: `linear-gradient(${i * 60}deg, #FF3EA5, #4361FF, #2DD4FF)`,
              border: '2px solid #1a1a24',
              boxShadow: 'inset 0 0 40px rgba(0,0,0,0.3)',
            }} />
          );
        })}
      </div>
    );
  }
  if (kind === 'blob') {
    return <IridescentBlob size={size} hue={hue} />;
  }
  if (kind === 'cylinder') {
    return (
      <div style={{ width: size, height: size, position: 'relative' }}>
        <div style={{
          position: 'absolute', left: '20%', right: '20%', top: '10%', bottom: '10%',
          background: 'var(--chrome)',
          backgroundSize: '200% 200%',
          animation: 'chromeShift 5s linear infinite',
          borderRadius: '50% / 8%',
          boxShadow: 'inset 0 -30px 60px rgba(0,0,0,0.4), inset 0 30px 60px rgba(255,255,255,0.4)',
          transform: `rotate(${Math.sin(t * 0.01) * 6}deg)`
        }} />
      </div>
    );
  }
  return null;
}

/* ════════════════════════════════════════════════════════
   ASTERISK BADGE — logo principal (versión 05)
   8 brazos negros con núcleo iridiscente que gira suave.
   ════════════════════════════════════════════════════════ */
function AsteriskBadge({ size = 320, spin = true, animateCore = true, style = {}, strokeColor }) {
  const [phase, setPhase] = __cs(0);
  __ce(() => {
    if (!animateCore && !spin) return;
    let raf;
    let t = 0;
    const tick = () => { t += 0.4; setPhase(t); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [spin, animateCore]);

  const stroke = strokeColor || 'var(--ink)';
  const armW = size * 0.085;
  const armL = size * 0.42;
  const coreR = size * 0.13;

  return (
    <div style={{
      width: size, height: size, position: 'relative', display: 'inline-block',
      ...style
    }}>
      <div style={{
        width: '100%', height: '100%', position: 'relative',
        transform: spin ? `rotate(${phase * 0.3}deg)` : 'none',
        transition: 'transform 0.1s linear'
      }}>
        <svg viewBox={`0 0 ${size} ${size}`} width="100%" height="100%"
          style={{ display: 'block', overflow: 'visible' }}>
          {/* 8 brazos: 0°, 45°, 90°, 135° (cada uno cruza por el centro) */}
          {[0, 45, 90, 135].map(deg => (
            <line key={deg}
              x1={size/2} y1={size/2 - armL}
              x2={size/2} y2={size/2 + armL}
              stroke={stroke}
              strokeWidth={armW}
              strokeLinecap="round"
              transform={`rotate(${deg} ${size/2} ${size/2})`}
            />
          ))}
        </svg>
        {/* Núcleo iridiscente */}
        <div style={{
          position: 'absolute',
          left: '50%', top: '50%',
          width: coreR * 2, height: coreR * 2,
          marginLeft: -coreR, marginTop: -coreR,
          borderRadius: '50%',
          background: `conic-gradient(from ${phase}deg at 50% 50%,
            #FF3EA5 0deg, #9D5BFF 45deg, #4361FF 90deg, #2DD4FF 135deg,
            #C8FF3E 180deg, #FFD93E 225deg, #FF6B1A 270deg, #FF3EA5 315deg, #FF3EA5 360deg)`,
          boxShadow: `
            inset -${coreR*0.18}px -${coreR*0.18}px ${coreR*0.5}px rgba(0,0,0,0.35),
            inset ${coreR*0.12}px ${coreR*0.12}px ${coreR*0.4}px rgba(255,255,255,0.6),
            0 0 ${coreR*1.2}px rgba(255,80,180,0.5)`,
          filter: 'saturate(1.2)'
        }} />
        {/* Brillo especular del núcleo */}
        <div style={{
          position: 'absolute',
          left: '50%', top: '50%',
          width: coreR * 0.9, height: coreR * 0.55,
          marginLeft: -coreR * 0.65, marginTop: -coreR * 0.75,
          borderRadius: '50%',
          background: 'radial-gradient(ellipse, rgba(255,255,255,0.85), transparent 70%)',
          filter: 'blur(2px)', pointerEvents: 'none'
        }} />
      </div>
    </div>
  );
}

/* ════════════════════════════════════════════════════════
   ASTERISK MARK — versión compacta (nav / favicon / footer)
   Gira suave por defecto.
   ════════════════════════════════════════════════════════ */
function AsteriskMark({ size = 32, strokeColor, spin = true }) {
  const stroke = strokeColor || 'var(--ink)';
  const sw = size * 0.16;
  const uid = __cm(() => Math.random().toString(36).slice(2, 8), []);
  return (
    <svg viewBox="0 0 40 40" width={size} height={size}
      className={spin ? 'asterisk-spin' : ''}
      style={{ display: 'block', flexShrink: 0 }}>
      <defs>
        <radialGradient id={`amCore-${uid}`} cx="0.35" cy="0.35">
          <stop offset="0%" stopColor="#fff" />
          <stop offset="35%" stopColor="#FF3EA5" />
          <stop offset="70%" stopColor="#9D5BFF" />
          <stop offset="100%" stopColor="#4361FF" />
        </radialGradient>
      </defs>
      {[0, 45, 90, 135].map(deg => (
        <line key={deg}
          x1="20" y1="3.5" x2="20" y2="36.5"
          stroke={stroke} strokeWidth={sw} strokeLinecap="round"
          transform={`rotate(${deg} 20 20)`} />
      ))}
      <circle cx="20" cy="20" r="4.6" fill={`url(#amCore-${uid})`} />
    </svg>
  );
}

/* ════════════════════════════════════════════════════════
   ASTERISK STICKER — asterisco + texto orbitando
   Reemplaza al ChromeSticker. Texto gira alrededor, asterisco
   independiente en el centro con núcleo iridiscente.
   ════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════
   Y2K BADGE — sticker circular giratorio (versión canónica 04)
   Anillo grueso oscuro, texto blanco orbitando, núcleo iridiscente
   ════════════════════════════════════════════════════════ */
function Y2KBadge({ text = 'MULTIPLES · MEDIOS · STUDIO · MMXXVI', size = 180, dark = true, className = '' }) {
  const uid = __cm(() => 'y2k-' + Math.random().toString(36).slice(2, 8), []);

  // Tamaño efectivo según viewport: todo (badge + esfera + halo) escala junto
  const [vw, setVw] = __cs(typeof window !== 'undefined' ? window.innerWidth : 1024);
  __ce(() => {
    const onResize = () => setVw(window.innerWidth);
    window.addEventListener('resize', onResize, { passive: true });
    return () => window.removeEventListener('resize', onResize);
  }, []);
  const effSize =
    vw <= 360 ? Math.min(size, 84) :
    vw <= 480 ? Math.min(size, 100) :
    vw <= 720 ? Math.min(size, 124) :
    size;

  const ring = dark ? '#0E0B14' : '#FFF8EC';
  const ink  = dark ? '#FFF8EC' : '#0E0B14';
  const coreSize = effSize * 0.30; // esfera = 30 % del badge, en todos los tamaños

  // Path circumference: 2π · 78 ≈ 490.088 en viewBox 200×200
  // textLength=490 + lengthAdjust=spacingAndGlyphs estira el texto para
  // cubrir el anillo exactamente UNA vuelta, sin solapado "MULTIPLESMULTIPLES".
  return (
    <div className={`y2k-badge ${className}`}
      style={{ width: effSize, height: effSize, position: 'relative', display: 'inline-block' }}>
      <svg viewBox="0 0 200 200" className="sticker-spin"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <defs>
          <path id={uid} d="M 100,100 m -78,0 a 78,78 0 1,1 156,0 a 78,78 0 1,1 -156,0" />
        </defs>
        <circle cx="100" cy="100" r="96" fill={ring} />
        <circle cx="100" cy="100" r="58" fill="var(--paper)" />
        <text fontFamily="JetBrains Mono, ui-monospace, monospace"
              fontSize="13" fontWeight="600"
              fill={ink} textRendering="geometricPrecision">
          <textPath href={`#${uid}`} startOffset="0"
                    textLength="490" lengthAdjust="spacingAndGlyphs">
            {text}
          </textPath>
        </text>
      </svg>

      {/* Esfera iridiscente al centro */}
      <div style={{
        position: 'absolute',
        left: '50%', top: '50%',
        transform: 'translate(-50%, -50%)',
        width: coreSize, height: coreSize,
        pointerEvents: 'none'
      }}>
        <IridescentSphere size={coreSize} />
      </div>
    </div>
  );
}

/* Esfera iridiscente compacta para el Y2K badge */
function IridescentSphere({ size = 80 }) {
  const [phase, setPhase] = __cs(0);
  __ce(() => {
    let raf; let t = 0;
    const tick = () => { t += 0.6; setPhase(t); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);
  return (
    <div style={{ width: size, height: size, position: 'relative' }}>
      {/* Halo */}
      <div style={{
        position: 'absolute', inset: -size * 0.18, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(255,100,200,0.35), transparent 65%)',
        filter: 'blur(14px)', pointerEvents: 'none'
      }} />
      {/* Esfera */}
      <div style={{
        position: 'absolute', inset: 0, borderRadius: '50%',
        background: `conic-gradient(from ${phase}deg at 50% 50%,
          #FF3EA5 0deg, #9D5BFF 50deg, #4361FF 100deg, #2DD4FF 150deg,
          #C8FF3E 200deg, #FFD93E 250deg, #FF6B1A 300deg, #FF3EA5 360deg)`,
        boxShadow: `
          inset -${size*0.10}px -${size*0.10}px ${size*0.22}px rgba(0,0,0,0.35),
          inset ${size*0.07}px ${size*0.07}px ${size*0.18}px rgba(255,255,255,0.55)`,
        filter: 'saturate(1.15)'
      }} />
      {/* Brillo especular */}
      <div style={{
        position: 'absolute', left: '20%', top: '14%', width: '32%', height: '24%',
        borderRadius: '50%',
        background: 'radial-gradient(ellipse, rgba(255,255,255,0.8), transparent 70%)',
        filter: 'blur(3px)', pointerEvents: 'none'
      }} />
    </div>
  );
}

function AsteriskSticker({ text = 'MULTIMEDIA · STUDIO · 2026 · ', size = 160, strokeColor }) {
  const uid = __cm(() => 'as-' + Math.random().toString(36).slice(2, 8), []);
  const stroke = strokeColor || 'var(--ink)';
  return (
    <div style={{ width: size, height: size, position: 'relative', display: 'inline-block' }}>
      {/* Anillo + texto orbitando (rota) */}
      <svg viewBox="0 0 200 200" className="sticker-spin"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <defs>
          <path id={uid} d="M 100,100 m -82,0 a 82,82 0 1,1 164,0 a 82,82 0 1,1 -164,0" />
        </defs>
        <circle cx="100" cy="100" r="96" fill="none" stroke={stroke} strokeWidth="1.5" />
        <circle cx="100" cy="100" r="60" fill="none" stroke={stroke} strokeWidth="1" strokeDasharray="2 3" opacity="0.4" />
        <text fontFamily="JetBrains Mono, monospace" fontSize="13" fontWeight="600"
              letterSpacing="3.2" fill={stroke}>
          <textPath href={`#${uid}`} startOffset="0">{text + text}</textPath>
        </text>
      </svg>
      {/* Asterisco en el centro (gira independiente) */}
      <div style={{
        position: 'absolute', left: '50%', top: '50%',
        transform: 'translate(-50%, -50%)',
        width: size * 0.46, height: size * 0.46
      }}>
        <AsteriskBadge size={size * 0.46} spin={true} strokeColor={strokeColor} />
      </div>
    </div>
  );
}

/* ════════════════════════════════════════════════════════
   STACKED MASSIVE — wordmark audaz (versión 06)
   "MULTIPLES" condensado negro encima de "medios." cursiva
   degradado azul→tangerine. Decorativo, no clickable.
   ════════════════════════════════════════════════════════ */
function StackedMassive({
  size = 'clamp(80px, 14vw, 240px)',
  align = 'center',
  variant = 'light',     // 'light' (ink sobre cream) | 'dark' (chrome sobre ink)
  animated = true,       // anima el fondo iridiscente detrás
  style = {}
}) {
  const isDark = variant === 'dark';
  const topClass = isDark ? 'chrome-text' : '';
  return (
    <div className="stacked-massive" style={{
      position: 'relative',
      fontFamily: 'var(--font-display)',
      textAlign: align,
      lineHeight: 0.82,
      letterSpacing: '-0.04em',
      ...style
    }}>
      {/* Fondo iridiscente animado sutil */}
      {animated && (
        <div aria-hidden="true" style={{
          position: 'absolute', inset: '-10% -5%',
          background: 'var(--iridescent)',
          backgroundSize: '200% 200%',
          animation: 'iridShift 14s linear infinite',
          opacity: isDark ? 0.18 : 0.12,
          filter: 'blur(60px) saturate(1.2)',
          pointerEvents: 'none', zIndex: 0
        }} />
      )}
      <div className={topClass} style={{
        position: 'relative', zIndex: 1,
        fontSize: size,
        fontWeight: 800,
        fontVariationSettings: '"wdth" 75',
        color: isDark ? undefined : 'var(--ink)',
        textTransform: 'uppercase'
      }}>multiples</div>
      <div style={{
        position: 'relative', zIndex: 1,
        fontSize: `calc(${size} * 0.78)`,
        fontWeight: 700,
        fontStyle: 'italic',
        marginTop: '-0.08em',
        background: 'linear-gradient(95deg, var(--azure) 0%, var(--azure) 38%, var(--tangerine) 62%, var(--tangerine) 100%)',
        WebkitBackgroundClip: 'text',
        backgroundClip: 'text',
        color: 'transparent',
        textTransform: 'lowercase'
      }}>medios.</div>
    </div>
  );
}

Object.assign(window, {
  ChromeOrb, IridescentBlob, ChromeSticker, Star, HoloCard, MorphShape,
  AsteriskBadge, AsteriskMark, AsteriskSticker, StackedMassive,
  Y2KBadge, IridescentSphere
});