/*
 * Zynora Portfolio — Stylesheet
 * Version: 4.1
 */

/* ---- Design Tokens ---- */
:root {
    --c-bg: #0a0a0b;
    --c-bg2: #121214;
    --c-surface: rgba(255,255,255,0.03);
    --c-text: #fafafa;
    --c-text2: #a1a1a5;
    --c-muted: #52525b;
    --c-accent: #e2ff4a;
    --c-accent-h: #d1ee39;
    --c-border: rgba(255,255,255,0.08);
    --c-error: #ff5a5a;
    --shadow: 0 8px 32px rgba(0,0,0,0.37);
    --blur: blur(12px);
    --font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --ease: cubic-bezier(0.16,1,0.3,1);
    --fast: 0.2s;
    --mid: 0.4s;
    --slow: 0.8s;
}

[data-theme="light"] {
    --c-bg: #fafafa;
    --c-bg2: #f0f0f3;
    --c-surface: rgba(0,0,0,0.04);
    --c-text: #0a0a0b;
    --c-text2: #52525b;
    --c-muted: #a1a1a5;
    --c-accent: #5932e6;
    --c-accent-h: #4824c4;
    --c-border: rgba(0,0,0,0.08);
    --shadow: 0 8px 32px rgba(0,0,0,0.08);
}

/* ---- Reset ---- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { background:var(--c-bg); color:var(--c-text); font-family:var(--font); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background var(--mid) var(--ease), color var(--mid) var(--ease); }
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { background:none; border:none; font:inherit; color:inherit; }

/* ---- Custom Cursor ---- */
body,a,button { cursor:none; }
@media(pointer:coarse) {
    body,a,button { cursor:auto!important; }
    .cursor-dot,.cursor-ring { display:none!important; }
}
.cursor-dot {
    position:fixed; top:0; left:0; width:6px; height:6px;
    background:var(--c-accent); border-radius:50%;
    pointer-events:none; z-index:9999;
    transform:translate(-50%,-50%);
    transition:width var(--fast),height var(--fast),background var(--fast);
}
.cursor-ring {
    position:fixed; top:0; left:0; width:32px; height:32px;
    border:1px solid var(--c-accent); border-radius:50%;
    pointer-events:none; z-index:9998;
    transform:translate(-50%,-50%);
    transition:width 0.3s,height 0.3s,opacity 0.3s;
}
.cursor-dot.is-hover { width:60px; height:60px; background:#fff; mix-blend-mode:difference; }
.cursor-ring.is-hover { width:60px; height:60px; opacity:0; }

/* ---- Noise Overlay ---- */
.noise-overlay {
    position:fixed; inset:0; pointer-events:none; z-index:99999; opacity:0.04;
    background:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E');
}
[data-theme="light"] .noise-overlay { opacity:0.06; }

/* ---- Preloader ---- */
.preloader {
    position:fixed; inset:0; background:var(--c-bg); z-index:10000;
    display:flex; justify-content:center; align-items:center;
    transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.preloader__text {
    font-size:1.5rem; font-weight:800; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--c-accent);
    animation:pulse 1.2s ease-in-out infinite alternate;
}
@keyframes pulse { from{opacity:0.3;transform:scale(0.98)} to{opacity:1;transform:scale(1)} }

/* ---- Scroll Reveal ---- */
.reveal { opacity:0; transform:translateY(30px); transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal.is-visible { opacity:1; transform:translateY(0); }

/* ---- Section Title ---- */
.section-title {
    font-size:clamp(2.5rem,5vw,4.5rem); font-weight:800;
    letter-spacing:-0.03em; line-height:1.1; margin-bottom:64px;
}

/* ---- Header ---- */
.header { position:fixed; top:0; left:0; width:100%; z-index:100; padding:20px 32px; }
.header__inner {
    max-width:1440px; margin:0 auto; display:flex; align-items:center;
    justify-content:space-between; padding:12px 28px;
    background:var(--c-surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
    border:1px solid var(--c-border); border-radius:100px; box-shadow:var(--shadow);
}
.header__brand { display:flex; align-items:center; gap:10px; }
.header__logo { height:24px; width:auto; }
.header__name { font-size:1.15rem; font-weight:800; letter-spacing:-0.01em; }
.header__nav { display:flex; gap:28px; }
.header__link { font-size:0.875rem; font-weight:500; color:var(--c-text2); transition:color var(--fast) var(--ease); }
.header__link:hover { color:var(--c-text); }
.header__theme-btn {
    width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--c-bg2); border:1px solid var(--c-border); transition:background var(--fast);
}
.header__theme-btn:hover { background:var(--c-border); }
.header__theme-icon {
    width:14px; height:14px; border-radius:50%; background:var(--c-text);
    transition:transform var(--mid) var(--ease);
}
[data-theme="light"] .header__theme-icon { transform:scale(0.75); background:transparent; border:2px solid var(--c-text); }

/* ---- Hero ---- */
.hero {
    min-height:100vh; display:flex; flex-direction:column;
    justify-content:center; padding:96px 32px 64px; position:relative;
}
.hero__content { max-width:960px; }
.hero__label { font-size:1rem; font-weight:500; color:var(--c-accent); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:20px; }
.hero__title { font-size:clamp(3rem,8vw,6.5rem); font-weight:800; line-height:1; letter-spacing:-0.03em; margin-bottom:28px; min-height:1.2em; }
.hero__cursor { animation:blink 1s step-end infinite; }
@keyframes blink { 50%{opacity:0} }
.hero__subtitle { font-size:clamp(1.1rem,2vw,1.4rem); color:var(--c-text2); max-width:580px; margin-bottom:40px; line-height:1.5; }
.hero__cta {
    display:inline-block; padding:16px 40px; background:var(--c-accent);
    color:#0a0a0b; font-weight:700; font-size:1rem; border-radius:100px;
    transition:transform var(--fast) var(--ease), box-shadow var(--fast);
}
.hero__cta:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(226,255,74,0.3); }
.hero__scroll { position:absolute; bottom:48px; left:50%; transform:translateX(-50%); }
.hero__mouse {
    width:24px; height:38px; border:2px solid var(--c-muted); border-radius:12px;
    position:relative;
}
.hero__mouse::after {
    content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%);
    width:3px; height:8px; background:var(--c-muted); border-radius:3px;
    animation:scrollDot 1.5s ease-in-out infinite;
}
@keyframes scrollDot { 0%{opacity:1;transform:translateX(-50%) translateY(0)} 100%{opacity:0;transform:translateX(-50%) translateY(12px)} }

/* ---- Bento Grid ---- */
.about { padding:128px 32px; max-width:1440px; margin:0 auto; }
.bento {
    display:grid; grid-template-columns:repeat(4,1fr);
    grid-template-rows:auto auto; gap:20px;
    grid-template-areas:
        "profile bio bio stat"
        "profile stack graph graph";
}
.bento__card {
    background:var(--c-surface); border:1px solid var(--c-border);
    border-radius:20px; padding:28px; display:flex; flex-direction:column;
    justify-content:center; transition:transform var(--mid) var(--ease), border-color var(--mid);
}
.bento__card:hover { transform:translateY(-3px); border-color:rgba(255,255,255,0.14); }
.bento__heading { font-size:1.8rem; font-weight:700; margin-bottom:12px; }
.bento__subheading { font-size:0.95rem; color:var(--c-text2); margin-bottom:16px; }
.bento__text { font-size:1.05rem; color:var(--c-text2); line-height:1.6; }

/* Profile Card */
.bento__card--profile { grid-area:profile; align-items:center; text-align:center; padding:40px 24px; }
.profile { display:flex; flex-direction:column; align-items:center; gap:16px; height:100%; }
.profile__avatar {
    position:relative; width:110px; height:110px;
    border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;
    overflow:hidden; border:2px solid var(--c-accent);
    box-shadow:0 0 24px rgba(226,255,74,0.15);
    animation:morph 8s ease-in-out infinite alternate;
}
@keyframes morph {
    0%  { border-radius:30% 70% 70% 30% / 30% 30% 70% 70%; }
    25% { border-radius:58% 42% 36% 64% / 60% 44% 56% 40%; }
    50% { border-radius:50% 50% 34% 66% / 56% 68% 32% 44%; }
    75% { border-radius:42% 58% 64% 36% / 48% 32% 68% 52%; }
    100%{ border-radius:70% 30% 30% 70% / 70% 70% 30% 30%; }
}
.profile__avatar img { width:100%; height:100%; object-fit:cover; }
.profile__status {
    position:absolute; bottom:4px; right:4px; width:14px; height:14px;
    background:#10b981; border-radius:50%; border:3px solid var(--c-bg);
}
.profile__name { font-size:1.35rem; font-weight:700; line-height:1.2; }
.profile__role { font-size:0.8rem; color:var(--c-accent); text-transform:uppercase; letter-spacing:0.12em; font-weight:600; }
.profile__socials { display:flex; gap:10px; margin-top:auto; padding-top:12px; }
.profile__social {
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%;
    background:var(--c-bg2); border:1px solid var(--c-border);
    color:var(--c-text); transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.profile__social:hover {
    background:var(--c-accent); color:#0a0a0b; border-color:var(--c-accent);
    transform:translateY(-6px) scale(1.1);
    box-shadow:0 8px 20px rgba(226,255,74,0.25);
}

/* Other bento cells */
.bento__card--bio  { grid-area:bio; justify-content:flex-start; }
.bento__card--stat { grid-area:stat; align-items:center; text-align:center; }
.bento__card--stack{ grid-area:stack; justify-content:flex-start; }
.bento__card--graph{ grid-area:graph; justify-content:flex-start; }

.stat__number { display:block; font-size:3.5rem; font-weight:800; color:var(--c-accent); line-height:1; }
.stat__label  { font-size:0.8rem; color:var(--c-text2); text-transform:uppercase; letter-spacing:0.05em; margin-top:8px; }

.stack-list { display:flex; flex-wrap:wrap; gap:6px; }
.stack-list__item { padding:5px 12px; background:var(--c-bg2); border:1px solid var(--c-border); border-radius:50px; font-size:0.75rem; font-weight:500; }

.graph { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:12px; gap:3px; }
.graph__node { border-radius:2px; background:var(--c-bg2); }
.graph__node[data-level="1"] { background:rgba(226,255,74,0.2); }
.graph__node[data-level="2"] { background:rgba(226,255,74,0.5); }
.graph__node[data-level="3"] { background:var(--c-accent); }

/* ---- Works Section ---- */
.works { padding:128px 32px; max-width:1440px; margin:0 auto; }
.works__filter { display:flex; gap:12px; margin-bottom:48px; flex-wrap:wrap; }
.filter-btn {
    padding:8px 20px; border-radius:100px; border:1px solid var(--c-border);
    font-size:0.85rem; font-weight:500; transition:all var(--fast) var(--ease);
}
.filter-btn.is-active,.filter-btn:hover { background:var(--c-text); color:var(--c-bg); border-color:var(--c-text); }
.works__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:40px; }

.card {
    display:flex; flex-direction:column; gap:16px;
    transform-style:preserve-3d; perspective:800px;
}
.card.is-hidden { display:none; }
.card__img {
    width:100%; aspect-ratio:16/9; border-radius:14px;
    overflow:hidden; position:relative; background:var(--c-bg2);
}
.card__photo {
    width:105%; height:105%; object-fit:cover;
    margin:-2.5%; transition:transform var(--fast) var(--ease);
}
.card__hover {
    position:absolute; inset:0; background:rgba(0,0,0,0.35);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity var(--mid) var(--ease);
}
.card__badge {
    color:#fff; font-weight:600; font-size:0.85rem; letter-spacing:0.04em;
    text-transform:uppercase; padding:10px 22px; border-radius:100px;
    background:rgba(255,255,255,0.12); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,0.2);
    transform:translateY(12px); transition:transform var(--mid) var(--ease);
}
.card:hover .card__hover { opacity:1; }
.card:hover .card__badge { transform:translateY(0); }
.card__tag { font-size:0.8rem; color:var(--c-muted); text-transform:uppercase; letter-spacing:0.05em; }
.card__name { font-size:1.5rem; font-weight:700; }
.card__desc { color:var(--c-text2); font-size:0.95rem; }

/* ---- Timeline ---- */
.timeline { padding:128px 32px; max-width:1440px; margin:0 auto; }
.timeline__track { position:relative; max-width:780px; margin:0 auto; padding-left:40px; }
.timeline__line {
    position:absolute; left:0; top:0; width:2px; height:0%;
    background:var(--c-accent); box-shadow:0 0 8px var(--c-accent);
    transition:height 0.1s linear;
}
.timeline__track::before {
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:2px; background:var(--c-border);
}
.timeline__item { position:relative; margin-bottom:56px; }
.timeline__item:last-child { margin-bottom:0; }
.timeline__dot {
    position:absolute; left:-46px; top:4px; width:12px; height:12px;
    border-radius:50%; background:var(--c-bg); border:2px solid var(--c-muted);
    transition:border-color var(--mid), box-shadow var(--mid), background var(--mid);
}
.timeline__item.is-active .timeline__dot {
    border-color:var(--c-accent); background:var(--c-accent);
    box-shadow:0 0 10px var(--c-accent);
}
.timeline__date {
    display:inline-block; padding:3px 12px; font-size:0.75rem;
    background:var(--c-surface); border:1px solid var(--c-border);
    border-radius:100px; color:var(--c-text2); margin-bottom:10px;
}
.timeline__role { font-size:1.35rem; font-weight:600; margin-bottom:6px; }
.timeline__desc { color:var(--c-text2); }

/* ---- Accordion ---- */
.skills { padding:128px 32px; max-width:1440px; margin:0 auto; }
.accordion { max-width:880px; border-top:1px solid var(--c-border); }
.accordion__item { border-bottom:1px solid var(--c-border); }
.accordion__trigger { width:100%; display:flex; align-items:center; padding:24px 0; text-align:left; }
.accordion__num { font-size:1rem; color:var(--c-muted); width:44px; }
.accordion__label { flex:1; font-size:clamp(1.3rem,3vw,2.2rem); font-weight:600; transition:color var(--fast); }
.accordion__icon { font-size:1.8rem; font-weight:300; transition:transform var(--mid) var(--ease); }
.accordion__trigger:hover .accordion__label { color:var(--c-accent); }
.accordion__item.is-open .accordion__icon { transform:rotate(45deg); }
.accordion__body { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--mid) var(--ease); }
.accordion__item.is-open .accordion__body { grid-template-rows:1fr; }
.accordion__text {
    overflow:hidden; padding:0 0 0 44px; color:var(--c-text2);
    font-size:1.05rem; max-width:680px; visibility:hidden;
    transition:padding var(--mid), visibility var(--mid);
}
.accordion__item.is-open .accordion__text { padding-bottom:24px; visibility:visible; }

/* ---- Footer ---- */
.footer { background:var(--c-surface); border-top:1px solid var(--c-border); padding:128px 32px; }
.footer__inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; max-width:1200px; margin:0 auto; }
.footer__title { font-size:clamp(1.8rem,4vw,3.2rem); font-weight:700; line-height:1.1; margin-bottom:20px; }
.footer__subtitle { color:var(--c-text2); margin-bottom:40px; }
.footer__email { font-size:1.3rem; font-weight:600; border-bottom:2px solid var(--c-accent); transition:color var(--fast); }
.footer__email:hover { color:var(--c-accent); }

/* ---- Form ---- */
.form { display:flex; flex-direction:column; gap:24px; }
.form__group { position:relative; }
.form__input {
    width:100%; background:transparent; border:none;
    border-bottom:1px solid var(--c-border); padding:20px 0 6px;
    font-size:1.05rem; color:var(--c-text); font-family:var(--font);
    transition:border-color var(--fast);
}
.form__input:focus { outline:none; border-bottom-color:var(--c-accent); }
.form__label {
    position:absolute; top:20px; left:0; font-size:1.05rem;
    color:var(--c-muted); pointer-events:none;
    transition:transform var(--fast), font-size var(--fast), color var(--fast);
}
.form__input:focus~.form__label,
.form__input:not(:placeholder-shown)~.form__label {
    transform:translateY(-20px); font-size:0.8rem; color:var(--c-accent);
}
.form__input--area { min-height:100px; resize:vertical; }
.form__error { color:var(--c-error); font-size:0.8rem; margin-top:4px; display:none; }
.form__group.has-error .form__input { border-bottom-color:var(--c-error); }
.form__group.has-error .form__label { color:var(--c-error); }
.form__group.has-error .form__error { display:block; }
.form__btn {
    align-self:flex-start; padding:14px 36px; background:var(--c-text);
    color:var(--c-bg); font-weight:600; font-size:1rem; border-radius:100px;
    transition:transform var(--fast), opacity var(--fast);
}
.form__btn:hover { transform:translateY(-2px); }
.form__btn:disabled { opacity:0.5; }
.form__success {
    display:none; padding:16px; background:rgba(226,255,74,0.1);
    border:1px solid var(--c-accent); color:var(--c-accent);
    border-radius:8px; font-size:0.95rem;
}
.form__success.is-visible { display:block; }

/* ---- Responsive ---- */
@media(max-width:1024px) {
    .bento { grid-template-columns:repeat(2,1fr); grid-template-areas:"profile profile" "bio bio" "stat stack" "graph graph"; }
    .footer__inner { grid-template-columns:1fr; gap:56px; }
}
@media(max-width:768px) {
    .header__nav { display:none; }
    .works__grid { grid-template-columns:1fr; }
    .timeline__track { padding-left:28px; }
    .timeline__dot { left:-34px; }
}
@media(max-width:480px) {
    .bento { grid-template-columns:1fr; grid-template-areas:"profile" "bio" "stat" "stack" "graph"; }
    .about,.works,.timeline,.skills { padding:80px 16px; }
    .footer { padding:80px 16px; }
}