/* Andy Ramirez portfolio — khasiyev (dark) × benorth (light) */
:root{
  --font-body:"Onest","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Newsreader",Georgia,serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,monospace;
  --mq-dur:35s;
  --accent-light:#ff4d17;
  --bg:#131311; --bg2:#1a1a17; --ink:#eceae3; --muted:#939086; --line:rgba(236,234,227,.14);
  --accent:var(--ink); --on-accent:#131311; --chip-bd:var(--line);
}
html[data-theme="light"]{
  --bg:#f2eee6; --bg2:#e9e4d9; --ink:#161511; --muted:#7d786c; --line:rgba(22,21,17,.14);
  --accent:var(--accent-light); --on-accent:#fff7f2; --chip-bd:var(--accent-light);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;transition:background .35s,color .35s}
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-theme="light"] body::before{opacity:.07;mix-blend-mode:multiply}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
html[data-theme="light"] a:hover{color:var(--accent-light)}
img{display:block;max-width:100%}
.wrap{max-width:none;margin:0 auto;padding:0 clamp(20px,3.5vw,72px)}
@media (max-width:1024px){.wrap{padding:0 32px}}
@media (max-width:640px){.wrap{padding:0 22px}}
.mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
html[data-theme="light"] .mono{color:var(--accent-light)}
.serif{font-family:var(--font-serif);font-style:italic;font-weight:500;letter-spacing:-.01em}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html[data-theme="light"] :focus-visible{outline-color:var(--accent-light)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg)}
.site-header::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-theme="light"] .site-header::before{opacity:.07;mix-blend-mode:multiply}
.header-inner{position:relative}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;position:relative}
.header-status{position:absolute;left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted)}
@media (max-width:1180px){.site-header .header-status{display:none}}
.brand{display:flex;align-items:center;gap:10px;font-weight:600}
.brand-logo{width:30px;height:30px;flex:none;display:block}
.brand .role{color:var(--muted);font-weight:400;font-size:13px}
.nav{display:flex;align-items:center;gap:clamp(16px,3vw,36px);font-size:14px}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--ink)}
.theme-toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:border-color .2s}
.theme-toggle:hover{border-color:var(--ink)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .sun{display:none}
html[data-theme="light"] .theme-toggle .moon{display:none}
html[data-theme="light"] .theme-toggle .sun{display:block}

/* hero */
.hero{padding-block:clamp(48px,8vh,110px) clamp(28px,4vh,56px)}
.hero-intro{display:grid;justify-content:end;margin-bottom:clamp(40px,9vh,120px)}
.hero-intro p{max-width:420px;font-size:15px;color:var(--muted);text-wrap:pretty}
.hero-intro p + p{margin-top:14px}
.hero h1{font-size:clamp(40px,6.4vw,92px);line-height:1.04;font-weight:500;letter-spacing:-.02em}
/* hero headline: "Product" cycles to "Visual". JS sets an explicit width so the
   words that follow glide instead of snapping when the word length changes. */
.word-cycle{display:inline-block;white-space:nowrap;text-align:left;
  transition:width .55s cubic-bezier(.22,1,.36,1),opacity .32s ease,transform .32s ease}
.word-cycle.is-out{opacity:0;transform:translateY(-.09em)}
/* hero word hovers */
.hov-design,.hov-ai{position:relative;display:inline-block}
.sel-frame{position:absolute;inset:.04em -.12em .02em -.12em;border:1.5px solid #4c8dff;opacity:0;transform:scale(1.08);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.hov-design:hover .sel-frame{opacity:1;transform:scale(1)}
.sel-frame .h{position:absolute;width:8px;height:8px;background:var(--bg);border:1.5px solid #4c8dff}
.sel-frame .h1{top:-5px;left:-5px}.sel-frame .h2{top:-5px;right:-5px}.sel-frame .h3{bottom:-5px;left:-5px}.sel-frame .h4{bottom:-5px;right:-5px}
.sel-tag{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);background:#4c8dff;color:#fff;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;padding:2px 7px;border-radius:3px;white-space:nowrap}
.prompt-bar{position:absolute;left:50%;top:-1.05em;transform:translate(-50%,14px) scale(.96);display:flex;flex-direction:column;gap:8px;width:min(300px,80vw);background:#35342f;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 12px;box-shadow:0 18px 44px rgba(0,0,0,.45);opacity:0;transition:opacity .3s ease,transform .3s ease;pointer-events:none;z-index:5}
.hov-ai:hover .prompt-bar{opacity:1;transform:translate(-50%,0) scale(1)}
.pb-text{font-size:13px;font-weight:400;letter-spacing:0;color:#9b988f;display:flex;align-items:center;gap:2px;font-family:var(--font-body)}
.pb-caret{display:inline-block;width:1.5px;height:14px;background:#d0cdc4;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.pb-row{display:flex;align-items:center;justify-content:space-between;color:#b5b2a9}
.pb-left,.pb-right{display:flex;align-items:center;gap:10px}
.pb-model{font-size:11px;letter-spacing:0;font-weight:500;color:#e8e6df;font-family:var(--font-body);white-space:nowrap}
.pb-dim{color:#8a877e;font-weight:400}

/* reel — 70/30 row like the reference hero media */
.hero-media{display:grid;grid-template-columns:1fr;gap:14px;margin-top:clamp(28px,5vh,64px);height:clamp(420px,68vh,760px)}
.reel{overflow:hidden;position:relative;height:100%}
.reel-track{display:flex;gap:14px;width:max-content;height:100%;animation:mq var(--mq-dur) linear infinite}
.reel:hover .reel-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.reel-item{height:100%;aspect-ratio:16/11;overflow:hidden;background:var(--bg2);flex:none}
.reel-item image-slot,.reel-item img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.hero-media{height:auto}}

/* work list */
.section{padding-block:clamp(64px,11vh,140px) 0}
.sec-head{display:flex;justify-content:flex-end;margin-bottom:clamp(32px,6vh,72px)}
.sec-head p{max-width:460px;font-size:clamp(18px,1.8vw,24px);line-height:1.4;text-wrap:pretty}
.worklist{border-top:1px solid var(--line)}
.workrow{display:grid;grid-template-columns:1.4fr 1fr auto;align-items:center;gap:16px;padding:22px 4px;border-bottom:1px solid var(--line);position:relative;transition:padding .25s}
.workrow .t{font-size:clamp(18px,2vw,26px);font-weight:500;transition:transform .25s,color .2s}
.workrow .k{color:var(--muted);font-size:14px}
.workrow .y{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.workrow:hover .t{transform:translateX(10px)}
html[data-theme="light"] .workrow:hover .t{color:var(--accent-light)}
#row-thumb{position:fixed;z-index:40;width:300px;aspect-ratio:16/11;pointer-events:none;overflow:hidden;opacity:0;transform:scale(.92);transition:opacity .22s,transform .22s;background:var(--bg2);box-shadow:0 24px 60px rgba(0,0,0,.35)}
#row-thumb.on{opacity:1;transform:scale(1)}
#row-thumb img{width:100%;height:100%;object-fit:cover}
#row-thumb .ph{display:grid;place-items:center;width:100%;height:100%;color:var(--muted);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* services */
.svc-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,96px);border-top:1px solid var(--line);padding-top:clamp(28px,4vh,48px)}
.svc-label{grid-column:1/-1;margin-bottom:8px}
.svc-list{display:flex;flex-direction:column;gap:6px}
.svc{display:flex;align-items:baseline;gap:14px;background:none;border:none;text-align:left;cursor:pointer;font-family:var(--font-body);font-size:clamp(30px,3.6vw,52px);font-weight:500;letter-spacing:-.02em;padding:10px 0;position:relative;background-image:linear-gradient(to right,var(--ink) 50%,color-mix(in oklab,var(--ink) 35%,transparent) 50%);background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .6s cubic-bezier(.22,1,.36,1)}
.svc:hover,.svc.on{background-position:0 0}
.svc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.svc .num{font-family:var(--font-mono);font-size:11px;color:var(--muted);opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.svc .arw{margin-left:auto;opacity:0;transform:translate(-8px,8px);transition:opacity .3s ease,transform .3s ease;font-size:.6em;color:var(--ink)}
.svc.on::after{transform:scaleX(1)}
.svc.on .num{opacity:1;transform:none}
.svc.on .arw{opacity:1;transform:none}
html[data-theme="light"] .svc.on::after{background:var(--accent-light)}
html[data-theme="light"] .svc.on .arw{color:var(--accent-light)}
html[data-theme="light"] .svc.on .num{color:var(--accent-light)}
.svc-panel{display:none}
.svc-panel.on{display:block;animation:fadeup .5s cubic-bezier(.22,1,.36,1)}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.svc-panel.on .pill{animation:fadeup .5s cubic-bezier(.22,1,.36,1) backwards}
.svc-panel.on .pill:nth-child(2){animation-delay:.06s}
.svc-panel.on .pill:nth-child(3){animation-delay:.12s}
.svc-panel.on .pill:nth-child(4){animation-delay:.18s}
.svc-panel h3{font-size:19px;font-weight:600;margin-bottom:12px}
.svc-panel p{color:var(--muted);font-size:16.5px;max-width:46ch;text-wrap:pretty}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pill{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--chip-bd);border-radius:999px;color:var(--ink)}
html[data-theme="light"] .pill{color:var(--accent-light)}

/* gallery */
.gallery{columns:3;column-gap:14px;margin-top:8px}
.g-tile{break-inside:avoid;margin-bottom:14px}
.g-media{overflow:hidden;background:var(--bg2)}
.g-media image-slot{width:100%;transition:transform .5s ease;display:block}
.g-tile:hover .g-media image-slot{transform:scale(1.04)}
.g-cap{display:flex;justify-content:space-between;gap:10px;padding:8px 2px 0;font-size:12px}
.g-cap .c{color:var(--muted);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.gallery-cta{display:flex;justify-content:center;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border:1px solid var(--line);border-radius:999px;font-size:14px;cursor:pointer;background:none;color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.btn:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.ar{display:inline-block;transition:transform .2s ease,color .2s ease}
a:hover .ar,.btn:hover .ar{transform:translate(2px,-3px)}
.btn.primary:hover .ar{color:color-mix(in oklab,var(--on-accent) 55%,transparent)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.12);opacity:1;color:var(--on-accent)}
html[data-theme="light"] .btn.primary{background:var(--accent-light);border-color:var(--accent-light)}

/* about */
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,96px);border-top:1px solid var(--line);padding-top:clamp(28px,4vh,48px)}
.about-copy h2{font-size:clamp(28px,3.4vw,48px);line-height:1.12;font-weight:500;letter-spacing:-.02em;margin:14px 0 20px}
.about-copy p{color:var(--muted);max-width:52ch;text-wrap:pretty}
.about-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.about-media{display:grid;grid-template-columns:1.6fr 1fr;gap:8px;align-items:stretch}
.tile-abstract{aspect-ratio:auto;height:100%;overflow:hidden;background:radial-gradient(120% 160% at 20% 15%,#ff7a2f 0%,#c2410c 26%,#1e3a8a 55%,#0a0a12 82%);background-size:200% 200%;animation:gradmove 9s ease-in-out infinite alternate}
.tile-abstract::after{content:"";display:block;width:100%;height:100%;background:radial-gradient(90% 120% at 80% 85%,rgba(93,140,255,.5),transparent 60%);mix-blend-mode:screen;animation:gradmove 13s ease-in-out infinite alternate;background-size:200% 200%}
@keyframes gradmove{from{background-position:0% 0%}to{background-position:100% 100%}}
.about-media image-slot{width:100%;height:100%;display:block;aspect-ratio:4/5}

/* kind words */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);border-top:1px solid var(--line);padding-top:clamp(28px,4vh,48px)}
.quotes .q-label{grid-column:1/-1}
.quote blockquote{font-size:15px;color:var(--ink);text-wrap:pretty}
.quote blockquote::before{content:"\201C";display:block;font-family:var(--font-serif);font-style:italic;font-size:40px;line-height:1;color:var(--muted);margin-bottom:8px}
.quote .by{display:block;margin-top:14px;font-size:13px;color:var(--muted)}
.quote .by b{color:var(--ink);font-weight:600}

/* banner */
.banner{margin-top:clamp(72px,12vh,150px);border-top:1px solid var(--line);padding-block:clamp(40px,7vh,84px)}
.banner-inner{display:flex;align-items:center;gap:clamp(20px,4vw,56px);flex-wrap:wrap}
.banner-photo{width:180px;aspect-ratio:16/10;overflow:hidden;flex:none}
.banner-photo image-slot{width:100%;height:100%}
.banner h2{font-size:clamp(32px,4.6vw,64px);font-weight:500;letter-spacing:-.02em;line-height:1.05}
.banner-actions{display:flex;align-items:center;gap:18px;margin-left:auto;flex-wrap:wrap}
.banner-actions .email{color:var(--muted);font-size:14px}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:clamp(36px,6vh,64px) 0 28px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:32px}
.foot-col h5{font-size:13px;font-weight:600;margin-bottom:14px}
.foot-col a,.foot-col p{display:block;color:var(--muted);font-size:14px;margin-bottom:8px}
.foot-col a:hover{color:var(--ink)}
.foot-col p.status-line{display:flex;align-items:center;gap:8px}
.status-line{display:flex;align-items:center;gap:8px}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3ecf6a;animation:pulse 1.6s ease-in-out infinite;flex:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.foot-bottom{display:flex;justify-content:space-between;gap:12px;margin-top:48px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;flex-wrap:wrap}

/* cursor glow */
#cursor-glow{position:fixed;left:0;top:0;width:280px;height:280px;margin:-140px 0 0 -140px;border-radius:50%;pointer-events:none;z-index:2;opacity:0;transition:opacity .5s ease;background:radial-gradient(circle,rgba(255,122,47,.06) 0%,rgba(76,141,255,.035) 45%,transparent 70%)}
html[data-theme="light"] #cursor-glow{background:radial-gradient(circle,rgba(255,77,23,.06) 0%,rgba(43,75,255,.03) 45%,transparent 70%)}
#cursor-glow.on{opacity:1}
@media (pointer:coarse){#cursor-glow{display:none}}

@media (max-width:900px){
  .svc-grid,.about-grid{grid-template-columns:1fr}
  .gallery{columns:2}
  .quotes{grid-template-columns:1fr}
  #row-thumb{display:none}
  .nav{gap:14px;font-size:13px}
  .hero-intro{justify-content:flex-start;margin-bottom:clamp(32px,6vh,64px)}
  .hero-intro p{max-width:60ch}
  .hero h1{font-size:clamp(38px,9.5vw,72px);line-height:1.06}
  .hero-media{grid-template-columns:1fr;gap:12px;height:auto}
  .reel{height:clamp(260px,48vw,400px)}
  .section{padding-top:clamp(56px,9vh,90px)}
  .banner-inner{flex-direction:column;align-items:flex-start}
  .banner-actions{margin-left:0}
  .sec-head{justify-content:flex-start}
  .svc{font-size:clamp(26px,5.4vw,40px)}
}
@media (max-width:640px){
  .brand .role{display:none}
  .brand{font-size:15px}
  .nav{gap:11px}
  .nav a{font-size:12px}
  .hero{padding-top:28px}
  .hero h1{font-size:clamp(36px,11vw,46px);letter-spacing:-.015em}
  .hero-intro{margin-bottom:44px}
  .hero-intro p{font-size:15px;line-height:1.6}
  .reel{height:clamp(220px,52vw,300px)}
  .section{padding-top:64px}
  .workrow{padding:16px 2px}
  .workrow .t{font-size:18px}
  .sec-head p{font-size:17px}
  .svc{font-size:24px;padding:8px 0}
  .svc-panel p{font-size:15px}
  .about-media{grid-template-columns:1fr}
  .tile-abstract{display:none}
  .banner h2{font-size:clamp(28px,9vw,36px)}
  .banner-photo{width:100%}
  .prompt-bar{width:min(240px,74vw);padding:8px 10px}
  .foot-bottom{flex-direction:column;gap:6px}
  .btn{padding:10px 18px;font-size:13px}
}
@media (max-width:560px){
  .gallery{columns:1}
  .foot-grid{grid-template-columns:1fr 1fr}
  .workrow{grid-template-columns:1fr auto}
  .workrow .k{display:none}
}
@media (prefers-reduced-motion:reduce){
  .reel-track{animation:none}
  .tile-abstract,.tile-abstract::after{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .word-cycle{transition:none}
}