/* =========================
   ALEX HARY — style.css
   Sections: ART / DESIGN / CODE / CONTACT
   Notes: Mobile scaling fixes (Android), particle canvas, overlay.
   ========================= */

/* --- Global / resets --- */
* { box-sizing: border-box; }
:root{
  --vh: 1vh;
  --panel-gap: 0px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --transition: 700ms var(--ease);
  --parallax-ratio: 0.4; /* background moves slower than content */
  --tint: linear-gradient(240deg, rgba(0, 0, 0, 0.009), rgba(0, 0, 1, 0.8) 99%, rgba(10, 10, 6, 0.033));
}

/* Android text autosize fix */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body { height: 100%; margin:0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: #fff; background: #0b0b0c;
  overflow: hidden;
  max-width: 100vw; /* prevent accidental layout zoom on Android */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }

/* --- Top bar --- */
.topbar{
  position: fixed; top:0; left:0; right:0; height: 56px;
  display:flex; align-items:center; justify-content:space-between;
  background: rgba(12,12,14,.35);
  backdrop-filter: blur(8px);
  z-index: 10;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 0 16px;
  font-weight: 500;
}
.brand{ letter-spacing:.12em; font-weight:600; opacity:.9; }
.nav { display:flex; gap: 24px; font-weight:600; letter-spacing:.06em; }
.nav__link{ opacity:.7; position:relative; padding:6px 4px; font-weight:600; }
.nav__link.is-active{ opacity:1; }
.nav__link.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:#fff;
}
.lang { display:flex; align-items:center; gap:8px; opacity:.85; }
.lang__link{ opacity:.7; font-weight:600; }
.lang__link.is-active{ opacity:1; text-decoration:underline; text-underline-offset: 4px; }

/* --- Viewport & Slider --- */
.viewport{ position: relative; height: calc(100 * var(--vh)); margin-top: 0; }
.slider{ display:flex; width: 400vw; height: calc(100 * var(--vh)); transition: transform var(--transition); will-change: transform; }

/* --- Panels --- */
.panel{ position: relative; flex: 0 0 100vw; height:100%; overflow:hidden; isolation:isolate; background:#000; }

/* Background with inner fade slider */
.bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.bg__slides{ position:absolute; inset:0; }
.bg__slide{ position:absolute; inset:0; opacity:0; animation:bgfade 18s linear infinite; }
.bg__slide:nth-child(1){ animation-delay: 0s; }
.bg__slide:nth-child(2){ animation-delay: 6s; }
.bg__slide:nth-child(3){ animation-delay: 12s; }
.bg__slide img{ width:100%; height:100%; object-fit:cover; display:block; filter: contrast(1.02) saturate(1.02); object-position:center; }
.bg__tint{ position:absolute; inset:0; background: var(--tint); }

@keyframes bgfade{
  0%{opacity:1} 28%{opacity:1} 33%{opacity:0} 100%{opacity:0}
}

/* Parallax */
.panel .bg{ transform: translateX(calc(var(--x, 0px) * var(--parallax-ratio))); transition: transform var(--transition); }
.panel .content{ transform: translateX(var(--x, 0px)); transition: transform var(--transition), opacity 320ms ease; }

/* --- Content --- */
.content{
  position: relative; min-height: 100%;
  display: grid; grid-template-rows: auto 1fr;
  padding-top: calc(56px + clamp(20px, 5vw, 72px));
  padding-left: clamp(20px, 5vw, 72px);
  padding-right: clamp(20px, 5vw, 72px);
  padding-bottom: clamp(24px, 6vw, 80px);
  gap: 24px;
}
.panel h1{ margin:24px 0 0; font-size: clamp(28px, 8vw, 64px); line-height: 1.02; letter-spacing: .01em; font-weight: 700; }
.panel p{ max-width: 70ch; opacity:.95; font-size: clamp(16px, 2.2vw, 20px); line-height:1.45; font-weight: 400; }

.projects{ margin-top: 12px; display: grid; gap: 24px; }
.project h2{ margin:0 0 8px; font-size: 18px; opacity:.9; font-weight:600; }
.grid{ display:grid; grid-template-columns: repeat(4, minmax(80px, 1fr)); gap:12px; max-width: 520px; }
.tile{ display:grid; place-items:center; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius: 10px; height: 68px; transition: transform .15s ease, background .2s ease, border-color .2s ease; font-weight: 500; }
.tile:hover{ transform: translateY(-2px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); }
.desc{ opacity:.8; max-width:60ch; font-weight:400; }

/* --- Contact form --- */
.contact{ width: min(900px, 96%); display:grid; gap:12px; }
.contact .row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.contact input, .contact textarea{ background: rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.14); border-radius: 10px; padding:12px 14px; font-size:16px; font-weight:400; }
.cta{ display:inline-flex; align-items:center; gap:.6em; width:fit-content; padding:.9em 1.2em; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.06); text-decoration:none; color:#fff; font-weight:600; backdrop-filter: blur(6px); transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.cta:hover{ transform:translateY(-1px); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.55); }

/* --- Transition state --- */
.body--animating .content{ opacity:.4; }

/* --- Particle canvas (CODE) --- */
#bgParticles{
  position:absolute; inset:0; display:block;
  width:100%; height:100%;
  pointer-events:none;               /* let clicks go to content */
  transform:none !important;         /* ensure no accidental transforms */
  filter: none;
}

/* --- Overlay (project lightbox) --- */
.overlay[hidden]{ display:none; }
.overlay{ position:fixed; inset:0; z-index:50; background: rgba(0,0,0,.75); backdrop-filter: blur(6px); display:grid; place-items:center; padding: clamp(16px, 4vw, 32px); }
.overlay__inner{ width:min(1200px, 96vw); max-height:90vh; background:#0f0f12; border:1px solid rgba(255,255,255,.12); border-radius:16px; overflow:hidden; display:grid; grid-template-columns:1.3fr 1fr; }
.overlay__close{ position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color:#fff; font-size:24px; line-height:1; }
.overlay__media{ position: relative; min-height:360px; background:#000; }
.ov-stage{ position:absolute; inset:0; display:grid; place-items:center; }
.ov-stage img, .ov-stage video{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.ov-nav{ position:absolute; top:50%; transform: translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color:#fff; font-size:24px; }
.ov-prev{ left:12px; } .ov-next{ right:12px; }
.overlay__meta{ padding: clamp(16px, 3vw, 28px); overflow:auto; }
.overlay__meta h3{ margin:.2em 0 .4em; font-size: clamp(20px, 2.4vw, 28px); }
.overlay__meta p{ opacity:.9; line-height:1.5; }

/* --- Mobile tweaks --- */
@media (max-width: 860px){
  .bg__slide img{ object-position: right center; }
  .overlay__inner{ grid-template-columns:1fr; max-height:94vh; }
  .overlay__media{ aspect-ratio:16/10; min-height:auto; }
  .grid{ grid-template-columns: repeat(2, minmax(100px,1fr)); }
  .tile{ height:64px; }
  .panel h1{ font-size: clamp(24px, 10vw, 48px); }
  .content{ padding-top: calc(56px + 40px); }
  .contact .row{ grid-template-columns:1fr; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce){
  .slider, .panel .bg, .panel .content{ transition: none !important; }
  .bg__slide{ animation: none; }
}