/* main variables */
:root {
--gold-bright: #FFD700;
--gold-mid:    #D4A017;
--gold-deep:   #8B6914;
--gold-pale:   #FFF0A0;
--amber:       #FF9F00;
--dark-base:   #0A0700;
--dark-1:      #120E02;
--dark-2:      #1C1500;
--dark-3:      #251C00;
--dark-4:      #2E2400;
--text-main:   #F5E6A3;
--text-muted:  #B89A4E;
--text-light:  #FFF8DC;
--white:       #FFFFFF;

--font-display: 'Cinzel Decorative', serif;
--font-serif:   'Cinzel', serif;
--font-body:    'Lato', sans-serif;

--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-in-out:    cubic-bezier(0.76, 0, 0.24, 1);
--ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
background-color: var(--dark-base);
color: var(--text-main);
font-family: var(--font-body);
font-weight: 300;
overflow-x: hidden;
cursor: none;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

#particles-canvas {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
}

.orb {
position: fixed;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
animation: orbFloat 20s ease-in-out infinite;
}
.orb-1 {
width: 500px; height: 500px;
background: radial-gradient(circle, color-mix(in srgb, var(--gold-mid) 18%, transparent) 0%, transparent 70%);
top: -150px; left: -150px;
animation-duration: 25s;
}
.orb-2 {
width: 400px; height: 400px;
background: radial-gradient(circle, color-mix(in srgb, var(--amber) 12%, transparent) 0%, transparent 70%);
bottom: 10%; right: -100px;
animation-duration: 30s;
animation-delay: -10s;
}
.orb-3 {
width: 300px; height: 300px;
background: radial-gradient(circle, color-mix(in srgb, var(--gold-bright) 10%, transparent) 0%, transparent 70%);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
animation-duration: 20s;
animation-delay: -5s;
}
@keyframes orbFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
33%       { transform: translate(40px, -30px) scale(1.05); }
66%       { transform: translate(-20px, 20px) scale(0.95); }
}

/* custom mouse */
.cursor-dot {
position: fixed;
width: 10px; height: 10px;
background: linear-gradient(135deg, var(--gold-pale), var(--gold-bright));
pointer-events: none;
z-index: 10000;
margin-left: -5px;
margin-top: -5px;
transform: rotate(45deg);
transition: opacity 0.2s, width 0.2s, height 0.2s;
box-shadow:
0 0 8px  var(--gold-bright),
0 0 20px color-mix(in srgb, var(--gold-bright) 55%, transparent),
inset 0 0 4px rgba(255,255,255,0.3);
clip-path: none;
}

/* rotating */
.cursor-ring {
position: fixed;
width: 28px; height: 28px;
pointer-events: none;
z-index: 9999;
margin-left: -14px;
margin-top: -14px;
border: 1.5px solid color-mix(in srgb, var(--gold-bright) 55%, transparent);
transition: width 0.3s var(--ease-out-quart),
height 0.3s var(--ease-out-quart),
margin 0.3s,
border-color 0.3s,
opacity 0.3s;
animation: diamondSpin 6s linear infinite;
}
.cursor-ring::before {
content: '';
position: absolute;
inset: 4px;
border: 1px solid color-mix(in srgb, var(--gold-bright) 25%, transparent);
animation: diamondSpinReverse 4s linear infinite;
}
@keyframes diamondSpin {
from { transform: rotate(45deg); }
to   { transform: rotate(405deg); }
}
@keyframes diamondSpinReverse {
from { transform: rotate(0deg); }
to   { transform: rotate(-360deg); }
}

.cursor-ring.hover {
width: 44px; height: 44px;
margin-left: -22px;
margin-top: -22px;
border-color: var(--gold-bright);
box-shadow: 0 0 16px color-mix(in srgb, var(--gold-bright) 35%, transparent);
}
.cursor-dot.hover-dot {
width: 14px; height: 14px;
box-shadow: 0 0 16px var(--gold-bright), 0 0 32px color-mix(in srgb, var(--gold-bright) 70%, transparent);
}

#particles-canvas {
pointer-events: none;
}

.navbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 0 40px;
height: 72px;
background: color-mix(in srgb, var(--dark-base) 60%, transparent);
backdrop-filter: blur(20px);
border-bottom: 1px solid color-mix(in srgb, var(--gold-mid) 15%, transparent);
transition: background 0.4s, border-color 0.4s;
}
.navbar.scrolled {
background: color-mix(in srgb, var(--dark-base) 92%, transparent);
border-color: color-mix(in srgb, var(--gold-mid) 30%, transparent);
}

.nav-center {
display: flex;
align-items: center;
gap: 28px;
}

.nav-links {
display: flex;
gap: 40px;
}
.nav-link {
font-family: var(--font-serif);
font-size: 0.85rem;
letter-spacing: 0.12em;
color: var(--text-muted);
position: relative;
transition: color 0.3s;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -4px; left: 0;
width: 0; height: 1px;
background: var(--gold-bright);
transition: width 0.3s var(--ease-out-quart);
box-shadow: 0 0 6px var(--gold-bright);
}
.nav-link:hover { color: var(--gold-bright); }
.nav-link:hover::after { width: 100%; }

.nav-divider {
width: 1px;
height: 24px;
background: color-mix(in srgb, var(--gold-mid) 25%, transparent);
}

.nav-socials {
display: flex;
gap: 12px;
}
.social-icon {
width: 34px; height: 34px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
border: 1px solid color-mix(in srgb, var(--gold-mid) 20%, transparent);
border-radius: 50%;
transition: color 0.3s, border-color 0.3s, transform 0.3s var(--ease-spring), box-shadow 0.3s;
}
.social-icon svg { width: 15px; height: 15px; }
.social-icon:hover {
color: var(--gold-bright);
border-color: var(--gold-bright);
transform: scale(1.2) translateY(-2px);
box-shadow: 0 0 16px color-mix(in srgb, var(--gold-bright) 40%, transparent);
}

.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 100px 40px 60px;
z-index: 1;
overflow: hidden;
}

.hero::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
45deg,
transparent,
transparent 20px,
color-mix(in srgb, var(--gold-mid) 2.5%, transparent) 20px,
color-mix(in srgb, var(--gold-mid) 2.5%, transparent) 21px
);
z-index: 0;
pointer-events: none;
}

.hero-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
text-align: center;
max-width: 800px;
}

/* pfp setup */
.pfp-wrapper {
position: relative;
width: 240px;
height: 240px;
display: flex;
align-items: center;
justify-content: center;
}

.pfp-ring {
position: absolute;
border-radius: 50%;
border-style: solid;
border-color: transparent;
animation: ringRotate linear infinite;
}
.pfp-ring-outer {
inset: -24px;
border-width: 2px;
border-top-color: var(--gold-bright);
border-right-color: var(--gold-mid);
animation-duration: 8s;
box-shadow: 0 0 20px color-mix(in srgb, var(--gold-bright) 20%, transparent);
}
.pfp-ring-mid {
inset: -12px;
border-width: 1.5px;
border-left-color: var(--amber);
border-bottom-color: var(--gold-mid);
animation-duration: 5s;
animation-direction: reverse;
}
.pfp-ring-inner {
inset: -4px;
border-width: 3px;
border-top-color: var(--gold-bright);
border-bottom-color: var(--gold-bright);
animation-duration: 3s;
}
@keyframes ringRotate {
to { transform: rotate(360deg); }
}

.pfp-image {
width: 240px;
height: 240px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--gold-mid);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--gold-bright) 30%, transparent),
0 0 40px color-mix(in srgb, var(--gold-bright) 30%, transparent),
0 0 80px color-mix(in srgb, var(--gold-mid) 20%, transparent),
inset 0 0 30px rgba(0,0,0,0.4);
animation: pfpBreath 6s ease-in-out infinite;
position: relative;
z-index: 2;
}
@keyframes pfpBreath {
0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-bright) 30%, transparent), 0 0 40px color-mix(in srgb, var(--gold-bright) 30%, transparent), 0 0 80px color-mix(in srgb, var(--gold-mid) 20%, transparent), inset 0 0 30px rgba(0,0,0,0.4); }
50%       { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-bright) 50%, transparent), 0 0 60px color-mix(in srgb, var(--gold-bright) 50%, transparent), 0 0 120px color-mix(in srgb, var(--gold-mid) 35%, transparent), inset 0 0 30px rgba(0,0,0,0.4); }
}

.pfp-glow {
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--gold-bright) 15%, transparent) 0%, transparent 60%);
z-index: 3;
pointer-events: none;
}

.hero-tagline-wrap {
overflow: hidden;
}
.hero-tagline {
font-family: var(--font-serif);
font-size: 0.8rem;
letter-spacing: 0.35em;
color: var(--gold-mid);
text-transform: uppercase;
animation: slideUp 0.8s var(--ease-out-quart) 0.3s both;
}

.hero-title {
font-family: var(--font-display);
font-size: clamp(1.8rem, 5.5vw, 4.4rem);
font-weight: 900;
line-height: 1.2;
letter-spacing: 0.04em;
overflow: visible;
padding: 0 24px;
width: 100%;
text-align: center;
}
.title-line {
display: block;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: slideUp 0.9s var(--ease-out-quart) 0.5s both;
position: relative;
text-shadow: none;
filter: drop-shadow(0 0 30px color-mix(in srgb, var(--gold-bright) 40%, transparent));
padding: 0 16px;
overflow: visible;
}

@keyframes slideUp {
from { transform: translateY(80px); opacity: 0; }
to   { transform: translateY(0);    opacity: 1; }
}

.hero-sub {
font-size: 1.05rem;
line-height: 1.8;
color: var(--text-muted);
max-width: 480px;
animation: fadeIn 1s var(--ease-out-quart) 0.8s both;
margin-bottom: 0;
}

.hero-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: translateY(0); }
}

.hero-cta-group {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
animation: fadeIn 1s var(--ease-out-quart) 1s both;
}

.btn {
font-family: var(--font-serif);
font-size: 0.85rem;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 14px 36px;
border-radius: 2px;
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
}
.btn::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,0.15);
transform: translateX(-100%) skewX(-15deg);
transition: transform 0.5s var(--ease-out-quart);
}
.btn:hover::before { transform: translateX(150%) skewX(-15deg); }

.btn-gold {
background: linear-gradient(135deg, var(--gold-mid) 0%, var(--gold-bright) 50%, var(--amber) 100%);
color: var(--dark-base);
font-weight: 700;
box-shadow: 0 4px 24px color-mix(in srgb, var(--gold-bright) 35%, transparent), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-gold:hover {
transform: translateY(-3px);
box-shadow: 0 8px 40px color-mix(in srgb, var(--gold-bright) 55%, transparent);
}

.btn-outline {
background: linear-gradient(135deg, var(--gold-mid) 0%, var(--gold-bright) 50%, var(--amber) 100%);
color: var(--dark-base);
font-weight: 700;
box-shadow: 0 4px 24px color-mix(in srgb, var(--gold-bright) 35%, transparent), inset 0 1px 0 rgba(255,255,255,0.2);
border: none;
}
.btn-outline:hover {
transform: translateY(-3px);
box-shadow: 0 8px 40px color-mix(in srgb, var(--gold-bright) 55%, transparent);
}

.scroll-indicator {
position: absolute;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
animation: fadeIn 1s var(--ease-out-quart) 1.5s both;
}
.scroll-indicator span {
font-family: var(--font-serif);
font-size: 0.65rem;
letter-spacing: 0.3em;
color: var(--text-muted);
text-transform: uppercase;
}
.scroll-line {
width: 1px;
height: 48px;
background: linear-gradient(to bottom, var(--gold-mid), transparent);
animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.3; transform: scaleY(1); }
50%       { opacity: 1;   transform: scaleY(1.2); }
}

/* commissions section */
section { position: relative; z-index: 1; }

.section-header {
text-align: center;
margin-bottom: 64px;
}
.section-label {
font-family: var(--font-serif);
font-size: 0.75rem;
letter-spacing: 0.4em;
color: var(--gold-mid);
text-transform: uppercase;
display: block;
margin-bottom: 14px;
}
.section-title {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
background: linear-gradient(135deg, var(--gold-pale) 0%, var(--gold-bright) 50%, var(--amber) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 20px color-mix(in srgb, var(--gold-bright) 25%, transparent));
margin-bottom: 20px;
}
.title-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.title-divider span {
height: 1px;
width: 80px;
background: linear-gradient(to right, transparent, var(--gold-mid));
}
.title-divider span:last-child {
background: linear-gradient(to left, transparent, var(--gold-mid));
}
.divider-crown {
width: 36px; height: 36px;
border-radius: 50%;
object-fit: cover;
border: 1px solid color-mix(in srgb, var(--gold-mid) 40%, transparent);
}
.divider-star {
color: var(--gold-bright);
font-size: 1.2rem;
filter: drop-shadow(0 0 6px var(--gold-bright));
}

.reveal {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.7s var(--ease-out-quart) var(--delay, 0s),
transform 0.7s var(--ease-out-quart) var(--delay, 0s);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}

.about-section {
padding: 120px 40px;
background: linear-gradient(180deg, var(--dark-base) 0%, var(--dark-1) 50%, var(--dark-base) 100%);
}

.about-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 32px;
max-width: 960px;
margin: 0 auto;
}

.about-card {
padding: 48px 36px;
background: linear-gradient(135deg, color-mix(in srgb, var(--dark-3) 80%, transparent) 0%, color-mix(in srgb, var(--dark-1) 90%, transparent) 100%);
border: 1px solid color-mix(in srgb, var(--gold-mid) 15%, transparent);
border-radius: 4px;
text-align: center;
position: relative;
overflow: hidden;
transition: border-color 0.4s, transform 0.4s var(--ease-spring), box-shadow 0.4s;
}
.about-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);
transform: scaleX(0);
transition: transform 0.4s var(--ease-out-quart);
}
.about-card::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--gold-bright) 6%, transparent) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.4s;
}
.about-card:hover {
border-color: color-mix(in srgb, var(--gold-mid) 40%, transparent);
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 30px color-mix(in srgb, var(--gold-mid) 10%, transparent);
}
.about-card:hover::before { transform: scaleX(1); }
.about-card:hover::after  { opacity: 1; }

.about-icon {
font-size: 2.5rem;
margin-bottom: 20px;
display: block;
animation: iconBob 3s ease-in-out infinite;
}
@keyframes iconBob {
0%, 100% { transform: translateY(0); }
50%       { transform: translateY(-6px); }
}

.about-card h3 {
font-family: var(--font-serif);
font-size: 1.1rem;
letter-spacing: 0.1em;
color: var(--gold-bright);
margin-bottom: 14px;
text-transform: uppercase;
}
.about-card p {
font-size: 0.9rem;
line-height: 1.8;
color: var(--text-muted);
}

.work-section {
padding: 120px 40px;
}

.filter-tabs {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 56px;
}
.filter-btn {
font-family: var(--font-serif);
font-size: 0.82rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 12px 32px;
background: transparent;
color: var(--text-muted);
border: 1px solid color-mix(in srgb, var(--gold-mid) 20%, transparent);
border-radius: 2px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
position: relative;
overflow: hidden;
transition: all 0.35s var(--ease-out-quart);
}
.filter-btn::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
transform: scaleX(0);
transition: transform 0.35s var(--ease-out-quart);
}
.filter-icon {
font-size: 1rem;
transition: transform 0.3s var(--ease-spring);
display: flex;
align-items: center;
}
.filter-icon-svg svg {
fill: currentColor;
display: block;
transition: transform 0.3s var(--ease-spring);
}
.filter-btn:hover .filter-icon,
.filter-btn.active .filter-icon {
transform: scale(1.2);
}
.filter-btn:hover,
.filter-btn.active {
background: linear-gradient(135deg, color-mix(in srgb, var(--gold-mid) 15%, transparent), color-mix(in srgb, var(--gold-bright) 6%, transparent));
color: var(--gold-bright);
border-color: var(--gold-mid);
box-shadow: 0 0 24px color-mix(in srgb, var(--gold-mid) 12%, transparent);
}
.filter-btn:hover::after,
.filter-btn.active::after {
transform: scaleX(1);
}
.filter-btn.active {
border-color: var(--gold-bright);
box-shadow: 0 0 30px color-mix(in srgb, var(--gold-mid) 20%, transparent), inset 0 0 20px color-mix(in srgb, var(--gold-mid) 5%, transparent);
}

.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
max-width: 1200px;
margin: 0 auto;
}

.portfolio-card {
aspect-ratio: 4/3;
position: relative;
overflow: hidden;
border-radius: 4px;
border: 1px solid color-mix(in srgb, var(--gold-mid) 15%, transparent);
cursor: pointer;
transition: border-color 0.4s, transform 0.4s var(--ease-spring), box-shadow 0.4s;
}
.portfolio-card:hover {
border-color: color-mix(in srgb, var(--gold-mid) 50%, transparent);
transform: scale(1.03) translateY(-4px);
box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px color-mix(in srgb, var(--gold-mid) 15%, transparent);
z-index: 2;
}

.card-inner {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--dark-3), var(--dark-2));
position: relative;
overflow: hidden;
}

/* image card (shows the actual work) */
.card-inner[style*="background-image"] {
background-size: cover;
background-position: center;
}

.card-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(135deg, color-mix(in srgb, var(--dark-3) 90%, transparent), color-mix(in srgb, var(--dark-base) 95%, transparent));
}
.placeholder-icon {
font-size: 3rem;
animation: iconBob 4s ease-in-out infinite;
filter: drop-shadow(0 0 16px color-mix(in srgb, var(--gold-bright) 40%, transparent));
}
.card-placeholder span {
font-family: var(--font-serif);
font-size: 0.85rem;
letter-spacing: 0.2em;
color: var(--gold-mid);
text-transform: uppercase;
}
.card-placeholder em {
font-style: normal;
font-size: 0.7rem;
letter-spacing: 0.15em;
color: var(--text-muted);
border: 1px solid color-mix(in srgb, var(--gold-mid) 20%, transparent);
padding: 4px 12px;
border-radius: 100px;
}

.card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 60%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px;
opacity: 0;
transition: opacity 0.3s;
}
.portfolio-card:hover .card-overlay { opacity: 1; }

.card-type {
font-family: var(--font-serif);
font-size: 0.65rem;
letter-spacing: 0.25em;
color: var(--gold-mid);
text-transform: uppercase;
}
.card-title {
font-family: var(--font-serif);
font-size: 1rem;
color: var(--gold-pale);
margin-top: 4px;
}

.portfolio-card.hidden {
display: none;
}

.contact-section {
padding: 120px 40px;
text-align: center;
}

.contact-sub {
font-size: 1rem;
color: var(--text-muted);
max-width: 480px;
margin: -36px auto 64px;
line-height: 1.8;
}

.contact-links {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 560px;
margin: 0 auto;
}

.contact-card {
display: flex;
align-items: center;
gap: 24px;
padding: 24px 32px;
background: linear-gradient(135deg, color-mix(in srgb, var(--dark-3) 70%, transparent), color-mix(in srgb, var(--dark-1) 80%, transparent));
border: 1px solid color-mix(in srgb, var(--gold-mid) 15%, transparent);
border-radius: 4px;
color: var(--text-muted);
transition: all 0.4s var(--ease-spring);
position: relative;
overflow: hidden;
}
.contact-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, color-mix(in srgb, var(--gold-mid) 5%, transparent), transparent);
opacity: 0;
transition: opacity 0.4s;
}
.contact-card:hover {
border-color: var(--gold-mid);
color: var(--gold-bright);
transform: translateX(8px);
box-shadow: 0 8px 40px rgba(0,0,0,0.4), -4px 0 0 var(--gold-mid);
}
.contact-card:hover::before { opacity: 1; }

.contact-card-icon {
width: 48px; height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: color-mix(in srgb, var(--gold-mid) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--gold-mid) 20%, transparent);
flex-shrink: 0;
transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.contact-card-icon svg { width: 20px; height: 20px; }
.contact-card:hover .contact-card-icon {
background: color-mix(in srgb, var(--gold-mid) 20%, transparent);
border-color: var(--gold-mid);
box-shadow: 0 0 16px color-mix(in srgb, var(--gold-mid) 30%, transparent);
}

.contact-card-text {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
text-align: left;
}
.contact-platform {
font-family: var(--font-serif);
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-muted);
transition: color 0.3s;
}
.contact-handle {
font-family: var(--font-body);
font-size: 1.05rem;
font-weight: 400;
color: var(--gold-pale);
}
.contact-card:hover .contact-platform { color: var(--gold-mid); }

.contact-arrow {
font-size: 1.3rem;
color: var(--gold-mid);
opacity: 0;
transform: translateX(-10px);
transition: opacity 0.3s, transform 0.3s var(--ease-spring);
}
.contact-card:hover .contact-arrow {
opacity: 1;
transform: translateX(0);
}

.footer {
padding: 60px 40px;
text-align: center;
border-top: 1px solid color-mix(in srgb, var(--gold-mid) 10%, transparent);
background: var(--dark-base);
}
.footer-logo {
width: 64px; height: 64px;
border-radius: 50%;
margin: 0 auto 20px;
border: 2px solid color-mix(in srgb, var(--gold-mid) 30%, transparent);
opacity: 0.7;
transition: opacity 0.3s, border-color 0.3s;
}
.footer-logo:hover { opacity: 1; border-color: var(--gold-mid); }
.footer-text {
font-family: var(--font-serif);
font-size: 0.8rem;
letter-spacing: 0.15em;
color: var(--text-muted);
margin-bottom: 8px;
}
.footer-sub {
font-size: 0.75rem;
color: color-mix(in srgb, var(--text-muted) 50%, transparent);
letter-spacing: 0.05em;
}

.lightbox {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s;
}
.lightbox.open {
opacity: 1;
pointer-events: all;
}
.lightbox-bg {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.9);
backdrop-filter: blur(12px);
cursor: pointer;
}
.lightbox-content {
position: relative;
z-index: 1;
max-width: 90vw;
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
transform: scale(0.9);
transition: transform 0.4s var(--ease-spring);
}
.lightbox.open .lightbox-content { transform: scale(1); }

.lightbox-img {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
border: 1px solid color-mix(in srgb, var(--gold-mid) 30%, transparent);
box-shadow: 0 0 60px rgba(0,0,0,0.8);
}
.lightbox-caption {
font-family: var(--font-serif);
font-size: 0.85rem;
letter-spacing: 0.1em;
color: var(--gold-mid);
}
.lightbox-close {
position: absolute;
top: -48px; right: 0;
background: none;
border: 1px solid color-mix(in srgb, var(--gold-mid) 30%, transparent);
color: var(--gold-mid);
font-size: 1.1rem;
width: 36px; height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%;
transition: all 0.3s;
}
.lightbox-close:hover {
background: color-mix(in srgb, var(--gold-mid) 15%, transparent);
border-color: var(--gold-bright);
color: var(--gold-bright);
}

/* respond */
@media (max-width: 768px) {
.navbar { padding: 0 20px; }
.nav-links { display: none; }
.hero { padding: 100px 24px 60px; }
.pfp-image, .pfp-wrapper { width: 180px; height: 180px; }
.about-section, .work-section, .contact-section { padding: 80px 24px; }
.contact-card { padding: 18px 20px; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.stat-item::after { display: none; }
}

@media (max-width: 480px) {
.portfolio-grid { grid-template-columns: 1fr; }
.hero-cta-group { flex-direction: column; align-items: center; }
.btn { width: 220px; text-align: center; }
}

/* scroll */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark-base); }
::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, var(--gold-mid), var(--gold-deep));
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-bright); }


/* music player*/

/* hide/show tab */
.music-hide-tab {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 2100;
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-mid), var(--gold-bright));
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--dark-base);
box-shadow: 0 4px 16px color-mix(in srgb, var(--gold-bright) 40%, transparent);
transition: transform 0.35s var(--ease-spring), box-shadow 0.35s;
}
.music-hide-tab svg { width: 16px; height: 16px; pointer-events: none; }
.music-hide-tab:hover {
transform: scale(1.15);
box-shadow: 0 6px 24px color-mix(in srgb, var(--gold-bright) 65%, transparent);
}

/* media pannel */
.music-player {
position: fixed;
bottom: 24px;
right: 68px;
z-index: 2000;
transform-origin: bottom right;
transition: opacity 0.4s var(--ease-in-out),
transform 0.45s var(--ease-in-out),
visibility 0.4s;
opacity: 1;
visibility: visible;
animation: none !important;
}
.music-player.player-hidden {
opacity: 0;
transform: scaleX(0.5) translateX(60px);
visibility: hidden;
pointer-events: none;
}

.music-player-inner {
display: flex;
align-items: stretch;
gap: 0;
background: color-mix(in srgb, var(--dark-base) 92%, transparent);
backdrop-filter: blur(20px);
border: 1px solid color-mix(in srgb, var(--gold-mid) 30%, transparent);
border-radius: 14px;
box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 20px color-mix(in srgb, var(--gold-mid) 8%, transparent);
overflow: hidden;
transition: box-shadow 0.3s, border-color 0.3s;
}
.music-player-inner:hover {
border-color: color-mix(in srgb, var(--gold-mid) 55%, transparent);
box-shadow: 0 8px 48px rgba(0,0,0,0.65), 0 0 30px color-mix(in srgb, var(--gold-mid) 15%, transparent);
}

.music-left {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
}

.music-toggle-btn {
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--gold-mid), var(--gold-bright));
border: none; border-radius: 50%; cursor: pointer;
color: var(--dark-base);
flex-shrink: 0;
transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
box-shadow: 0 0 12px color-mix(in srgb, var(--gold-bright) 30%, transparent);
}
.music-toggle-btn:hover {
transform: scale(1.15);
box-shadow: 0 0 24px color-mix(in srgb, var(--gold-bright) 55%, transparent);
}
.music-toggle-btn svg { width: 16px; height: 16px; }

/* name of track/music and bar holder */
.music-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 110px;
max-width: 150px;
}

.music-track-marquee {
width: 100%;
overflow: hidden;
position: relative;
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.music-track-name {
font-family: var(--font-serif);
font-size: 0.68rem;
letter-spacing: 0.08em;
color: var(--gold-pale);
white-space: nowrap;
display: inline-block;
}

.music-track-marquee.is-scrolling {
display: flex;
}
.music-track-marquee.is-scrolling .music-track-name {
animation: seamlessMarquee 9s linear infinite;
padding-right: 48px;
flex-shrink: 0;
}
@keyframes seamlessMarquee {
0%   { transform: translateX(0); }
100% { transform: translateX(-100%); }
}

.music-bars {
display: flex;
align-items: flex-end;
gap: 2px;
height: 10px;
}
.music-bars span {
display: block; width: 3px;
background: var(--gold-mid);
border-radius: 2px; height: 3px;
}
.music-bars.playing span:nth-child(1) { animation: bar 0.8s ease-in-out infinite; }
.music-bars.playing span:nth-child(2) { animation: bar 0.6s ease-in-out 0.15s infinite; }
.music-bars.playing span:nth-child(3) { animation: bar 0.9s ease-in-out 0.3s  infinite; }
.music-bars.playing span:nth-child(4) { animation: bar 0.7s ease-in-out 0.1s  infinite; }
@keyframes bar {
0%, 100% { height: 3px; }
50%       { height: 10px; background: var(--gold-bright); }
}

.music-controls { display: flex; gap: 4px; }
.music-ctrl-btn {
background: none; border: none;
color: var(--text-muted);
font-size: 0.6rem; cursor: pointer;
padding: 4px 6px; border-radius: 4px;
transition: color 0.2s, background 0.2s;
}
.music-ctrl-btn:hover {
color: var(--gold-bright);
background: color-mix(in srgb, var(--gold-mid) 10%, transparent);
}

.music-volume-wrap {
display: flex;
align-items: center;
gap: 6px;
}
.music-volume-btn {
background: none; border: none;
font-size: 0.95rem; cursor: pointer;
padding: 2px 2px;
flex-shrink: 0;
transition: transform 0.2s var(--ease-spring), filter 0.2s;
filter: grayscale(0.3);
}
.music-volume-btn:hover { transform: scale(1.2); filter: grayscale(0); }

/* vol slider */
.music-volume-slider {
-webkit-appearance: none;
appearance: none;
width: 72px;
height: 3px;
border-radius: 2px;
background: linear-gradient(
to right,
var(--gold-mid) 0%,
var(--gold-mid) calc(var(--val, 25) * 1%),
color-mix(in srgb, var(--gold-mid) 18%, transparent) calc(var(--val, 25) * 1%),
color-mix(in srgb, var(--gold-mid) 18%, transparent) 100%
);
outline: none;
cursor: pointer;
transition: opacity 0.3s;
}
.music-volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 11px; height: 11px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-pale), var(--gold-bright));
box-shadow: 0 0 6px color-mix(in srgb, var(--gold-bright) 60%, transparent);
cursor: pointer;
transition: transform 0.2s var(--ease-spring), box-shadow 0.2s;
}
.music-volume-slider::-webkit-slider-thumb:hover {
transform: scale(1.35);
box-shadow: 0 0 12px color-mix(in srgb, var(--gold-bright) 90%, transparent);
}
.music-volume-slider::-moz-range-thumb {
width: 11px; height: 11px;
border: none; border-radius: 50%;
background: linear-gradient(135deg, var(--gold-pale), var(--gold-bright));
box-shadow: 0 0 6px color-mix(in srgb, var(--gold-bright) 60%, transparent);
cursor: pointer;
}

.music-divider {
width: 1px;
background: color-mix(in srgb, var(--gold-mid) 18%, transparent);
margin: 8px 0;
}

.music-right {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 16px 10px 14px;
}

.music-cover-thumb {
width: 72px;
height: 72px;
border-radius: 6px;
object-fit: cover;
border: 1px solid color-mix(in srgb, var(--gold-mid) 35%, transparent);
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(0,0,0,0.6);
transition: opacity 0.2s ease, transform 0.3s var(--ease-spring), box-shadow 0.3s;
}
.music-cover-thumb:hover {
transform: scale(1.06);
box-shadow: 0 6px 24px color-mix(in srgb, var(--gold-mid) 40%, transparent);
}

/* credits */
.music-credit-info {
display: flex;
flex-direction: column;
gap: 3px;
max-width: 180px;
}
.mci-ost {
font-family: var(--font-serif);
font-size: 0.78rem;
color: var(--gold-pale);
font-weight: 600;
letter-spacing: 0.05em;
white-space: nowrap;
}
.mci-dev {
font-family: var(--font-body);
font-size: 0.68rem;
color: var(--text-muted);
line-height: 1.4;
}
.mci-pub {
font-family: var(--font-body);
font-size: 0.63rem;
color: color-mix(in srgb, var(--text-muted) 55%, transparent);
}
.mci-note {
font-family: var(--font-body);
font-size: 0.62rem;
color: color-mix(in srgb, var(--text-muted) 40%, transparent);
margin-top: 3px;
padding-top: 5px;
border-top: 1px solid color-mix(in srgb, var(--gold-mid) 10%, transparent);
}
.mci-note em {
font-style: normal;
color: var(--gold-mid);
}

/* for the people on mobile */
@media (max-width: 600px) {
.music-player { right: 56px; bottom: 16px; }
.music-hide-tab { right: 16px; bottom: 16px; }
.music-right { padding: 8px 12px 8px 10px; gap: 10px; }
.music-cover-thumb { width: 52px; height: 52px; }
.music-credit-info { max-width: 130px; }
.music-info { min-width: 80px; }
}


/* vid cards */
.video-card .card-inner {
background: var(--dark-2);
}
.card-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
transition: opacity 0.4s;
}
.video-card:hover .card-video {
opacity: 1;
}
.video-card .card-inner::before {
content: '▶';
position: absolute;
top: 12px; right: 12px;
z-index: 3;
font-size: 0.65rem;
letter-spacing: 0.1em;
color: var(--gold-bright);
background: rgba(0,0,0,0.55);
border: 1px solid color-mix(in srgb, var(--gold-bright) 30%, transparent);
border-radius: 4px;
padding: 3px 8px;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.3s, transform 0.3s var(--ease-spring);
pointer-events: none;
}
.video-card:hover .card-inner::before {
opacity: 1;
transform: translateY(0);
}

/* the vibe shifting engine*/
.vibe-overlay {
position: fixed; inset: 0; z-index: 1;
pointer-events: none; opacity: 0;
transition: opacity 1.2s ease, background 0.6s ease;
}
.vibe-overlay.active { opacity: 1; }

.vibe-scanlines {
position: fixed; inset: 0; z-index: 2;
pointer-events: none; opacity: 0;
transition: opacity 1.2s ease;
}
.vibe-scanlines.active { opacity: 1; }

.vibe-noise {
position: fixed; inset: 0; z-index: 2;
pointer-events: none; opacity: 0;
transition: opacity 1.2s ease;
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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 180px; mix-blend-mode: overlay;
animation: noiseDrift 0.6s steps(2) infinite;
}
.vibe-noise.active { opacity: 0.05; }
@keyframes noiseDrift {
0%   { background-position: 0 0; }
50%  { background-position: -20px 15px; }
100% { background-position: 10px -10px; }
}

/* restore when no music playing */
body:not([data-vibe]) {
--gold-bright: #FFD700;
--gold-mid:    #D4A017;
--gold-deep:   #8B6914;
--gold-pale:   #FFF0A0;
--amber:       #FF9F00;
--dark-base:   #0A0700;
--dark-1:      #120E02;
--dark-2:      #1C1500;
--dark-3:      #251C00;
--dark-4:      #2E2400;
--text-main:   #F5E6A3;
--text-muted:  #B89A4E;
--text-light:  #FFF8DC;
background-color: #0A0700 !important;
}

/* color transition */
body.vibe-active,
body.vibe-active *:not(canvas):not(video):not(audio):not(.title-line):not(.pfp-image) {
transition-property: background-color, border-color, color, box-shadow;
transition-duration: 0.8s;
transition-timing-function: ease;
}

body:not([data-vibe]) .title-line {
animation: none;
filter: drop-shadow(0 0 30px color-mix(in srgb, var(--gold-bright) 40%, transparent));
}

/* ui movement*/
body.vibe-active .pfp-wrapper    { animation: floatPfp    4s   ease-in-out infinite; }
body.vibe-active .hero-tagline   { animation: floatTag    5.5s ease-in-out 0.3s infinite; }
body.vibe-active .hero-sub       { animation: floatSub    6s   ease-in-out 0.7s infinite; }
body.vibe-active .hero-cta-group { animation: floatCta    5s   ease-in-out 1.1s infinite; }
body.vibe-active .nav-center     { animation: floatNav    7s   ease-in-out 0.1s infinite; }
body.vibe-active .about-card:nth-child(1) { animation: floatCardA 5s   ease-in-out 0s   infinite; }
body.vibe-active .about-card:nth-child(2) { animation: floatCardB 5.5s ease-in-out 0.6s infinite; }
body.vibe-active .about-card:nth-child(3) { animation: floatCardC 5s   ease-in-out 1.2s infinite; }
body.vibe-active .footer-logo    { animation: floatTag    4.5s ease-in-out 0.5s infinite; }
body.vibe-active .contact-card:nth-child(1) { animation: floatCardA 5.5s ease-in-out 0s   infinite; }
body.vibe-active .contact-card:nth-child(2) { animation: floatCardB 5.5s ease-in-out 0.5s infinite; }
body.vibe-active .contact-card:nth-child(3) { animation: floatCardC 5.5s ease-in-out 1s   infinite; }
body.vibe-active .section-title  { animation: floatSub    6.5s ease-in-out 0.4s infinite; }
body.vibe-active .music-player   { animation: floatPfp    5s   ease-in-out 0.8s infinite; }

/* floating animation/movement */
@keyframes floatPfp {
0%   { transform: translateY(0px)  translateX(0px)   rotate(0deg); }
25%  { transform: translateY(-7px) translateX(3px)   rotate(0.5deg); }
50%  { transform: translateY(-10px) translateX(0px)  rotate(0deg); }
75%  { transform: translateY(-5px) translateX(-3px)  rotate(-0.4deg); }
100% { transform: translateY(0px)  translateX(0px)   rotate(0deg); }
}
@keyframes floatTag {
0%   { transform: translateY(0px)  translateX(0px)   rotate(0deg); }
30%  { transform: translateY(-5px) translateX(-4px)  rotate(-0.3deg); }
60%  { transform: translateY(-8px) translateX(2px)   rotate(0.35deg); }
100% { transform: translateY(0px)  translateX(0px)   rotate(0deg); }
}
@keyframes floatSub {
0%   { transform: translateY(0px)  translateX(0px)  rotate(0deg); }
40%  { transform: translateY(-6px) translateX(4px)  rotate(0.25deg); }
70%  { transform: translateY(-4px) translateX(-2px) rotate(-0.2deg); }
100% { transform: translateY(0px)  translateX(0px)  rotate(0deg); }
}
@keyframes floatCta {
0%   { transform: translateY(0px)  translateX(0px)  rotate(0deg); }
35%  { transform: translateY(-6px) translateX(-3px) rotate(-0.3deg); }
65%  { transform: translateY(-9px) translateX(3px)  rotate(0.3deg); }
100% { transform: translateY(0px)  translateX(0px)  rotate(0deg); }
}
@keyframes floatNav {
0%   { transform: translateY(0px)  translateX(0px)  rotate(0deg); }
50%  { transform: translateY(-3px) translateX(2px)  rotate(0.15deg); }
100% { transform: translateY(0px)  translateX(0px)  rotate(0deg); }
}
@keyframes floatCardA {
0%   { transform: translateY(0px)  translateX(0px)  rotate(0deg); }
40%  { transform: translateY(-8px) translateX(-5px) rotate(-0.5deg); }
100% { transform: translateY(0px)  translateX(0px)  rotate(0deg); }
}
@keyframes floatCardB {
0%   { transform: translateY(0px)  translateX(0px)  rotate(0deg); }
50%  { transform: translateY(-7px) translateX(5px)  rotate(0.45deg); }
100% { transform: translateY(0px)  translateX(0px)  rotate(0deg); }
}
@keyframes floatCardC {
0%   { transform: translateY(0px)  translateX(0px)  rotate(0deg); }
35%  { transform: translateY(-9px) translateX(-3px) rotate(0.4deg); }
70%  { transform: translateY(-5px) translateX(4px)  rotate(-0.35deg); }
100% { transform: translateY(0px)  translateX(0px)  rotate(0deg); }
}
@keyframes pfpPulse {
0%,100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-bright) 30%, transparent), 0 0 40px color-mix(in srgb, var(--gold-bright) 30%, transparent), 0 0 80px color-mix(in srgb, var(--gold-mid) 20%, transparent); }
50%      { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold-bright) 55%, transparent), 0 0 70px color-mix(in srgb, var(--gold-bright) 55%, transparent), 0 0 130px color-mix(in srgb, var(--gold-mid) 35%, transparent); }
}

body:not(.vibe-active):not(.always-float) .pfp-wrapper,
body:not(.vibe-active):not(.always-float) .hero-tagline,
body:not(.vibe-active):not(.always-float) .hero-sub,
body:not(.vibe-active):not(.always-float) .hero-cta-group,
body:not(.vibe-active):not(.always-float) .nav-center,
body:not(.vibe-active):not(.always-float) .about-card,
body:not(.vibe-active):not(.always-float) .footer-logo,
body:not(.vibe-active):not(.always-float) .contact-card,
body:not(.vibe-active):not(.always-float) .section-title,
body:not(.vibe-active) .music-player {
animation: none !important;
transform: none !important;
}
body:not([data-vibe]) .title-line {
animation: none;
}
body:not([data-vibe]) .pfp-image {
animation: pfpBreath 6s ease-in-out infinite;
}


/* media player vibe css */

/* canvas animation */
.vibe-canvas {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity 1.2s ease;
}
.vibe-canvas.active { opacity: 1; }

/* restoration */
body:not([data-vibe]) {
--gold-bright: #FFD700;
--gold-mid:    #D4A017;
--gold-deep:   #8B6914;
--gold-pale:   #FFF0A0;
--amber:       #FF9F00;
--dark-base:   #0A0700;
--dark-1:      #120E02;
--dark-2:      #1C1500;
--dark-3:      #251C00;
--dark-4:      #2E2400;
--text-main:   #F5E6A3;
--text-muted:  #B89A4E;
--text-light:  #FFF8DC;
background-color: #0A0700 !important;
}

body[data-vibe] *:not(.vibe-canvas):not(canvas):not(.pfp-image):not(.title-line) {
transition-property: background-color, border-color, color;
transition-duration: 0.15s;
transition-timing-function: ease;
}
body:not([data-vibe]) *:not(.vibe-canvas):not(canvas):not(.pfp-image):not(.title-line) {
transition-property: background-color, border-color, color;
transition-duration: 0.3s;
transition-timing-function: ease;
}

body.vibe-active .pfp-wrapper      { animation: vibeFloat  4s ease-in-out infinite; }
body.vibe-active .hero-tagline     { animation: vibeFloat  5s ease-in-out 0.3s infinite; }
body.vibe-active .hero-sub         { animation: vibeFloatX 6s ease-in-out 0.7s infinite; }
body.vibe-active .hero-cta-group   { animation: vibeFloat  5s ease-in-out 1.1s infinite; }
body.vibe-active .nav-center       { animation: vibeFloatX 7s ease-in-out 0.1s infinite; }
body.vibe-active .about-card:nth-child(1) { animation: vibeFloat  5s ease-in-out 0s   infinite; }
body.vibe-active .about-card:nth-child(2) { animation: vibeFloatX 5s ease-in-out 0.5s infinite; }
body.vibe-active .about-card:nth-child(3) { animation: vibeFloat  5s ease-in-out 1s   infinite; }
body.vibe-active .contact-card:nth-child(1) { animation: vibeFloat  5s ease-in-out 0s   infinite; }
body.vibe-active .contact-card:nth-child(2) { animation: vibeFloatX 5s ease-in-out 0.4s infinite; }
body.vibe-active .contact-card:nth-child(3) { animation: vibeFloat  5s ease-in-out 0.8s infinite; }
body.vibe-active .portfolio-card:nth-child(1) { animation: vibeFloat  5s ease-in-out 0s   infinite; }
body.vibe-active .portfolio-card:nth-child(2) { animation: vibeFloatX 5s ease-in-out 0.2s infinite; }
body.vibe-active .portfolio-card:nth-child(3) { animation: floatCardA 5s ease-in-out 0.4s infinite; }
body.vibe-active .portfolio-card:nth-child(4) { animation: vibeFloatX 5s ease-in-out 0.6s infinite; }
body.vibe-active .portfolio-card:nth-child(5) { animation: vibeFloat  5s ease-in-out 0.8s infinite; }
body.vibe-active .portfolio-card:nth-child(6) { animation: floatCardB 5s ease-in-out 1s   infinite; }
body.vibe-active .section-title    { animation: vibeFloatX 6s ease-in-out 0.2s infinite; }
body.vibe-active .music-player     { animation: vibeFloat  5s ease-in-out 0.6s infinite; }
body.vibe-active .comm-category:nth-child(1) { animation: vibeFloat  5s ease-in-out 0s   infinite; }
body.vibe-active .comm-category:nth-child(2) { animation: vibeFloatX 5s ease-in-out 0.5s infinite; }
body.vibe-active .comm-notice      { animation: vibeFloatX 6.5s ease-in-out 0.3s infinite; }
body.vibe-active .comm-discord-note { animation: vibeFloat  6s   ease-in-out 0.6s infinite; }
body.vibe-active .comm-payment     { animation: vibeFloat  5.5s ease-in-out 0.8s infinite; }

@keyframes vibeFloat {
0%,100% { transform: translateY(0px) rotate(0deg); }
35%     { transform: translateY(-7px) translateX(3px) rotate(0.4deg); }
70%     { transform: translateY(-3px) translateX(-2px) rotate(-0.3deg); }
}
@keyframes vibeFloatX {
0%,100% { transform: translateY(0px) rotate(0deg); }
40%     { transform: translateY(-6px) translateX(-4px) rotate(-0.35deg); }
75%     { transform: translateY(-9px) translateX(3px) rotate(0.3deg); }
}

body:not(.vibe-active):not(.always-float) .pfp-wrapper,
body:not(.vibe-active):not(.always-float) .hero-tagline,
body:not(.vibe-active):not(.always-float) .hero-sub,
body:not(.vibe-active):not(.always-float) .hero-cta-group,
body:not(.vibe-active):not(.always-float) .nav-center,
body:not(.vibe-active):not(.always-float) .about-card,
body:not(.vibe-active):not(.always-float) .contact-card,
body:not(.vibe-active):not(.always-float) .section-title,
body:not(.vibe-active) .music-player,
body:not(.vibe-active) .portfolio-card,
body:not(.vibe-active) .comm-category,
body:not(.vibe-active) .comm-notice,
body:not(.vibe-active) .comm-discord-note,
body:not(.vibe-active) .comm-payment {
animation: none !important;
transform: none !important;
}
body:not(.vibe-active) .comm-warning {
animation: warningGlow 2.5s ease-in-out infinite !important;
transform: none !important;
}

@keyframes pfpPulse {
0%,100% { box-shadow: 0 0 0 1px color-mix(in srgb,var(--gold-bright) 35%,transparent), 0 0 40px color-mix(in srgb,var(--gold-bright) 35%,transparent), 0 0 80px color-mix(in srgb,var(--gold-mid) 20%,transparent); }
50%      { box-shadow: 0 0 0 2px color-mix(in srgb,var(--gold-bright) 65%,transparent), 0 0 70px color-mix(in srgb,var(--gold-bright) 65%,transparent), 0 0 130px color-mix(in srgb,var(--gold-mid) 38%,transparent); }
}

@keyframes titleGlowVibe {
0%,100% { filter: drop-shadow(0 0 16px var(--gold-mid)); }
50%      { filter: drop-shadow(0 0 50px var(--gold-bright)); }
}

.commissions-section {
padding: 120px 40px;
background: linear-gradient(180deg, var(--dark-base) 0%, var(--dark-1) 50%, var(--dark-base) 100%);
}

.comm-notice {
display: flex;
align-items: flex-start;
gap: 18px;
max-width: 820px;
margin: 0 auto 72px;
padding: 24px 30px;
background: linear-gradient(135deg, color-mix(in srgb, var(--dark-3) 80%, transparent), color-mix(in srgb, var(--dark-2) 90%, transparent));
border: 1px solid color-mix(in srgb, var(--gold-mid) 25%, transparent);
border-left: 3px solid var(--gold-mid);
border-radius: 4px;
}
.comm-notice-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.comm-notice p { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.85; color: var(--text-muted); }

.comm-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px;
max-width: 900px;
margin: 0 auto 64px;
}

.comm-category {
background: linear-gradient(135deg, color-mix(in srgb, var(--dark-3) 75%, transparent), color-mix(in srgb, var(--dark-2) 88%, transparent));
border: 1px solid color-mix(in srgb, var(--gold-mid) 18%, transparent);
border-radius: 6px;
overflow: hidden;
transition: border-color 0.3s, box-shadow 0.3s;
}
.comm-category:hover {
border-color: color-mix(in srgb, var(--gold-mid) 45%, transparent);
box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 24px color-mix(in srgb, var(--gold-mid) 10%, transparent);
}

.comm-category-header {
display: flex;
align-items: center;
gap: 14px;
padding: 22px 26px 18px;
border-bottom: 1px solid color-mix(in srgb, var(--gold-mid) 12%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--gold-mid) 8%, transparent), transparent);
}
.comm-cat-icon { font-size: 1.6rem; }
.comm-category-header h3 {
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold-bright);
}

.comm-tiers { padding: 10px 0; }

.comm-tier {
padding: 16px 26px;
border-bottom: 1px solid color-mix(in srgb, var(--gold-mid) 8%, transparent);
transition: background 0.2s;
}
.comm-tier:last-child { border-bottom: none; }
.comm-tier:hover { background: color-mix(in srgb, var(--gold-mid) 5%, transparent); }

.comm-tier-top {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 5px;
}
.comm-tier-name {
font-family: var(--font-serif);
font-size: 0.82rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-main);
}
.comm-tier-price {
font-family: var(--font-display);
font-size: 1.05rem;
color: var(--gold-bright);
filter: drop-shadow(0 0 8px color-mix(in srgb, var(--gold-bright) 40%, transparent));
}
.comm-tier-desc {
font-family: var(--font-body);
font-size: 0.8rem;
color: var(--text-muted);
line-height: 1.5;
margin: 0;
}
.comm-tier-mid { background: color-mix(in srgb, var(--gold-mid) 4%, transparent); }
.comm-tier-top-level { background: color-mix(in srgb, var(--gold-mid) 7%, transparent); }
.comm-tier-top-level .comm-tier-name { color: var(--gold-pale); }
.comm-tier-top-level .comm-tier-price { font-size: 1.15rem; }
.comm-complexity-note {
display: block;
margin-top: 6px;
font-family: var(--font-body);
font-size: 0.7rem;
color: color-mix(in srgb, var(--text-muted) 65%, transparent);
font-style: italic;
}

.comm-payment {
text-align: center;
max-width: 520px;
margin: 0 auto;
padding: 32px;
background: linear-gradient(135deg, color-mix(in srgb, var(--dark-3) 70%, transparent), color-mix(in srgb, var(--dark-2) 85%, transparent));
border: 1px solid color-mix(in srgb, var(--gold-mid) 20%, transparent);
border-radius: 6px;
}
.comm-payment-note {
font-family: var(--font-body);
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.7;
margin-bottom: 22px;
}
.comm-pay-btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.9rem;
padding: 16px 48px;
letter-spacing: 0.15em;
text-decoration: none;
}

@media (max-width: 600px) {
.commissions-section { padding: 80px 20px; }
.comm-notice { flex-direction: column; gap: 10px; }
.comm-grid { grid-template-columns: 1fr; }
.comm-payment { padding: 24px 20px; }
}

.comm-warning {
max-width: 820px;
margin: 0 auto 24px;
padding: 20px 28px;
background: linear-gradient(135deg, rgba(200,20,20,0.18), rgba(140,0,0,0.12));
border: 1px solid rgba(220,50,50,0.45);
border-left: 4px solid #dd2222;
border-radius: 4px;
box-shadow: 0 0 20px rgba(200,20,20,0.2), inset 0 0 16px rgba(180,0,0,0.06);
animation: warningGlow 2.5s ease-in-out infinite;
}
.comm-warning p {
font-family: var(--font-serif);
font-size: 0.95rem;
letter-spacing: 0.08em;
color: #ff8888;
margin: 0;
text-shadow: 0 0 10px rgba(255,80,80,0.4);
}
@keyframes warningGlow {
0%,100% { box-shadow: 0 0 16px rgba(200,20,20,0.2), inset 0 0 12px rgba(180,0,0,0.06); border-color: rgba(220,50,50,0.4); }
50%      { box-shadow: 0 0 32px rgba(220,30,30,0.45), inset 0 0 20px rgba(200,0,0,0.1); border-color: rgba(240,60,60,0.7); }
}

body.vibe-active .comm-warning { animation: vibeFloat 5s ease-in-out 0.1s infinite, warningGlow 2.5s ease-in-out infinite; }

.comm-robux {
display: inline-block;
margin-top: 5px;
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.06em;
color: color-mix(in srgb, var(--gold-mid) 80%, transparent);
background: color-mix(in srgb, var(--gold-mid) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--gold-mid) 18%, transparent);
border-radius: 3px;
padding: 2px 8px;
}

.comm-robux-note {
display: block;
margin-top: 6px;
font-size: 0.78rem;
color: var(--text-muted);
font-style: italic;
}

.comm-pay-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}

.comm-pay-btn {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 0.88rem;
padding: 14px 36px;
letter-spacing: 0.14em;
text-decoration: none;
border-radius: 2px;
}

.pay-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
fill: currentColor;
}

@media (max-width: 480px) {
.comm-pay-buttons { flex-direction: column; align-items: center; }
.comm-pay-btn { width: 220px; justify-content: center; }
}

.music-seek-wrap {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px 2px;
width: 100%;
}

.music-time {
font-family: var(--font-body);
font-size: 0.62rem;
color: var(--text-muted);
letter-spacing: 0.04em;
flex-shrink: 0;
min-width: 28px;
text-align: center;
}

.music-seek-slider {
-webkit-appearance: none;
appearance: none;
flex: 1;
height: 3px;
border-radius: 2px;
outline: none;
cursor: pointer;
transition: opacity 0.3s;
background: color-mix(in srgb, var(--gold-mid) 18%, transparent);
}
.music-seek-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 11px;
height: 11px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-pale), var(--gold-bright));
box-shadow: 0 0 6px color-mix(in srgb, var(--gold-bright) 60%, transparent);
cursor: pointer;
transition: transform 0.2s var(--ease-spring), box-shadow 0.2s;
}
.music-seek-slider::-webkit-slider-thumb:hover {
transform: scale(1.35);
box-shadow: 0 0 12px color-mix(in srgb, var(--gold-bright) 90%, transparent);
}
.music-seek-slider::-moz-range-thumb {
width: 11px;
height: 11px;
border: none;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-pale), var(--gold-bright));
cursor: pointer;
}

.music-player-inner {
flex-direction: column !important;
align-items: stretch !important;
padding-bottom: 8px !important;
}
.music-player-inner > .music-left {
padding-bottom: 0;
}

body.always-float .pfp-wrapper      { animation: floatPfp    5s   ease-in-out infinite; }
body.always-float .hero-tagline     { animation: floatTag    6s   ease-in-out 0.4s infinite; }
body.always-float .hero-title       { animation: floatSub    5.5s ease-in-out 0.9s infinite; }
body.always-float .hero-sub         { animation: floatSub    6.5s ease-in-out 1.3s infinite; }
body.always-float .hero-cta-group   { animation: floatCta    5s   ease-in-out 1.7s infinite; }
body.always-float .about-card:nth-child(1) { animation: floatCardA 6s ease-in-out 0s    infinite; }
body.always-float .about-card:nth-child(2) { animation: floatCardB 6.5s ease-in-out 0.5s infinite; }
body.always-float .about-card:nth-child(3) { animation: floatCardC 6s ease-in-out 1.1s  infinite; }
body.always-float .contact-card:nth-child(1) { animation: floatCardA 7s ease-in-out 0s    infinite; }
body.always-float .contact-card:nth-child(2) { animation: floatCardB 7s ease-in-out 0.6s  infinite; }
body.always-float .contact-card:nth-child(3) { animation: floatCardC 7s ease-in-out 1.2s  infinite; }
body.always-float .section-title    { animation: floatSub    7s   ease-in-out 0.3s infinite; }
body.always-float .footer-logo      { animation: floatTag    5s   ease-in-out 0.8s infinite; }
body.always-float .nav-center       { animation: floatNav    8s   ease-in-out 0.2s infinite; }

.music-player,
body.always-float .music-player,
body.vibe-active  .music-player { animation: none !important; transform: none !important; }

/* vibe color palette */
body[data-vibe="bleed"] {
--gold-bright: #c47878;
--gold-mid:    #8b4444;
--gold-deep:   #5a2222;
--gold-pale:   #e8c8c8;
--amber:       #b05a5a;
--dark-base:   #050505;
--dark-1:      #0c0808;
--dark-2:      #140c0c;
--dark-3:      #1c1010;
--dark-4:      #251414;
--text-main:   #e0d0d0;
--text-muted:  #8a6060;
--text-light:  #f0e0e0;
background-color: #050505 !important;
}

body[data-vibe="bleed"] .vibe-scanlines {
background-image: repeating-linear-gradient(0deg, rgba(180,80,80,0.05) 0px, rgba(180,80,80,0.05) 1px, transparent 1px, transparent 4px);
}

body[data-vibe="bleed"] .title-line { animation: titleGlowBleed 2s ease-in-out infinite; }
body[data-vibe="bleed"] .pfp-image  { animation: pfpPulse 2s ease-in-out infinite !important; border-color: var(--gold-mid) !important; }
@keyframes titleGlowBleed {
0%,100% { filter: drop-shadow(0 0 16px var(--gold-mid)); }
50%      { filter: drop-shadow(0 0 48px var(--gold-bright)); }
}

body[data-vibe="bleed"] .pfp-wrapper, body[data-vibe="bleed"] .hero-tagline,
body[data-vibe="bleed"] .hero-sub, body[data-vibe="bleed"] .hero-cta-group,
body[data-vibe="bleed"] .nav-center, body[data-vibe="bleed"] .about-card,
body[data-vibe="bleed"] .contact-card, body[data-vibe="bleed"] .section-title,
body[data-vibe="bleed"] .comm-category, body[data-vibe="bleed"] .comm-notice,
body[data-vibe="bleed"] .comm-discord-note,
body[data-vibe="bleed"] .comm-payment { animation-duration: 7s !important; }

body[data-vibe="evermore"] {
--gold-bright: #d4a045;
--gold-mid:    #a07028;
--gold-deep:   #6b4815;
--gold-pale:   #f5dfaa;
--amber:       #c07f35;
--dark-base:   #060400;
--dark-1:      #0e0900;
--dark-2:      #160e00;
--dark-3:      #1e1400;
--dark-4:      #281b00;
--text-main:   #f0dba0;
--text-muted:  #a07838;
--text-light:  #fff4d0;
background-color: #060400 !important;
}
body[data-vibe="evermore"] .vibe-scanlines {
background-image: repeating-linear-gradient(0deg, rgba(180,140,30,0.045) 0px, rgba(180,140,30,0.045) 1px, transparent 1px, transparent 4px);
}
body[data-vibe="evermore"] .title-line { animation: titleGlowEvermore 4s ease-in-out infinite; }
body[data-vibe="evermore"] .pfp-image  { animation: pfpPulse 4s ease-in-out infinite !important; border-color: var(--gold-mid) !important; }
@keyframes titleGlowEvermore {
0%,100% { filter: drop-shadow(0 0 14px var(--gold-mid)); }
50%      { filter: drop-shadow(0 0 40px var(--gold-bright)); }
}

body[data-vibe="evermore"] .pfp-wrapper, body[data-vibe="evermore"] .hero-tagline,
body[data-vibe="evermore"] .hero-sub, body[data-vibe="evermore"] .hero-cta-group,
body[data-vibe="evermore"] .nav-center, body[data-vibe="evermore"] .about-card,
body[data-vibe="evermore"] .contact-card, body[data-vibe="evermore"] .section-title,
body[data-vibe="evermore"] .comm-category, body[data-vibe="evermore"] .comm-notice,
body[data-vibe="evermore"] .comm-discord-note,
body[data-vibe="evermore"] .comm-payment { animation-duration: 10s !important; }

body[data-vibe="ijwte"] {
--gold-bright: #88bbff;
--gold-mid:    #3366cc;
--gold-deep:   #1133aa;
--gold-pale:   #ddeeff;
--amber:       #66aaff;
--dark-base:   #000508;
--dark-1:      #020b14;
--dark-2:      #041020;
--dark-3:      #06162a;
--dark-4:      #081c35;
--text-main:   #c8e4ff;
--text-muted:  #4477aa;
--text-light:  #eef6ff;
background-color: #000508 !important;
}

body[data-vibe="ijwte"] .vibe-scanlines {
background-image: repeating-linear-gradient(
0deg,
rgba(40,100,220,0.045) 0px,
rgba(40,100,220,0.045) 1px,
transparent 1px,
transparent 4px
);
}

body[data-vibe="ijwte"] .title-line {
animation: titleGlowIjwte 3s ease-in-out infinite;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
body[data-vibe="ijwte"] .pfp-image { animation: pfpPulse 4s ease-in-out infinite !important; border-color: var(--gold-mid) !important; }
@keyframes titleGlowIjwte {
0%,100% { filter: drop-shadow(0 0 14px rgba(40,100,220,0.8)); }
50%      { filter: drop-shadow(0 0 44px rgba(100,180,255,1.0)); }
}

body[data-vibe="ijwte"] .pfp-wrapper, body[data-vibe="ijwte"] .hero-tagline,
body[data-vibe="ijwte"] .hero-sub, body[data-vibe="ijwte"] .hero-cta-group,
body[data-vibe="ijwte"] .nav-center, body[data-vibe="ijwte"] .about-card,
body[data-vibe="ijwte"] .contact-card, body[data-vibe="ijwte"] .section-title,
body[data-vibe="ijwte"] .portfolio-card, body[data-vibe="ijwte"] .comm-category,
body[data-vibe="ijwte"] .comm-notice, body[data-vibe="ijwte"] .comm-discord-note,
body[data-vibe="ijwte"] .comm-payment,
body[data-vibe="ijwte"] .music-player { animation-duration: 8s !important; }

body[data-vibe="ijwte"] .orb-1,
body[data-vibe="ijwte"] .orb-2,
body[data-vibe="ijwte"] .orb-3 { opacity: 0.12; }

body[data-vibe="bleed"] .orb-1,
body[data-vibe="bleed"] .orb-2,
body[data-vibe="bleed"] .orb-3 {
opacity: 0.08;
}

.ijwte-canvas {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0;
transition: opacity 1.4s ease;
}
body[data-vibe="ijwte"] .ijwte-canvas { opacity: 1; }

/* spotify connect */
.mci-spotify-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
max-width: 20px; max-height: 20px;
color: #1DB954;
flex-shrink: 0;
overflow: hidden;
opacity: 0.85;
transition: opacity 0.2s, transform 0.2s;
}
.mci-spotify-link svg {
width: 16px !important;
height: 16px !important;
min-width: 16px; min-height: 16px;
max-width: 16px; max-height: 16px;
flex-shrink: 0;
display: block;
}
.mci-spotify-link:hover { opacity: 1; transform: scale(1.2); }


/* commissions lock and discord stuff */
.comm-category-locked {
position: relative;
opacity: 0.6;
pointer-events: none;
user-select: none;
}
.comm-locked-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
background: linear-gradient(135deg,
color-mix(in srgb, var(--gold-mid) 12%, transparent),
color-mix(in srgb, var(--dark-3) 90%, transparent));
border-bottom: 1px solid color-mix(in srgb, var(--gold-mid) 20%, transparent);
font-family: var(--font-serif);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
}
.comm-locked-icon { font-size: 0.9rem; }
.comm-tiers-locked { opacity: 0.5; }

/* status direct */
.comm-discord-note {
text-align: center;
max-width: 520px;
margin: 0 auto 24px;
padding: 20px 24px;
background: linear-gradient(135deg,
color-mix(in srgb, var(--gold-deep) 12%, var(--dark-2)),
color-mix(in srgb, var(--gold-deep) 6%, var(--dark-3)));
border: 1px solid color-mix(in srgb, var(--gold-mid) 25%, transparent);
border-radius: 6px;
}
.comm-discord-note p {
font-family: var(--font-body);
font-size: 0.88rem;
color: var(--text-muted);
margin: 0 0 14px;
letter-spacing: 0.03em;
}
.comm-discord-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px; height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-mid), var(--gold-bright));
color: var(--dark-base);
transition: transform 0.25s var(--ease-spring), box-shadow 0.25s;
box-shadow: 0 4px 16px color-mix(in srgb, var(--gold-bright) 35%, transparent);
}
.comm-discord-btn svg { width: 22px; height: 22px; }
.comm-discord-btn:hover {
transform: translateY(-3px) scale(1.08);
box-shadow: 0 8px 28px color-mix(in srgb, var(--gold-bright) 55%, transparent);
}