/* ==================================================================
   MAZHARUL MAHIN — components.css
   Buttons, chips, cards, forms, preloader, cursor, menus, utilities.
   ================================================================== */

/* ---------- Buttons ---------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 52px;
    padding: .9rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .005em;
    white-space: nowrap;
    overflow: hidden;
    isolation: isolate;
    transition: color .4s var(--ease), border-color .4s, box-shadow .4s, transform .4s var(--ease), translate .45s var(--ease);
}
.btn i { font-size: .85em; transition: transform .45s var(--ease); }
.btn:hover i { transform: translateX(3px) rotate(-8deg); }

.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    transform: translateY(101%);
    transition: transform .55s var(--ease);
}
.btn:hover::before { transform: translateY(0); }

.btn--primary {
    background: var(--grad);
    color: #120a05;
    box-shadow: 0 14px 34px -12px rgba(255, 91, 31, .75);
}
.btn--primary::before { background: var(--text); }
.btn--primary:hover { color: var(--bg); box-shadow: 0 18px 40px -12px rgba(255, 91, 31, .9); }

.btn--ghost {
    border: 1px solid var(--border-strong);
    color: var(--text);
    background: var(--surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.btn--ghost::before { background: var(--text); }
.btn--ghost:hover { color: var(--bg); border-color: var(--text); }

.btn--youtube { background: #ff0000; color: #fff; box-shadow: 0 14px 34px -12px rgba(255, 0, 0, .6); }
.btn--youtube::before { background: #fff; }
.btn--youtube:hover { color: #ff0000; }

.btn--sm { min-height: 42px; padding: .6rem 1.15rem; font-size: .85rem; }
.btn--lg { min-height: 58px; padding: 1rem 2rem; }

.btn__spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-loading .btn__spinner { display: inline-block; }
.btn.is-loading i { display: none; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    font-size: .85rem;
    font-weight: 600;
    transition: background .3s, color .3s, border-color .3s, translate .45s var(--ease);
}
.link-arrow:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.link-arrow.is-disabled { opacity: .55; cursor: default; border-style: dashed; }
.link-arrow.is-disabled:hover { background: none; color: inherit; border-color: var(--border-strong); }

/* ---------- Theme toggle ---------- */
.theme-toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    overflow: hidden;
    transition: border-color .3s, background .3s, translate .45s var(--ease);
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle i {
    position: absolute;
    font-size: .95rem;
    transition: transform .6s var(--ease), opacity .4s;
}
.theme-toggle__sun { color: var(--accent-2); }
html[data-theme="dark"] .theme-toggle__sun { transform: translateY(150%) rotate(90deg); opacity: 0; }
html[data-theme="light"] .theme-toggle__moon { transform: translateY(-150%) rotate(-90deg); opacity: 0; }

/* ---------- Burger ---------- */
.burger {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    display: grid;
    place-content: center;
    gap: 6px;
}
.burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform .5s var(--ease), width .4s var(--ease);
}
.burger span:nth-child(2) { width: 12px; margin-left: auto; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { width: 20px; transform: translateY(-4px) rotate(-45deg); }

/* ---------- Mobile menu ---------- */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    visibility: hidden;
    pointer-events: none;
}
.mobile-menu__bg {
    position: absolute;
    inset: 0;
    background: var(--bg);
    clip-path: circle(0% at calc(100% - 2.6rem) 2.3rem);
    transition: clip-path .8s var(--ease-in-out);
}
.mobile-menu__bg::after {
    content: "";
    position: absolute;
    right: -20%;
    bottom: -20%;
    width: 80vw;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 91, 31, .35), transparent 65%);
}
.mobile-menu__inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: calc(var(--nav-h) + 2rem) var(--gutter) 2.5rem;
    overflow-y: auto;
}
.mobile-menu__list { display: grid; gap: .1rem; }
.mobile-menu__list li { overflow: hidden; }
.mobile-menu__link {
    display: flex;
    align-items: baseline;
    gap: .9rem;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(2.1rem, 10vw, 3.4rem);
    line-height: 1.12;
    letter-spacing: -.03em;
    transform: translateY(110%);
    transition: transform .7s var(--ease), color .3s;
}
.mobile-menu__link small {
    font-family: var(--f-mono);
    font-size: .75rem;
    font-weight: 400;
    color: var(--accent);
    letter-spacing: .1em;
}
.mobile-menu__link:hover,
.mobile-menu__link:focus-visible { color: var(--accent); }
.mobile-menu__foot { opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .6s var(--ease); }
.mobile-menu__socials { display: flex; gap: .6rem; }
.mobile-menu__socials a {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    font-size: 1.1rem;
}

body.menu-open .mobile-menu { visibility: visible; pointer-events: auto; }
body.menu-open .mobile-menu__bg { clip-path: circle(150% at calc(100% - 2.6rem) 2.3rem); }
body.menu-open .mobile-menu__link { transform: none; transition-delay: calc(.25s + var(--i) * .06s); }
body.menu-open .mobile-menu__foot { opacity: 1; transform: none; transition-delay: .6s; }

/* ---------- Chips & tags ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.chip {
    display: inline-flex;
    align-items: center;
    padding: .45rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-2);
    transition: border-color .3s, color .3s, background .3s, transform .3s var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--text); transform: translateY(-2px); }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.1rem 0 1.4rem; }
.tags li {
    font-family: var(--f-mono);
    font-size: .7rem;
    letter-spacing: .04em;
    padding: .3rem .65rem;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text-2);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: rgba(255, 91, 31, .14);
    color: var(--accent);
    font-family: var(--f-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ---------- Info list (about) ---------- */
.info-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin-top: 2rem;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--border);
}
.info-list > div { padding: 1rem 1.1rem; background: var(--bg); }
.info-list__wide { grid-column: 1 / -1; }
.info-list dt {
    font-family: var(--f-mono);
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .2rem;
}
.info-list dd { font-weight: 600; font-size: .95rem; }

/* ---------- Rotating badge ---------- */
.badge-rotate {
    position: absolute;
    right: -14px;
    top: -14px;
    width: 116px;
    height: 116px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    z-index: 3;
}
.badge-rotate svg {
    position: absolute;
    inset: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    animation: spin 14s linear infinite;
}
.badge-rotate text {
    font-family: var(--f-mono);
    font-size: 9.6px;
    letter-spacing: .9px;
    fill: var(--text);
}
.badge-rotate i { font-size: 1.4rem; color: var(--accent); }

/* ---------- Spotlight effect (mouse-follow glow) ---------- */
.spotlight { position: relative; isolation: isolate; }
.spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 91, 31, .16), transparent 45%);
    opacity: 0;
    transition: opacity .4s;
}
.spotlight:hover::before { opacity: 1; }

/* ---------- Service card ---------- */
.service-card {
    padding: clamp(1.5rem, 3vw, 2.2rem);
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: border-color .4s, transform .5s var(--ease), background .4s;
    transform-style: preserve-3d;
}
.service-card:hover { border-color: rgba(255, 91, 31, .45); }
.service-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2.2rem; }
.service-card__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 1.35rem;
    color: var(--accent);
    transition: transform .6s var(--ease), background .4s, color .4s;
}
.service-card:hover .service-card__icon { background: var(--grad); color: #120a05; transform: rotate(-8deg) scale(1.06); }
.service-card__num { font-family: var(--f-mono); font-size: .8rem; color: var(--muted); }
.service-card h3 {
    font-family: var(--f-display);
    font-size: clamp(1.25rem, 2.2vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-bottom: .7rem;
}
.service-card p { color: var(--text-2); font-size: .95rem; }
.service-card__line {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s var(--ease);
}
.service-card:hover .service-card__line { transform: scaleX(1); }

/* ---------- Skill card ---------- */
.skill-card {
    padding: clamp(1.4rem, 3vw, 2rem);
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: border-color .4s, translate .5s var(--ease);
}
.skill-card:hover { border-color: rgba(255, 91, 31, .4); translate: 0 -4px; }
.skill-card__head { display: flex; align-items: center; gap: .9rem; }
.skill-card__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 91, 31, .12);
    color: var(--accent);
}
.skill-card h3 { font-family: var(--f-display); font-size: 1.2rem; letter-spacing: -.015em; }
.skill-card .chips { margin-top: 1.4rem; }

.bars { display: grid; gap: 1rem; margin-top: 1.4rem; }
.bar__label { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .4rem; }
.bar__label span:last-child { font-family: var(--f-mono); color: var(--accent); }
.bar__track { height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.bar__fill {
    display: block;
    height: 100%;
    width: var(--level);
    border-radius: inherit;
    background: var(--grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.4s var(--ease) .2s;
}
.is-visible .bar__fill { transform: scaleX(1); }

/* ---------- Project card ---------- */
.project-card { display: grid; gap: 1.5rem; }
.project-card__media { position: relative; }
.project-card__img {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-3);
}
.project-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    transition: transform 1.2s var(--ease), filter .6s;
}
.project-card:hover .project-card__img img { transform: scale(1); }
.project-card__img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .35));
    pointer-events: none;
}
.project-card__index {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: rgba(11, 11, 13, .6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-family: var(--f-mono);
    font-size: .75rem;
}
.project-card__cat {
    font-family: var(--f-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
}
.project-card__title {
    font-family: var(--f-display);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.1;
    letter-spacing: -.025em;
    margin: .5rem 0 .75rem;
}
.project-card__body p { color: var(--text-2); }
.project-card__links { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------- Video ---------- */
.video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--radius-lg) - 8px);
    overflow: hidden;
    background: #000;
}
.video-frame--sm { border-radius: var(--radius); }
.video-frame[data-yt] { cursor: pointer; }
.video-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease), opacity .4s;
}
.video-frame:hover img { transform: scale(1.05); opacity: .85; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 1.4rem;
    transition: transform .5s var(--ease), background .3s;
}
.play-btn i { margin-left: 4px; }
.play-btn::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .5);
    animation: ripple 2.2s var(--ease) infinite;
}
.video-frame:hover .play-btn { transform: translate(-50%, -50%) scale(1.1); background: #ff0000; border-color: #ff0000; }
.play-btn--sm { width: 58px; height: 58px; font-size: 1rem; }

.video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 181, 71, .45), transparent 50%),
        radial-gradient(circle at 80% 90%, rgba(255, 46, 99, .55), transparent 55%),
        linear-gradient(135deg, #1a0d08, #2a0f12);
    color: #fff;
}
.video-placeholder--v1 { background: radial-gradient(circle at 70% 25%, rgba(255, 91, 31, .55), transparent 55%), linear-gradient(135deg, #120f1d, #22101a); }
.video-placeholder--v2 { background: radial-gradient(circle at 25% 75%, rgba(255, 181, 71, .45), transparent 55%), linear-gradient(135deg, #0f1414, #1d120c); }
.video-placeholder__brand {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    font-size: 1.8rem;
    color: #ff0000;
    filter: drop-shadow(0 4px 20px rgba(255, 0, 0, .5));
}
.video-placeholder__text {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 5vw, 3.2rem);
    letter-spacing: -.03em;
    opacity: .9;
}

.video-card { display: grid; gap: .9rem; }
.video-card__info { padding-inline: .25rem; }
.video-card__tag {
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
}
.video-card h4 { font-family: var(--f-display); font-size: 1.1rem; letter-spacing: -.01em; line-height: 1.25; margin-top: .25rem; }

/* ---------- Social card ---------- */
.social-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-height: 200px;
    padding: 1.4rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
    isolation: isolate;
    transition: border-color .4s, transform .5s var(--ease);
}
.social-card__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 50% 120%, var(--brand), transparent 65%);
    opacity: 0;
    transition: opacity .5s;
}
.social-card:hover { border-color: var(--brand); }
.social-card:hover .social-card__glow { opacity: .35; }
.social-card__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--surface-2);
    font-size: 1.4rem;
    color: var(--brand);
    margin-bottom: auto;
    transition: transform .6s var(--ease), background .4s, color .4s;
}
.social-card--tiktok .social-card__icon { color: var(--text); text-shadow: -2px -1px 0 #25F4EE, 2px 1px 0 #FE2C55; }
.social-card:hover .social-card__icon { transform: rotate(-10deg) scale(1.1); background: var(--brand); color: #fff; }
.social-card--tiktok:hover .social-card__icon { background: #000; }
.social-card__name { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; margin-top: 1.5rem; }
.social-card__handle { color: var(--muted); font-size: .82rem; word-break: break-all; }
.social-card__go {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .9rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-2);
}
.social-card__go i { transition: transform .4s var(--ease); }
.social-card:hover .social-card__go i { transform: translateX(5px); }

/* Round social icon buttons (contact) */
.contact__socials a {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    font-size: 1.1rem;
    transition: background .3s, border-color .3s, color .3s, translate .45s var(--ease);
}
.contact__socials a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- Glass ---------- */
.glass {
    background: var(--glass);
    border: 1px solid var(--border);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow: var(--shadow);
}

/* ---------- Contact form ---------- */
.contact-form {
    display: grid;
    gap: 1.1rem;
    padding: clamp(1.4rem, 4vw, 2.75rem);
    border-radius: var(--radius-lg);
}
.form-row { display: grid; gap: 1.1rem; }

.field { position: relative; }
.field input,
.field textarea {
    width: 100%;
    padding: 1.45rem 1.1rem .6rem;
    border-radius: 14px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    font-size: 1rem;          /* 16px stops iOS zoom on focus */
    outline: none;
    transition: border-color .3s, background .3s, box-shadow .3s;
    resize: vertical;
}
.field textarea { min-height: 150px; }
.field label {
    position: absolute;
    left: 1.1rem;
    top: 1.05rem;
    color: var(--muted);
    font-size: .95rem;
    pointer-events: none;
    transform-origin: left top;
    transition: transform .3s var(--ease), color .3s;
}
.field input:focus,
.field textarea:focus {
    border-color: var(--accent);
    background: var(--surface-2);
    box-shadow: 0 0 0 4px rgba(255, 91, 31, .15);
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label {
    transform: translateY(-.62rem) scale(.74);
    color: var(--accent);
}
.field__error {
    display: block;
    min-height: 0;
    margin-top: .35rem;
    font-size: .8rem;
    color: #ff5a6e;
}
.field__error:empty { display: none; }
.field.has-error input,
.field.has-error textarea { border-color: #ff5a6e; }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-foot { display: grid; gap: 1rem; align-items: center; }
.form-status { font-size: .92rem; font-weight: 500; }
.form-status:empty { display: none; }
.form-status.is-success { color: #3ddc84; }
.form-status.is-error { color: #ff5a6e; }

/* ---------- Back to top ---------- */
.to-top {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 900;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--glass);
    border: 1px solid var(--border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(.8);
    transition: opacity .4s, visibility .4s, transform .5s var(--ease), background .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent); color: #fff; }
.to-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top circle {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-dasharray: 100;
    stroke-dashoffset: var(--progress, 100);
    stroke-linecap: round;
}

/* ---------- Preloader ---------- */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    background: #0b0b0d;
    color: #f5f3ef;
    transition: clip-path 1.1s var(--ease-in-out);
    clip-path: inset(0 0 0 0);
}
.preloader__inner { width: min(92vw, 1100px); }
.preloader__name {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: .3em;
    font-family: var(--f-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 5.6vw, 4.4rem);
    line-height: 1;
    letter-spacing: -.04em;
    overflow: hidden;
    padding-bottom: .1em;
}
.preloader__name .pw { display: inline-flex; white-space: nowrap; }
.preloader__name .c {
    display: inline-block;
    transform: translateY(110%);
    animation: char-up .9s var(--ease) forwards;
    animation-delay: calc(.15s + var(--i) * .045s);
}
.preloader__name .accent {
    background: linear-gradient(120deg, #ff5b1f, #ffb547);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.preloader__meta {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    font-family: var(--f-mono);
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8d8a85;
}
.preloader__count b { color: #f5f3ef; font-weight: 500; font-variant-numeric: tabular-nums; }
.preloader__bar { height: 2px; margin-top: .9rem; background: rgba(255, 255, 255, .1); overflow: hidden; }
.preloader__bar span {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ff5b1f, #ffb547);
    transform: scaleX(0);
    transform-origin: left;
}
.preloader__curtain { display: none; }
.preloader.is-done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.preloader.is-done .preloader__inner { transform: translateY(-60px); opacity: 0; transition: transform 1s var(--ease-in-out), opacity .6s; }

/* ---------- Custom cursor ---------- */
.cursor { display: none; }
.has-cursor .cursor { display: block; }
.has-cursor,
.has-cursor a,
.has-cursor button,
.has-cursor [data-yt] { cursor: none; }
.has-cursor input,
.has-cursor textarea { cursor: text; }

/* Magnetic elements move with the `translate` property (set in cursor.js) */
.nav__logo { transition: translate .45s var(--ease); }
.cursor__dot,
.cursor__ring {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    pointer-events: none;
    border-radius: 50%;
    will-change: transform;
}
.cursor__dot {
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: var(--accent);
}
.cursor__ring {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 1px solid var(--stroke);
    display: grid;
    place-items: center;
    transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background .4s, border-color .4s;
}
.cursor__label {
    font-family: var(--f-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #120a05;
    opacity: 0;
    transition: opacity .3s;
}
.cursor.is-hover .cursor__ring {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    background: rgba(255, 91, 31, .12);
    border-color: var(--accent);
}
.cursor.is-label .cursor__ring {
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px;
    background: var(--grad);
    border-color: transparent;
}
.cursor.is-label .cursor__label { opacity: 1; }
.cursor.is-label .cursor__dot,
.cursor.is-hidden .cursor__dot,
.cursor.is-hidden .cursor__ring { opacity: 0; }
.cursor.is-down .cursor__ring { transform-origin: center; scale: .85; }

/* ---------- Glitch (404) ---------- */
.glitch { position: relative; }
.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
}
.glitch::before { animation: glitch-1 2.8s infinite steps(1); color: rgba(255, 46, 99, .7); }
.glitch::after { animation: glitch-2 2.4s infinite steps(1); color: rgba(37, 244, 238, .5); }