:root {
    --bg-color: #050505;
    --text-color: #f0f0f0;
    --accent: #ff3333;
}

body, html {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    cursor: none;
    /* BORRAMOS EL scroll-behavior: smooth; QUE ESTABA ACÁ */
}
h1, h2, h3, h4, .font-syne {
    font-family: 'Syne', sans-serif;
}

/* ============================================================
   FLUIDEZ: reveals palabra por palabra + fundido entre secciones
   + parallax de imágenes + magnetismo suave en cards grandes.
   La lógica de disparo vive en main.js; acá solo el soporte visual.
   ============================================================ */

/* Título dividido en palabras: cada palabra vive en una "ventana"
   con overflow oculto, así la palabra entra desde abajo tapada,
   en vez de solo hacer fade (eso es lo que da la sensación de
   que el texto se "arma" en vez de "aparecer"). */
.word-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.08em;
}
.word-inner {
    display: inline-block;
    will-change: transform, opacity;
}

/* Envoltorio inyectado por JS alrededor de imágenes de proyecto
   para poder moverlas en Y sin pelearse con el scale del hover
   (que sigue viviendo en la imagen, no en este wrapper). */
.parallax-wrap {
    position: absolute;
    inset: -10% 0;
    height: 120%;
    width: 100%;
    will-change: transform;
}
.parallax-wrap > img {
    width: 100%;
    height: 100%;
}

/* Frase oculta que se pinta con el cursor (ver PaintRevealText en main.js).
   El wrap tiene que ser inline-block para que el canvas calce justo con
   el tamaño real del texto, no con todo el ancho del contenedor. */
.paint-text-wrap {
    position: relative;
    display: inline-block;
    cursor: none;
}
.paint-text-content {
    transition: color 0.6s ease, letter-spacing 0.6s ease;
}
.paint-text-wrap.paint-text-revealed .paint-text-content {
    color: var(--accent, #ff3333);
    letter-spacing: 0.35em;
}
.paint-text-canvas {
    position: absolute;
    inset: -10px -14px;
    width: calc(100% + 28px);
    height: calc(100% + 20px);
    pointer-events: none;
}
/* Fundido en vez de línea dura entre secciones apiladas.
   La línea de Tailwind (border-white/5) ya es casi invisible al 5%
   de opacidad; lo que realmente cortaba el flujo era el salto brusco
   de fondo. Este degradé lo suaviza sin tocar el border-color (evita
   pelearse con los !important de los temas claros de cada página). */
section.border-t {
    position: relative;
}
section.border-t::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 160px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
    pointer-events: none;
    z-index: 1;
}
.page-view[data-theme="light"] section.border-t::before,
.page-view[data-theme="light-cool"] section.border-t::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), transparent);
}

::-webkit-scrollbar {
    display: none;
}

#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, background-color 0.3s;
    mix-blend-mode: difference;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    color: black;
    text-transform: uppercase;
}

#custom-cursor.hovered {
    width: 80px;
    height: 80px;
    background-color: white;
    mix-blend-mode: normal;
}

#custom-cursor.hovered::after {
    content: "VER";
}

/* botón INICIO */
#custom-cursor.hovered.text-inicio::after {
    content: "INICIO";
}
#custom-cursor.hovered.text-ir::after {
    content: "IR";
}

#custom-cursor.hovered.text-contacto::after {
    content: "CONTACTAR";
}

#custom-cursor.hovered.text-copiar::after {
    content: "COPIAR";
}

/* ---- Traducciones del cursor al inglés ---- */
html[lang="en"] #custom-cursor.hovered::after { content: "VIEW"; }
html[lang="en"] #custom-cursor.hovered.text-inicio::after { content: "HOME"; }
html[lang="en"] #custom-cursor.hovered.text-ir::after { content: "GO"; }
html[lang="en"] #custom-cursor.hovered.text-contacto::after { content: "CONTACT"; }
html[lang="en"] #custom-cursor.hovered.text-copiar::after { content: "COPY"; }

.noise {
    position: fixed;
    top: -20%; left: -20%; width: 140vw; height: 140vh;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.04;
    background: url('https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Dissolve_Noise_Texture.png');
    /* animation: noiseAnim 0.2s infinite; <-- ESTA ES LA LÍNEA QUE TENÉS QUE BORRAR */
    transform: translateZ(0);
    will-change: transform;
}

@keyframes noiseAnim {
    0% { transform: translate(0,0) }
    10% { transform: translate(-5%,-5%) }
    20% { transform: translate(-10%,5%) }
    30% { transform: translate(5%,-10%) }
    40% { transform: translate(-5%,15%) }
    50% { transform: translate(-10%,5%) }
    60% { transform: translate(15%,0) }
    70% { transform: translate(0,10%) }
    80% { transform: translate(-15%,0) }
    90% { transform: translate(10%,5%) }
    100% { transform: translate(5%,0) }
}

.text-outline {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.5);
    transition: color 0.3s, -webkit-text-stroke 0.3s;
}
.text-outline:hover {
    color: white;
    -webkit-text-stroke: 0px;
}

#preloader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-color);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.loader-text {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marqueeScroll 25s linear infinite;
}

.marquee-track span {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 0 1.5rem;
}

.marquee-track span::after {
    content: "•";
    margin-left: 3rem;
    color: var(--accent);
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
    #custom-cursor { display: none; }
    body { cursor: auto; }
    * { scroll-behavior: auto !important; }
}

@media (max-width: 768px) {
    #custom-cursor { display: none; }
    #magnetic-particles { display: none; }
    body { cursor: auto; }
    .horizontal-track { flex-direction: column; width: 100% !important; }
    .horizontal-item { width: 100vw !important; height: auto !important; padding: 2rem 0; }
    .horizontal-container { height: auto !important; }
}

/* ============================================================
   ACORDEÓN DEL MENÚ MOBILE — Audiovisuales / Fotografía
   Arranca cerrado para no tapar el resto de los links de
   navegación; se abre al tocar el link padre.
   ============================================================ */
.mobile-submenu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease;
}
.mobile-submenu.open {
    max-height: 320px;
    opacity: 1;
    margin-top: 0.25rem;
}
.mobile-parent-link.submenu-open .mobile-submenu-icon {
    transform: rotate(180deg);
}

/* ============================================================
   ALTURA DE VIEWPORT EN MOBILE (100dvh en vez de 100vh)
   En mobile, 100vh se calcula sobre la altura MÁXIMA del
   viewport (con la barra del navegador oculta). Cuando la barra
   está visible, esas secciones quedan más altas que la pantalla
   real y el usuario ve una franja negra "vacía" de más al
   scrollear, como si la página siguiera pero no hubiera nada.
   100dvh se ajusta dinámicamente a la altura real visible.
   ============================================================ */
@media (max-width: 768px) {
    #prologo,
    #hero-arte,
    footer#contacto {
        height: 100vh;
        height: 100dvh;
    }
}

/* ============================================================
   NAVEGACIÓN TIPO "PAGE TO PAGE" (SPA)
   Cada .page-view es una "página" completa. Solo la .active
   se ve y ocupa lugar en el documento; el resto queda montado
   (para que las medidas de GSAP/ScrollTrigger sigan siendo
   correctas) pero fuera de flujo e invisible.
   ============================================================ */
#pages-root {
    position: relative;
    width: 100%;
}

.page-view {
    width: 100%;
}

.page-view:not(.active) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    pointer-events: none;
    z-index: -1;
}

.page-view.active {
    position: relative;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

/* Cortina de transición al cambiar de página */
#page-curtain {
    will-change: transform;
}

/* Indicador de página activa en el navbar desktop */
#main-nav { position: relative; }

/* Puntos de navegación lateral */
.page-dot { background-color: transparent; }
.page-dot.active { background-color: #ff3333; border-color: #ff3333 !important; transform: scale(1.3); }
.page-dot:hover { border-color: #ffffff; }

/* ============================================================
   JERARQUÍA DE COLOR POR SECCIÓN
   No todo es fondo negro: Fotografía y Diseño Web usan
   bases claras (distintas entre sí) para separar "making of
   cinematográfico" de "portfolio de piezas". Sobre Mí usa un
   negro cálido para diferenciarse del negro de Audiovisuales.
   ============================================================ */

/* Fotografía: papel cálido, para que el B/N de las fotos respire */
.page-view[data-theme="light"] {
    background-color: #f3ede3;
    color: #211b14;
}
.page-view[data-theme="light"] section { background-color: transparent !important; }
.page-view[data-theme="light"] .text-white { color: #211b14 !important; }
.page-view[data-theme="light"] .text-white\/80 { color: rgba(33,27,20,0.8) !important; }
.page-view[data-theme="light"] .text-white\/70 { color: rgba(33,27,20,0.7) !important; }
.page-view[data-theme="light"] .text-white\/50 { color: rgba(33,27,20,0.55) !important; }
.page-view[data-theme="light"] .text-white\/40 { color: rgba(33,27,20,0.45) !important; }
.page-view[data-theme="light"] .text-white\/30 { color: rgba(33,27,20,0.4) !important; }
.page-view[data-theme="light"] .text-white\/20 { color: rgba(33,27,20,0.3) !important; }
.page-view[data-theme="light"] .border-white\/5 { border-color: rgba(33,27,20,0.08) !important; }
.page-view[data-theme="light"] .border-white\/10 { border-color: rgba(33,27,20,0.12) !important; }
.page-view[data-theme="light"] .border-white\/20 { border-color: rgba(33,27,20,0.18) !important; }
.page-view[data-theme="light"] .group:hover .group-hover\:text-white { color: #211b14 !important; }
.page-view[data-theme="light"] .hover\:text-white:hover { color: #211b14 !important; }

/* Diseño Web: gris frío / técnico, distinto del cálido de Fotografía */
.page-view[data-theme="light-cool"] {
    background-color: #ecedf1;
    color: #14161c;
}
.page-view[data-theme="light-cool"] section { background-color: transparent !important; }
.page-view[data-theme="light-cool"] .text-white { color: #14161c !important; }
.page-view[data-theme="light-cool"] .text-white\/80 { color: rgba(20,22,28,0.8) !important; }
.page-view[data-theme="light-cool"] .text-white\/70 { color: rgba(20,22,28,0.7) !important; }
.page-view[data-theme="light-cool"] .text-white\/50 { color: rgba(20,22,28,0.55) !important; }
.page-view[data-theme="light-cool"] .text-white\/40 { color: rgba(20,22,28,0.45) !important; }
.page-view[data-theme="light-cool"] .text-white\/30 { color: rgba(20,22,28,0.4) !important; }
.page-view[data-theme="light-cool"] .text-white\/20 { color: rgba(20,22,28,0.3) !important; }
.page-view[data-theme="light-cool"] .border-white\/5 { border-color: rgba(20,22,28,0.08) !important; }
.page-view[data-theme="light-cool"] .border-white\/10 { border-color: rgba(20,22,28,0.12) !important; }
.page-view[data-theme="light-cool"] .border-white\/20 { border-color: rgba(20,22,28,0.18) !important; }
.page-view[data-theme="light-cool"] .border-white\/30 { border-color: rgba(20,22,28,0.28) !important; }
.page-view[data-theme="light-cool"] .contact-cta-mini { border-color: rgba(20,22,28,0.12) !important; }
.page-view[data-theme="light-cool"] .contact-cta-mini .copy-email-btn { border-color: rgba(20,22,28,0.3) !important; color: #14161c; }
.page-view[data-theme="light-cool"] .contact-cta-mini .copy-email-btn:hover { border-color: #14161c !important; }

/* Sobre Mí: negro cálido, distinto del negro frío de Audiovisuales */
.page-view[data-theme="warm-dark"] section { background-color: #150f0b !important; }
.page-view[data-theme="warm-dark"] .bg-\[\#111\] { background-color: #1e1712 !important; }

.page-view[data-theme="light"] .contact-cta-mini { border-color: rgba(33,27,20,0.12) !important; }
.page-view[data-theme="light"] .contact-cta-mini .copy-email-btn { border-color: rgba(33,27,20,0.3) !important; color: #211b14; }
.page-view[data-theme="light"] .contact-cta-mini .copy-email-btn:hover { border-color: #211b14 !important; }

/* CTA compacta de contacto (repetida al pie de cada página) */
.contact-cta-mini { border-color: rgba(255,255,255,0.06); }
.copy-email-btn.copied { border-color: #ff3333 !important; color: #ff3333 !important; }

/* Chips de filtro del carrusel de Audiovisuales */
.proyecto-filter { color: rgba(255,255,255,0.6); background: rgba(0,0,0,0.4); backdrop-filter: blur(6px); }
.proyecto-filter.active, .proyecto-filter:hover { background: #ff3333; border-color: #ff3333; color: #050505; }
.horizontal-item.filtered-out { opacity: 0.15; filter: grayscale(1); }

@media (prefers-reduced-motion: reduce) {
    .page-view:not(.active) { display: none; }
}

/* ============================================================
   DIAFRAGMA CINEMATOGRÁFICO — Audiovisuales
   Más impacto: halo central grande + resplandor ambiente amplio
   + destellos tipo lente + viñeta. El halo arranca cerrado/apagado,
   parpadea como un foco al entrar, y se abre iluminando el resto
   de la sección a medida que se scrollea hacia abajo.
   ============================================================ */
#halo-container {
    transform-origin: center center;
    will-change: transform, opacity;
}
#halo-luz {
    box-shadow: 0 0 25vw 10vw rgba(255,255,255,0.05);
}
#halo-ambient {
    position: absolute;
    inset: -30%;
    z-index: 19;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(255,60,60,0.18) 0%, rgba(255,140,60,0.08) 35%, transparent 70%);
    mix-blend-mode: screen;
    opacity: 0;
    will-change: opacity, transform;
}
#halo-flares {
    position: absolute;
    inset: 0;
    z-index: 31;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(115deg, transparent 45%, rgba(255,255,255,0.5) 49.7%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.5) 50.3%, transparent 55%),
        linear-gradient(25deg, transparent 46%, rgba(255,120,90,0.4) 49.8%, rgba(255,120,90,0.4) 50.2%, transparent 54%);
    mix-blend-mode: screen;
    will-change: opacity;
}
#hero-arte {
    box-shadow: inset 0 0 12vw 3vw rgba(0,0,0,0.55);
}
#hero-arte .hero-title {
    z-index: 30 !important;
}
#diafragma-scrim {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 38%, rgba(5,5,5,0.35) 0%, #050505 78%);
    z-index: 18;
    pointer-events: none;
    opacity: 0.85;
}

/* ============================================================
   FOTOGRAFÍA — banda inmersiva full-bleed con spotlight cálido
   ============================================================ */
.foto-spotlight {
    background: #f3ede3;
    --mx: 50%;
    --my: 40%;
}
.foto-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(45vw 45vw at var(--mx) var(--my), rgba(255,120,60,0.55) 0%, rgba(255,170,90,0.25) 32%, rgba(243,237,227,0) 62%),
        radial-gradient(60vw 60vw at calc(100% - var(--mx)) calc(100% - var(--my)), rgba(255,60,60,0.12) 0%, transparent 55%);
    animation: fotoGlowIdle 9s ease-in-out infinite;
}
.burst-canvas {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    width: 100%;
    height: 100%;
}
.foto-grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.05;
    background: url('https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Dissolve_Noise_Texture.png');
}
@keyframes fotoGlowIdle {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* ============================================================
   DISEÑO WEB — banda inmersiva full-bleed, grilla "blueprint"
   con spotlight frío + línea de escaneo
   ============================================================ */
.web-spotlight {
    background: #0a0a0f;
    --mx: 50%;
    --my: 40%;
}
.web-grid-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(120,150,255,0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120,150,255,0.22) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(38vw 38vw at var(--mx) var(--my), rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 35%, transparent 65%);
    mask-image: radial-gradient(38vw 38vw at var(--mx) var(--my), rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 35%, transparent 65%);
    animation: webGridIdle 10s ease-in-out infinite;
}
@keyframes webGridIdle {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}
.web-grid-dot {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(30vw 30vw at var(--mx) var(--my), rgba(120,150,255,0.35) 0%, transparent 50%);
}
@media (max-width: 768px) {
    .foto-glow, .web-grid-bg, .web-grid-dot { animation: none; opacity: 0.6; }
}

/* ============================================================
   TILT CARDS — respuesta 3D al mouse, sitio entero (menos contacto)
   ============================================================ */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.tilt-card .tilt-glare {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,0.25) 0%, transparent 55%);
    transition: opacity 0.3s ease;
    mix-blend-mode: overlay;
}
.tilt-card:hover .tilt-glare { opacity: 1; }

/* ============================================================
   REVEAL EN SCROLL — títulos que aparecen con un fade + subida sutil.
   (Sin envolver el contenido, para no romper títulos con íconos/flex)
   ============================================================ */
.reveal-mask {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.reveal-mask.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   HOME — hero cinematográfico (reemplaza el video de fondo)
   ============================================================ */
#prologo {
    isolation: isolate;
}
#cine-canvas {
    filter: contrast(1.05);
}
#cine-spotlight {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(38vw 38vw at var(--mx, 50%) var(--my, 40%), rgba(255,90,60,0.16) 0%, rgba(255,90,60,0.05) 35%, transparent 65%);
    mix-blend-mode: screen;
}
#cine-ghost {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
}
#cine-ghost span {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 32vw;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.06);
    white-space: nowrap;
    will-change: transform;
}
#prologo .film-bars {
    position: absolute;
    left: 0; right: 0;
    height: 6vh;
    background: #050505;
    z-index: 30;
    pointer-events: none;
}
#prologo .film-bars.top { top: 0; }
#prologo .film-bars.bottom { bottom: 0; }

@media (max-width: 768px) {
    #cine-ghost span { font-size: 55vw; }
}
/* ============================================================
   SOBRE MÍ — "ficha técnica" cinematográfica
   La sección se abre como una toma/claqueta (título grande +
   línea de guion "INT. ESTUDIO — DÍA"), separada del contenido
   por una franja tipo claqueta. La experiencia se cuenta como
   una tira de película (con perforaciones), la formación como
   créditos finales, y las habilidades como specs de rodaje.
   ============================================================ */
.sobre-mi-spotlight {
    position: relative;
    isolation: isolate;
    background-color: #150f0b;
    --mx: 50%;
    --my: 40%;
}
.sobre-mi-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(42vw 42vw at var(--mx) var(--my), rgba(255,90,60,0.22) 0%, rgba(255,90,60,0.08) 35%, transparent 65%),
        radial-gradient(60vw 60vw at 50% 0%, rgba(255,51,51,0.16) 0%, transparent 60%);
    animation: fotoGlowIdle 9s ease-in-out infinite;
}
@media (max-width: 768px) {
    .sobre-mi-glow { animation: none; opacity: 0.6; }
}

.clapper-stripe {
    position: relative;
    z-index: 1;
    height: 14px;
    width: 100%;
    background: repeating-linear-gradient(-45deg, #050505 0 26px, #e8e4de 26px 52px);
}

/* Riel tipo tira de película para la experiencia destacada */
.filmstrip-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding-left: 2.75rem;
}
.filmstrip-rail::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 16px;
    border-left: 1px solid rgba(255,255,255,0.15);
    border-right: 1px solid rgba(255,255,255,0.15);
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.2) 0 8px, transparent 8px 22px);
    background-size: 100% 22px;
}
.filmstrip-item { position: relative; }
.take-label {
    display: inline-block;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}
.filmstrip-item:hover .take-label { color: #ff3333; }

.skill-chip {
    padding: 0.6rem 1.2rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: default;
    display: inline-block;
}
.skill-chip:hover {
    background: #ff3333;
    border-color: #ff3333;
    color: #050505;
    transform: translateY(-3px);
}

.credits-list { display: flex; flex-direction: column; }
.credit-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: border-color 0.3s ease, padding-left 0.3s ease;
}
.credit-row:hover {
    border-color: rgba(255,51,51,0.4);
    padding-left: 0.5rem;
}
.credit-role {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ff3333;
    white-space: nowrap;
}
.credit-name {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-align: right;
    line-height: 1.4;
}
.credit-sub {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0.25rem;
}

@media (max-width: 768px) {
    .credit-row { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
    .credit-name { text-align: left; }
}