/* ========================= Design Tokens — Omar Q Portfolio ========================= */

/* ── Color Palette: Deep Ink + Warm Amber ────────────────────────────────────────── */
:root {
    /* Core dark — deep warm charcoal instead of cold near-black */
    --color-dark:        #1A1612;
    --color-dark-dark:   #110F0C;

    /* Light surfaces */
    --color-light:       #F5F0E8;
    --color-white:       #F5F0E8;

    /* Accent — warm amber replacing blue */
    --color-accent:      #D4862A;
    --color-accent-dark: #B86E1A;

    /* Neutrals */
    --color-gray:        #9A958D;
    --color-lightgray:   #E8E2D6;

    /* Borders */
    --color-border:              rgba(26, 22, 18, 0.175);
    --color-border-solid:        #C8C0B0;
    --color-border-light:        rgba(245, 240, 232, 0.2);
    --color-border-solid-light:  #6A6258;

    /* Text */
    --color-text:        #1A1612;
    --color-text-light:  #F5F0E8;

    /* Alerts */
    --alert-error:   #E84444;
    --alert-success: #2EC96A;

    /* Animations */
    --animation-primary: all .5s cubic-bezier(.7, 0, .3, 1);
    --animation-fast:    all .3s cubic-bezier(.7, 0, .3, 1);
    --animation-smooth:  all .7s cubic-bezier(.7, 0, .3, 1);
    --animation-slow:    all .9s cubic-bezier(.7, 0, .3, 1);

    /* Spacing */
    --section-padding:    clamp(5em, 21vh, 12em);
    --container-padding:  clamp(2.5em, 8vw, 8em);
    --gap-padding:        clamp(1.5em, 4vw, 2.5em);
}

@media screen and (max-width: 1200px){ :root { --container-padding: 6vw; } }
@media screen and (max-width: 720px){  :root { --section-padding: 12vh; } }
@media screen and (max-width: 540px){
    :root {
        --color-border:       rgba(26, 22, 18, 0.225);
        --color-border-light: rgba(245, 240, 232, 0.225);
        --container-padding:  clamp(1.25em, 4vw, 2.5em);
        --section-padding:    max(2.5em, 12vh);
    }
}

/* ── Reset & Base ────────────────────────────────────────────────────────────────── */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
li, ul { padding: 0; margin: 0; list-style: none; }

body {
    -webkit-font-smoothing: antialiased;
    font-family: 'Manrope', sans-serif;
    color: var(--color-text);
    line-height: 1.6;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    font-size: clamp(16px, 1.2vw, 19px);
    background-color: var(--color-dark);
}
html, body {
    width: 100%;
    -webkit-font-smoothing: antialiased;
    position: relative;
    background-color: var(--color-dark);
}
::selection    { background-color: var(--color-accent); color: var(--color-white); text-shadow: none; }
::-moz-selection { background-color: var(--color-accent); color: var(--color-white); text-shadow: none; }
canvas, img, video { max-width: 100%; height: auto; box-sizing: border-box; }
svg  { max-width: none; height: auto; box-sizing: border-box; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }

/* ── Typography ──────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6, p, a, li, ul, ol, span, strong, em { padding: 0; margin: 0; font-style: normal; font-weight: 400; letter-spacing: normal; }
h1:last-child, h2:last-child, h3:last-child, h4:last-child, p:last-child, p.big:last-child, p.small:last-child, a:last-child, strong:last-child { margin-bottom: 0; }

h1 { font-family: 'Syne', sans-serif; font-weight: 500; font-size: calc(clamp(3.25em, 7vw, 8em) * .875); line-height: 1.065; margin-bottom: 1em; }
h2 { font-family: 'Syne', sans-serif; font-weight: 500; font-size: calc(clamp(3.25em, 5vw, 4.5em) * .75); line-height: 1.065; margin-bottom: .66em; }
h3 { font-family: 'Syne', sans-serif; font-weight: 500; font-size: clamp(2.66em, 4.65vw, 5.32em); line-height: 1.065; margin-bottom: 1em; }
h4 { font-family: 'Syne', sans-serif; font-weight: 500; font-size: clamp(1.55em, 2.3vw, 2.5em); line-height: 1.45; margin-bottom: 1em; }
h5 { font-family: 'Syne', sans-serif; font-weight: 500; font-size: .6em; line-height: 1.065; margin-bottom: 1em; text-transform: uppercase; letter-spacing: .05em; opacity: .5; }
p  { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 1em; line-height: 1.66; margin-bottom: 1em; }
p.small { font-size: .8em; line-height: 1.75; letter-spacing: .015em; }
p.big   { font-size: 1.2em; }
strong  { font-weight: 800; }
a { color: var(--color-accent); text-decoration: none; }
p a { text-decoration: underline; }
.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark p { color: var(--color-white); }

/* ── Layout Utilities ────────────────────────────────────────────────────────────── */
.section { display: block; padding-top: var(--section-padding); padding-bottom: var(--section-padding); position: relative; }
.section-wrap { display: block; padding-top: 0; padding-bottom: 0; position: relative; }
.section.full-height { min-height: 100vh; display: flex; align-items: center; }
.section.no-padding { padding-top: unset; padding-bottom: unset; }
.container { margin: 0 auto; padding-left: var(--container-padding); padding-right: var(--container-padding); max-width: 100em; }
.container.large  { padding-left: var(--gap-padding); padding-right: var(--gap-padding); }
.container.medium { padding-left: calc(var(--container-padding) * 2); padding-right: calc(var(--container-padding) * 2); }
.container.small  { padding-left: calc(var(--container-padding) * 3); padding-right: calc(var(--container-padding) * 3); }
.container.no-padding { padding-left: unset; padding-right: unset; }
.row { display: flex; flex-wrap: wrap; position: relative; }
.row.no-flex  { display: block; }
.row.no-wrap  { flex-wrap: nowrap; }
.flex-col { display: block; width: 100%; order: 2; position: relative; }
.overlay  { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
img.overlay, video.overlay { object-fit: contain; }
.line   { display: block; width: 100%; height: 1px; background-color: var(--color-border); margin-top: var(--gap-padding); margin-bottom: var(--gap-padding); }
.stripe { display: block; width: 100%; height: 1px; background-color: var(--color-border); }
.theme-dark .stripe { background-color: var(--color-border-light); }
.no-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

@media screen and (max-width: 540px){
    .section.full-height { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); max-height: 100vh; }
    .container.medium, .container.small { padding-left: var(--container-padding); padding-right: var(--container-padding); }
}

/* ── Buttons ─────────────────────────────────────────────────────────────────────── */
.btn { margin-bottom: calc(var(--gap-padding) / 2); position: relative; z-index: 5; border: 0; outline: 0; }
.btn input { cursor: pointer; }
.btn:hover { z-index: 15; }
.btn:last-child { margin-bottom: 0; }
.btn-click { cursor: pointer; border: 0; color: var(--color-dark); background: transparent; border-radius: 2.125em; min-width: 1em; height: 4.25em; padding: 0; font-size: 1em; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; text-decoration: none; will-change: transform; outline: 0; transform: translateZ(0) rotate(0.001deg); }
.btn-click:hover { cursor: pointer; text-decoration: none; }
.btn-normal .btn-click { -webkit-box-shadow: inset 0px 0px 0px 1px var(--color-border); box-shadow: inset 0px 0px 0px 1px var(--color-border); }
.btn-bg { background: var(--color-accent); position: absolute; width: 150%; height: 200%; border-radius: 50%; top: -50%; left: -25%; transform: translate3d(0,-76%,0); will-change: transform; transition: background-color ease-in-out .25s; }
.btn-text { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 2.5em; z-index: 2; color: var(--color-dark); position: relative; transform: rotate(0.001deg); pointer-events: none; will-change: transform, color; }
.btn-normal.active .btn-click .btn-text-inner { color: var(--color-white) !important; }
.btn-normal.not-active .btn-click .btn-text-inner { transition: var(--animation-smooth); }
.btn-normal.active .btn-click .btn-bg { transform: translate3d(0,0%,0) !important; background-color: var(--color-dark); }
.btn-normal.not-active .btn-click .btn-bg { background-color: var(--color-dark); transition: var(--animation-smooth); }
.count-nr { display: inline-block; margin-left: .25em; opacity: .6; font-size: .7em; position: absolute; transform: translate(20%, -15%); width: 0; }
.btn-normal .arrow svg g { stroke: currentColor; }
.theme-dark .btn-normal .btn-click { -webkit-box-shadow: inset 0px 0px 0px 1px var(--color-border-light); box-shadow: inset 0px 0px 0px 1px var(--color-border-light); }
.theme-dark .btn-normal .btn-text .btn-text-inner { color: var(--color-white) !important; }
.btn-normal.btn-dark .btn-click { -webkit-box-shadow: inset 0px 0px 0px 0px var(--color-border); box-shadow: inset 0px 0px 0px 0px var(--color-border); background: var(--color-dark); }
.btn-normal.btn-dark .btn-text .btn-text-inner { color: var(--color-white) !important; }

.btn-link { margin: 0; }
.btn-link .btn-click { border: 0; height: 2.75em; border-radius: 0; overflow: visible; }
.btn-link .btn-text { padding: 0 calc(var(--gap-padding) / 2); position: relative; }
.btn-link .btn-click::after { content: ""; position: absolute; bottom: -.5em; left: 50%; display: block; width: calc(clamp(16px, 1.2vw, 19px) / 2.75); height: calc(clamp(16px, 1.2vw, 19px) / 2.75); border-radius: 50%; background: var(--color-dark); transform: translate(-50%, -50%) scale(0) rotate(0.001deg); transition: var(--animation-fast); will-change: transform; }
.btn-link.active .btn-click::after { transform: translate(-50%, -50%) scale(1) rotate(0.001deg); }
.btn-link .btn-click:hover::after { transform: translate(-50%, -50%) scale(1) rotate(0.001deg); }
.nav-links { display: flex; }
.nav-links:hover .btn-link .btn-click::after { transform: translate(-50%, -50%) scale(0) rotate(0.001deg); }
.nav-links:hover .btn-link .btn-click:hover::after { transform: translate(-50%, -50%) scale(1) rotate(0.001deg); }
/* ── NAV TEXT FIX: ensure nav link labels are always visible ─────────────────── */
.btn-link .btn-text { color: var(--color-white); }
.btn-link .btn-text-inner { color: var(--color-white) !important; }
.btn-link .btn-click::after { background: var(--color-white); }
/* On light backgrounds, flip to dark */
.theme-light .btn-link .btn-text { color: var(--color-dark); }
.theme-light .btn-link .btn-text-inner { color: var(--color-dark) !important; }
.theme-light .btn-link .btn-click::after { background: var(--color-dark); }
.theme-dark .btn-link .btn-text { color: var(--color-white); }
.theme-dark .btn-link .btn-text-inner { color: var(--color-white) !important; }
.theme-dark .btn-link .btn-click::after { background: var(--color-white); }

.btn-link.btn-link-external .btn-click { border: 0; height: 2.25em; border-radius: 0; overflow: visible; margin: 0 calc(var(--gap-padding) / 3); }
.btn-link.btn-link-external .btn-text { padding: 0; }
.btn-link.btn-link-external .btn-click::after { bottom: 0; width: 100%; height: 1px; border-radius: 0; background: var(--color-dark); transform: translate(-50%, -50%) scale(0,1) rotate(0.001deg); }
.theme-dark .btn-link.btn-link-external .btn-click::after { background: var(--color-white); }
.theme-dark .btn-link .btn-click:hover::after { transform: translate(-50%, -50%) scale(1) rotate(0.001deg); }

.btn-circle { margin: 0; z-index: 20; }
.btn-circle .btn-click { width: clamp(9em, 12vw, 11em); height: clamp(9em, 12vw, 11em); border-radius: 50%; border: 0; background: var(--color-dark); }
.btn-circle .btn-text { padding: 0 1em; text-align: center; }
.btn-circle .btn-text-inner { color: #fff; }
.btn-circle .btn-bg { background: var(--color-accent); }
.theme-dark .btn-circle .btn-click { background: var(--color-accent); }
.theme-dark .btn-circle .btn-bg { background: var(--color-accent-dark); }

.btn-brand .btn-click::after { display: none; }
.btn-brand .credit { padding-right: .21em; }
.btn-brand .credit span { position: relative; display: block; transform: translate(0, 0) rotate(0.001deg); transition: var(--animation-primary); }
.btn-brand:hover .credit span { transform: translate(0, 0) rotate(360deg); }
.btn-brand .cbd { overflow: hidden; position: relative; }
.btn-brand .code-by { transform: translateX(0) rotate(0.001deg); position: relative; display: inline-block; transition: var(--animation-primary); }
.btn-brand:hover .code-by { transform: translateX(-3.7em) rotate(0.001deg); }
.btn-brand .omar { transform: translateX(0) rotate(0.001deg); position: relative; display: inline-block; padding-left: .21em; padding-right: .2em; transition: var(--animation-primary); }
.btn-brand:hover .omar { padding-right: 2em; transform: translateX(-3.7em) rotate(0.001deg); }
.btn-brand .demos { position: absolute; opacity: 1; padding-left: .21em; transition: var(--animation-primary); top: 0; left: 0; transform: translateX(3.25em); white-space: nowrap; }
@media screen and (max-width: 540px){
    .btn-brand:hover .credit span { transform: translate(0, 0) rotate(0.001deg); }
    .btn-brand:hover .code-by { transform: translateX(0) rotate(0.001deg); }
    .btn-brand:hover .omar { padding-right: .2em; transform: translateX(0) rotate(0.001deg); }
}

.btn-burger { position: fixed; top: calc(var(--gap-padding) / 1.5); right: calc(var(--gap-padding) / 1.5); transition: transform .4s cubic-bezier(0.36, 0, 0.66, 0); transform: translateY(0%) scale(0) rotate(0.001deg); z-index: 105; }
.btn-burger:hover { z-index: 105; }
.btn-burger .btn-click, .btn-burger .btn-text { width: clamp(4em, 5.5vw, 5em); height: clamp(4em, 5.5vw, 5em); border-radius: 50%; }
.btn-burger .btn-click { border: 0; background-color: var(--color-dark); transition: background-color .25s cubic-bezier(0.36, 0, 0.66, 0), box-shadow .25s cubic-bezier(0.36, 0, 0.66, 0); -webkit-box-shadow: inset 0px 0px 0px 1px var(--color-border-light); box-shadow: inset 0px 0px 0px 1px var(--color-border-light); }
.nav-active .btn-burger .btn-click { -webkit-box-shadow: inset 0px 0px 0px 1px transparent !important; box-shadow: inset 0px 0px 0px 1px transparent !important; }
.btn-burger .btn-bg { background-color: var(--color-accent); }
.btn-burger .btn-text-inner { color: var(--color-white); opacity: 0; }
.btn-burger .btn-lines { position: absolute; width: 28%; height: 8%; opacity: 1; }
.btn-burger .btn-text { position: relative; }
.btn-burger .btn-lines::before, .btn-burger .btn-lines::after { content: ""; display: block; position: absolute; left: 50%; height: 1px; width: 100%; transform: translate(-50%, -50%) rotate(0.001deg); background: var(--color-white); transition: var(--animation-fast); }
.btn-burger .btn-lines::before { top: 0; transform: translate(-50%, -50%); }
.btn-burger .btn-lines::after { top: 100%; transform: translate(-50%, -50%); }
.btn-burger.active .btn-lines::before { top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }
.btn-burger.active .btn-click { background-color: var(--color-accent); }
.btn-burger.active .btn-lines::after { top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
main.scrolled .btn-burger { transition: transform .4s cubic-bezier(0.34, 1.5, 0.64, 1); transform: translateY(0%) scale(1) rotate(0.001deg); }
main .btn-burger.active { transform: translateY(0%) scale(1) rotate(0.001deg); }

.btn-menu .btn-click::after, .nav-links:hover .btn-menu .btn-click:hover::after { left: 0; bottom: 50%; transform: translate(-50%, 50%) scale(1) rotate(0.001deg); }
.theme-dark .btn-menu .btn-click::after, .theme-dark .btn-menu .btn-click:hover::after { background: var(--color-white); }
.btn-icon .btn-click { width: 4.25em; }
.btn-icon .btn-click .btn-text-inner { display: flex; }

/* ── Form ────────────────────────────────────────────────────────────────────────── */
.hidden-field, .website-field { position: absolute; left: -9999px; }
.form { width: 100%; display: block; }
.form input, .form textarea, .form select { border:0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.form-col { display: block; width: 100%; font-size: 1.33em; border-bottom: 1px solid var(--color-border-light); padding: 0 2.75em; position: relative; }
.form-col:nth-child(2) { border-top: 1px solid var(--color-border-light); }
.form .field { appearance: none; -webkit-appearance: none; width: 100%; padding: 1em 0 2em 0; border: 0; background: transparent !important; border-radius: 0; font-weight: 400; font-size: 1em; color: var(--color-white); display: block; margin-top: -.33em; }
.form .form-col h5 { position: absolute; left: 0; top: 3.4em; opacity: .33; }
.form .field:focus { outline: 0; border: 0; }
.form .field::-webkit-input-placeholder, .form .field::placeholder { color: var(--color-white); opacity: .33; font-weight: 400; }
.form textarea.field { resize: none; }
.form .label { width: 100%; display: block; margin-bottom: 0; color: var(--color-white); font-weight: 400; padding-top: 1.66em; transition: all .2s ease-in-out; }
.btn-contact-send { float: right; transform: translate(-20%, -60%); position: relative; z-index: 5; }
.btn-contact-send .btn-text { pointer-events: all; }
.form .form-col.not-empty .label { opacity: .33; }

/* ── Span Lines ──────────────────────────────────────────────────────────────────── */
.span-lines.animate .span-line { position: relative; display: inline-flex; overflow: hidden; }
.span-lines.animate .span-line .span-line-inner { position: relative; display: block; }

/* ── Arrow ───────────────────────────────────────────────────────────────────────── */
.arrow { position: relative; width: clamp(.9em, 1.1vw, 1.1em); }
.arrow.big { position: relative; width: clamp(1.1em, 1.3vw, 1.25em); }
.arrow svg { display: block; width: 100%; }

/* ── Profile Picture ─────────────────────────────────────────────────────────────── */
.profile-picture { position: relative; display: inline-flex; border-radius: 50%; background: url("") center center no-repeat; background-size: cover; width: clamp(4.5em, 6.5vw, 8em); height: clamp(4.5em, 6.5vw, 8em); }

/* ── Pattern Dots ────────────────────────────────────────────────────────────────── */
.dots { top: 0; right: 0; height: 100%; width: 100%; pointer-events: none; background: url("") bottom right; background-size: 1.25em 1.25em; position: absolute; }

/* ── Curved Edge (was rounded-div) ──────────────────────────────────────────────── */
.curved-edge-wrap { width: 100%; top: 0; position: relative; height: 10vh; overflow: hidden; }
.curved-edge { width: 150%; content: ""; display: block; position: absolute; background: var(--color-white); height: 750%; left: 50%; border-radius: 50%; transform: translate(-50%, -86.666%); z-index: 1; }

/* ── Default Header ──────────────────────────────────────────────────────────────── */
.default-header { padding-top: calc(var(--section-padding) * 1.33); padding-bottom: calc(var(--section-padding) * .66); }
.default-header.theme-dark { background: var(--color-dark); }
.default-header h1 span { display: block; }
@media screen and (max-width: 720px){
    .default-header { padding-top: calc(var(--section-padding) * 1.95); padding-bottom: calc(var(--section-padding) * .75); }
    .default-header h1 span { display: unset; }
}
@media screen and (max-width: 460px){
    .default-header h1 { font-size: calc(clamp(3.25em, 7vw, 8em) * .875); }
}