/* ========================================
CLAUDIA'S BOUNTY BOARD PORTFOLIO SITE
======================================== */
/* ========================================
CSS VARIABLES
Central color and font definitions for easy theming
======================================== */
:root{
--hoja-sombra: #5c5c5c; /* Dark shadow color */
--hoja-clara: #a3a3a3; /* Light gray */
--hoja-luz: #ffffff; /* White */
--hoja-radio-circulo: 200vmin; /* Large radius for curved effects */
--ancho-interior-hoja: 1.25%; /* Inner width percentage */
--mango: #4f3b32; /* Wood/handle brown */
/* Medieval RPG color scheme */
--color-pergamino: #e3d5b8; /* Parchment cream */
--color-madera: #3e2723; /* Dark wood */
--font-fantasy: 'AvQuest', serif; /* Fantasy title font */
--font-main: 'drachen', sans-serif; /* Main text font */
}
/* ========================================
GLOBAL STYLES
Base styling and custom dagger cursor
======================================== */
body, html {
margin: 0;
padding: 0;
height: auto;
min-height: 100%;
overflow-x: hidden;
background-color: #2b1d12;
/* Custom SVG dagger cursor with metallic gradient */
cursor: url('data:image/svg+xml;utf8,') 24 4, auto;
}
body {
perspective: none !important;
}
/* Custom Fantasy Cursor */
.custom-cursor {
position: fixed;
width: 60px;
height: 80px;
pointer-events: none;
z-index: 10000;
transform: translate(-50%, -50%);
display: none !important;
}
.cursor-dagger {
width: 100%;
height: 100%;
background: linear-gradient(180deg,
#ffd700 0%,
#ffed4e 15%,
#fff8dc 30%,
#daa520 50%,
#d4af37 70%,
#aa8c30 85%,
#8b7500 100%);
clip-path: polygon(50% 0%, 65% 8%, 55% 35%, 70% 38%, 50% 100%, 30% 38%, 45% 35%, 35% 8%);
box-shadow:
0 0 10px rgba(255, 215, 0, 0.6),
0 0 25px rgba(255, 215, 0, 0.8),
0 0 40px rgba(212, 175, 55, 0.6),
0 0 60px rgba(138, 43, 226, 0.3),
inset -3px -3px 8px rgba(0,0,0,0.5),
inset 3px 3px 8px rgba(255,255,255,0.4);
animation: arcane-glow 1.5s ease-in-out infinite;
filter: drop-shadow(0 0 12px rgba(138, 43, 226, 0.6));
position: relative;
}
/* Add blade shine effect */
.cursor-dagger::before {
content: '';
position: absolute;
top: 15%;
left: 45%;
width: 2px;
height: 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
border-radius: 2px;
}
@keyframes arcane-glow {
0%, 100% {
box-shadow:
0 0 20px rgba(255, 215, 0, 0.8),
0 0 40px rgba(212, 175, 55, 0.6),
0 0 60px rgba(138, 43, 226, 0.4),
inset -2px -2px 5px rgba(0,0,0,0.4),
inset 2px 2px 5px rgba(255,255,255,0.3);
}
50% {
box-shadow:
0 0 30px rgba(255, 215, 0, 1),
0 0 50px rgba(212, 175, 55, 0.8),
0 0 80px rgba(138, 43, 226, 0.6),
inset -2px -2px 5px rgba(0,0,0,0.4),
inset 2px 2px 5px rgba(255,255,255,0.4);
filter: drop-shadow(0 0 12px rgba(138, 43, 226, 0.8));
}
}
.cursor-trail {
position: fixed;
width: 10px;
height: 10px;
background: radial-gradient(circle, rgba(255, 215, 0, 0.8) 0%, rgba(138, 43, 226, 0.4) 100%);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
box-shadow:
0 0 12px rgba(255, 215, 0, 0.7),
0 0 20px rgba(138, 43, 226, 0.5);
animation: arcane-trail-fade 0.8s ease-out forwards;
}
@keyframes arcane-trail-fade {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.2);
}
}
/* FONTS */
@font-face {
font-family: AvQuest;
src: url(assets/fonts/avqest/AvQest.ttf);
}
@font-face {
font-family: drachen;
src: url(assets/fonts/lsw-drachenklaue/LSW-Drachenklaue-Samys-0.1.ttf);
}
/* ========================================
LOADING SCREEN
Full-screen overlay during initial page load
======================================== */
#loader {
position: fixed;
inset: 0;
background: #1a1510;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 3000;
transition: opacity 1s ease;
}
/* Video game style loading text */
.loading-text {
font-family: 'Cinzel', serif;
letter-spacing: 10px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
min-height: 3em;
display: flex;
align-items: center;
word-spacing: 20px;
}
/* Individual character with flicker animation */
.text-char {
display: inline-block;
width: 0.8em;
height: 1em;
animation: glitch-flicker 0.15s infinite;
}
/* Retro video game text glitch/flicker effect */
@keyframes glitch-flicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* Smoke revealing */
#smoke-container, #smoke-container-v5 {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
z-index: 999999;
pointer-events: none;
overflow: hidden;
}
@keyframes smokeFloatUp {
0% { transform: translateY(110vh) scaleX(0.6) scaleY(0.8) rotate(0deg); opacity: 0; }
15% { opacity: 0.35; }
80% { opacity: 0.35; }
100% { transform: translateY(-40vh) scaleX(1.5) scaleY(2) rotate(5deg); opacity: 0; }
}
.smoke-particle, .smoke-particle-v5 {
position: absolute;
bottom: -400px;
width: 220px;
height: 90px;
background: linear-gradient(135deg, rgba(200, 200, 200, 0.4) 0%, rgba(150, 150, 150, 0.2) 50%, rgba(255, 255, 255, 0) 75%);
border-radius: 4px;
filter: blur(15px);
animation: smokeFloatUp 6s ease-out forwards;
will-change: transform, opacity;
}
#loader.fading {
animation: fadeOutLoaderWithSmoke 3s forwards ease-in-out !important;
}
#loader.fading #smoke-container {
opacity: 1;
}
/* Loading Map and Icons */
.map-container {
position: relative;
width: 85vw;
max-width: 900px;
background: url('assets/img/map.png');
padding: 30px;
border: 12px solid #362015;
box-shadow: 0 0 60px rgba(0,0,0,0.9);
}
.map-icon {
filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.2));
transition: all 0.5s ease;
opacity: 0.7;
}
.map-icon.active {
opacity: 1;
filter: drop-shadow(0px 0px 12px rgba(171, 0, 0, 0.8)) drop-shadow(0px 0px 20px rgba(212, 175, 55, 0.6));
animation: icon-glow 1.5s ease-in-out infinite;
}
@keyframes icon-glow {
0%, 100% { filter: drop-shadow(0px 0px 12px rgba(171, 0, 0, 0.8)) drop-shadow(0px 0px 20px rgba(212, 175, 55, 0.6)); }
50% { filter: drop-shadow(0px 0px 20px rgba(171, 0, 0, 1)) drop-shadow(0px 0px 30px rgba(212, 175, 55, 0.8)); }
}
@keyframes gold-pulse {
0%, 100% {
text-shadow:
0 0 8px rgba(212, 175, 55, 0.5),
0 0 15px rgba(212, 175, 55, 0.3),
0 0 20px rgba(180, 140, 0, 0.2);
}
50% {
text-shadow:
0 0 12px rgba(212, 175, 55, 0.7),
0 0 20px rgba(212, 175, 55, 0.4),
0 0 28px rgba(180, 140, 0, 0.3);
}
}
/* Route */
.route-marker {
stroke: #8b0000;
stroke-width: 1.5;
filter: drop-shadow(0 0 4px rgba(139, 0, 0, 0.8));
animation: draw-square 0.8s ease-out forwards;
transform-origin: center;
}
@keyframes draw-square {
0% {
stroke-dasharray: 100;
stroke-dashoffset: 100;
opacity: 0;
}
20% {
opacity: 1;
}
100% {
stroke-dasharray: 100;
stroke-dashoffset: 0;
opacity: 1;
}
}
/* Main Board */
.board {
min-height: 100vh;
background-image: url('assets/img/bg-board.png');
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 40px;
opacity: 0;
position: relative;
overflow: hidden;
background-color: #2b1d12;
box-shadow:
inset 0 0 100px rgba(139, 69, 19, 0.3),
inset 0 0 150px rgba(0,0,0,0.5),
inset 50px 50px 120px rgba(0,0,0,0.4),
inset -50px -50px 120px rgba(139, 69, 19, 0.2);
}
/* Ambient floating sparkles container */
.board::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
}
/* Overlay with tavern lighting */
.board::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background:
radial-gradient(ellipse at center, rgba(255, 180, 80, 0.2) 0%, rgba(180, 100, 60, 0.15) 40%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.8) 100%);
z-index: 2;
animation: tavern-flicker 4s ease-in-out infinite;
box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.6);
}
@keyframes tavern-flicker {
0%, 100% { opacity: 1; }
25% { opacity: 0.92; }
50% { opacity: 1.08; }
75% { opacity: 0.95; }
}
@keyframes enchanted-glow {
0%, 100% {
box-shadow:
20px 20px 40px rgba(0,0,0,0.6),
inset -5px -5px 15px rgba(0,0,0,0.3),
inset 5px 5px 10px rgba(255,255,255,0.15),
0 0 30px rgba(212, 175, 55, 0.4),
0 0 50px rgba(138, 43, 226, 0.2);
}
50% {
box-shadow:
20px 20px 40px rgba(0,0,0,0.6),
inset -5px -5px 15px rgba(0,0,0,0.3),
inset 5px 5px 10px rgba(255,255,255,0.15),
0 0 50px rgba(212, 175, 55, 0.6),
0 0 80px rgba(138, 43, 226, 0.4);
}
}
@keyframes floating-sparkle {
0% {
transform: translateY(0) translateX(0) scale(1);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100vh) translateX(100px) scale(0);
opacity: 0;
}
}
/* Diary / Credits */
.diary-container {
position: absolute;
bottom: 40px;
left: 20px;
width: 301px;
height: 342.11px;
cursor: pointer;
perspective: 1000px;
z-index: 100;
align-self: flex-end;
}
.diary-cover {
width: 100%;
height: 100%;
background: #4a2c1d;
border-radius: 4px 8px 8px 4px;
border-left: 10px solid #362015;
display: flex;
align-items: top;
justify-content: center;
padding: 15px;
box-shadow:
8px 8px 20px rgba(0,0,0,0.6),
inset -3px -3px 10px rgba(0,0,0,0.3),
inset 3px 3px 8px rgba(255,255,255,0.1);
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: left;
backface-visibility: hidden;
position: absolute;
z-index: 2;
}
.diary-cover span {
color: rgb(255, 255, 255);
font-size: 40px;
margin-top: 50px;
word-break: break-word;
overflow-wrap: break-word;
max-width: 100%;
}
.diary-latch {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 35px;
background: radial-gradient(circle at 35% 35%,
#ffffff 0%,
#d1d1d1 25%,
#8a8a8a 60%,
#4a4a4a 100%
);
border-radius: 50%;
box-shadow:
2px 2px 4px rgba(0, 0, 0, 0.7),
inset -1px -1px 2px rgba(0, 0, 0, 0.5),
inset 1px 1px 2px rgba(255, 255, 255, 0.6);
border: 1px solid #2d1b12;
z-index: 5;
transition: all 0.4s ease;
}
.diary-content {
position: absolute;
top: 5px;
left: 5px;
width: 301px;
height: 372.11px;
background: #e3d5b8;
padding: 15px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
z-index: 1;
font-size: 20px;
color: #2c1e14;
overflow-y: auto;
border-radius: 4%;
}
.diary-container.open .diary-cover {
transform: rotateY(-110deg);
}
/* Music Player Container */
.music-player-container {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 350px;
background-image: url('assets/img/parchment.png');
background-size: cover;
padding: 15px;
border: 6px solid #362015;
border-radius: 8px;
box-shadow: 8px 8px 15px rgba(0,0,0,0.4);
text-align: center;
z-index: 100;
opacity: 0.9;
transition: opacity 0.3s ease;
}
.music-player-container:hover {
opacity: 1;
}
.music-title {
font-family: 'AvQuest', serif;
color: #4a2c1d;
font-size: 18px;
margin: 0 0 10px 0;
text-shadow: 1px 1px 1px rgba(255,255,255,0.2);
}
.music-player-container iframe {
max-height: 150px !important;
}
/* Bounty board */
.info-board {
background-image: url('assets/img/bg-infoboard.png');
background-size: cover;
width: 100%;
max-width: 1800px;
min-height: 90vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
gap: 20px;
padding: 40px 20px;
margin: 0 auto;
position: relative;
box-shadow:
0 0 120px rgba(255, 140, 60, 0.2),
inset 0 0 100px rgba(139, 69, 19, 0.2),
inset 0 0 150px rgba(0,0,0,0.3);
filter: sepia(0.1) brightness(1.05);
}
h1{
font-size: 80px;
margin-top:-20px;
font-family: AvQuest, serif;
}
h3{
font-size: 50px;
}
/* ========================================
BOUNTY CARDS
Medieval wanted posters with parchment texture
======================================== */
.bounty-card {
background-image: url('assets/img/parchment.png');
background-size: cover;
text-align: center;
--scale: 1;
transform-origin: top center;
transform: scale(var(--scale)) rotate(var(--rotate)) !important;
transition:
transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
filter 0.3s ease,
box-shadow 0.3s ease;
/* Realistic shadow and depth */
box-shadow:
15px 15px 30px rgba(0,0,0,0.5),
inset -5px -5px 15px rgba(0,0,0,0.2),
inset 5px 5px 10px rgba(255,255,255,0.1);
position: relative;
border: 3px solid #8b7355;
overflow: hidden;
}
/* Ornate corner decorations (star symbols) */
.bounty-card::before,
.bounty-card::after {
content: '✦';
position: absolute;
font-size: 24px;
color: #d4af37;
opacity: 0.6;
z-index: 10;
}
.bounty-card::before {
top: 8px;
left: 8px;
}
.bounty-card::after {
bottom: 8px;
right: 8px;
}
/* Hover with glow */
.bounty-card:hover {
--scale: 1.03;
filter: brightness(1.08) drop-shadow(0 0 10px rgba(212, 175, 55, 0.3));
box-shadow:
20px 20px 40px rgba(0,0,0,0.6),
inset -5px -5px 15px rgba(0,0,0,0.3),
inset 5px 5px 10px rgba(255,255,255,0.15),
0 0 30px rgba(212, 175, 55, 0.4),
0 0 50px rgba(138, 43, 226, 0.2);
animation: enchanted-glow 1.5s ease-in-out infinite paused;
}
@property --rotate {
syntax: '';
initial-value: 0deg;
inherits: true;
}
@keyframes sway {
0% { --rotate: -2deg; }
50% { --rotate: 2deg; }
100% { --rotate: -2deg; }
}
/* Application and Staggering */
.board.animate-in #gac-card, #app-card, #models-card {
transition: none !important;
animation:
attachPoster 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
sway 3s ease-in-out infinite alternate;
animation-delay: 2.2s, 2.8s;
}
.cv-img{
border-radius: 50%;
width: 242px;
height: 242px;
object-fit: cover;
margin-top:-50px;
}
.nail {
position: absolute;
background: radial-gradient(circle at 35% 35%,
#8a8a8a 0%,
#4a4a4a 100%
);
border-radius: 50%;
width: 16px;
height: 16px;
top: 12px;
left: 50%;
transform: translateX(-50%);
box-shadow: 3px 5px 2.9px #00000044;
}
#nail1{
left:20%;
}
#nail2{
left: 80%;
}
#cv-card h1, #gac-card h1, #app-card h1, #models-card h1{
margin-top: 40px;
font-size: 70px;
}
/* GAC Card */
#gac-card{
margin: 40px 15px 0 15px;
transform: rotate(-12deg);
width: 310px;
height: 380px;
text-align: center;
box-shadow: 38px 4px 14.1px #0000007D;
}
#gac-card img{
width: 190px;
height: 190px;
margin-top: -40px;
}
#app-card{
margin: -20px 15px 20px 15px;
transform: rotate(5deg);
width: 290px;
height: 340px;
text-align: center;
box-shadow: 38px 4px 14.1px #0000007D;
border: 1px solid #000000;
}
/* APP Card */
#app-card img{
width: 130px;
height: 115px;
}
#models-card{
width: 340px;
height: 410px;
margin: 40px 15px 0 15px;
transform: rotate(-8deg);
box-shadow: 38px 4px 14.1px #0000007D;
text-align: center;
}
/* CV Card */
#cv-card h2 {
font-size: 60px;
margin: 20px 0;
color: #a7861b;
text-shadow:
0 0 8px rgba(212, 175, 55, 0.5),
0 0 15px rgba(212, 175, 55, 0.3),
0 0 20px rgba(180, 140, 0, 0.2);
filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.4));
animation: gold-pulse 2s ease-in-out infinite;
}
#cv-card{
margin: -20px 15px 20px 15px;
transform: rotate(8deg);
text-align: center;
width: 360px;
height: 480px;
box-shadow: 38px 4px 14.1px #0000007D;
position: relative;
}
/* Parchment wear effect */
#cv-card::before {
box-shadow:
inset 0 0 40px rgba(0, 0, 0, 0.3),
inset -15px -15px 30px rgba(139, 69, 19, 0.2);
}
/* CV click */
.cv-overlay {
display: none; /* Cambia el 'flex' por 'none' aquí */
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
z-index: 5000;
justify-content: center;
align-items: flex-start;
overflow-y: auto;
backdrop-filter: blur(5px);
}
#cv-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow-y: auto;
display: flex;
align-items: flex-start; /* Permite que el modal empiece arriba si es largo */
}
.cv-overlay.active { display: flex; }
.cv-overlay.active .cv-modal {
animation: unfold 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.cv-overlay:not(.active) {
display: none !important;
}
@keyframes unfold {
0% {
transform: scaleY(0.005) scaleX(0);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(1) scaleX(1);
}
}
.cv-modal {
background-image: url('assets/img/parchment.png');
background-size: cover;
background-color: #fdf6e3;
font-family: 'Georgia', serif;
max-width: 700px;
margin: 40px auto;
padding: 50px 40px;
position: relative;
color: #2c2c2c;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -10px 30px rgba(0, 0, 0, 0.1);
border-radius: 2px;
border: none;
}
/* Scroll top and bottom rolled edges */
.cv-modal::before,
.cv-modal::after {
content: '';
position: absolute;
left: -20px;
right: -20px;
height: 40px;
background: linear-gradient(to bottom, #8b7355 0%, #6b5344 50%, #5a4233 100%);
border-radius: 50%;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.3);
}
.cv-modal::before {
top: -20px;
background: linear-gradient(to bottom, #9d8566 0%, #8b7355 50%, #6b5344 100%);
box-shadow:
inset 0 2px 5px rgba(0, 0, 0, 0.4),
0 3px 8px rgba(0, 0, 0, 0.3),
0 0 1px rgba(0, 0, 0, 0.2) inset;
}
.cv-modal::after {
bottom: -20px;
background: linear-gradient(to bottom, #6b5344 0%, #5a4233 50%, #4a3222 100%);
}
/* Scroll Header */
.cv-header {
border-bottom: 3px double #8b0000;
margin-bottom: 30px;
padding-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: flex-end;
position: relative;
}
.cv-header::before {
content: '✦ ✦ ✦';
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
font-size: 16px;
color: #8b0000;
letter-spacing: 12px;
z-index: 10;
}
.full-name h3 {
font-size: 1.8rem;
margin: 0;
color: #8b0000;
font-family: 'AvQuest', serif;
text-transform: uppercase;
letter-spacing: 2px;
}
/* Rombos y Stats */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.stat-item {
border: 1px solid #d4af37;
padding: 10px;
background: rgba(255, 255, 255, 0.5);
}
.stat-item:hover .rombo {
background: #8b0000;
color: white;
box-shadow: 0 0 15px #8b0000;
}
.stat-item:hover .rombo p {
color: white;
}
.rombo p {
transform: rotate(-45deg);
margin: 0;
display: inline-block;
transition: all 0.2s ease-in-out;
}
.stat-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 5px;
}
.stat-label {
font-weight: bold;
color: #333;
width: 40px;
}
.rombo {
width: 30px;
height: 30px;
border: 2px solid #8b0000;
transform: rotate(45deg);
display: flex;
align-items: center;
justify-content: center;
background: white;
box-shadow: 0 0 5px rgba(139, 0, 0, 0.2);
transition: all 0.3s ease;
}
/* Text Boxes */
.parchment-box {
border-left: 4px solid #d4af37;
border-right: 1px solid #d4af37;
padding-left: 20px;
padding-right: 15px;
background: linear-gradient(to right, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.02) 100%);
margin: 15px 0;
line-height: 1.6;
font-size: 0.95rem;
}
h4 {
text-transform: uppercase;
font-size: 1rem;
border-bottom: 2px solid #8b0000;
border-top: 1px solid #d4af37;
margin-top: 30px;
margin-bottom: 15px;
padding-bottom: 10px;
padding-top: 10px;
color: #8b0000;
font-family: 'AvQuest', serif;
letter-spacing: 1px;
}
.close-btn {
position: absolute;
top: 15px;
right: 20px;
background: none;
border: none;
font-size: 2rem;
cursor: pointer;
color: #8b0000;
transition: all 0.3s ease;
z-index: 50;
}
.close-btn:hover {
transform: scale(1.2) rotate(90deg);
color: #ab0000;
text-shadow: 0 0 8px rgba(139, 0, 0, 0.4);
}
#close-cv {
position: absolute;
z-index: 999;
cursor: pointer;
}
/* --- PHONE CV --- */
@media (max-width: 600px) {
.cv-header {
flex-direction: column;
text-align: center;
}
.cv-modal {
padding: 40px 15px;
}
}
.envelope-contact {
position: fixed;
right: 30px;
bottom: 30px;
width: 300px;
height: 180px;
background-image: url('assets/img/parchment.png');
background-size: cover;
transform: rotate(-5deg);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
z-index: 100;
perspective: 1000px;
box-shadow:
12px 12px 25px rgba(0,0,0,0.4),
inset -3px -3px 10px rgba(0,0,0,0.15),
inset 3px 3px 8px rgba(255,255,255,0.1);
}
.envelope-contact h1 {
font-size: 40px !important;
margin-left: 5px;
margin-top: 50px !important;
transform: rotate(15deg) ;
text-align: center;
color: #4a3728;
padding-top: 40px;
font-family: 'Georgia', serif;
}
.envelope-contact:hover {
transform: rotate(0deg) scale(1.05);
box-shadow:
15px 15px 35px rgba(0,0,0,0.5),
inset -3px -3px 10px rgba(0,0,0,0.2),
inset 3px 3px 8px rgba(255,255,255,0.15),
0 0 25px rgba(212, 175, 55, 0.25);
}
/* 2. Expanded State */
.envelope-contact.expanded {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 450px !important;
height: 550px !important;
z-index: 99999 !important;
margin: 0 !important;
cursor: default;
}
/* 3. The Flap */
#envelope-flap {
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 80px;
background-color: #c2b291;
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
z-index: 10;
transform-origin: top;
transition: transform 0.6s ease;
}
.envelope-contact.expanded #envelope-flap {
transform: rotateX(160deg);
z-index: 1;
}
.envelope-contact.expanded #contact-form {
display: flex !important;
opacity: 1;
flex-direction: column;
position: absolute;
top: 40px;
left: 20px;
right: 20px;
bottom: 20px;
padding: 20px;
background: #fdf5e6;
border: 1px solid #d2b48c;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
z-index: 5;
overflow-y: auto;
}
/* 5. UI Elements */
.envelope-contact.expanded #wax-seal1 {
opacity: 0;
pointer-events: none;
}
.envelope-contact.expanded h1 {
display: none;
}
#contact-form {
position: absolute;
top: 60px; /* Bajamos un poco para que no choque con el doblez superior */
left: 20px;
right: 20px;
bottom: 20px;
z-index: 20;
display: none;
flex-direction: column;
padding: 15px;
}
.form-content {
display: flex;
flex-direction: column;
height: 100%;
}
.form-content h2 {
font-family: 'AvQuest', serif;
font-size: 24px;
color: #3e2723;
margin-bottom: 10px;
text-align: center;
}
/* Etiquetas y campos */
.form-content label {
font-size: 12px;
font-weight: bold;
color: #5d4037;
text-transform: uppercase;
margin-bottom: 2px;
}
.form-content input,
.form-content textarea {
width: 100%;
background: rgba(255, 255, 255, 0.5); /* Papel traslúcido */
border: 1px solid #b89066;
border-radius: 3px;
padding: 8px;
margin-bottom: 10px;
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
color: #3e2723;
box-sizing: border-box; /* Fundamental para que no se salgan del borde */
}
/* Área de mensaje más grande */
.form-content textarea {
flex-grow: 1; /* Ocupa el espacio sobrante */
resize: none;
min-height: 80px;
}
/* Botón "Enviar Pergamino" */
.send-btn {
background-color: #ab0000;
color: white;
border: none;
padding: 10px;
font-family: 'AvQuest', serif;
font-size: 18px;
cursor: pointer;
box-shadow: 0 4px 0 #7a1010;
transition: all 0.2s;
}
.send-btn:hover {
background-color: #911313;
transform: translateY(2px);
box-shadow: 0 2px 0 #7a1010;
}
/* Sello de Cera */
#wax-seal1 {
position: absolute;
top: 20px; /* Alineado con la nueva punta de la solapa */
left: 50%;
transform: translateX(-50%) scale(0.8); /* Lo hacemos un 20% más pequeño */
z-index: 11;
filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4));
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.board {
flex-direction: column;
padding: 10px;
}
@media (min-width: 1200px) {
.board {
width: 100%;
display: flex;
justify-content: center;
padding: 40px 20px;
}
.info-board {
display: flex;
flex-direction: row;
flex-wrap: nowrap; /* Keeps cards on one line */
justify-content: center; /* Centers the group of cards */
align-items: flex-start;
width: 100%;
max-width: 1400px; /* Prevents cards from being too far apart */
gap: 20px; /* Better way to handle spacing than space-around */
margin: 0 auto;
}
.bounty-card {
flex: 0 1 300px; /* Allows cards to shrink if needed but sets a base width */
min-width: 250px; /* Prevents cards from becoming too thin */
}
}
#cv-card, #gac-card, #app-card, #models-card {
margin: 20px !important; /* Espacio uniforme entre carteles */
position: relative;
left: auto;
top: auto;
}
/* Container and 3D Setup */
#credits-diary {
position: absolute;
width: 301px;
height: 342px;
perspective: 2000px;
transform-style: preserve-3d;
transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
pointer-events: auto;
z-index: 100;
}
/* Ensure children don't block clicks */
#credits-diary > * {
pointer-events: none;
}
/* The Spine (Rounded Leather Look) */
.diary-spine {
position: absolute;
left: -18px;
top: 0;
width: 36px;
height: 100%;
background: linear-gradient(to right, #2c1a12 0%, #4a2c1d 50%, #2c1a12 100%);
border-radius: 8px 0 0 8px;
box-shadow: inset 2px 0 5px rgba(255,255,255,0.1), 3px 0 10px rgba(0,0,0,0.4);
transform: rotateY(-90deg) translateX(-18px);
transform-origin: right;
z-index: 0;
}
/* Spine Ribs Decoration */
.diary-spine::after {
content: "";
position: absolute;
top: 10%; bottom: 10%; left: 0; right: 0;
background: repeating-linear-gradient(
transparent, transparent 18%,
rgba(0,0,0,0.4) 18%, rgba(0,0,0,0.4) 19%,
rgba(255,255,255,0.05) 19%, rgba(255,255,255,0.05) 20%
);
}
/* The Cover */
.diary-cover {
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(74, 44, 29);
border-radius: 4px 8px 8px 4px;
transform-origin: left;
transform: translateZ(2px) rotateY(0deg);
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 3;
}
/* The Pages (Internal Content) */
.diary-content {
position: absolute;
width: 100%;
height: 100%;
background-color: #f4ecd8;
transform: translateZ(-5px);
box-shadow: inset 10px 0 20px rgba(0,0,0,0.1);
border-left: 1px solid rgba(0,0,0,0.2);
z-index: 1;
}
/* --- Interaction States --- */
/* When the book is open */
#credits-diary.is-open {
transform: rotateX(10deg) rotateY(20deg) rotateZ(-2deg);
}
#credits-diary.is-open .diary-cover {
transform: translateZ(2px) rotateY(-145deg);
}
#cv-card, #credits-diary {
width: 100%;
}
}
@keyframes fadeOutLoader {
0% { opacity: 1; visibility: visible; }
90% { opacity: 1; visibility: visible; }
100% { opacity: 0; visibility: hidden; }
}
@keyframes introBoard {
0% {
opacity: 0;
transform: none; /* Scale removed to prevent all movement */
}
100% {
opacity: 1;
transform: none;
}
}
.board.animate-in {
animation: introBoard 1s ease-out 2s both;
}
#loader.animate-out {
animation: fadeOutLoader 2.5s forwards;
}
/* Poster "Attach" Animation */
@keyframes attachPoster {
0% {
opacity: 0;
transform: scale(1.5) rotate(15deg) translateY(-50px);
filter: blur(5px);
}
70% {
transform: scale(0.98) rotate(-2deg) translateY(5px);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg) translateY(0);
filter: blur(0);
}
}
/* Initial state for posters */
.info-board .bounty-card,
.info-board .envelope-contact,
.diary-container {
opacity: 0;
}
/* Trigger animation when .animate-in is added to .board */
.board.animate-in .bounty-card,
.board.animate-in .envelope-contact,
.board.animate-in .diary-container {
animation: attachPoster 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
/* Staggered delays for each element */
.board.animate-in #cv-card { animation-delay: 2.2s; }
.board.animate-in #gac-card { animation-delay: 2.4s; }
.board.animate-in #app-card { animation-delay: 2.6s; }
.board.animate-in #models-card { animation-delay: 2.8s; }
.board.animate-in .envelope-contact { animation-delay: 3.0s; }
.board.animate-in .diary-container { animation-delay: 3.2s; }
/* Magical sparkle particles for hover effects */
.magic-sparkle {
position: fixed;
width: 8px;
height: 8px;
background: radial-gradient(circle, #ffed4e 0%, #d4af37 50%, transparent 70%);
border-radius: 50%;
pointer-events: none;
box-shadow: 0 0 8px #d4af37;
animation: floating-sparkle 2s ease-out forwards;
}
/* Runes and mystical symbols on envelope */
.envelope-contact::before {
content: '✦ ✦ ✦';
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
font-size: 14px;
color: #8b7355;
letter-spacing: 8px;
opacity: 0.4;
z-index: 5;
}
.envelope-contact::after {
content: '✦ ✦ ✦';
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
font-size: 14px;
color: #8b7355;
letter-spacing: 8px;
opacity: 0.4;
z-index: 5;
}