:root{--re-black: #0b0c10;--re-dark: #1a1c23;--re-surface: #23252d;--re-surface2: #2d2f38;--re-red: #ff6f3c;--re-red-bright: #ff9b6a;--re-red-dim: #b34820;--re-red-glow: rgba(255,111,60,.45);--re-white: #f2f0ec;--re-offwhite: #e6dfd6;--re-grey: #9a8f85;--re-grey-dim: #5c5349;--re-border: rgba(255,111,60,.3);--re-border-dim: rgba(255, 255, 255, .06);--nav-h: 64px;--font-title: "Bebas Neue", "Oswald", sans-serif;--font-sub: "Oswald", sans-serif;--font-body: "Libre Baskerville", serif;--font-mono: "Special Elite", monospace}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);color:var(--re-white);min-height:100vh;line-height:1.75;overflow-x:hidden;background:var(--re-black)}body:before{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px}.reveal{opacity:0;transform:translateY(60px);filter:blur(6px);transition:opacity 1.4s cubic-bezier(.22,1,.36,1),transform 1.4s cubic-bezier(.22,1,.36,1),filter 1.2s ease}.reveal.active{opacity:1;transform:translateY(0);filter:blur(0)}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--re-dark)}::-webkit-scrollbar-thumb{background:var(--re-red-dim);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--re-red)}::selection{background:var(--re-red);color:#fff}@media (max-width: 768px){body:before,body:after{display:none}#cathedral-bg{display:none}}#effects-root{position:relative;min-height:100vh;z-index:1}#effects-root:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 140% 100% at 50% 50%,#ff6f3c0f,#ff6f3c0d 40%,#ff3cc414 75%,#ff6f3c1f)}body>*+*{position:relative}.re-separator{width:100%;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,111,60,.4) 30%,rgba(255,140,60,.6) 50%,rgba(255,111,60,.4) 70%,transparent 100%);margin:0}.hero{border-top:1px solid rgba(255,111,60,.25)}#re-particles{z-index:0}.navbar,#effects-root>*{position:relative;z-index:2}@keyframes glitchClip1{0%,to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:none}92%{clip-path:polygon(0 20%,100% 20%,100% 35%,0 35%);transform:translate(-4px);color:#ff6f3c}93%{clip-path:polygon(0 55%,100% 55%,100% 70%,0 70%);transform:translate(4px)}94%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:none}}@keyframes cursorBlink{0%,to{opacity:1}50%{opacity:0}}.section h3{position:relative}.section h3:after{content:attr(data-text);position:absolute;left:0;top:0;color:var(--re-red);opacity:0;clip-path:polygon(0 0,100% 0,100% 0,0 0);animation:titleGlitch 10s ease-in-out infinite}@keyframes titleGlitch{0%,88%,to{opacity:0;clip-path:polygon(0 0,100% 0,100% 0,0 0)}89%{opacity:.7;clip-path:polygon(0 30%,100% 30%,100% 50%,0 50%);transform:translate(-2px)}90%{opacity:0;clip-path:polygon(0 0,100% 0,100% 0,0 0)}}.app-main{padding-top:var(--nav-h)}.navbar{pointer-events:auto;position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:9999;display:flex;justify-content:space-between;align-items:center;padding:0 3rem;background:#08080880;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--re-border);overflow:hidden}.navbar:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,111,60,.08) 50%,transparent 100%);transform:translate(-120%);animation:navScan 9s ease-in-out infinite;pointer-events:none}@keyframes navScan{0%{transform:translate(-120%)}50%{transform:translate(120%)}to{transform:translate(120%)}}.navbar:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--re-red),transparent);animation:navGlow 4s ease-in-out infinite alternate}@keyframes navGlow{0%{opacity:.3;box-shadow:none}to{opacity:1;box-shadow:0 0 18px var(--re-red-glow)}}.logo{font-family:var(--font-title);font-size:1.6rem;letter-spacing:.22em;color:var(--re-white);cursor:pointer;position:relative;text-transform:uppercase;transition:color .3s ease,text-shadow .3s ease}.logo:hover{color:var(--re-red-bright);text-shadow:0 0 20px var(--re-red-glow)}.navbar nav{display:flex;align-items:center;gap:0}.navbar nav a{margin-left:2.4rem;text-decoration:none;color:#fff;font-family:var(--font-sub);font-size:.78rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;position:relative;transition:color .3s ease}.navbar nav a:after{content:"";position:absolute;left:-10%;bottom:-10px;width:0;height:2px;background:linear-gradient(90deg,#ffeb3c33,#ff6f3c,#ff8c3c33);transition:width .45s cubic-bezier(.22,1,.36,1)}.navbar nav a:hover{color:#ff6f3c;text-shadow:0 0 6px rgba(255,122,26,.6)}.navbar nav a:hover:after{width:120%}.navbar nav a:hover:before{opacity:1;transform:translate(-50%,-50%) scale(1)}@media (max-width: 768px){.navbar{height:56px;padding:0 1rem;flex-wrap:nowrap;gap:0}.logo{font-size:1.2rem}.navbar nav{gap:0}.navbar nav a{margin-left:1rem;font-size:.65rem;letter-spacing:.1em}.app-main{padding-top:56px}}.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:flex-start;padding:0 10rem;overflow:hidden}.hero:after{content:"";position:absolute;left:4.5rem;top:20%;height:60%;width:2px;background:linear-gradient(180deg,transparent,var(--re-red) 30%,var(--re-red) 70%,transparent);box-shadow:0 0 20px var(--re-red-glow);z-index:1;opacity:0;transform:scaleY(0);transform-origin:top;transition:opacity 1s ease,transform 1.2s cubic-bezier(.22,1,.36,1)}.hero.active:after{opacity:1;transform:scaleY(1)}.hero-glow{display:none}.hero-content{position:relative;z-index:2;max-width:700px;padding-left:2rem}#ashley1{position:absolute;left:50rem;top:50%;transform:translateY(-50%);max-width:650px;height:auto;z-index:0;pointer-events:none;-webkit-user-select:none;user-select:none;border-radius:8px;opacity:.9;mix-blend-mode:lighten;transition:transform .5s ease,box-shadow .5s ease;filter:brightness(1.2) contrast(1.1) saturate(1)}#ashley-about{position:absolute;left:50rem;top:90%;transform:translateY(-50%);max-width:345px;height:auto;z-index:0;pointer-events:none;-webkit-user-select:none;user-select:none;mix-blend-mode:lighten;filter:brightness(1.1) contrast(1.1) saturate(1);mask-image:linear-gradient(to bottom,#000 0% 70%,#0009 85%,#0000),linear-gradient(to right,#000 0% 65%,#00000080 80%,#0003,#0000);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 70%,rgba(0,0,0,.6) 85%,rgba(0,0,0,0) 100%),linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 65%,rgba(0,0,0,.5) 80%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0) 100%);mask-composite:intersect;-webkit-mask-composite:destination-in}#ashley-franja{position:absolute;left:50rem;top:50%;transform:translateY(-50%);max-width:650px;height:auto;z-index:0;pointer-events:none;-webkit-user-select:none;user-select:none;mix-blend-mode:lighten;transition:transform .5s ease,box-shadow .5s ease}.hero-content:before{content:"PORTFOLIO";display:block;font-family:var(--font-sub);font-size:.72rem;font-weight:400;letter-spacing:.4em;color:var(--re-red);margin-bottom:1.4rem;text-transform:uppercase}.hero-title{display:flex;flex-direction:column;gap:.2rem;font-family:var(--font-title);letter-spacing:.06em;text-transform:uppercase;line-height:1}.hero-title .nickname-wrapper{display:block}.hero-title .nickname{font-size:1.2rem;letter-spacing:.5em;color:var(--re-grey);font-family:var(--font-sub);font-weight:300;text-transform:uppercase}.hero-title .real-name{font-size:5.5rem;color:var(--re-white);line-height:.95}.glitch-name span{display:inline-block;animation:letterGlitch 3s infinite;animation-timing-function:ease-in-out}.glitch-name span:nth-child(odd){animation-duration:2.6s}.glitch-name span:nth-child(2n){animation-duration:3.4s}.glitch-name span:nth-child(3n){animation-delay:.4s}.glitch-name span:nth-child(4n){animation-delay:.8s}@keyframes letterGlitch{0%,85%,to{opacity:1;transform:translateZ(0);clip-path:inset(0 0 0 0)}86%{opacity:0}87%{opacity:1;transform:translate3d(-4px,0,0);clip-path:polygon(0 20%,100% 20%,100% 45%,0 45%);color:var(--re-red-bright)}88%{transform:translate3d(4px,0,0);clip-path:polygon(0 60%,100% 60%,100% 80%,0 80%)}89%{opacity:.3}90%{opacity:1;transform:translateZ(0);clip-path:inset(0 0 0 0);color:var(--re-white)}}.hero-subtitle{margin-top:1.6rem;font-family:var(--font-sub);font-size:.85rem;font-weight:300;letter-spacing:.35em;text-transform:uppercase;color:var(--re-grey);display:flex;align-items:center;gap:1rem}.hero-subtitle:before{content:"";display:inline-block;width:30px;height:1px;background:var(--re-red);box-shadow:0 0 8px var(--re-red-glow)}.hero-buttons{margin-top:3rem;display:flex;gap:1.2rem}@media (max-width: 768px){.hero{padding:0 1.5rem;justify-content:center;text-align:center}.hero:after{display:none}.hero-content{padding-left:0}.hero-content:before{text-align:center}.hero-title .real-name{font-size:3.2rem}.hero-subtitle,.hero-buttons{justify-content:center}}.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 2.4rem;font-family:var(--font-sub);font-size:.78rem;font-weight:400;letter-spacing:.28em;text-transform:uppercase;cursor:pointer;border:1px solid var(--re-red);background:transparent;color:var(--re-white);transition:background .4s ease,color .4s ease,box-shadow .4s ease,transform .4s cubic-bezier(.22,1,.36,1)}.btn:before{content:"";position:absolute;inset:0;background:var(--re-red);transform:translate(-101%);transition:transform .4s cubic-bezier(.22,1,.36,1);z-index:-1}.btn span,.btn>*{position:relative;z-index:1}.btn:hover{color:#fff;box-shadow:0 0 30px var(--re-red-glow),inset 0 0 20px #c0001a26;transform:translateY(-2px)}.btn:hover:before{transform:translate(0)}.btn:active{transform:translateY(0)}.btn.gold{border-color:var(--re-red);color:var(--re-white);background:transparent;box-shadow:none}.btn.gold:hover{box-shadow:0 0 30px var(--re-red-glow)}.section{padding:10rem 2rem;max-width:1100px;margin:0 auto;text-align:left;scroll-margin-top:5rem}.section h3{font-family:var(--font-title);font-size:3.8rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--re-white);line-height:1;margin-bottom:.4rem}.section-divider{width:80px;height:2px;margin:1rem 0 3rem;background:#ff6f3c;box-shadow:0 0 14px #ff6f3c99;position:relative;transform-origin:left center;transform:scaleX(0);opacity:0;transition:transform 1.2s cubic-bezier(.22,1,.36,1),opacity .8s ease}.section-divider.reveal.active{transform:scaleX(1);opacity:1}.section-divider:after{content:"";position:absolute;right:-12px;top:50%;transform:translateY(-50%);width:6px;height:6px;background:#ff6f3c;border-radius:50%;box-shadow:0 0 8px #ff6f3c99}.section p{font-family:var(--font-body);font-size:1.05rem;line-height:1.9;max-width:680px;color:var(--re-offwhite);letter-spacing:.01em}#about{margin-top:1rem}#technologies{margin-top:19rem}.technologies-list{list-style:none;margin-top:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.2rem;padding:0}.tech-item{position:relative;padding:1.2rem 1rem;font-family:var(--font-sub);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--re-offwhite);text-align:center;background:var(--re-surface);border:1px solid rgba(255,255,255,.06);overflow:hidden;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,color .25s ease;transform-style:preserve-3d}.tech-item:before{content:"";position:absolute;inset:0;border:1px solid rgba(255,111,60,.4);opacity:0;transition:opacity .3s ease}.tech-item:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x, 50%) var(--y, 50%),rgba(255,111,60,.35),transparent 60%);opacity:0;transition:opacity .3s ease;pointer-events:none}.tech-item:hover{color:var(--re-white);border-color:#ff6f3c;transform:translateY(-8px) scale(1.04);box-shadow:0 0 25px #ff6f3c59,inset 0 0 25px #ff6f3c14}.tech-item:hover:before{opacity:1}.tech-item:hover:after{opacity:1}.tech-item:active{transform:scale(.97)}#contact{margin-top:10rem}.contact-text{font-size:1rem;color:var(--re-grey);margin-bottom:3rem;letter-spacing:.02em}.contact-links{display:flex;gap:1.4rem;flex-wrap:wrap}.contact-item{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.8rem;font-family:var(--font-sub);font-size:.75rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--re-offwhite);text-decoration:none;background:var(--re-surface);border:1px solid rgba(255,255,255,.06);border-left:2px solid #ff6f3c;transition:color .3s ease,box-shadow .4s ease,transform .4s cubic-bezier(.22,1,.36,1),border-color .3s ease}.contact-item i{font-size:1rem;color:#ff6f3c;transition:color .3s ease}.contact-item:hover{color:var(--re-white);border-left-color:#ff9b6a;box-shadow:0 0 24px #ff6f3c4d,-4px 0 12px #ff6f3c33;transform:translate(4px)}.contact-item:hover i{color:#ff9b6a}@media (max-width: 768px){.section{padding:7rem 1.2rem;text-align:center}.section h3{font-size:2.4rem}.section-divider{margin:1rem auto 2.5rem;transform-origin:center}.section p{margin:0 auto}.technologies-list{grid-template-columns:repeat(2,1fr);gap:.9rem}.tech-item{font-size:.68rem;padding:1rem .7rem}.contact-links{flex-direction:column;align-items:center;gap:1rem}.contact-item{width:100%;max-width:280px;justify-content:center}}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem;margin-top:0;perspective:1200px}.card{position:relative;background:var(--re-surface);border:1px solid rgba(255,255,255,.05);border-top:2px solid var(--re-red);overflow:hidden;transform-style:preserve-3d;transition:transform .2s ease;will-change:transform}.card:before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .2s ease;pointer-events:none;z-index:1}@keyframes cardReveal{to{transform:translateY(0) scale(1);opacity:1}}.card:hover:before{opacity:1}.card-figure{position:relative;overflow:hidden;aspect-ratio:16 / 10;background:var(--re-dark);display:flex;align-items:center;justify-content:center}.card-figure img{width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .6s cubic-bezier(.22,1,.36,1),filter .6s ease}.card-figure:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(8,8,8,.7) 100%)}.card-base{padding:1.4rem 1.6rem 1.8rem;position:relative;z-index:2}.card h4{font-family:var(--font-title);font-size:1.4rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--re-white);margin-bottom:.7rem}.card p{font-family:var(--font-body);font-size:.88rem;line-height:1.7;color:var(--re-grey)}@media (max-width: 768px){.cards{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:2rem;position:relative}.cards::-webkit-scrollbar{display:none}.card{flex:0 0 88%;scroll-snap-align:center;transform:none!important;opacity:1!important;transition:none!important}.card:active{transform:none!important}.card-figure{aspect-ratio:4 / 3}}.logo{position:relative;display:inline-block;font-size:1.4rem;font-weight:600;color:#fff;transition:transform .4s ease,color .4s ease,text-shadow .4s ease}.logo:before,.logo:after{font-size:.7rem;color:inherit;position:absolute;transition:transform .6s ease,color .4s ease,text-shadow .4s ease}.logo:before{content:"▲";top:-.6rem;left:-.6rem;transform:rotate(-20deg);animation:floatUp 3.5s ease-in-out infinite alternate}.logo:after{content:"▼";bottom:-.6rem;right:-.6rem;transform:rotate(10deg);animation:floatDown 3.5s ease-in-out infinite alternate}.logo:hover{color:var(--re-red);text-shadow:0 0 18px var(--re-red-glow);transform:scale(1.08)}.logo:hover:before{transform:rotate(-40deg) scale(1.2);color:var(--re-red-bright);text-shadow:0 0 14px rgba(255,155,106,.7)}.logo:hover:after{transform:rotate(30deg) scale(1.2);color:var(--re-red-bright);text-shadow:0 0 14px rgba(255,155,106,.7)}@keyframes floatUp{0%{transform:translateY(0) rotate(-20deg)}to{transform:translateY(-6px) rotate(-25deg)}}@keyframes floatDown{0%{transform:translateY(0) rotate(10deg)}to{transform:translateY(6px) rotate(15deg)}}@keyframes logoPulse{0%,to{text-shadow:0 0 6px rgba(255,111,60,.4)}50%{text-shadow:0 0 22px rgba(255,111,60,.9)}}.logo{animation:logoPulse 4s ease-in-out infinite}.footer{width:100%;padding:2rem 3rem;background:#18191d;border-top:1px solid var(--re-border);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:50;overflow:hidden}.footer:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--re-red),transparent);opacity:.6}.footer p{font-family:var(--font-sub);font-size:.79rem;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:#ffffffa2;margin:0}@media (max-width: 768px){.footer{padding:1.5rem 1.2rem;flex-direction:column;gap:.5rem;text-align:center}.footer p{font-size:.65rem}}.music-icon{position:relative;width:26px;height:36px;cursor:pointer;display:inline-flex;align-items:flex-end;margin-left:1.6rem;transition:transform .4s cubic-bezier(.22,1,.36,1),filter .4s ease;touch-action:manipulation;flex-shrink:0}.note-head,.note-stem,.note-flag{transition:transform .4s ease,filter .4s ease}.note-head{position:absolute;width:9px;height:9px;background:var(--re-offwhite);border-radius:50%;bottom:0}.note-stem{position:absolute;width:2px;height:22px;background:var(--re-offwhite)}.note-flag{position:absolute;width:10px;height:5px;border-top:1.5px solid var(--re-offwhite);border-right:1.5px solid var(--re-offwhite);transform:rotate(45deg);transform-origin:bottom left;opacity:.75}.note1{left:0}.note1.note-stem{left:7px;bottom:4px}.note1.note-flag{left:7px;bottom:24px}.note2{left:11px}.note2.note-stem{left:18px;bottom:4px}.note2.note-flag{left:18px;bottom:24px}.music-icon.playing .note-head,.music-icon.playing .note-stem,.music-icon.playing .note-flag{animation:musicPulse 2.2s ease-in-out infinite}@keyframes musicPulse{0%{filter:drop-shadow(0 0 3px var(--re-red))}50%{filter:drop-shadow(0 0 8px var(--re-red-bright));transform:translateY(-1px) scale(1.05)}to{filter:drop-shadow(0 0 3px var(--re-red))}}.music-icon:hover,.music-icon:active{transform:scale(1.2) rotate(-5deg);filter:drop-shadow(0 0 6px var(--re-red-glow))}.music-icon:not(.playing) .note-head,.music-icon:not(.playing) .note-stem,.music-icon:not(.playing) .note-flag{animation:none;filter:none}@media (max-width: 768px){.music-icon{width:22px;height:30px;margin-left:.8rem}.note-head{width:7px;height:7px}.note-stem{height:18px}.note1.note-stem{left:6px}.note1.note-flag{left:6px;bottom:20px}.note2{left:9px}.note2.note-stem{left:15px}.note2.note-flag{left:15px;bottom:20px}}@media (max-width: 768px){*{-webkit-tap-highlight-color:transparent}body{font-size:14px;line-height:1.5;overflow-x:hidden}.reveal{opacity:0;transform:translateY(20px);filter:blur(3px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1),filter .8s ease}.reveal.active{opacity:1;transform:translateY(0);filter:blur(0)}hero{padding:4rem 1.5rem;flex-direction:column;justify-content:center;text-align:center}.hero:after{display:none}.hero-content{padding-left:0;max-width:100%}.hero-title .real-name{font-size:3rem;line-height:1.1}.hero-subtitle,.hero-buttons{justify-content:center}#ashley1{display:none}#ashley-franja{position:relative;left:auto;top:auto;transform:none;display:block;margin:3rem auto 0;max-width:90%;width:100%;opacity:.8}#ashley-franja{bottom:-115px}#ashley-about{position:relative;left:auto;top:auto;display:block;margin:0 auto;max-width:75%;width:100%;transform:translateY(19rem)}}#effects-root{position:relative;min-height:100vh}
