/* ===================================================
   VALI KORKIN — Main Stylesheet
   =================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0d0d0d;
  --surface: #161616;
  --surface2: #202020;
  --border: #252525;
  --text: #efefef;
  --muted: #5a5a5a;
  --muted2: #333;
  --orange: #f03a00;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  cursor: none;
  overflow-x: hidden;
}

/* CURSOR */
.cursor { position:fixed; width:6px; height:6px; background:var(--orange); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .2s,height .2s; }
.cursor-ring { position:fixed; width:30px; height:30px; border:1px solid rgba(240,58,0,.45); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width .25s,height .25s,border-color .25s; }

/* NAV */
nav { position:fixed; top:0;left:0;right:0; z-index:500; display:flex; justify-content:space-between; align-items:center; padding:22px 52px; background:linear-gradient(to bottom,rgba(13,13,13,.97) 0%,transparent 100%); }
.nav-logo { display:flex; align-items:center; gap:11px; text-decoration:none; }
.nav-logo-img { width:32px; height:32px; object-fit:contain; }
.nav-logo-text { font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--text); }
.nav-links { display:flex; gap:40px; list-style:none; }
.nav-links a { font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .2s; }
.nav-links a:hover { color:var(--orange); }

/* SHARED */
.section { padding:110px 52px; }
.s-tag { font-size:.62rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--orange); margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.s-tag::before { content:''; width:18px; height:1px; background:var(--orange); }
.s-title { font-size:clamp(2rem,4.5vw,3.8rem); font-weight:900; letter-spacing:-.03em; line-height:.95; margin-bottom:60px; }

/* BUTTONS */
.btn-primary { display:inline-flex; align-items:center; gap:10px; background:var(--orange); color:#fff; font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; padding:14px 26px; transition:background .2s,transform .2s; }
.btn-primary:hover { background:#ff4510; transform:translateY(-1px); }
.btn-ghost { display:inline-flex; align-items:center; gap:10px; color:var(--muted); font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; border:1px solid var(--border); padding:14px 26px; transition:border-color .2s,color .2s; }
.btn-ghost:hover { border-color:var(--orange); color:var(--orange); }

/* SERVICES BAR */
.services-bar { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface); display:flex; }
.svc { flex:1; padding:22px 28px; border-right:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.svc:last-child { border-right:none; }
.svc-dot { width:5px; height:5px; background:var(--orange); border-radius:50%; flex-shrink:0; }
.svc-label { font-size:.62rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }

/* PORTFOLIO */
#work { background:var(--bg); }
.p-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:3px; }
.p-item { position:relative; overflow:hidden; background:var(--surface); cursor:none; }
.p-item:nth-child(1) { grid-column:span 8; }
.p-item:nth-child(2) { grid-column:span 4; }
.p-item:nth-child(3) { grid-column:span 4; }
.p-item:nth-child(4) { grid-column:span 4; }
.p-item:nth-child(5) { grid-column:span 4; }
.p-item:nth-child(6) { grid-column:span 6; }
.p-item:nth-child(7) { grid-column:span 6; }
.p-thumb { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:var(--surface2); filter:brightness(.8); transition:transform .65s cubic-bezier(.25,.46,.45,.94),filter .35s; }
.p-item:nth-child(1) .p-thumb { aspect-ratio:16/9; }
.p-item:hover .p-thumb { transform:scale(1.05); filter:brightness(.45); }
.p-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:18px 20px; opacity:0; transition:opacity .3s; }
.p-item:hover .p-overlay { opacity:1; }
.p-cat { font-size:.58rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--orange); margin-bottom:4px; }
.p-name { font-size:1rem; font-weight:800; letter-spacing:-.01em; }
.p-arr { position:absolute; top:14px; right:14px; width:32px; height:32px; background:var(--orange); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.6); transition:all .3s; }
.p-item:hover .p-arr { opacity:1; transform:scale(1); }

/* VIDEOS */
#videos { background:var(--surface); }
/* Reel grid: horizontal scroll, fixed portrait cards */
.v-grid { display:flex; gap:3px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; align-items:stretch; }
.v-grid::-webkit-scrollbar { height:2px; }
.v-grid::-webkit-scrollbar-track { background:var(--surface); }
.v-grid::-webkit-scrollbar-thumb { background:var(--orange); }
.v-card { flex:0 0 280px; background:var(--bg); position:relative; scroll-snap-align:start; display:flex; flex-direction:column; }
.ig-wrap { background:#000; width:100%; flex:1; display:flex; align-items:stretch; justify-content:center; overflow:hidden; }
.ig-wrap .instagram-media, .ig-wrap iframe { width:100%!important; min-width:unset!important; border:none; }
.v-placeholder { width:100%; aspect-ratio:9/16; background:var(--surface2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; cursor:pointer; border:1px dashed var(--border); transition:background .2s,border-color .2s; }
.v-placeholder:hover { background:var(--border); border-color:var(--orange); }
.v-play { width:44px; height:44px; border:1.5px solid var(--muted); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color .2s; }
.v-placeholder:hover .v-play { border-color:var(--orange); }
.v-tri { fill:#555; transition:fill .2s; margin-left:3px; }
.v-placeholder:hover .v-tri { fill:var(--orange); }
.v-plabel { font-size:.6rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.v-meta { padding:12px 14px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.v-title { font-size:.78rem; font-weight:700; }
.v-cat { font-size:.58rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--orange); }
/* Add reel button — only shown after admin login via JS */
.v-add-btn { display:none; flex:0 0 100px; flex-direction:column; align-items:center; justify-content:center; gap:10px; border:1px dashed var(--border); background:transparent; color:var(--muted); cursor:pointer; transition:all .2s; font-family:Inter,sans-serif; scroll-snap-align:start; padding:0; }
.v-add-btn.admin-visible { display:flex; }
.v-add-btn:hover { border-color:var(--orange); color:var(--orange); background:rgba(240,58,0,.04); }
.v-add-icon { font-size:1.8rem; line-height:1; }
.v-add-label { font-size:.58rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }

/* ABOUT */
#about { background:var(--bg); display:grid; grid-template-columns:1fr 1fr; }
.about-l { padding:110px 60px 110px 52px; border-right:1px solid var(--border); }
.about-r { padding:110px 52px 110px 60px; display:flex; flex-direction:column; justify-content:center; }
.about-h { font-size:clamp(2.2rem,4vw,3.4rem); font-weight:900; letter-spacing:-.03em; line-height:1; margin-bottom:28px; }
.about-h .og { color:var(--orange); }
.about-t { font-size:.88rem; line-height:1.9; color:var(--muted); margin-bottom:16px; }
.skills { display:grid; grid-template-columns:1fr 1fr; gap:3px; margin-top:32px; }
.skill { background:var(--surface); padding:14px 16px; border:1px solid var(--border); font-size:.62rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); transition:border-color .2s,color .2s; }
.skill:hover { border-color:var(--orange); color:var(--orange); }
.stats { display:flex; flex-direction:column; }
.stat-row { padding:30px 0; border-bottom:1px solid var(--border); display:flex; align-items:baseline; gap:14px; }
.stat-row:first-child { border-top:1px solid var(--border); }
.stat-n { font-size:4rem; font-weight:900; letter-spacing:-.05em; line-height:1; color:var(--orange); }
.stat-d { font-size:.78rem; font-weight:700; color:var(--muted); }

/* CONTACT */
#contact { background:var(--surface); padding:130px 52px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; border-top:1px solid var(--border); }
.c-sub { font-size:.88rem; color:var(--muted); line-height:1.8; margin-bottom:36px; }
.c-links { display:flex; flex-direction:column; gap:8px; }
.c-link { display:inline-flex; align-items:center; gap:12px; font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; padding:14px 22px; border:1px solid var(--border); color:var(--muted); transition:all .2s; width:fit-content; }
.c-link.primary { background:var(--orange); border-color:var(--orange); color:#fff; }
.c-link.primary:hover { background:#ff4510; }
.c-link:not(.primary):hover { border-color:var(--orange); color:var(--orange); }
.c-right { background:var(--bg); border:1px solid var(--border); padding:44px; }
.c-big { font-size:clamp(1.6rem,2.8vw,2.4rem); font-weight:900; letter-spacing:-.03em; line-height:1.05; margin-bottom:14px; }
.c-email { font-size:.78rem; font-weight:700; color:var(--orange); margin-bottom:16px; }
.c-div { width:36px; height:2px; background:var(--orange); margin-bottom:16px; }
.c-note { font-size:.78rem; color:var(--muted); line-height:1.8; }

/* FOOTER */
footer { background:var(--bg); border-top:1px solid var(--border); padding:22px 52px; display:flex; justify-content:space-between; align-items:center; }
.f-left { display:flex; align-items:center; gap:16px; }
.f-logo { width:22px; height:22px; object-fit:contain; }
.f-name { font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.f-copy { font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.f-imp { font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .2s; }
.f-imp:hover { color:var(--orange); }

/* REVEAL ANIMATIONS */
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* HIDDEN ADMIN TRIGGER */
.admin-trigger { position:fixed; bottom:0; right:0; width:80px; height:80px; opacity:0; z-index:9999; pointer-events:all; cursor:none; -webkit-tap-highlight-color:transparent; background:transparent; }

/* PIN DIALOG */
.pin-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:10000; align-items:center; justify-content:center; }
.pin-overlay.on { display:flex; }
.pin-box { background:var(--surface); border:1px solid var(--border); padding:48px; width:360px; }
.pin-title { font-size:1rem; font-weight:900; letter-spacing:-.02em; margin-bottom:6px; }
.pin-sub { font-size:.78rem; color:var(--muted); margin-bottom:24px; }
.pin-inp { width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); padding:14px; font-family:Inter,sans-serif; font-size:1.4rem; font-weight:800; letter-spacing:.35em; text-align:center; outline:none; margin-bottom:12px; transition:border-color .2s; }
.pin-inp:focus { border-color:var(--orange); }
.pin-inp.err { border-color:#e00; animation:shake .3s; }
.pin-row { display:flex; gap:8px; }
.pin-ok { flex:1; background:var(--orange); color:#fff; border:none; padding:13px; font-family:Inter,sans-serif; font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:background .2s; }
.pin-ok:hover { background:#ff4510; }
.pin-no { background:transparent; color:var(--muted); border:1px solid var(--border); padding:13px 18px; font-family:Inter,sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:all .2s; }
.pin-no:hover { color:var(--text); }

/* ADMIN PANEL (hidden by default) */
.admin-panel { display:none; position:fixed; bottom:0; right:0; width:400px; background:var(--surface); border:1px solid var(--border); border-bottom:none; border-right:none; padding:28px; z-index:9000; box-shadow:-4px -4px 40px rgba(0,0,0,.6); }
.admin-panel.open { display:block; }
.admin-close { position:absolute; top:14px; right:14px; background:none; border:none; color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.admin-close:hover { color:var(--text); }
.admin-title { font-size:.78rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px; color:var(--orange); }
.slot-sel { width:100%; background:var(--surface2); border:1px solid var(--border); color:var(--muted); padding:10px 14px; font-family:Inter,sans-serif; font-size:.7rem; font-weight:700; outline:none; margin-bottom:10px; }
.ig-form { display:flex; margin-bottom:10px; }
.ig-inp { flex:1; background:var(--bg); border:1px solid var(--border); border-right:none; color:var(--text); padding:11px 14px; font-family:Inter,sans-serif; font-size:.78rem; outline:none; transition:border-color .2s; }
.ig-inp::placeholder { color:var(--muted); }
.ig-inp:focus { border-color:var(--orange); }
.ig-submit { background:var(--orange); color:#fff; border:none; padding:11px 20px; font-family:Inter,sans-serif; font-size:.65rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:background .2s; }
.ig-submit:hover { background:#ff4510; }
.admin-hint { font-size:.6rem; color:var(--muted); letter-spacing:.06em; }

/* IMPRESSUM PAGE */
.impressum-wrap { max-width:720px; margin:0 auto; padding:160px 52px 100px; }
.impressum-wrap h1 { font-size:2.4rem; font-weight:900; letter-spacing:-.03em; margin-bottom:48px; }
.impressum-wrap h2 { font-size:.8rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); margin-top:36px; margin-bottom:12px; }
.impressum-wrap p { font-size:.9rem; color:var(--muted); line-height:1.85; margin-bottom:8px; }
.impressum-wrap a { color:var(--orange); text-decoration:none; }
.impressum-wrap a:hover { text-decoration:underline; }
.back-link { display:inline-flex; align-items:center; gap:10px; font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--muted); border:1px solid var(--border); padding:12px 20px; margin-bottom:60px; transition:all .2s; }
.back-link:hover { border-color:var(--orange); color:var(--orange); }

/* MOBILE */
@media(max-width:768px) {
  nav { padding:18px 20px; } .nav-links { display:none; }
  .section { padding:80px 20px; }
  .services-bar { flex-direction:column; } .svc { border-right:none; border-bottom:1px solid var(--border); }
  .p-item:nth-child(1) { grid-column:span 12; }
  .p-item:nth-child(2),.p-item:nth-child(3) { grid-column:span 6; }
  .p-item:nth-child(4),.p-item:nth-child(5) { grid-column:span 6; }
  .p-item:nth-child(6),.p-item:nth-child(7) { grid-column:span 12; }
  #about { grid-template-columns:1fr; }
  .about-l { padding:80px 20px 40px; border-right:none; border-bottom:1px solid var(--border); }
  .about-r { padding:40px 20px 80px; }
  #contact { grid-template-columns:1fr; padding:80px 20px; gap:32px; }
  .c-right { padding:28px 20px; }
  footer { padding:18px 20px; flex-direction:column; gap:12px; text-align:center; }
  .admin-panel { width:100%; }
}

/* ── HERO ─────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 52px 90px;
  position: relative; overflow: hidden;
}
.hero-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(37,37,37,.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,37,37,.32) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 60%, black 20%, transparent 90%);
}
.hero-glow {
  position: absolute; top: 0; right: -5%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(240,58,0,.05) 0%, transparent 65%);
  pointer-events: none;
}
/* Background logo watermark — rechts, leicht nach links verschoben */
.hero-logo-bg {
  position: absolute;
  top: 50%; right: 8%;
  transform: translateY(-50%);
  width: 42%; max-width: 480px;
  pointer-events: none;
  z-index: 1;
}
.hero-logo-bg img {
  width: 100%; height: auto;
  opacity: 0.11;
  filter: blur(2px) brightness(2.5);
}
.hero-inner {
  position: relative; z-index: 2;
}
.hero-eyebrow {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
  opacity: 0; animation: fadeUp .6s .1s forwards;
}
.hero-eyebrow::before {
  content: ''; width: 24px; height: 1px; background: var(--orange);
}
.hero-title {
  font-size: clamp(4.5rem, 11vw, 10rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -.04em;
  margin-bottom: 44px;
  opacity: 0; animation: fadeUp .7s .2s forwards;
}
.hero-title .line1 { display: block; color: var(--text); }
.hero-title .line2 { display: block; color: var(--muted2); }
.hero-title .line3 { display: block; color: var(--orange); }
.hero-bottom {
  display: flex; align-items: flex-end; justify-content: space-between;
  opacity: 0; animation: fadeUp .7s .35s forwards;
}
.hero-desc {
  font-size: .9rem; color: var(--muted); line-height: 1.8; max-width: 360px;
}
.hero-actions { display: flex; gap: 12px; }

@media(max-width: 768px) {
  .hero { padding: 0 20px 60px; }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 28px; }
  .hero-logo-bg { width: 95%; }
}

/* ── INTER LIGHT for body text ──────────────────────── */
.hero-desc,
.about-t,
.c-sub,
.c-note,
.stat-d,
.impressum-wrap p {
  font-weight: 300;
  letter-spacing: 0.01em;
}

/* Ensure links always get pointer cursor even with cursor:none on body */
a, button { cursor: none; }
.c-email { text-decoration: none; transition: color .2s; }
.c-email:hover { color: #ff4510; }