.skills-section{scroll-snap-align:start;box-sizing:border-box;background:#02060a;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100dvh;display:flex;position:relative;overflow:hidden}.skills-section *{box-sizing:border-box}@media (width<=1024px){.skills-section{justify-content:flex-start;height:auto;min-height:100dvh;padding:10vh 2rem}}.skills-section .background-elements{z-index:0;pointer-events:none;position:absolute;inset:0;overflow:hidden}.skills-section .background-elements .nebula-bg{filter:blur(60px);background:radial-gradient(circle at 50% 40%,#176fe826 0%,#0000 60%),radial-gradient(circle at 0 100%,#051c3880 0%,#0000 50%),radial-gradient(circle at 100% 0,#051c3880 0%,#0000 50%);position:absolute;inset:0}.skills-section .background-elements .skills-stars-canvas{pointer-events:none;mix-blend-mode:overlay;width:100%;height:100%;position:absolute;inset:0}.skills-section .trees-layer{z-index:1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.skills-section .trees-layer .tree-wrapper{-webkit-mask-composite:source-in;width:75%;height:125%;position:absolute;top:-25%;-webkit-mask-image:linear-gradient(90deg,#000 10%,#0000 100%),linear-gradient(#000 60%,#0000 95%);mask-image:linear-gradient(90deg,#000 10%,#0000 100%),linear-gradient(#000 60%,#0000 95%);-webkit-mask-composite:source-in;mask-composite:intersect}.skills-section .trees-layer .tree-wrapper .tree-img{object-fit:cover;object-position:left bottom;filter:brightness(.7)contrast(1.1)saturate(1.8)blur(2px)drop-shadow(0 0 20px #176fe866);mix-blend-mode:screen;width:100%;height:100%;display:block}.skills-section .trees-layer .left{width:78%;top:-24%;left:-3%;transform:rotate(-2deg)}.skills-section .trees-layer .right{width:65%;top:-25%;right:0;transform:scaleX(-1)rotate(1.1deg)scale(1.02)}@media (width<=1024px){.skills-section .trees-layer{opacity:.4}}@media (width<=768px){.skills-section .trees-layer{opacity:.2}}.skills-section .petals-layer{z-index:5;pointer-events:none;perspective:1000px;position:absolute;inset:0}.skills-section .petals-layer .sakura-petal-real{width:clamp(8px,1.2vw,16px);height:auto;position:absolute}.skills-section .content-wrapper{z-index:10;flex-direction:column;align-items:center;width:100%;max-width:1200px;max-height:95vh;display:flex;position:relative}@media (width<=1024px){.skills-section .content-wrapper{justify-content:center;max-height:none}}.skills-section .header-container{text-align:center;flex-shrink:0;margin-bottom:clamp(2rem,6vh,4.5rem);position:relative}@media (width<=768px){.skills-section .header-container{margin-bottom:2.5rem}}.skills-section .header-container:before{content:"";z-index:-1;filter:blur(20px);background:radial-gradient(circle,#176fe826 0%,#0000 70%);width:300px;height:150px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.skills-section .header-container .main-title{color:#fff;text-transform:uppercase;letter-spacing:2px;filter:drop-shadow(0 0 30px #176fe866);background:linear-gradient(#fff 0%,#bdd4f9 60%,#176fe8 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(2.5rem,6vh,3.5rem);font-weight:900}@media (width<=600px){.skills-section .header-container .main-title{font-size:2.2rem}}.skills-section .header-container .title-underline{transform-origin:50%;background:#176fe8;border-radius:10px;width:120px;height:3px;margin:10px auto 0;animation:3s ease-in-out infinite alternate neon-pulse;box-shadow:0 0 20px #176fe8}.skills-section .skills-grid{grid-template-columns:repeat(6,1fr);gap:clamp(12px,2vh,20px);width:100%;max-width:1200px;margin-bottom:clamp(24px,4vh,40px);padding:0 20px;display:grid}@media (width<=1024px){.skills-section .skills-grid{grid-template-columns:repeat(2,1fr);padding:0 2rem}.skills-section .skills-grid .skill-category-card{grid-column:span 1}}@media (width<=700px){.skills-section .skills-grid{grid-template-columns:1fr;gap:14px;padding:0 1.5rem}.skills-section .skills-grid .skill-category-card{grid-column:span 1}}.skills-section .skills-grid .skill-category-card{border:1px solid color-mix(in srgb, var(--accent,#176fe8) 22%, transparent);background:linear-gradient(160deg,#0a1d3266 0%,#02070ccc 100%);border-top:1px solid #ffffff1f;border-radius:20px;flex-direction:column;grid-column:span 2;align-items:center;gap:12px;padding:18px 20px;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s cubic-bezier(.2,.8,.2,1),background .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s cubic-bezier(.2,.8,.2,1);display:flex;box-shadow:0 8px 24px #00000080}@media (width<=700px){.skills-section .skills-grid .skill-category-card{padding:18px}}.skills-section .skills-grid .skill-category-card.featured{border-color:color-mix(in srgb, var(--accent,#176fe8) 26%, transparent);background:linear-gradient(160deg, color-mix(in srgb, var(--accent,#176fe8) 6%, #0a1d328c) 0%, #02070cd9 100%);box-shadow:0 10px 30px #00000080, 0 0 22px color-mix(in srgb, var(--accent,#176fe8) 10%, transparent);grid-column:span 3;padding:26px 28px}.skills-section .skills-grid .skill-category-card.featured h3{font-size:1.15rem}.skills-section .skills-grid .skill-category-card:hover{border-color:color-mix(in srgb, var(--accent,#176fe8) 65%, transparent);background:linear-gradient(160deg, color-mix(in srgb, var(--accent,#176fe8) 16%, #02070cbf) 0%, #02070cf2 100%);box-shadow:0 15px 40px #000000b3, 0 0 32px color-mix(in srgb, var(--accent,#176fe8) 28%, transparent);transform:translateY(-5px)}.skills-section .skills-grid .skill-category-card h3{color:var(--accent,white);letter-spacing:1px;text-transform:uppercase;text-shadow:0 0 14px color-mix(in srgb, var(--accent,#176fe8) 70%, transparent);text-align:center;margin:0;font-size:clamp(.75rem,1.2vw,.9rem);font-weight:700}.skills-section .skills-grid .skill-category-card .skill-tags{flex-wrap:wrap;justify-content:center;gap:7px;width:100%;display:flex}.skills-section .skills-grid .skill-category-card .skill-tags .tag{color:#ffffffd9;background:#ffffff0d;border:1px solid #ffffff14;border-radius:8px;align-items:center;gap:5px;padding:5px 12px;font-size:.82rem;font-weight:500;transition:background .3s,border-color .3s,color .3s,box-shadow .3s,transform .3s;display:inline-flex}.skills-section .skills-grid .skill-category-card .skill-tags .tag .tag-icon{opacity:.75;flex-shrink:0;font-size:.95em;transition:opacity .3s}.skills-section .skills-grid .skill-category-card .skill-tags .tag:hover{background:color-mix(in srgb, var(--accent,#176fe8) 85%, transparent);border-color:var(--accent,#176fe8);color:#fff;box-shadow:0 0 14px color-mix(in srgb, var(--accent,#176fe8) 55%, transparent);transform:translateY(-2px)}.skills-section .skills-grid .skill-category-card .skill-tags .tag:hover .tag-icon{opacity:1}@media (height<=700px) and (width<=1024px){.skills-section{justify-content:flex-start;padding-top:80px}}@keyframes neon-pulse{0%{opacity:.8;transform:scaleX(.85);box-shadow:0 0 10px #176fe8,0 0 5px #fff}to{opacity:1;transform:scaleX(1.05);box-shadow:0 0 25px #176fe8,0 0 10px #fff,0 0 5px #bdd4f9}}
