/* =========================
1. TUNNEL ANIMATION PAGE
========================= */

/* Imports */
@import url('./variables.css');
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

/* Base styles for tunnel page */
body {
     margin: 0;
     height: auto;
     overflow-x: hidden;
}

/* Tunnel background and rings */
.tunnel {
     background-color: var(--color-bg-tunnel);
     position: fixed;
     top: 0; left: 0;
     width: 100%; height: 100%;
     perspective: 700px;
     overflow: hidden;
}
.rings {
     position: absolute;
     top: 50%; left: 50%;
     transform-style: preserve-3d;
     transform: translate(-50%, -50%);
     display: flex;
     align-items: center;
     justify-content: center;
}
.ring {
     position: absolute;
     left: 50%; top: 50%;
     transform: translate(-50%, -50%);
     width: 200px; height: 200px;
     border: 2px solid var(--color-ring-cyan);
     border-radius: 50%;
     box-shadow: 0 0 10px var(--color-ring-cyan);
     opacity: 1;
     transition: opacity 0.5s, filter 0.5s;
     filter: blur(0px);
}
/* Colored rings */
.ring:nth-child(3), .ring:nth-child(5), .ring:nth-child(7), .ring:nth-child(9) {
     border-color: var(--color-ring-magenta); box-shadow: 0 0 10px var(--color-ring-magenta);
}
.ring:nth-child(4), .ring:nth-child(6), .ring:nth-child(8), .ring:nth-child(10) {
     border-color: var(--color-ring-purple); box-shadow: 0 0 10px var(--color-ring-purple);
}

/* Centered text */
.center-text {
     position: absolute;
     top: 50%; left: 50%;
     transform: translate(-50%, -50%) scale(1);
     color: var(--color-text-main);
     font-size: 2.7vw;
     font-family: "Orbitron", Arial, sans-serif;
     text-shadow: 0 0 20px var(--color-shadow-cyan), 0 0 40px var(--color-shadow-magenta);
     opacity: 1;
     pointer-events: none;
     transition: opacity 0.5s, transform 0.5s;
     z-index: 10;
     user-select: none;
     white-space: nowrap;
     display: flex;
     flex-direction: column;
     align-items: center;
}

.start-text {
     font-weight: bold;
     display: block;
     white-space: pre;
     text-align: center;
     font-size: 2.7vw;
     color: var(--color-text-main);
     text-shadow: 0 0 20px var(--color-shadow-cyan), 0 0 40px var(--color-shadow-magenta);
}

.continue-text {
     display: block;
     font-weight: bold;
     white-space: pre;
     text-align: center;
     font-size: 0.9vw;
     color: var(--color-text-main);
     text-shadow: 0 0 20px var(--color-shadow-cyan), 0 0 40px var(--color-shadow-magenta);
     margin-top: -0.5em;
     opacity: 0.97;
}

/* Tunnel background image for final state */
.background-final {
     position: fixed;
     top: 0; left: 0;
     width: 100%; height: 100%;
     background: url(../assets/img/background.jpg) no-repeat center center fixed;
     background-size: cover;
     /* background-color: var(--color-bg-tunnel); */
     opacity: 0;
     transition: opacity 0.5s;
     z-index: 20;
     pointer-events: none;
}

/* Profile and name */
.profile {
     position: fixed;
     top: 10%; left: 50%;
     transform: translateX(-50%);
     z-index: 30;
     width: 160px; height: 160px;
     border-radius: 50%;
     overflow: hidden;
     box-shadow: 0 0 20px var(--color-shadow-cyan), 0 0 40px var(--color-shadow-magenta);
     background: var(--color-profile-bg);
     display: flex;
     align-items: center;
     justify-content: center;
}

.profile img {
     width: 100%; height: 100%;
     object-fit: cover;
     border-radius: 50%;
}

.name {
     position: fixed;
     top: 23%; left: 50%;
     transform: translateX(-50%);
     z-index: 30;
     color: var(--color-text-main);
     font-family: "Orbitron", Arial, sans-serif;
     font-size: 2.2vw;
     text-shadow: 0 0 10px var(--color-shadow-cyan), 0 0 20px var(--color-shadow-magenta);
     margin: 0;
     white-space: nowrap;
     text-align: center;
}
.main_div {
     position: fixed;
     top: 32%; left: 50%;
     transform: translateX(-50%);
     z-index: 30;
     color: var(--color-text-main);
     background: var(--color-main-div-bg);
     padding: 1.2em 2em;
     border-radius: 1em;
     font-size: 1.1vw;
     max-width: 700px;
     width: 80vw;
     box-shadow: 0 0 10px var(--color-main-div-shadow-cyan), 0 0 20px var(--color-main-div-shadow-magenta);
     text-align: center;
}
.social-links {
     position: fixed;
     bottom: 5%; left: 50%;
     transform: translateX(-50%);
     z-index: 30;
     display: flex;
     gap: 2em;
}
.hidden-after-scroll {
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.5s;
}

/* Responsive for tunnel page */
@media (max-width: 1250px) {
     #centerText {
          font-size: 5vw;
          text-shadow: 0 0 10px var(--color-shadow-cyan), 0 0 20px var(--color-shadow-magenta);
     }
     #centerText::before {
          content: "Continúe desplazando";
          font-weight: bold;
          display: inline-block;
     }
}

/* =========================
2. PORTFOLIO MODERN PAGE
========================= */

/* Reset and base */
* { box-sizing: border-box }
html, body { height: 100% }
.container {
     margin: 0;
     font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
     background: var(--bg);
     color: var(--text);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     line-height: 1.45;
     font-size: var(--font-size,16px);
}

/* Accessibility */
.skip-link {
     position: absolute;
     left: 8px; top: 8px;
     background: var(--color-skip-link-bg);
     color: var(--color-skip-link-text);
     padding: 8px 12px;
     border-radius: 6px;
     text-decoration: none;
     transform: translateY(-120%);
     transition: transform .22s ease;
     z-index: 1000;
}
.skip-link:focus { transform: translateY(0); }

/* Header */
.site-header {
     position: sticky;
     top: 0;
     backdrop-filter: blur(6px);
     background: linear-gradient(180deg, var(--color-header-bg1), var(--color-header-bg2));
     border-bottom: 1px solid var(--color-header-border);
     z-index: 900;
}
.header-inner {
     max-width: 1100px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px;
}
.brand {
     font-weight: 600;
     letter-spacing: 0.2px;
     color: var(--muted);
}

/* Navigation */
.tabs {
     margin-left: auto;
     display: flex;
     gap: 8px;
     align-items: center;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none }
.tab {
     appearance: none;
     border: 0;
     background: transparent;
     padding: 8px 14px;
     border-radius: 10px;
     font-weight: 600;
     cursor: pointer;
     transition: all .18s ease;
     color: var(--muted);
     position: relative;
     white-space: nowrap;
}
.tab:focus {
     outline: 3px solid var(--color-tab-outline);
     outline-offset: 3px;
}
.tab:hover {
     transform: translateY(-2px);
     color: var(--text);
}
.tab[aria-selected="true"] {
     color: var(--accent);
     background: linear-gradient(90deg,var(--accent-weak),transparent);
     box-shadow: 0 6px 18px var(--color-tab-shadow);
}
.tab[aria-selected="true"]::after {
     content: "";
     position: absolute;
     left: 10%; right: 10%; bottom: -6px;
     height: 3px;
     background: var(--accent);
     border-radius: 6px;
     transform: translateY(6px);
     opacity: 0.95;
     transition: transform .28s cubic-bezier(.2,.9,.3,1);
}

/* Main content */
.main {
     max-width: 1100px;
     margin: 22px auto;
     padding: 18px;
}
.panel {
     background: linear-gradient(180deg, var(--color-panel-bg1), var(--color-panel-bg2));
     border-radius: var(--radius);
     padding: 22px;
     box-shadow: 0 8px 30px var(--color-panel-shadow);
     margin-bottom: 20px;
     transition: opacity .36s ease, transform .36s ease;
     will-change: opacity,transform;
}
.panel[hidden] { display: none }
.panel.enter {
     opacity: 0;
     transform: translateY(8px);
}
.panel.enter-active {
     opacity: 1;
     transform: translateY(0);
}
.panel-title {
     margin: 0 0 8px 0;
     font-size: clamp(20px,2.4vw,28px);
}
.panel-lead {
     margin: 0 0 12px 0;
     color: var(--muted);
     font-weight: 500;
}

/* Skills list */
.skills-list {
     list-style: disc;
     padding-left: 20px;
     color: var(--muted);
}
.skills-list li { margin-bottom: 8px; }

/* Projects grid */
.projects-grid {
     display: grid;
     grid-template-columns: repeat(3,1fr);
     gap: 16px;
     margin-top: 12px;
}
.card {
     background: var(--card);
     border-radius: 12px;
     padding: 14px;
     box-shadow: 0 6px 18px var(--color-card-shadow);
     display: flex;
     flex-direction: column;
     gap: 8px;
}
.card-title { margin: 0; font-size: 16px }
.card-desc { margin: 0; color: var(--muted); font-size: 14px }
.card-link {
     margin-top: auto;
     text-decoration: none;
     font-weight: 600;
     padding: 8px 10px;
     border-radius: 8px;
     display: inline-block;
     transition: transform .18s ease;
}
.card-link:focus { outline: 3px solid var(--color-tab-outline) }
.card-link:hover { transform: translateY(-4px) }

/* Showreel placeholders */
.showreel-grid {
     display: grid;
     grid-template-columns: repeat(3,1fr);
     gap: 12px;
     margin-top: 12px;
}
.thumb-placeholder {
     height: 110px;
     border-radius: 10px;
     background: linear-gradient(135deg,var(--color-thumb-bg1),var(--color-thumb-bg2));
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
     color: var(--muted);
     border: 1px dashed var(--color-thumb-border);
     cursor: not-allowed;
}
.thumb-caption { font-size: 13px; color: var(--muted); margin-top: 6px }
.panel-note { color: var(--muted); font-size: 13px; margin-top: 12px }

/* Animation for panel */
.panel.fade-in {
     animation: fadeIn .36s ease both;
}
@keyframes fadeIn {
     from { opacity: 0; transform: translateY(8px) }
     to { opacity: 1; transform: translateY(0) }
}