/* Juha Impivaara — portfolio */

@font-face{ font-family:"Space Grotesk"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Space Grotesk"; font-style:normal; font-weight:500; font-display:swap;
  src:url("assets/fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Space Grotesk"; font-style:normal; font-weight:600; font-display:swap;
  src:url("assets/fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Space Grotesk"; font-style:normal; font-weight:700; font-display:swap;
  src:url("assets/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
  src:url("assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
  src:url("assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root{
  --bg:        #0c0c0e;
  --surface:   #121216;
  --surface-2: #17171c;
  --line:      #26262e;
  --text:      #ecebe7;
  --text-dim:  #a4a29b;
  --text-mute: #6f6d67;
  --accent:    #e0a53c;
  --white-accent: #f4f2ec;

  --wrap: 1180px;
  --pad: clamp(1.15rem, 5vw, 3rem);

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --r: 12px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:72px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
img[hidden]{ display:none; }
a{ color:inherit; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.1;
  margin:0;
  letter-spacing:-.01em;
}

::selection{ background:var(--accent); color:#000; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--accent); color:#000; padding:.6rem 1rem; border-radius:0 0 8px 0;
  font-weight:600;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}

/* ============================ HEADER ============================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:background .3s;
}
.site-header.is-scrolled{
  background:color-mix(in srgb, var(--bg) 92%, transparent);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; font-family:var(--font-display); font-weight:600;
}
.brand__mark{
  width:30px; height:30px; border-radius:7px;
  object-fit:cover; flex:none;
  background:var(--accent);
}
.brand__name{ font-size:1rem; letter-spacing:-.01em; }
.nav{ display:flex; gap:clamp(.9rem, 3.5vw, 2rem); }
.nav a{
  text-decoration:none; color:var(--text-dim);
  font-size:.92rem; font-weight:500;
  padding:.3rem 0; position:relative;
  transition:color .2s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav a:hover{ color:var(--text); }
.nav a.is-active{ color:var(--text); }
.nav a.is-active::after{ transform:scaleX(1); }

@media (max-width:430px){
  .brand__name{ display:none; }
}

/* ============================ HERO ============================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:6rem 5rem;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1200px 600px at 70% 20%, rgba(224,165,60,.10), transparent 60%),
    linear-gradient(180deg, #0c0c0e 0%, #101014 55%, #0c0c0e 100%),
    url("assets/bg/c9.jpg");
  background-size:cover; background-position:center 30%;
  filter:grayscale(.55) brightness(.28) contrast(1.05);
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, var(--bg) 96%);
}
.hero__inner{ position:relative; z-index:1; }
.hero__eyebrow{
  margin:0 0 1.4rem;
  font-family:var(--font-display);
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
}
.hero__title{
  font-size:clamp(2.9rem, 9vw, 6rem);
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:1.2rem;
}
.hero__lead{
  font-family:var(--font-display);
  font-size:clamp(1.25rem, 3.4vw, 1.9rem);
  font-weight:500;
  color:var(--white-accent);
  max-width:20ch;
  margin:0 0 1.4rem;
}
.hero__sub{
  max-width:52ch;
  color:var(--text-dim);
  font-size:1.02rem;
  margin:0 0 2.4rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.5rem; border-radius:100px;
  font-family:var(--font-display); font-weight:500; font-size:.95rem;
  text-decoration:none; cursor:pointer; border:2px solid transparent;
  transition:transform .18s var(--ease), background .2s, border-color .2s, color .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--solid{ background:var(--accent); color:#0c0c0e; }
.btn--solid:hover{ background:#f0b957; }
.btn--ghost{ border-color:var(--line); color:var(--text); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }

.hero__scroll{
  position:absolute; left:50%; bottom:1.8rem; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid var(--text-mute); border-radius:14px;
  display:grid; place-items:start center; padding-top:7px; z-index:1;
}
.hero__scroll span{
  width:4px; height:8px; border-radius:2px; background:var(--text-dim);
  animation:scrolldot 1.7s var(--ease) infinite;
}
@keyframes scrolldot{ 0%{opacity:0; transform:translateY(-3px);} 40%{opacity:1;} 80%{opacity:0; transform:translateY(10px);} 100%{opacity:0;} }

/* ============================ SECTIONS ============================ */
.section{ padding-block:clamp(4rem, 10vw, 8rem); }
.section--alt{ background:var(--surface); border-block:1px solid var(--line); }

.section__head{ margin-bottom:clamp(2.5rem, 6vw, 4.5rem); }
.section__kicker{
  font-family:var(--font-display);
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0 0 1rem;
}
.section__title{
  font-size:clamp(2rem, 5.5vw, 3.4rem);
  font-weight:700; letter-spacing:-.02em;
}
.section__intro{
  margin:1.4rem 0 0; max-width:56ch; color:var(--text-dim);
}

/* ============================ CASES ============================ */
.cases{ display:flex; flex-direction:column; gap:clamp(4rem, 9vw, 7rem); }

.case{
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  position:relative;
  margin-inline:clamp(.6rem, 2.4vw, 1.4rem);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--surface);
  container-type:inline-size;
  box-shadow:0 28px 56px -22px rgba(0,0,0,.65), 0 10px 24px -10px rgba(0,0,0,.5);
}

.case::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:clamp(620px, 88vw, 1080px);
  height:clamp(620px, 88cqw, 1080px);
  z-index:0; pointer-events:none;
  background:var(--cover) center 38% / cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
}
.case > *{ position:relative; z-index:1; }

.case__cover{
  position:relative;
  min-height:190px;
  display:flex; align-items:flex-end;
  padding:var(--pad);
  background:rgba(10,10,12,.2);
  border-bottom:2px solid var(--accent);
  --n:clamp(3.2rem, 11vw, 5.6rem);
}
.case__ident{ display:flex; align-items:center; gap:1.1rem; }
.case__num{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--n);
  line-height:1; color:var(--white-accent);
  text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.case__logo{
  width:64px; height:64px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 4px 18px rgba(0,0,0,.42);
  transform:translateY(calc(var(--n) * -0.04));
}

.case__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem, 5vw, 3.5rem);
  padding:var(--pad);
  background:color-mix(in srgb, var(--surface) 90%, transparent);
}
.case__title{
  font-size:clamp(1.5rem, 3.6vw, 2.15rem);
  font-weight:600; margin-bottom:1.4rem;
}
.case__meta{
  display:grid; grid-template-columns:1fr; gap:.55rem;
  margin:0 0 1.6rem; padding:0;
}
.case__meta > div{
  display:grid; grid-template-columns:5.5rem 1fr; gap:.8rem;
  font-size:.9rem; align-items:baseline;
}
.case__meta dt{
  color:var(--accent);
  font-family:var(--font-display); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.case__meta dd{ margin:0; color:var(--text-dim); }

.case__body > p{ margin:0 0 1rem; }
.case__body > p:last-child{ margin-bottom:0; }
.case__body a{ color:var(--accent); text-underline-offset:3px; }

.titles{
  list-style:none; margin:1.4rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.titles li{
  font-size:.82rem; color:var(--text);
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:100px; padding:.3rem .8rem;
}
.titles li span{ color:var(--text-mute); }

/* case media */
.case__media{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; align-content:start; }
.case__media figure{ margin:0; }
.case__media figure.span-2{ grid-column:1 / -1; }
.case__media--grid{ grid-template-columns:repeat(3,1fr); gap:.7rem; }
.media-label{
  grid-column:1 / -1;
  font-family:var(--font-display); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute);
  margin-bottom:-.2rem;
}

.shot{
  position:relative;
  display:block; width:100%; padding:0; border:2px solid var(--line);
  background:var(--surface-2); border-radius:10px; overflow:hidden; cursor:pointer;
  transition:border-color .2s, transform .2s var(--ease), box-shadow .25s;
}
.shot img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; transition:transform .4s var(--ease); }
.case__media--grid .shot img{ aspect-ratio:3/4; }
.shot:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.4); }
.shot:hover img{ transform:scale(1.04); }

/* play badge for video items — a plain circle + triangle, no extra asset */
.shot__play{
  position:absolute; top:50%; left:50%; z-index:1;
  transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(10,10,12,.55); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  border:2px solid rgba(255,255,255,.85);
  display:grid; place-items:center;
  transition:transform .25s var(--ease), background .2s, border-color .2s;
  pointer-events:none;
}
.shot__play::after{
  content:""; width:0; height:0; margin-left:3px;
  border-style:solid; border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
  transition:border-color .2s;
}
.shot--video:hover .shot__play{ transform:translate(-50%,-50%) scale(1.1); background:var(--accent); border-color:var(--accent); }
.shot--video:hover .shot__play::after{ border-color:transparent transparent transparent #0c0c0e; }
.case__media figcaption{
  margin-top:.5rem; font-size:.78rem; color:var(--text-mute);
}

.case__media--split{ display:flex; flex-direction:column; gap:1.7rem; }
.case__media--split > .shots{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; align-items:start;
}
.case__media--split > .shots > figure.span-2{ grid-column:1 / -1; }

.shot--icon{
  border-style:dashed;
  border-color:color-mix(in srgb, var(--accent) 42%, var(--line));
  background:color-mix(in srgb, var(--accent) 5%, var(--surface-2));
}
.shot--icon img{
  object-fit:contain; padding:11%; box-sizing:border-box;
}
.shot--icon:hover{ border-style:solid; }

.shot--poster img{
  width:auto; height:min(480px, 62vw); max-width:100%;
  aspect-ratio:auto; object-fit:contain; display:block; margin:0 auto;
}
.case__media--split > .assets{
  display:flex; flex-wrap:wrap; gap:1.2rem 1.5rem; align-items:flex-end;
}
.assets figure{ margin:0; }
.assets figure.asset--wide{ flex:1 1 100%; }
.assets .shot{
  display:inline-block; width:auto; padding:1.1rem; overflow:visible;
  border:2px dashed color-mix(in srgb, var(--accent) 42%, var(--line));
  background:color-mix(in srgb, var(--accent) 5%, var(--surface-2));
  border-radius:14px;
}
.assets .shot img{
  display:block; width:auto; height:200px; max-width:100%;
  aspect-ratio:auto; object-fit:contain; margin:0 auto; border-radius:4px;
}
.assets figure.asset--tall .shot img{ height:min(340px, 62vw); }
.assets figure.asset--wide .shot{ display:block; width:100%; }
.assets figure.asset--wide .shot img{ width:100%; height:auto; max-height:132px; }
.assets .shot:hover{ border-style:solid; }
.assets figcaption{ text-align:center; }

@media (min-width:900px){
  .case__inner{ grid-template-columns:minmax(0,40fr) minmax(0,60fr); }
  .case__cover{ min-height:230px; }
  .case__logo{ width:76px; height:76px; }
  .assets figure.asset--tall .shot img{ height:360px; }
}

/* ============================ ABOUT ============================ */
.about{ display:flex; flex-direction:column; gap:clamp(2.5rem,6vw,4rem); }
.about__intro{ display:flex; gap:1.6rem; align-items:flex-start; flex-wrap:wrap; }
.about__portrait{
  width:110px; height:110px; border-radius:50%;
  object-fit:cover; border:2px solid var(--line); flex:none;
}
.about__intro > div{ flex:1 1 320px; }
.about__intro p{ margin:0 0 1rem; color:var(--text-dim); }
.about__intro p:first-child{ color:var(--text); }

.skills{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  grid-template-columns:1fr;
}
.skill{ background:var(--surface); padding:1.5rem; }
.skill h3{
  font-size:.95rem; font-weight:600; margin-bottom:.5rem;
  font-family:var(--font-display); color:var(--white-accent);
}
.skill p{ margin:0; font-size:.9rem; color:var(--text-dim); }

.about__other{ max-width:70ch; }
.about__other h3{
  font-family:var(--font-display); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.8rem;
}
.about__other p{ margin:0; color:var(--text-dim); }

@media (min-width:640px){
  .skills{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:960px){
  .skills{ grid-template-columns:repeat(3,1fr); }
}

/* ============================ TIMELINE ============================ */
.cv{ display:flex; flex-direction:column; gap:3rem; }
.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{
  display:grid; grid-template-columns:1fr; gap:.3rem;
  padding:1.5rem 0; border-top:1px solid var(--line);
}
.timeline li:last-child{ border-bottom:1px solid var(--line); }
.timeline__when{
  font-family:var(--font-display); font-size:.82rem; letter-spacing:.06em;
  color:var(--accent); padding-top:.15rem;
}
.timeline__what h3{
  font-size:1.05rem; font-weight:600; margin-bottom:.4rem;
}
.timeline__what h3 span{ color:var(--text-mute); font-weight:400; }
.timeline__what p{ margin:0; color:var(--text-dim); font-size:.92rem; max-width:64ch; }

.cv__edu h3{
  font-family:var(--font-display); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:1rem;
}
.cv__edu ul{ margin:0; padding:0; list-style:none; display:grid; gap:1rem; }
.cv__edu li{ color:var(--text-dim); font-size:.92rem; max-width:70ch; }
.cv__edu strong{ color:var(--text); }
.cv__more{ margin:0; }

@media (min-width:720px){
  .timeline li{ grid-template-columns:9rem 1fr; gap:2rem; }
}

/* ============================ CONTACT ============================ */
.contact{ max-width:760px; }
.contact__lead{ margin:1.4rem 0 2.4rem; color:var(--text-dim); font-size:1.05rem; max-width:48ch; }
.contact__list{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.contact__list li{
  background:var(--surface); padding:1.1rem 1.4rem;
  display:grid; grid-template-columns:6rem minmax(0,1fr); gap:1rem; align-items:baseline;
  font-size:.98rem;
}
.contact__list span{
  font-family:var(--font-display); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-mute);
}
.contact__list a{
  color:var(--accent); text-decoration:none; text-underline-offset:3px;
  overflow-wrap:anywhere;
}
.contact__list a:hover{ text-decoration:underline; }

.refs{ margin-top:2rem; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.refs summary{
  cursor:pointer; padding:1rem 1.4rem; font-family:var(--font-display);
  font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim);
}
.refs summary:hover{ color:var(--text); }
.refs__grid{
  display:grid; gap:1.2rem; padding:0 1.4rem 1.4rem;
  grid-template-columns:1fr;
}
.refs__grid > div{ display:grid; gap:.15rem; font-size:.88rem; }
.refs__grid strong{ color:var(--text); }
.refs__grid span{ color:var(--text-mute); }
.refs__grid a{ color:var(--accent); text-decoration:none; }
@media (min-width:640px){ .refs__grid{ grid-template-columns:repeat(3,1fr); } }

/* ============================ FOOTER ============================ */
.site-footer{ margin-top:clamp(3rem,8vw,6rem); border-top:1px solid var(--line); padding-block:2rem; }
.site-footer .wrap{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:baseline; }
.site-footer p{ margin:0; font-size:.78rem; color:var(--text-mute); max-width:70ch; line-height:1.6; }
.site-footer a{ font-size:.82rem; color:var(--text-dim); text-decoration:none; white-space:nowrap; }
.site-footer a:hover{ color:var(--accent); }

/* ============================ LIGHTBOX ============================ */
.lb{
  position:fixed; inset:0; z-index:150;
  background:rgba(6,6,8,.94);
  backdrop-filter:blur(4px);
  display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
  animation:lbin .2s var(--ease);
}
@keyframes lbin{ from{opacity:0;} to{opacity:1;} }
.lb[hidden]{ display:none; }
.lb__stage{ margin:0; max-width:1100px; max-height:100%; display:flex; flex-direction:column; gap:.9rem; align-items:center; }
.lb__img{
  max-width:100%; max-height:80vh; width:auto; height:auto;
  border-radius:8px; border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lb__video{
  max-width:100%; max-height:80vh; width:auto; height:auto;
  border-radius:8px; border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  background:#000;
}
.lb__cap{ font-size:.88rem; color:var(--text-dim); text-align:center; }
.lb__close,.lb__nav{
  position:absolute; background:rgba(255,255,255,.06); border:2px solid var(--line);
  color:var(--text); cursor:pointer; border-radius:50%;
  display:grid; place-items:center; transition:background .2s, border-color .2s;
}
.lb__close{ top:1rem; right:1rem; width:44px; height:44px; font-size:1.6rem; line-height:1; }
.lb__nav{ top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:1.8rem; }
.lb__prev{ left:1rem; }
.lb__next{ right:1rem; }
.lb__close:hover,.lb__nav:hover{ background:var(--accent); border-color:var(--accent); color:#000; }
@media (max-width:560px){
  .lb__nav{ top:auto; bottom:1rem; transform:none; }
  .lb__prev{ left:calc(50% - 60px); }
  .lb__next{ right:calc(50% - 60px); }
}

/* ============================ REVEAL ============================ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}