/* =========================================================
   Ali Malakouti — Motion Designer Portfolio
   Design tokens
   ========================================================= */

/* ---- Self-hosted Poppins (files in /fonts) ---- */
@font-face{ font-family:'Poppins'; src:url('fonts/Poppins-Thin.ttf') format('truetype'); font-weight:100; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('fonts/Poppins-ExtraLight.ttf') format('truetype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); font-weight:200; font-style:italic; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('fonts/Poppins-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('fonts/Poppins-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('fonts/Poppins-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('fonts/Poppins-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('fonts/Poppins-BoldItalic.ttf') format('truetype'); font-weight:700; font-style:italic; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('fonts/Poppins-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); font-weight:800; font-style:italic; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('fonts/Poppins-Black.ttf') format('truetype'); font-weight:900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('fonts/Poppins-BlackItalic.ttf') format('truetype'); font-weight:900; font-style:italic; font-display:swap; }

:root{
  --bg:            #141414;
  --surface:       #1a1a1a;
  --surface-line:  #262626;
  --text:          #F2F2F2;
  --muted:         #9a9a9a;
  --muted-dim:     #6f6f6f;
  --accent:        #dd2d4a;
  --radius-sm:     3px;
  --radius-md:     6px;
  --maxw:          1180px;
  --ease:          cubic-bezier(.16,.84,.44,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  margin:0;
  letter-spacing:-0.01em;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }

.mono{ font-family:'JetBrains Mono', monospace; }
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
}
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
}
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* =========================================================
   Nav
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:900;
  background:rgba(20,20,20,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--surface-line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  max-width:var(--maxw); margin:0 auto;
}
.nav__logo{
  font-family:'Poppins', sans-serif; font-weight:700;
  font-size:1.7rem; letter-spacing:-.01em;
}
.nav__logo span{ color:var(--accent); }
.nav__links{ display:flex; gap:8px; }
.nav__links a{
  font-family:'Poppins', sans-serif; font-weight:500;
  font-size:.88rem;
  color:var(--muted); position:relative;
  padding:9px 16px; border-radius:100px;
  transition:color .2s var(--ease), background .2s var(--ease);
  
}
.nav__links a:hover{ color:var(--text);  background-color:#dd2d4a;}
.nav__links a.active{ color:#f2f2f2; background-color:#dd2d4a; }
.nav__toggle{
  display:none; background:none; border:0; color:var(--text);
  width:32px; height:24px; position:relative;
}
.nav__toggle span{
  position:absolute; left:0; right:0; height:1px; background:var(--text);
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.nav__toggle span:nth-child(1){ top:2px; }
.nav__toggle span:nth-child(2){ top:11px; }
.nav__toggle span:nth-child(3){ top:20px; }

@media (max-width: 720px){
  .nav__toggle{ display:block; }
  .nav__links{
    position:fixed; top:64px; left:0; right:0; bottom:0;
    background:var(--bg); flex-direction:column; gap:0;
    padding:12px 32px; transform:translateY(-8px);
    opacity:0; pointer-events:none; transition:opacity .2s var(--ease), transform .2s var(--ease);
  }
  .nav__links.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .nav__links a{ padding:16px ; border-bottom:1px solid var(--surface-line); font-size:.9rem; border-radius:0; }
  .nav__links a.active{ background-color:#1f1f1f; color:var(--accent); padding: 16px; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  display:flex; flex-direction:column; justify-content:center;
  padding:50px 0 26px;
}
.hero h1{
  font-size:clamp(2.2rem, 6vw, 3.8rem);
  line-height:1.0;
  max-width:20ch;
}
.hero h1 .accent{ color:var(--accent); }

/* fade-up load animation */
.reveal{ opacity:0; transform:translateY(14px); animation:reveal .7s var(--ease) forwards; }
.reveal.d1{ animation-delay:.05s; }
@keyframes reveal{ to{ opacity:1; transform:translateY(0); } }

/* =========================================================
   Section shell
   ========================================================= */
.section{ padding:25px 0; }
.section__head{ margin-bottom:44px; }
.section__head h2{ font-size:clamp(1.6rem,3vw,2.4rem); margin-top:10px; }

/* =========================================================
   Showreel
   ========================================================= */
.reel{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  background:#000; border:1px solid var(--surface-line);
  aspect-ratio:16/9;
}
.reel iframe{ width:100%; height:100%; border:0; display:block; position:absolute; top:0; left:0; }

/* =========================================================
   Work grid — GIF preview, click to play the real Vimeo video
   ========================================================= */
.work-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px;
}
@media (max-width: 800px){ .work-grid{ grid-template-columns:1fr; } }

.card{ display:block; }
.card__thumb{
  all:unset; box-sizing:border-box; cursor:pointer;
  position:relative; aspect-ratio:16/9; width:100%; border-radius:var(--radius-md);
  overflow:hidden; border:1px solid var(--surface-line);
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s var(--ease);
  background:#000;
}
.card:hover .card__thumb{ transform:translateY(-4px); }
.card__thumb iframe{ width:100%; height:100%; border:0; }
.card__gif{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.card__play{
  position:relative; z-index:2;
  width:52px; height:52px; border-radius:50%;
  background:rgba(20,20,20,.35); border:1px solid rgba(242,242,242,.5);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.card__thumb:hover .card__play{ background:var(--accent); border-color:var(--accent); }
.card__thumb:hover .card__play svg{ fill:#141414; }
.card__meta{ margin-top:14px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.card__title{ font-size:1.15rem; font-weight:500; }
.card__tags{ color:var(--muted-dim); font-size:.72rem; white-space:nowrap; }
.card__tags .dot{ color:var(--accent); margin:0 6px; }

/* fallback tone behind gifs while they load, or if a gif is missing */
.g1{ background:linear-gradient(135deg,#2c3e3a,#12312c); }
.g2{ background:linear-gradient(135deg,#3a2c34,#2a1420); }
.g3{ background:linear-gradient(135deg,#2c333e,#141a2a); }
.g4{ background:linear-gradient(135deg,#3e372c,#241f10); }
.g5{ background:linear-gradient(135deg,#2c3e3a,#1a2a24); }
.g6{ background:linear-gradient(135deg,#332c3e,#1c1428); }

/* =========================================================
   Socials
   ========================================================= */
.socials-block{ text-align:center; }
.socials-block h2{ font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:32px; }
.social-row{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.social-pill{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--surface-line); border-radius:100px;
  padding:12px 22px; font-family:'Poppins', sans-serif; font-weight:500; font-size:.85rem;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.social-pill svg{ width:18px; height:18px; }
.social-pill:hover{ border-color:var(--accent); color:#0d0d0d; background:var(--accent); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  padding:32px 0 48px; color:var(--muted-dim); font-size:.78rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:'JetBrains Mono', monospace;
}

/* =========================================================
   About page — single photo box, auto slideshow
   ========================================================= */
.about-grid{
  display:grid; grid-template-columns:.85fr 1fr; gap:64px; align-items:start;
  padding:140px 0 40px;
}
@media (max-width: 800px){ .about-grid{ grid-template-columns:1fr; gap:36px; padding-top:110px; } }

.photo-slideshow{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--surface-line);
  background:#1c1c1c;
}
.photo-slideshow .slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 0.7s var(--ease);
}
.photo-slideshow .slide.active{ opacity:1; }
.photo-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:'JetBrains Mono', monospace; font-size:.65rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--surface-line); padding:4px 8px; border-radius:2px;
  background:rgba(20,20,20,.6);
}

.about-copy{ padding-top:8px; }
.about-copy h1{ font-size:clamp(2rem,4vw,3.2rem); margin-top:10px; }
.about-copy p{ color:var(--muted); margin-top:20px; font-size:1.02rem; max-width:56ch; }
.tool-row{ margin-top:32px; display:flex; flex-wrap:wrap; gap:10px; }
.tool-chip{
  font-family:'JetBrains Mono', monospace; font-size:.72rem; letter-spacing:.06em;
  border:1px solid var(--surface-line); border-radius:100px; padding:8px 14px;
  color:var(--muted);
}

/* =========================================================
   Contact page
   ========================================================= */
.contact-grid{
  display:grid; grid-template-columns:.8fr 1fr; gap:64px;
  padding:140px 0 100px;
}
@media (max-width: 800px){ .contact-grid{ grid-template-columns:1fr; gap:48px; padding-top:110px; } }

.contact-info h1{ font-size:clamp(2rem,4vw,2.8rem); max-width:14ch; }
.contact-info p{ color:var(--muted); margin-top:18px; max-width:40ch; }

.contact-list{ margin-top:40px; display:flex; flex-direction:column; gap:18px; }
.contact-list li{ display:flex; flex-direction:column; gap:2px; }
.contact-list .label{
  font-family:'JetBrains Mono', monospace; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
.contact-list .value{ font-size:1rem; }
.contact-list a.value:hover{ color:var(--accent); }

.contact-socials{ margin-top:40px; display:flex; gap:12px; }
.icon-btn{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--surface-line);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:hover{ border-color:var(--accent); background:var(--accent); }
.icon-btn:hover svg{ stroke:#0d0d0d; fill:#0d0d0d; }

.form{ display:flex; flex-direction:column; gap:22px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
  font-family:'JetBrains Mono', monospace; font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.field input, .field textarea{
  background:var(--surface); border:1px solid var(--surface-line); border-radius:var(--radius-sm);
  color:var(--text); font-family:'Poppins', sans-serif; font-size:.95rem;
  padding:14px 16px; resize:vertical;
  transition:border-color .2s var(--ease);
}
.field textarea{ min-height:140px; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
.form__submit{
  margin-top:6px; align-self:flex-start;
  background:var(--accent); color:#0d0d0d; border:0; border-radius:100px;
  padding:15px 28px; font-family:'Poppins', sans-serif; font-size:.85rem; font-weight:600;
  transition:opacity .2s var(--ease);
}
.form__submit:hover{ opacity:.85; }
.form__note{ font-size:.75rem; color:var(--muted-dim); margin-top:4px; }
.form__status{ font-size:.85rem; color:var(--accent); min-height:1.2em; }